05/03/23Page 1

Web Site Design

Modified by Linda Kenney Nov. 1, 2010

05/03/23Page 2

• Learn the fundamentals of Web page design.

Learning Objectives

05/03/23Page 3

You already know• how to add absolute URLs, relative

links, mail links to your Web pages• how to add colors to a Web page• how to publish a Web page• about browser-safe colors• how to add internal links using

named anchors to your Web pages

05/03/23Page 4

You will learn • how to add pictures to a Web page• how to use tables• how to lay out your page

05/03/23Page 5

• Think about the theme or purpose of your Web page. – What about the target audience?

• Think about what you want to place on your page, and the source of the material you will use.

• Ensure that your content is consistent with your theme.

Planning Your Web Page

05/03/23Page 6

• Then consider the organization of this content.

• Create a storyboard.

• The storyboard shows the layout of the material you plan to place on your Web pages.

Planning Your Web Page(cont.)

05/03/23Page 7

Planning Your Web Pages (cont.)

05/03/23Page 8

Web Site Organization

• Hierarchical

• Linear

• Random (sometimes called Web Organization)

05/03/23Page 9

Hierarchical Organization• Characterized by a

clearly defined home page with links to major site sections

• Often used for commercial and corporate web sites

05/03/23Page 10

Hierarchical -- Too Shallow

• Be careful that the organization is not too shallow.– This provides too many choices and could

result in a confusing and less usable web site

05/03/23Page 11

Hierarchical -- Too Deep• Be careful that the

organization is not too deep.– This results in many “clicks”

needed to drill down to the needed page.

– User Interface “Three Click Rule”

• A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.

05/03/23Page 12

Hierarchical Organization • Examples?

05/03/23Page 13

Linear Organization

• Used when the purpose of a site or series of pages on a site is to provide a tutorial, tour, or presentation that needs to be viewed in a sequential fashion.

05/03/23Page 14

Linear Organization Example• http://echoecho.com/

javascript.htm

05/03/23Page 15

Random Organization• Sometimes called “Web”

Organization• Utilized when there is no

clear path through the site• May be used with artistic

or concept sites• Generally not used for

commercial web sites.

05/03/23Page 16

Random Organization example• http://www.leoburnett.ca/

05/03/23Page 17

Design Principles• Repetition

– Repeat visual elements throughout design.

• Contrast– Add visual excitement and draw attention.

• Proximity– Group related items.

• Alignment– Align elements to create visual unity.

05/03/23Page 18

Web Site Navigation Best Practices

• Make your site easy to navigate– Provide clearly labeled navigation in the same

location on each page.

– Most common – across top or down left side

• Another option is “breadcrumb” navigation Examples:

http://usability.about.com/od/aboutusability/p/Breadcrumbs.htm

05/03/23Page 19

Web Site NavigationBest Practices (cont.)• Types of Navigation

– Graphics-based– Text-based– Interactive Navigation Technologies

• Java Applet • Flash

05/03/23Page 20

Web Site NavigationBest Practices (cont.)

• Accessibility Tip– When graphics, a Java Applet, or Flash

are used for the main navigation of a web site, provide clear text-based links on the bottom of each page.

05/03/23Page 21

• A table can be used to create a graphical navigation bar.

• Insert each section into a single row table with zero border, spacing, and padding.

• Convert each image section into a link.

Creating a Graphical Navigation Bar

05/03/23Page 22

More Web Site NavigationBest Practices

• Use a Table of Contents (with links to other parts of the page) for long pages.

• See External Links on the course menu in our Blackboard course.

• Consider breaking long pages into multiple shorter pages.

• Large sites may benefit from a site map or site search feature.

• http://www.conferences.unh.edu/sitemap.html

05/03/23Page 23

Meta (description and keywords)

See

http://www.starbucks.com/

05/03/23Page 24

05/03/23Page 25

Web Page DesignLoad Time

• Watch the load time of your pages.

• Try to limit web page document and associated media to under 60K on the home page and 100K on other pages.

• Why should your home page be smaller than the other pages?

05/03/23Page 26

Web Page DesignTarget Audience• Design for your target audience.

– Appropriate reading level of text

– Appropriate use of color

– Appropriate use of animation

05/03/23Page 27

Web Page DesignColors & Animation

• Use colors and animation that appeal to your target audience. – Kids

• What?– College students

• What?– Older users

• What?– Everyone:

• Good contrast between background and text • Avoid animation if it makes the page load too slowly.

05/03/23Page 28

Web Page Design Browser Compatibility

• Web pages do NOT look the same in all the major browsers

• Test with current and recent versions of: – Internet Explorer– Firefox, Mozilla– Opera– Mac versions

• Design to look best in one browser and degrade gracefully (look OK) in others

05/03/23Page 29

Web Page Design Screen Resolution• Test at various screen resolutions

– Most widely used: 1024x768 and 800x600

• Design to look good at various screen resolutions

05/03/23Page 30

Web Page DesignMore Best Practices

• Page layout design

• Text design

• Graphic design

• Accessibility considerations

05/03/23Page 31

Web Page DesignPage Layout• Place the most important information

"above the fold“ (the area before the user scrolls).

• Use adequate "white" or blank space.

• Avoid horizontal scrolling.

• Use an interesting page layout.

05/03/23Page 32

Page Layout (cont.)This is usable, but a little boring. See the next slide for improvements in page layout.

05/03/23Page 33

Page Layout (cont.)

Better

Columns make the page more interesting and it’s easier to read this way.

05/03/23Page 34

Page Layout (cont.)

Best

Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.

05/03/23Page 35

Page Layout Design Techniques --Ice Design

– AKA rigid or fixed design– Fixed-width, usually at left margin

– Examples:

– http://www.shire.net/learnwebdesign/index.html

05/03/23Page 36

Page Layout Design Techniques -- Jello Design

– Page content typically centered and often configured with a table of percentage width.

– Even margins on both sides.– Examples:http://www.officemax.com/

http://www.pbs.org/

http://www.ebay.com/

05/03/23Page 37

Page Layout DesignTechniques -- Liquid Design

– Page expands to fill the browser at all resolutions. Often configured with a table width of 100%

– New Trend: Use CSS to configure liquid design page layout.

– Examples:

http://www.illinois.gov/tech/

http://www.digital-web.com/

05/03/23Page 38

• Basic Elements – Descriptive title (Keep it short but accurate.)– Include your name and contact info (e-mail)– Show the creation/modification date– Use pictures to highlight and emphasize the

purpose of the page.– Provide navigational content if multiple

pages are used.

Important Web Page “Requirements” (1)

05/03/23Page 39

• Design & Organization Recommendations– Put the most interesting/important info at the

top of the page.– Keep the image files small and few. Use

thumbnail image links to full size images if there are many.

– Add alternate text to your images. Not all the Web page visitors are sighted. The alternate text will clue them in about the purpose of the picture.

– Use browser-safe colors. Non-standard colors may appear differently on other systems.

Important Web Page “Requirements” (2)

05/03/23Page 40

• Design & Organization Recommendations– Use the default fonts. Specialty fonts may not

be installed on the viewer’s computer - so an alternate font will be used, potentially affecting the impact of your page.

– Use only a few fonts. The display may become too “busy”.

– Use a style sheet. Separate display info from content. This simplifies cosmetic changes.

– Use subtitles and headings to break up content.

Important Web Page “Requirements” (3)

05/03/23Page 41

• Design & Organization Recommendations– Use the spell checker! TextPad vs. Notepad– Preview/test your page. Nothing is more

frustrating than a Web page that is incomplete because the author failed to fix display issues.

– Write, view and test all Web pages before installing them on a Web server.

– Make sure you test them again once you have uploaded them to your server.

Important Web Page “Requirements” (4)

05/03/23Page 42

Important Web Page “Requirements” (5)

• Keep download times short.

• Make your pages portable! (Use relative links!)

05/03/23Page 43

Check your work. • Validate. http://validator.w3.org

05/03/23Page 44

• Remember the three C’s of Web page design: – quality Content– reader Convenience– artistic Composition.

A Web Site Construction Checklist

05/03/23Page 45

Best Practices ChecklistFrom Web Developer & Design

Foundations with XHTML http://terrymorris.net/bestpractices

•Page Layout•Browser Compatibility•Navigation•Color and Graphics•Multimedia•Content Presentation•Functionality•Accessibility

05/03/23Page 46

Information from• Web 101 ,Third Edition, by Wendy G. Lehnert &

Richard L. Kopec (Addison Wesley)

• Web Developer & Design Foundations with XHTML , by Terry Felke-Morris (Addison Wesley)