Alister Cameron // Blogologist

Changing the world. One blog(ger) at a time.

Semantic Markup/Microformats Pop Quiz – how good are you?!

“Code is art.” That’s the tagline over at W3 Markup, which is a well-presented coding service of a web design crew called W3 Edge. They must be doing something right, as they got the gig to do “custom markup” on Neil Patel’s blog. But if this Smashing Magazine markup example is anything to go by, they’re not quite there yet… Who can tell me what needs to be improved there? Use line numbers in your answers, please.

markup, semantics, semantic markup, neil patel, microformats, w3c, web standards, w3 markup, semantic coding

4 Comments

Note: Commenter website links are not no-followed, in case
you were wondering... I believe in rewarding commenters!

  1. Posted 9 years, 7 months ago // Permalink

    Not good to set ids or classes based on the location of the element. Always name them based on their content/purpose. I see many cases of them misstepping on this one.

    Line 29, calling it “leftcolumn” when it should be “content” or “mainContent”. I see a div class of “top” on line 61. Line 90 has an id “rightcolumn”. Should be a “sidebar” or “subContent”. Oof, line 110 has a class of “left”. Dang. “Right” on 134.

    With this sort of stuff, let’s just hope smashing (or any other client) never wants to move their content around. No fun to have to put the div with class=”left” to the right. Not really the best markup.

    I only did a cursory look through. What did I miss?

  2. Posted 9 years, 6 months ago // Permalink
  3. Posted 9 years, 6 months ago // Permalink

    Validation issues!

  4. Posted 9 years, 4 months ago // Permalink

    Hey Guys, I appreciate the input! 🙂 Ryan’s comment about the IDs etc is of course on target and there’s definitely nothing to dispute there, however there are some other things to consider about the projects that are not obvious from the outside looking in:

    – Since the sites are WordPress themes the only semantics that were of priority/concern were those related to search engine friendliness. We replaced their previous theme and no doubt the next redesign would follow suit, being able to swap out a CSS file was of little concern to the clients so we spend the time we had on the client’s primary concerns which were user experience and business development/strategy.

    – About SM, layout semantics aside, if you check out the work we actually delivered to the client, as shown in the examples section of our web site (http://w3-markup.com/examples/smashingmagazine.com/markup/index.html) you can see that we delivered valid XHTML and CSS 3 code:

    http://tinyurl.com/4psjlj
    http://tinyurl.com/4u9gyo

    – The current SM site is not maintained by us and has undergone constant changes by us and SM (as you will see in the footer of their site).

    Soon, we’ll be releasing another Technorati leading blog redesign and layout semantics also is not a priority for it. On the contrary for http://mashable.com/ the focus has been more on typography, business development, usability/user experience and so on. So as long as clients like Mashable, Smashing Magazine and Neil Patel have style conventions for their content, layout semantics in WordPress themes aren’t a priority these guys want to spend time on.

    Obviously the question as to whether or not it takes a significant amount time to semantically name and plan out your layout is another conversation entirely. 🙂 We put compliance, usability, page weight ahead of layout semantics almost every time, otherwise having the flexibility that most of these projects would need (again comparing old designs to new) would be akin to what I discussed in this article for Adobe.com last year which deals with this very topic (of layout semantics): http://www.adobe.com/devnet/dreamweaver/articles/five_steps_redesign.html

    Please let me know your opinions.

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*

    • madmimi.com
    • marketsamurai.com
    • splash.oiopublisher.com
    • www.medialayer.net
    • Advertise Here

  • My Posts in Your In-box!

    Enter your email address here for instant updates in your inbox, whenever I post something new.
    Your email address is in safe hands. Relax!
© Copyright 2008 Alister Cameron. All Rights Reserved Theme // Sitemap // RSS