Designing from the inside out: Part 1 – Content Before Design
This is the first article in a 3-part series that looks at how we design and build websites from the base up, focusing on the raw data and content that needs to be accessible to everyone before considering design and progressive enhancements. In part 1 I’ll be discussing the content-out approach, why it’s important to order content sensibly with markup and how to do it so. Part 2 and 3 will look at semantic markup, microformats and how to write future-proof XHTML before finally discussing progressive enhancement and how it can be utilised to help ensure an enjoyable, appropriate user experience for all.
Content before design?
When I say ‘content before design’ I’m not saying start playing in TextMate or Dreamweaver before picking up a pencil and paper and building ideas and visuals with Photoshop. There are plenty of different methods people use and recommend to approach project development. Some designers find it easier or faster to use XHTML Prototyping or Agile development, however I would never consider writing a character of HTML before I had a solid design and a confident vision of the final product.
Content before design means that the structure of your markup is written in a way that logically makes sense if reading it without styles or any form of dynamic behaviour.
This may seem an obvious thing to do, but the fact is that most websites built today, regardless of whether they are valid, built with divs and have nice alt attributes on every image, are still structured in accordance to their design. A lot of the time this may not make a huge difference if the website design features elements in a sensible order, but often is the case that in the markup – headers will all over the place, menu lists and blockquotes may be thrown in the weirdest places, because that’s where they appear in the styled layout.
- Share:
-
