Web Design Tips College of Alameda pmcdermott@peralta.edu Copyright © 2008 Patrick McDermott.

Web Design Tips

College of Alamedapmcdermott@peralta.edu

Copyright © 2008 Patrick McDermott

Web DesignTechnology

Content

Architecture

Design

Whose Side Are You On?

Browser SideHTML/XHTMLCSSJavaScriptC#/Java AppletsAJAX

DataBase

Cookie

ServerC++C#JavaPHPASPPerl

Copyright © 2008 Patrick McDermott

Sources of Variation• Different Browser• Browser Version• HTML Language Versions• How strict to enforce Standards

• Dilemma:– Use features some users can’t accommodate

driving them away– Keep your up-to-date users in the old technology

denying them improvement

Static or Dynamic• Static– Always the same, for everybody

• Dynamic– Database– User– Time of Day– Whatever

• Price Discrimination at Amazon

Internet Categories Content– Entertain or Inform: Eyeballs

Community– Social• YouTube, Amazon reviews

Commerce– Sell, Sell, Sell

• Meta Categories– ISPs– Portals– Web Services

“Both Magritte and Escher use realism in exploring the worlds of paradox and illusion; both have a sure sense for the evocative power of certain visual symbols, and—something which even their admirers often fail to point out—both of them have a sure sense of the graceful line.”—Crab (Douglas Hofstadter, GEB)

TNSTAAFL• “There’s No Such Thing As A Free Lunch”• This Class– Size of Files– No Music + Illustration– What might Blow Up

BUI vs. GUI• Browser User Interface

Penny McIntire sez• Browser has built-in facilities• HTML ez 2 learn• HTML ez to update• Portable• On server so no PC update

Colors/Brand• Visual Studio & MSN have the same color

palette. BAD!

Where to Click• Everywhere!• Click or control click to link• Blue and Purple

• Multiple Ways to Navigate

New Window• Or current window• You don’t want them to leave your site…

“I’ve also thrown away the TARGET="_blank" attributes that open links in new windows or tabs. This is usually not what the user wants, and it’s rarely a good idea. Let the user use the back button and history list if necessary, but otherwise open most links in the same window. If the users want to open a link in a new window, they can easily do so from the context menu, but the choice is now theirs.”

You Gotta dance… … with the one that brought ya• Many interface books suggest things that

HTML or VS don’t do.• It’s not nice to fool the browser• If you do, it’s your fault

Usability Test• You’ll be Surprised• Even one is better than None– Take HTML tag: <p> shift <, no shift p, shift >

• Focus Group– I’d pay $100 for one– You can have this one for $50– No thanks