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.

Colour scheme conclusion

Testing against the most common forms of colour deficiency shows that the contrast is good enough for the vital navigational elements of the site as for the content copy.

The very rare occurrence of actual complete colour blindness or monochromacy as experienced by about 0.005% percent of the population (see also this article by a colour blind designer)is demonstrated in the grey image and suggests users with this disability would have difficulties in seeing the different states of the navigational tabs although they would still be completely usable to them (contrast background to type is always strong enough).

Courtesy for this minority group and striving for as much accessibility as possible might make me consider using another element to show the state of navigation. As the colour scheme should be adhered to for Corporate Identity reasons I might also consider not using tabs as a visual element.

Accessibility: Testing complete colour blindness

Accessibility: Testing the colour scheme against the most common forms of colour “blindness”

Background information:
http://tlt.its.psu.edu/suggestions/accessibility/color.html#syn

http://www.iamcal.com/toys/colors/stats.php

“Blue Beanie Day” coinciding with my dissertation subject – a message from above?

http://www.zeldman.com/2007/11/19/blue-beanie-day/

Relevant quotes by Steve Krug

• “In most organizations,the people who end up being responsible for doing something about accessibility are the people who actually build the thing: the designers and the developers. [...]Two arguments in particular seem to make them skeptical [of making their websites accessible]:
  • Since their world consists largely of able bodied 26-year olds, it’s very hard for them to believe that a large percentage of the population actually needs help accessing the Web.They’re willing to write it off as the kind of exaggeration that people make when they’re advocating for a worthy cause…” (p.170)
• “The worst thing about this skepticism is that it obscures the fact that there’s really only one reason that’s important:
  • It’s the right thing to do.

  And not just the right thing it’s profoundly the right thing to do, because the one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives.”(p.171)

Krug, S. (2006) Don’t Make Me Think! A Common Sense Approach To Web Usability. 2nd ed.Berkeley: New Riders

Relevant quote by John Simmons

• “Chefs and cooking programmes became all the rage on TV,and one of those chefs,Jamie Oliver,started a campaign based on his reality TV show to improve the quality of school dinners.The choice between good and bad food became an emotive issue,surrounded by moral arguments directed at the big manufacturing companies.Guilty of poisoning us with chemicals,ws the charge.And a little juice company in West London seemed to make its position clear through its name, Innocent.” (p.27)

Simmons, J. (2007) Great Brand Stories: Innocent : Building a brand from nothing but fruit. London: Cyan Books

Relevant quotes by Donald A. Norman

• “The academic, research enterprise of design has not done a good job of studying fun and pleasure. Design is usually thought of as a practical skill, a profession rather than a discipline.” (p.104)
• “Academics have concentrated primarily upon the history of design, or the social history or societal implications,or if they are from the cognitive and computer sciences,upon the study of machine interfaces and usability.” (p.105)
• “I believe that those of us who become angry with today’s technology are justified.It may be an automatic result of our affective and emotional systems.It may not be rational,but so what?It is appropriate.Is it the computer’s fault,or is it the programmers who neglected to understand our real needs?As users of technology ,we don’t care.All we care about is that our lives are made more frustrating.” (p.141)
• “Technology often forces us into situations where we can can’t live without the technology even though we may actively dislike its impact.Or we may love what the technology provides us while hating the frustrations encountered while trying to use it.” (p.157)
• “The designer has some power here,but only to a limited extent,for although some of the irritation and dislike is a result of societal norms and standards,and these can only be changed by society itself.”(p.157)
• “Much of modern technology is really the technology of social interaction:it is the technology of trust and emotional bonds.” (p.157)

Norman, D.A. ( 2004) Emotional Design: Why We Love (or Hate) Everyday Things.New York: Basic Books

Relevant quote regarding accessibility and sexiness

• “Accessibility is definitely not the sexy subject of design. Very few folks get on the covers of design subscriptions for making something equally accessible to people with various disabilities.”

Onori, P.J. (2006) Comment on the article ‘Accessibility for blind people’ [Online] available from http://www.pingmag.jp/2006/09/29/accessibility-for-blind-people/
[Accessed 23.06.2007]