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.
Stripping Redswish
What better an example to use to demonstrate my point than this very site. Of course you should practice what you preach but in my defence I built this layout before I learnt these techniques and methodologies.
When you view Redswish with no styles, as may be the case with screen readers or all manner of devices, you are presented with the following:
First we are presented with the search box, then a secondary navigation, the logo image, the subscribe image then the first post on the page. To view the site yourself with styles disabled, in Firefox go to View>Page Style>No Style. If you’re in Internet Explorer I offer you my sympathy.
If you carry on down, you’ll discover that the primary blog menu is almost at the bottom of the page. Well, what use is that to someone wishing to navigate your site? The reason the unstyled Redswish site is in such an illogical, unusable order is because I built the content and the presentation alongside each other. Thus, my XHTML markup is structured in the order in which visual elements appear on the page, as opposed to a sensible order of content.
The content-out approach
When building a website, you should work from the inside out. Focus on the stripped-down, bare-bones content displayed in headers, paragraphs, lists etc before building containing and structural elements around this content to style. CSS is incredibly powerful and manipulative and can almost always be used to position and style elements anywhere on the page, regardless of their position within the markup. The most popular and functional example of just how far CSS can be exploited to transform the same XHTML can be found at CSS Zen Garden.
However, don’t let this restrict you. There will still always be instances where an extra div or span may have to be used, or perhaps one element placed before another in order for them to be composed well into the design. CSS isn’t perfect, but by building from the content out you should be able to use as few divs and containing elements as possible, whilst still achieving the same end result.
Get in line
The diagram below shows the order in which different blocks of content are displayed in the current Redswish site when styles are disabled. The right diagram demonstrates a more sensible approach to the order of this content:
Some may disagree with this, and I probably would as well. But difficulty arises because there are often presentational factors and different information design priorities that overrule the order of the basic content.
For example, on the current site – the sidebar features categories, archives, a subscribe block,feeds and blog meta data. From a usabilty standpoint – categories and archives take a priority over the other elements because they’re necessary for site navigation and are primary page elements. However, for the sake of the design, they can’t be separated too much from the secondary elements (eg. feeds and blog meta-data) otherwise it would be nearly impossible to keep them together visually with CSS.
Sometimes the best bet is to find a happy medium, where you can still easily control your site’s visual layout with CSS whilst non-visual browsers, screen readers and such will still provide the user with a logical, easily navigable content structure.
Optimising content order
Writing your markup in a sensible order is not rocket science. WCAG guidlines dictate that “when content is organised logically it will be rendered in a meaningful order…” – this is regardless of stylesheets.
So, ensure that headers take precedence, that navigation is in the correct order and that the order of information is ordered based on logical order and priority. An example of restructuring some basic elements so they make sense, regardless of stylesheets and visual presentation:
Don’t replace tables with divs!
Building sites with a content-out approach should allow you to style your pages more organically. By creating structural blocks first, before including the raw content, you can sometimes default back to what is virtually a tabular layout. Div’s simply become table cells and try as you might, your HTML will still represent the presentational layout, not the optimal content order.
In the next part of this series I will look at semantic markup, HTML naming conventions and microformats, how these techniques can be employed to help create more sensible, meaningful content structure, and how this can benefit your user’s experiences.
UPDATE – Check out part 2 here >
- Share:
-
Matthew Knight said:
I spent a lot of time looking at the code semantics and layout before publishing my new site (http://www.exelat.com). If someone visits it in a text-browser or screen-reader, they are presented with the page in a sensible order – very similar to your suggested structure!
Mike said:
Give docbook xml a try
That’ll teach you strict semantics.
Luc said:
Couldn’t agree more with most of the points, however, my dream of structurally correct markup gets thrown out the window most days when I get given a design to implement that has menus aligned at the bottom of the page and graphics all over the shop that require far too many extra s. Designer != Web designer. Sorry, I’ll stop ranting.
Paul Stevens said:
thanks for the post, i can’t give you any feedback as I am still learning the difference between background: and background-image: lol
plus i’m a designer..
Lucy said:
That is a really good post and also great information for people who badly organise the layout of their site. Sometimes when you create a site you don’t always get all the information you require to make it an intuitive design but with the finished design as you say it should flow with your div holding your nav and a link back to your homepage some be at the top.
Patareco said:
Nice post! I already write html with content in mind!
Designing From The Inside Out - Creattica Daily said:
[...] Read the article over at Red Swish. [...]
Evan Meagher said:
This article echos much of what Andy Clarke talks about in Transcending CSS (http://transcendingcss.com/). Content-out design is a great way to go about things. It prevents a designer from focusing too much on visuals, as well as helping deter feature creep. Good article!
nathan said:
Hey guys, thanks for the kind comments.
@Luc – I understand what you’re saying. I think it’s important to understand the immense differences between print and web design, it’s not just about your Photoshop skills. Web designers need to have a good understanding of usability and how people navigate and view sites as well as being able to create pretty visuals.
Drew McLellan’s article, ‘Easing the path from design to development’ on 24ways addresses some of these issues:
http://24ways.org/2008/easing-the-path-from-design-to-development
@Evan Meagher – I won’t lie, Andy Clarke’s Transcending CSS (which I was recently recommended through the comments section on this site!) has been a fantastic source of knowledge and inspiration. Not to sound like a suck up but the guy really sees things from a great perspective that makes you take a step back and rethink your process. I’d recommend Transcending CSS to anyone, plus check out his FOWD talks on Vimeo or through the Carsonified website.
*** I’d just like to point out that although this approach and recent articles I’ve wrote on accessibility and usability are extremely important; I can’t stress enough the importance of design as well. At the end of the day, if it wasn’t for my love of sexy visuals and eye-candy, I wouldn’t be in this line of work! ***
Part 2 coming later this week folks…
Website ROI | Anjolie said:
Oh this is so true! Content, SEO, usability and such are always such afterthoughts after eyecandy int he development process so many times when they should be at the forefront of the project. Not working content out leaves the site being developed twice instead of doing it right he first time.
Webdesign Meppel said:
Well, this is an interesting article! I once read that Google adds more value to content he finds first when crawling the site. So from that theory it should be smart to place your content as high as possible.
Brad Colbow said:
Man, this is a great post. Evan mentioned the book Transcending CSS is his comment above and that’s what came to mind as I read your post.
I’ve found that another benefit is how easy it is for other designers to pick up and work on your markup when you focus on your content and keep it clean.
redswish - a web design blog » Designing from the inside out: Part 2 - Semantic Markup said:
[...] the first article in this series, Content before Design, I discussed the approach to take when building sites structured in accordance to their raw content [...]
Andy Clarke said:
Glad I could help.
cssah said:
thank so muck great article
Friday Focus 03/27/09: Twitter Mania | Devlounge said:
[...] Design – Designing from the inside out: Part 1 – Content Before Design [...]
Soh said:
Good read, thanks
Inspiring Design Links for Creatives for 2009-03-28 | This Inspires Me said:
[...] Designing from the inside out: Part 1 – Content Before Design (tags: content design) [...]
pixeldope said:
thanks for the post…love you for great sharing such great stuff
Janko said:
Excellent read!
Nicolewelsh said:
Speaks of the effort put in coming up with this post..
jack said:
This is generally a good approach to building a site. As with any type of code the leanest and cleanest is always the best solution.
Medical Webexperts said:
A very effective and quite simple way to optimize the website for easier marketing and publicity. Tags play an important role in optimizing your website to be easily searched by the internet search spiders. There has been lot of advancements in the search engine algorithms that needs you to be precise while creating title tags. This is one of those crucial aspects which are overlooked by many while designing a website for their business and other corporate purposes. In the latest advancements of the search engine spiders, search engine optimization has not left by mere re occurring your desired keywords, It is highly required that your website design and content should serve as an enticement to the web spiders. It’s of no use to have a site which doesn’t comply with the standards of search spiders. I got my medical website reconstructed from a web designer and marketing company named medicalwebexperts.com. They reconstruct every page making it compliant with search engine algorithms. After a few months of time, the impact was definitely distinctive in my income. I have got a steady increase in the patients, which was a direct result of reconstructing and (re)marketing my old obsolete site.
nathan said:
@Medical Webexperts – wow you sure look like spam!
Web Design Nottingham said:
Wow great article, the picture at the top has revolutionalized how I design these days!
web design birmingham said:
I so agree with you. So many people want it to look nice and forget that the web is all about information. So I agree get your information right and then woryy about the presentation.