Web Site Design: Layout Fall 2013

Basic Concepts Basic Web Design Concepts – Proximity – Alignment – Repetition – Contrast

Basic Concepts: Proximity Refers to the distance between elements on a Web page and how the elements relate to one another. – Text – Navigation – Headings – Etc. Elements that are close together appear to have a stronger relationship than elements that farther apart

Proximity Dots closer together create a more robust image Dots further apart do not look related

Basic Concepts: Alignment One of the most critical principles of design. Significantly affect the readability of material on a page. Align text left to right. Avoid horizontal scrolling, especially for text. Proper alignment will create strong associations and a pleasing presentation.

Blue lines show how the elements on this page are aligned

Basic Concepts: Repetition Saying the same thing several times to get a point across. Use of a consistent theme throughout a Web site. Should be enough similarities on pages of a web site to create a consistent look and feel to the site. – Makes site easy to navigate

Basic Concepts: Repetition Page on right is similar to page on left, different information, but the look is similar.

Basic Concepts: Contrast Color of text against background Differences between elements Can You Read The Text Below? This is an example of poor contrast. The color of this text is not different enough from the background color. Higher contrast is far easier to read. This text is much easier to read than the text above. Higher contrast is far easier to read. This text is much easier to read than the text above. Tests indicate that white wording on a black background is harder to read than the black text on a white background.

Navigation Several basic styles of navigation – Top (common) – Left Side (common) – Right Side (very rare, should avoid) – Bottom (used when pages are long) – Horizontal (usually top or bottom on page) – Vertical (usually left or right on page)

This page uses vertical navigation on the left side This page uses top horizontal navigation This page uses primary navigation at the top and secondary navigation on the side Navigation

Readability: Fonts Text in Web pages is displayed by browsers using the fonts available in the viewer's computer. Most PC users have Arial and Times New Roman installed. Macintosh computers usually have Helvetica and Times. Arial is similar to Helvetica and Times is similar to Times New Roman. The vast majority of text presented on Web pages is limited to these fonts for both practical and technical reasons.

Readability: Fonts Here are the most common "Web safe" fonts: –Arial –Helvetica – Times – Times New Roman – Verdana – Georgia Here are some uncommon fonts: –VIKING –Batavia – Courier – Onyx A recent article in the New York Times concluded that Baskerville is the font that is most believable

Readability: Fonts Cascading Style Sheets (a technique for controlling presentation of elements in Web pages) allows use of non-standard fonts rules. Details about how this can be done are at the W3 Schools CS3 Fonts page.W3 Schools CS3 Fonts page. This page illustrates good use of fonts. The headlines and main topic headers use a sans serif font that is easy to read. The text body uses a serif font, such as Times or Times New Roman, that is easy to read in blocks of text. However, many designers find the standard Times, Times New Roman, Arial, Helvetica fonts to be dull. They will try to improve a site by using alternative fonts. This can now be accomplished using both traditional HTML Web safe fonts and rules.

Serif and Sans-Serif Fonts Sans-serif font Serif font Serif font (serifs in red) Sans-serif font does not have the small projecting features called "serifs" at the end of strokes.serifs

Readability: Fonts Large text is hard to read because people can only read one or two words at a time. Small text is difficult to read because many computer screens cannot clearly display the tiny characters. Also, small print is hard to see under the best of circumstances.

Readability: Fonts Here are common font sizes that are both fixed and proportional: – 6 pixels – 10 pixels – 14 pixels –.9 em – 1 em – 1.2 em – 1.4 em – 90% – 100% – 120%

Web Page Analysis This page has a very busy background that causes the text to blend it. It is very hard to read. This page has low contrast between the text and the background. This should be corrected for easier reading.

Web Page Analysis This page has pretty good contrast, but the center alignment makes the page very hard to read. This page is the best because it has good contrast, lots of white space, and simple left alignment.

Design Considerations: Page Size and Layout How do you deal with design questions such as page size and layout? Should you use tables, or should you try Cascading Style Sheets? These topics are explored on the following slides.

Top Tips to Annoy and Insult Your Web Site Visitors: (Don't do this stuff!) "This site best viewed with _____" - Sites should be designed to work right on all combinations of equipment and software. "Under Construction" - People take detours around roads that are under construction. Background music - Takes too long to download. Horizontal scrolling - Avoid it because people will click out rather than do it. Silly or Useless Animated GIFS - Take longer to download. But, for a specific goal or purpose they can be effective. Never use them just because "you can." Splash pages - They are annoying and wasteful in most situations and should be avoided.

Design Considerations: Tables Originally used to control the width of material presented on web page Can specify in percent or pixels – Percent causes table size to change depending on browsers screen size – Pixels could cause horizontal scrolling Example of tables using percentage instead of pixels

Design Considerations: Tables vs. Cascading Style Sheets Cascading Style Sheets (CSS): used to control presentation on web site Saves editing time once the site is built – Many pages can use the same CSS – Can have many CSS for a web site This is preferred over using tables

Links to popular browsers Browser Question - There are several browsers on the Web. One is much more popular than the others. But that changes, sometimes month to month Popular browsers – Microsoft Internet Explorer Microsoft Internet Explorer – Firefox Firefox – Safari Safari – Opera Opera – Chrome Chrome

Testing and Checking a Web site Pre-Launch Web site check list: – Before launching my site I checked it with Internet Explorer – Before launching my site I checked it with Firefox – Before launching my site I checked it with Safari – Before launching my site I checked it with Chrome – Before launching my site I check the code to make sure it was valid

Testing and Checking a Web site In addition to checking pages with different browsers, it is good practice to validate your code. Valid code is more likely to make your pages display properly. Many Web editing software programs, such as Dreamweaver, have code validation functions. Dreamweaver But many Web designers use the World Wide Web Consortium's online code validators. – You can find that at and just follow the links and instructions.

Other Online Resources Below are links to other resources for online information about Web design, the World Wide Web, and the Internet. – World Wide Web Consortium ( World Wide Web Consortium – Webmonkey ( Webmonkey – Lynda Weinman HTML ( Lynda Weinman HTML – HTML Writers Guild ( HTML Writers Guild – Web Design with Style, Ease, and CSS ( design-with-style-ease-and-css/) Web Design with Style, Ease, and CSS – Interactive Media Center Home Page ( Interactive Media Center Home Page