General Web design guidelines and concepts for the non-designer to have in mind when creating a Web site.

1. Two things to consider when designing a Web site:
1) Relevance
2) Usability
Make it easy and intuitive for visitors to get what they want by not going against
standards.
Sites Should:
* Meet Expectations on Every Level
* Be Intuitive (Easy to Use)

2. Jakob's Law of the Web User Experience:
http://www.useit.com/alertbox/20000723.html
Users spend most of their time on other sites.
This means that users prefer your site to work
the same way as all the other sites they already know.
Keep in mind -
Users are highly goal-driven on the Web.
Your Job: Make it easy for
them for them to reach their goal.

3. Relevance - Give The People What They Want
What is the purpose of your site?
What will define it as successful?
Organize your site for the user, not
according to your internal format.
Develop specifically for the Web.
Check yourself.

4. Why Are McDonalds and Burger King So Popular?
Good Food?

5. Why Are McDonalds and Burger King So Popular?
Good Food?
People Know What to Expect

6. 4Cs

7. Content
4Cs

8. Content
4Cs
Consistency

9. Content
4Cs
Consistency
Concise

10. Content
4Cs
Consistency
Concise
Compatibility

11. Keep All Content Relevant
Content is Not Just Text

12. Keep All Content Relevant
Content is Not Just Text
● Services
o Banking
o Commerce
o Directory Searches
● Media
o Music
o Video
o Animation
o Games
o Presentations
● Information
o Libraries
o Directories
o Lists
o Links
o Articles

13. Be Consistent
Styles - Based on Your Corporate Image Templates
* Colors * Navigation and Layout
* Text Sizes * Naming Conventions of Files, Styles,
* Fonts Images, Directories

14. Be Consistent Web Safe Fonts
Logo
* Fonts affect the way your readers
* Top / Top Left perceive your page (serious and formal,
* Clickable to home page or friendly and casual).
* Usability concerns. For example,
Navigation some font types are more easily
readable than others
* Main Menu at top or left
* Text links at the bottom of all pages Technology
* Ability to navigate within a section
* Ability to navigate cross sections from * Server side includes and
any page of the site templating systems
* HTML and CSS
Consistent Footer * Skins/Themes
* Text Links (Way Out) Consistency can have variations
* Contact info at bottom of all pages (color by section)
http://pbskids.org/games/
Users-Empowered Relative Design
Exceptions
* On-line design uses a flexible grid, * http://yarokyarok.com
not like print
* Relative not absolute sizes

15. Navigation Questions: Sitemaps and Breadcrumbs
“Site maps are a secondary navigation
feature — a humble role that they share
with breadcrumbs.
Indeed, the arguments in favor of site
maps are the same as the arguments
for breadcrumbs:”
From
http://www.useit.com/alertbox/sitemaps.html
They don't hurt people who don't use
them.
They do help a few people.
They incur very little cost.
Did They Improve? However only 7% users use them...
http://www.mfa.gov.il/MFA/SiteMap.htm
Evidence they also can help with SEO

16. Navigation Questions: Sitemaps and Breadcrumbs
For Good Navigation:
● Main Menu at top or left
●Text links at the bottom of all pages
(Way Out)
● Ability to navigate within a section
●Ability to navigate cross sections from any
page of the site
● Test
● Charlie's Three Click Rule

17. Be Concise

18. Be Concise
● Graphics
(use whitespace)
● Text
(scannability)
● Interface
(simplicity)
● Layout
The more things there are Remember Relativity - Avoid "banner blindness"
to look at, the less anything If everything is http://jpost.com
will be seen, and the more important, nothing is.
overwhelming it'll be.

19. Compatibility
●Least Common Denominator Design
● Cross-browser
● Cross platform
● Multiple resolution
● Do not depend upon third-party plugins,
downloads or client-side programming
Use Standards
http://www.w3.org/TR/CSS21/
Check cross-browser/cross-platform
compatibility
http://www.quirksmode.org/css/contents.html
● Validate http://validator.w3.org/
● Third-Party Tools
● Test in real-life
Israeli Sites are notorious for non-compatibility
Ben Gurion Airport
fails all tests - browser, platform and resolution
http://www.iaa.gov.il/Rashat/en-US/Airports/BenGurion/
http://www.iaa.gov.il/Rashat/he-IL/Rashot/BrowserSystemMessage.aspx
School site - http://efrjlm.go.cet.ac.il/go/index.asp

20. Information Architecture
You need to consider both the user and the site owner
to make the site both intuitive and easy to maintain
● Users should know what to expect before they click
● Every page should have content:
● Do not have pages of only menu items so that users
click just to get to a page where they have to click again
● Do not use internal jargon or structure. You may know
your field or your organization, but do not assume that
your users do
● The Web is not linear and should not be designed like
pages of a book:
o Each user creates his own narrative and your job
should be to guide all users, no matter what their path,
to your site's "Most Desired Action"
o Do not assume every user will enter your site from
your home page.
●
Once the infrastructure is in place you can expand:
●
● Have inclusive top-level navigation.
● Chose the correct environment in which to design the site.
Just as if you were designing a house, and you knew that one day you wanted a
master bathroom, but right now you could not afford it, you should still lay
down the pipes so that you do not need to tear up the floor in the future.

21. How To Write For The Web
People do not read on-line; they scan the page.
Structure
● Use the inverted pyramid.
Style
● There is no substitute for writing well.
● Good copy increases your site's credibility .
● Avoid self-promotion, exaggeration and hyperbole ("Coolest", "Hottest").
Be Succinct
● Write no more than 50% of what you would write for printed material.
● Convey one idea per paragraph.
Write Scannable Text
● Structure Articles with Understandable Titles and Subtitles
● Use Bulleted Lists
● Use Bold Text to Emphasize Important Words
● Use Hypertext Links
Empower Your Reader
● Readers create his/her own non-linear flow of information
● Speak of audience benefits, not from your point of view

22. Recent Changes
Server-Side programming vs Client-Side Programming
●http://script.aculo.us/
●http://code.google.com/webtoolkit/
●http://mootools.net
●http://www.extjs.com/
●http://www.icefaces.org/main/home/index.jsp
●https://www.jboss.org/jbossrichfaces/
●http://jquery.com/
●https://ajax.dev.java.net/
The Semantic Web
●Use informative names relating to content, not layout.
For Example:
id="header" id="branding"
id="left-menu" id="navigation"
Finding a Common Denominator
● iPhone
● High Definition TV
● Personal Computers
● Handheld Devices
● PDAs

23. Evolution of Sites
● On-Line Brochure
● Interactivity
o Forms
o E-Commerce
o Searches
● Personalization Tracking and Recommendations:
o Personalized Shopping
o Personalized Searches
● Platform for user-generated content (Web 2.0)
o Facebook
o MySpace
o YouTube
o Blogs
o Wikipedia
● Information Overload

24. The Future
Web 3.0
Semantic Web = 3.0
John Markoff (NYT Nov 12, 2006)
http://www.nytimes.com/2006/11/12/business/12web.html?ex=1320987600&en=254d697964cedc62&ei=5
Web 3.0 = 4C+P+VS
(content, commerce, community and context plus personalization plus vertical search)
Sramana Mitra (Forbes)
http://www.sramanamitra.com/articles/web3/
Your Personal Shopper - More than just a travel agent
content
semantics
social networks
combination to yield personalized relevant results
Examples:
Search: http://www.headup.com/
Advertising http://www.peer39.com/

25. The Future
Cross-Device Cross-Operating System Applications
Adobe Air
Titanium:
http://www.appcelerator.com
Appcelerator Platform
One platform for Mobile, Desktop
and Web application development

26. Questions
● Are Meta Tags Dead?
● GIF, JPG or PNG?
● Accessibility
● SEO, SEM, SMM, SMO ???
● Twitter, Facebook, Digg??
● Analytics?
● Flash
● Web applications, APIs and Mash-ups?
● Mobile Web?
● Copyright?
● Video Formats?
● Hebrew - UTF-8, Win1255, RTL
Charlie Kalech
Director, J-Town Productions Ltd.
Helping Our Clients Succeed on the Internet Since 1994
http://www.j-town.co.il charlie@j-town.co.il Tel: 972-2-671-9918
FACEBOOK http://facebook.com/charlie.kalech
TWITTER http://twitter.com/CharlieKalech
LINKED IN http://www.linkedin.com/in/charliekalech