Web Design Best Practices in CGS 3175: Internet Applications (Fall 2007) at UCF - Prof. Ma, Study notes of Computer Science

Download Web Design Best Practices in CGS 3175: Internet Applications (Fall 2007) at UCF - Prof. Ma and more Study notes Computer Science in PDF only on Docsity! CGS 3175: Internet Applications (Web Site Design– Part 2) Page 1 © Mark Llewellyn CGS 3175: Internet Applications Fall 2007 Web Site Design – Part 2 School of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs3175/fall2007 CGS 3175: Internet Applications (Web Site Design– Part 2) Page 2 © Mark Llewellyn • The major components of Web page design are: – Page layout design – Text design – Graphic design – Accessibility considerations • Web sites that look great and are easy to use don’t happen by accident. Outstanding Web sites are carefully planned and created by using recommended design practices. • There are a number of factors to consider when designing a Web page. Some factors relate to the usability, accessibility, and appeal of the site to the target audience – use of color, text, graphics, and animations. • Other factors relate to the medium of the Web itself – load time issues, browser support, and monitor screen resolution. Web Site Design – Best Practices CGS 3175: Internet Applications (Web Site Design– Part 2) Page 5 © Mark Llewellyn • There is a saying in the real estate field that the three most important factors about a property are location, location, and location. • The Web page location you choose for high-profile components such as logo banners, page heading, and navigation is also important. • Web page visitor eye tracking studies have determined that a visitor’s eyes “most often fixated first in the upper left of the page, then hovered in that area before going left to right.” • This makes the most valuable Web page “real estate” the upper-left side and top center of the page. • Avoid placing important information and navigation on the far right side – as we’ll see later, this area may not be initially displayed by browsers at some screen resolutions. Web Page “Real Estate” CGS 3175: Internet Applications (Web Site Design– Part 2) Page 6 © Mark Llewellyn • In order to make it easy for visitors to view and use your Web pages, avoid creating pages that are too wide to be displayed in the browser window. • These pages require the user to scroll horizontally. Using a screen resolution of 800 x 600 pixels, the amount of viewable screen is about 760 pixels in width. • If you expect that the page will be printed often, it is a good idea to keep the width of the page to less than 560 pixels. Horizontal Scrolling An aside on screen resolutions – A recent survey by The Counter (http://www.thecounter.com) regarding Web visitors for sites monitored by their service reported 1027 x 768 as the most popular screen resolution with 57% of the visitors reporting this resolution. 17% use 1024 x 768, 16% use 1280 x 1024 and 3% use 1152 x 864 and fewer than 1% use 640 x 480. CGS 3175: Internet Applications (Web Site Design– Part 2) Page 7 © Mark Llewellyn • Younger audiences, such as children and preteens, prefer bright lively colors. Older audiences tend to prefer high contrast in colors. • For instance compare the two Web pages shown in the next two pages. Can you guess the intended user group for each page? Use Of Color An aside on browsers – A recent survey by Janco Associates’ IT Productivity Center indicates that 83% of the Web users utilize Internet Explorer with 12.6% using Firefox, and about 2% using Netscape. A lot of Web statistics such as these can be found at http://www.clickz.com/stats. CGS 3175: Internet Applications (Web Site Design– Part 2) Page 10 © Mark Llewellyn • Using tables and style sheets to create interesting page layouts can keep visitors interested in your Web site. • Look at the page layout designs on the next three pages. • Which is the most interesting layout? Why? Page Layout CGS 3175: Internet Applications (Web Site Design– Part 2) Page 11 © Mark Llewellyn Page Layout Site Logo Home Products Services Order Contact This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. CGS 3175: Internet Applications (Web Site Design– Part 2) Page 12 © Mark Llewellyn Page Layout Site Logo Home Products Services Order Contact This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. This is web page content. CGS 3175: Internet Applications (Web Site Design– Part 2) Page 15 © Mark Llewellyn • There are three very popular Web page layout designs: – Ice – Jello – Liquid • We’ll look briefly at each of these layout designs. Page Layout Design Techniques CGS 3175: Internet Applications (Web Site Design– Part 2) Page 16 © Mark Llewellyn • The ice design technique is sometimes referred to as a solid or fixed design. The page hugs the left margin and generally a fixed width table is used to format the page. • Due to the fixed width, the design has much control over the layout and formatting – configuring the page to look best at certain screen resolutions (have you ever visited a site with a message to the effect that “this site best viewed at XX x XX resolution?). The display will degrade gracefully at other screen resolutions. • The right-hand side of the screen will often contain much empty space – especially at higher screen resolutions. • The National Pro Fastpitch softball site (http://www.profastpitch.com) is an example of the ice design. Ice Design CGS 3175: Internet Applications (Web Site Design– Part 2) Page 17 © Mark Llewellyn unused space! CGS 3175: Internet Applications (Web Site Design– Part 2) Page 20 © Mark Llewellyn • The liquid design technique results in a fluid Web page with content that takes up 100% of the browser window no matter the screen resolution. • There is no blank margin of the left or the right – the content will flow to fill whatever size window is used to display it. • This type of design can be created with XHTML using a table with the width set to 100%. • The State of Illinois uses the liquid layout design on their state web site at http://www.illinois.gov. You will find many other Web sites using this very popular page layout technique. Liquid Design CGS 3175: Internet Applications (Web Site Design– Part 2) Page 21 © Mark Llewellyn CGS 3175: Internet Applications (Web Site Design– Part 2) Page 22 © Mark Llewellyn CGS 3175: Internet Applications (Web Site Design– Part 2) Page 25 © Mark Llewellyn NSA Homepage – XHTML code CGS 3175: Internet Applications (Web Site Design– Part 2) Page 26 © Mark Llewellyn 1. Appealing to target audience. 2. Consistent site header/logo. 3. Consistent navigation area. 4. Informative page title that includes the company/organization/site name. 5. Page footer area – copyright, last update, contact e-mail address. 6. Good use of basic design principles: repetition, contrast, proximity, and alignment. 7. Displays without horizontal scrolling at 800x600 resolution. 8. Balance of text/graphics/white space on page. 9. Good contrast between text and background. 10. Repetitive information (header/logo and navigation) takes up no more than ¼- 1/3 of the browser window at 800x600resolution. 11. Homepage has compelling, interesting information “above the fold” before scrolling down at 800x600 resolution. 12. Home page downloads in 10 seconds on dial-up connection. Page Layout – Best Practices Checklist CGS 3175: Internet Applications (Web Site Design– Part 2) Page 27 © Mark Llewellyn 1. Displays on current versions of Internet Explorer (6+). 2. Displays on current versions of Firefox. 3. Displays on current versions of Netscape (7+). 4. Displays on current version of Opera. 5. Displays on current version of Safari. 6. Displays on both PC and Mac platforms. Browser Compatibility – Best Practices Checklist CGS 3175: Internet Applications (Web Site Design– Part 2) Page 30 © Mark Llewellyn 1. Each audio/video/Flash file used serves a clear purpose. 2. The audio/video/Flash files used enhance rather than distract from the site. 3. Captions are provided for each audio or video file used (accessibility issue). 4. Download times for audio or video files are indicated. 5. Links to downloads for media plug-ins are provided. Multimedia – Best Practices Checklist CGS 3175: Internet Applications (Web Site Design– Part 2) Page 31 © Mark Llewellyn 1. Common fonts such as Arial are used. 2. Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, and so on. 3. Fonts, font sizes, and font colors are consistently used. 4. Content provides meaningful, useful information. 5. Content is organized in a consistent manner. 6. Information is easy to find (minimal clicks). 7. Timeliness: The date of the last revision and/or copyright date is accurate. 8. Content does not include outdated material. 9. Content is free of typographical and grammatical errors. 10. Content provides links to other useful sites. 11. Avoids the use of “Click here” when writing text for hyperlinks. 12. If standard link colors are not used, all links use a consistent set of colors to indicated visited/nonvisited status. 13. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility issue). Content Presentation – Best Practices Checklist CGS 3175: Internet Applications (Web Site Design– Part 2) Page 32 © Mark Llewellyn 1. All internal hyperlinks work. 2. All external hyperlinks work. 3. All forms function as expected. 4. No Javascript errors are generated by the pages. Functionality – Best Practices Checklist CGS 3175: Internet Applications (Web Site Design– Part 2) Page 35 © Mark Llewellyn CGS 3175: Internet Applications (Web Site Design– Part 2) Page 36 © Mark Llewellyn • The WAI is currently working on the WCAG 2.0 which aims to address the variety of new Web technologies now available, to be easier to understand, and be more precisely tested. • Watchfire’s WebXACT is a free validator that will check your web page for common accessibility issues. You can use it at: (http://webxact.watchfire.com). • The Cynthia Says Portal (http://www.cynthiasays.com) also provides a free accessibility validation service. The next page, shows part of the output from validating my About Me page on the Pegasus site. Note: that it validates against a lot of areas, some of which are not applicable to this document. More On Accessibility CGS 3175: Internet Applications (Web Site Design– Part 2) Page 37 © Mark Llewellyn