Web design Match your sites purpose, target audience and design Web - PowerPoint PPT Presentation

CS125 Spring 2014 Interim Web design • Match your site’s purpose, target audience and design • Web site organization • Navigation • Best practices – Design principles – Page layout – Text design – Graphic design – Accessibility 5-1

CS125 Spring 2014 Interim Design for your target audience 5-2

CS125 Spring 2014 Interim Web site organization • Hierarchical • Linear • Random or web organization 5-3

CS125 Spring 2014 Interim Hierarchical organization • Has a clearly defined home page • Navigation links to major site sections • Often used for commercial and corporate web sites The organization or architecture of your web site has a significant impact on the ease or difficulty with which visitors navigate it and locate the information they are looking for. A site map is a graphical representation of all the pages and sections in a web site. For example, see the UWO Computer Science web site for a site map on a separate page and http://www.whitehouse.gov/ for a footer site map. 5-4

CS125 Spring 2014 Interim Hierarchical organization: Poor examples 5-5

CS125 Spring 2014 Interim Linear organization Well-suited for sequential viewing of a series of pages, for example: • virtual tour • business presentation • tutorial 5-6

CS125 Spring 2014 Interim Random organization If you want visitors to get lost in your site, maybe like wandering around in an art gallery or museum. 5-7

CS125 Spring 2014 Interim Best practices for web site navigation • Make your site easy to navigate – Provide clearly labeled navigation in the same location on each page: Most common locations are across the top or down the left side – Provide breadcrumb navigation (see CS web site) – Types of navigation: graphics-based, text-based, interactive navigation technologies (image roll-overs, Flash, fly-out or dropdown menus) • Accessibility : provide plain text links in the page footer when the main navigation is non-text media such as images, Flash, or DHTML • Use a table of contents with links to other parts of the page (for long pages) – Create bookmarks inside your document using a fragment identifier or named fragment e.g., in page book.html : <h1 id="C4">Chapter 4</h1> Then link to it from anywhere else: ∗ within book.html : <p><a href="#C4">See also Chapter 4</a></p> ∗ in any other page: <p><a href="book.html#C4">See also Chapter 4</a></p> • Consider breaking long pages into multiple shorter pages using, e.g., linear organization • Large sites should have a site map and/or site search feature 5-8

CS125 Spring 2014 Interim Design principles 1. Repetition • Repeat visual elements (shapes, colors, fonts, images) throughout the design • Take advantage of consistency, avoid surprises for users 2. Contrast • Ease of reading • Add visual excitement and draw attention 3. Proximity • Group related items together • Minimize movement (eye, mouse) and cognitive load 4. Alignment • Align visual elements (shapes, images, text) to create visual unity 5-9

CS125 Spring 2014 Interim Web page design: Best practices Web site development requires strong design skills: good looking and easy to use web sites are not easy to develop! The web imposes additional constraints: • Load time: – Try to limit your web page document and associated media to under 60K on the home page; how? – Minimize perceived load time, that is, the amount of time the user is aware of waiting; how? • Place the most important information ”above the fold:” what does this mean? • What is the most valuable “real estate” on a web page? • Avoid horizontal scrolling: use a page layout whose width is a percentage (100% or less) of the width of the browser window • Use adequate white space: why? • Design for your target audience: appropriate reading level of text (writing style, vocabulary, etc.), appropriate use of color (based on age, but remember also the accessibility guidelines on slide 3-6), appropriate use of animation • Web pages do NOT look the same in all the major browsers 5-10

CS125 Spring 2014 Interim – Design to look best in the browser(s) of choice and degrade gracefully (i.e., look OK) in others • Screen resolutions vary as well – Widely used: 800x600, 1024x768, 1280x1024; getting larger and larger, except. . . – Consider centering your page contents Design for the Mobile Web • Small screen size • Scrolling • Low bandwidth • Fonts and colors • Navigation 5-11

CS125 Spring 2014 Interim Page layout A wireframe is a sketch or blueprint of a web page that shows the structure of the basic page elements, including logo, navigation, main content and footer. 5-12

CS125 Spring 2014 Interim Popular page layout design techniques 1. Ice design www.msn.com • Also called ’rigid’ or ’fixed’ design because the page does not change its width when the browser window is resized. • Page content is left-aligned • The chosen width makes the contents fit nicely in the browser window at the minimum resolution at which the site is supposed to be viewed. 2. Jello design • Page content has fixed size but is centered. 3. Liquid design • Page expands to fill the browser at all resolutions. What are the pros and cons of these designs? 5-13

CS125 Spring 2014 Interim Text design • Avoid long blocks of text; instead use bullet points, headings and sub-headings, and short paragraphs • Use common fonts: Arial, Helvetica, Verdana (sans-serif fonts are easier to read on a monitor), Times New Roman • Use appropriate text size: medium, 1em, 16px, 12pt, 100% • Use strong contrast between text and background • Use columns instead of wide areas of horizontal text • Bold text as needed • Avoid “click here” • Hyperlink key words or phrases, not entire sentences • Separate text with white or empty space • Check your spelling and grammar 5-14

CS125 Spring 2014 Interim Graphic design • Avoid large graphics • Use the alt attribute to supply descriptive alternate text • Be sure your message gets across even if images are not displayed • If using images for navigation, provide plain text links at the bottom of the page • Use animation only if it makes the page more effective; also provide a text description • Choose colors on the web palette if consistency across all (including older) Windows/Mac platforms is needed • Use anti-aliased text in images: • Use only necessary images • Reuse images 5-15

CS125 Spring 2014 Interim Design for accessibility Check out the WCAG 2.0 at: http://www.w3.org/TR/WCAG20/Overview and http://www.w3.org/WAI/WCAG20/quickref Goal: Universal/inclusive design Based on four principles (POUR): See Appendix E • Perceivable – Content must be Perceivable • Operable – Interface components in the content must be Operable • Understandable – Content and controls must be Understandable • Robust – Content should be Robust enough to work with current and future user agents, including assistive technologies 5-16

CS125 Spring 2014 Interim Check your work • Use a spell-cheker (ha ha) • Check your grammar • Validate your HTML: http://validator.w3.org/ • Validate your CSS: http://jigsaw.w3.org/css-validator/ • Test for Accessibility: – Worldspace Online: http://worldspace.deque.com/ – University of Toronto http://achecker.ca/checker/index.php 5-17