Framing the web design experience

Dan Russell has a couple of posts on sense making over at Creating Passionate Users. Today’s post said something that stuck me as a key element in terms of teaching web design.

The point is that you need to frame things because the act of framing helps to focus on what to do next.

There’s a struggle involved in getting teachers who are used to teaching methods that began with Photoshop comps or tables based design moved over into a way of thinking that emphasizes semantics and interoperability. I think what we have here is a framing issue.

We need to reframe the whole notion of web design. Instead of thinking first about how we expect to make a site look, we need to think first about how we expect a site to be semantically organized. If we organize the content in a semantic manner, we achieve interoperability. Any design can be added to the structure we develop. Or as Mani Scheriar said in a previous post,

Let’s code our XHTML as if we plan to have 10 different designers apply their own unique layouts to it.

This is truly a change in thinking, a new frame for the whole idea of “designing a web site.” We can no longer assume that our web sites will be viewed on computer monitors. There are too many mobile devices out there. More, in fact, than computers. And at least 10 percent of your visitors will be using some sort of assistive device such as a screen reader to obtain your content. We have to think first about content and how it can be coded semantically in order to make our sites operable and accessible for any device. Once that goal is reached, we can think about creating a beautiful appearance for our content.

For those of you planning to attend SXSWi 2007, I invite you to attend my session on Sunday afternoon called “Best Practices in Teaching Web Design.” It’s a 25 minute power session with co-presenter Stephanie Troeth.

Technorati Tags: , , , , , , , sxsw

Check Accessibility using Best Practices

The University of Illinois at Urbana-Champaign has posted a Functional Accessibility Evaluator which takes a new approach to accessiblity testing. Each of the points checked are tied to Web Accessibility Best Practices, which explain in clear language (unlike some of the other online testing tools) what the best practice is and what you need to do to be compliant. An excellent resource for learning and for testing.

Technorati Tags: , , ,

Practical, Entry-Level Accessibility

An excellent article by Mike Cherim at Accesssites.org today talks about the basics of accessibility. It is the type of article you want to bookmark and use as a reading assignment for your students. One of the most interesting sections of the article is when he describes the proper use of link text. He said,

Redundant Link Phrases

Don’t use the same link phrase more than once unless it leads to the same place and be descriptive of where the link goes. In other words don’t use link phrase terms like “read more about this topic” more than once unless the link phrase happens to lead to the same place.

Descriptive Link Phrases

As suggested above, be descriptive with your link phrases. All too common links phrases such as “click here” simply aren’t enough. You’ll be making users click on links just to find out where they lead. Even if you feel the context adequately explains where “click here” goes, on the web they may be removed from the context which defines them.

Link Separation

Separate your links by not making them consecutive. Putting even a lowly comma between them will satisfy this requirement. If they’re not used inline with text content, often the best solution is to organize them in an unordered list as mentioned previously as this easily provides the needed separation. Even as list-organized links, they can be styled horizontally with a simply entry in the page’s style sheet thus meeting the needs of your visual layout.

Link Identification

Underlining your links is conventional, widely accepted, and the best of all a recognized methods. While underlined links aren’t absolutely necessary and you may choose to offer them another way, do make them apparent and keep them uniform, just don’t depend on color alone to make this so.

Link Interactivity

Make sure your links are interactive. This may be accomplished by removing the link underline when a user hovers over them with a mouse or focuses on them with their keyboard – which is something even some seasoned developers tend to overlook. The interactive styling depends on their static styling so create a dramatic-enough change. But try not to make this interactivity depend solely on color alone unless said links belong to a very distinctive grouping such as a well-marked navigation list.

Despite claiming that the article is entry-level, Cherim addresses many of the major points involved in accessiblility. A good review, or a good introduction, no matter how you approach it.

Technorati Tags: , , , , ,

Stanford University Online Accessibility Program

Check the helpful resources in the Stanford Online Accessibility Program – Stanford University. Standford says, “you will find a number of resource materials outlining best practices, policies, development guidelines and more. It also provides tips, tricks and tutorials geared towards the web developer/designer – from the novice to the experienced.” Stanford’s work will benefit everyone.

Deadly Oversights

I’m a fan of Marcia Yudkin’s Marketing Minute, a free weekly email with a brief marketing idea. This week she talks about judging the potentially award winning sites that are up for this year’s Webby Awards. She says she is amazed by the failures of some of the sites and lists a few of what she terms “deadly oversights:”

  • A hotel that mentions nowhere on the home page where it’s
    located
  • Financial information sites that invite people to sign up
    without saying what members receive or what membership costs
  • Sites for residential complexes that neglect to say when construction will be completed and whether units are
    available
  • An employment firm hiding one digit in its toll-free
    number in the site’s top banner
  • Blogs written in first person without any clue anywhere
    who “I” is

A reminder that the old rule that every web page should answer three questions still is a good one. The three questions are a) where am I? b) where can I go? c) where have I been?

Addendum 12/15/06 A post by another Webby judge today, Meryl Evans, said, “As I review web sites for the Webbys, I’m still seeing the same problems I saw last year, the year before that… repeat.” Wow. With these two judges sounding so discouraged about the quality of the entries, it makes you ponder just how much honor a Webby Award should convey to the winners.

Technorati Tags: , ,