Content before design
HTML is a markup language. You are marking up content. The purpose of HTML is to describe the content. You’re describing that content to the browser, a screen reader, and a search engine.
People don’t go to websites because they’re pretty. They go to websites for content — users will tolerate poor designs if the content is still consumable. So it seems silly and ridiculous to focus on anything else first.
Establish the information hierarchy
I take the time to look at the content, think about how that content is related to other items, and then I work out the information hierarchy on the page. Then, I write the complete HTML.
Don’t use dummy content!
Really, avoid Lorem Ipsum and its ilk at all costs. To the best of your abilities, use real content. Lorem Ipsum masks the relationship content items may have to one another. Placeholder text makes it hard to see if something is a heading, subtitle, or aside. Ask for real content as much as possible and type real content.
Write in class names for everything up front.
I’m a big fan of BEM, so as I’m writing my HTML, I’m also establishing the relationship different elements have to each other with block and element identifers in the class names. I end up creating a “content hierarchy” in my class naming convention that makes it easy for me to transition to my CSS later.
Once my HTML is finished, I look at the page. If I can’t make heads or tails of the content — just as content, there’s a problem. Every web page should look sane and readable without a stylesheet.
Style the content
When I’m ready to write CSS, my goal is to not have to go back to the HTML. That’s not always the case — sometimes I have to add some wrappers. But my goal is to apply styles that are independent of markup.
When I say, “independent of markup”, I mean that I want my HTML to be consumable with or without styles. My styles should improve the user’s ability to consume content, but they should not depend on the markup.
If I need this exact same markup to look totally different in another web page, I should be able to do that without re-arranging the markup.
Add interactivity at the end
If I’ve made content, and then I made it consumable, the interactive parts should be easy and quick. Ideally, adding JavaScript in the mix requires only including some classnames in the HTML, and possibly a few new rulesets to the CSS, without modifying any existing CSS.
|