Image taken by Yashh, Flickr Creative Commons
About a year ago, I got my hands on the CSS for Designers video serie from Lynda.com. At the time, I was trying to gather some CSS knowledge in order to put my portfolio online. I shamelessly failed at putting together a website I was happy about, but I did learn a great deal about HTML coding.
The serie is presented by designer Andy Clark and technologist (that’s how she presents herself) Molly E. Holzschlag. What’s great about it (other than witnessing Andy and Molly’s uncomfortable and awkward flirting) is the time and importance they spend at explaining proper HTML structure and hierarchy. HTML markups were first introduced to structure text into headers, sub-headers, paragraphs, quotes and lists, with styles applied inline to some elements (for instance to bold a word, or underline it). Somehow with time, a lot of designers and programmers lost track of the origins of HTML. The websites I have worked on so far had nice layouts and visual elements, but poor HTML structure. No H1 tags (sometimes no H tags whatsoever) or too many, bad headlines hierarchy, menus not treated as lists, and so on. Basically they were coded only for its end result, i.e. the way people would see the site, and not in a crawler-friendly way.
There’s a neat little tool I’m using to look at websites the way crawlers would see them. It’s called seo-browser and is free of use. All you have to do is enter an URL and voilà! You get a text-only version of it. A well-coded website will make sense to read into that browser. Headlines will pop, menus and lists are recognizable, and chunks of content are organized.
A not so clean URL might reveal poor hierarchy of information and look very messy. In seo-browser, you should be able to scroll fairly fast through content while still having a clue of what the page is about. If you can’t, it means you’ll have some HTML scrubbing to do.
In a previous post, I listed Rand’s 4 elements that sums up SEO. The first of these elements is “Make pages accessible”. To me this means 5 things:
- Your site’s architecture should be as flat as possible.
- Make sure all your pages are accessible through links, as close to the Home page as possible. Think Craigslist. This site might have very little styling, but everything can be found within 1 or 2 clicks. Nothing’s buried.
- Have perfect HTML structure so your site is crawler-friendly.
- Remember that content that can’t be indexed such as Flash, videos or forms should have alternate versions or transcriptions.
- You would be amazed at the amount of people that uses their computers with a 800 by 600 pixels resolution. Think about them.
I’m sure that is not all but that’s all I can come up with at this point. If you have anything to add, please say so!