Web Standards compliant wireframe

I have designed a wireframe of the agreed layout with XHTML 1.0 (transitional) and CSS. This was one of the biggest challenges to date on the project as it involved a very steep learning curve in these web standard techniques.

Read these FAQ by the Web Standards Project and one of the most cited articles on web standards to see why this was important for the context of my final project.

Although some basics were covered during the PG Certificate module it required much more learning and numerous trial & error sessions to make it suit the layout and also validate. See this article on validation by the W3C to understand the significance.

I created 2 versions of the wireframe to accommodate different header image sizes.

See the first wireframe version here and also the validation result and the second version with its proof of validation for the markup. The CSS used is in both versions also validates.

Probably only somebody who is not a natural born web developer/programmer (I personally have a background in Graphic Design and DTP) and has worked many hours to get the validation screen from red to green can understand my outburst of joy when reading the magical words:

This Page Is Valid XHTML 1.0 Transitional! & Congratulations! No Error found.

Relevant quotes by Robyn Waters

• “It’s a myth that trends can only be spotted early by überhip Bohemian types who are ever-so-much cooler than everyone else.Trends are indicators that point to point to what’s going on in the hearts and minds of consumers” (p.ix)
• “If you’ve ever witnessed a trend unfolding and said to yourself, “I should have seen this coming,”there’s hope.”(p. xx)
• “The deluge of trend options available today can be confusing.Combine this overwhelming input with type-A personalities who obsess over details, and you have a bad retail recipe: over designed products that spring from over-concieved strategies.” (p.6)
• “Big Pictures can be hard to find frame,but they’re worth looking for.Big picture = Big Opportunity.”(p.6)
• “Finding the big picture has everything to do with perspective.When you’re lost in the forest,step back- way back – and reexamine your original principles.”(p.7)
• “The most important thing is to look at the problem through the eyes and lives of the end consumer.”(p.7)
• “Trends with real staying power are often a series of smaller trends fused together.Trends that intersect and complement each other are more likely to be embraced by the consumer.When fusion occurs,it’s much esier to offer a product that is in sync with your customer’s values.” (p.24)
• “Think of each small trend you observe as a thread thatyou can weave,twist, plait, braid, knit, or splice together with other common strands into a tapestry of opportunity.”(p.25)
• “Now,in the age of the Internet,trends spread like viruses.”Word of mouse”is infinitely more powerful than word of mouth.” (p.58)
• “In order for a trend to resonate,it has to connect with what your audience considers important. That is to say,it must be consistent with their core values” (p.74)

Waters, R. (2005) The trendmaster’s guide: get a jump on what your customer wants next. NewYork:Portfolio

Read more about the author.