Web Design vs. GUI Design Designing for the Web: the designer has to

1. GUI Design • Web Design vs. GUI Design • Designing for the Web: the designer has to • give up full control of the design • In traditional design, you control every screen pixel • you know what system you are designing for • what fonts are installed • how large the screen typically will be • you have the system vendor's styleguide • the rules for combining the interaction • On the Web • user accessing through • traditional computers • Web TV • pen-based hand-held device • cellphone • laptops

2. GUI Design • Web Design vs. GUI Design • Traditional design • difference in screen area between a laptop and a high-end workstation is a factor of six. • On the Web • a factor of 100 in screen area between handhelds and workstations • a factor of 1,000 in bandwidth between modems and T-3 connections. • Any Web design will look different on this variety of devices • The more specialized or low-end the device, the stricter the requirements for Web content to morph into something suited for the platform. • The only way to make this happen is for designers to give up full control • let the presentation of their pages be determined by an interplay of page specifications and the preference settings (and other characteristics of the client device) • share responsibility with users and client hardware/software

3. GUI Design • Web Design vs. GUI Design • Similarities between Web and traditional UI design • are interactive systems • are software designs • require distinct requirements identification • require the development process/methodology

4. GUI Design • Device Diversity • Designing an abstract UI specification that is different for each platform is difficult. • The basic principles of HTML take the designer a long way toward the ideal, but not all the way • Recommendation • separate meaning (what) and presentation (how) • use style sheets • specify presentation • informational content than for interactions

5. GUI Design • Effective Use of Style Sheets • separation of presentation and content • The Web is the ultimate cross-platform system • Hardware platforms • Operating Systems • Networks • Content presented on such a variety of devices • pages should specify the meaning of the information • leave presentation details to • site-specified style sheets • user's preferences • The ability to introduce new page designs by creating a single style sheet file rather than by modifying thousands of content pages

6. GUI Design • Implementation Advice • Pages must continue to work when style sheets are disabled • do not use tricks where the same words are repeated multiple times with small offsets to create shadow effects • Do not use more than two fonts(plus possibly a third for special text like computer code) • using a lot of fonts simply because you can will result in a ransom-note look • one typeface for body text and another face for headings • use a long list of alternate fonts in the style sheet specification for a given class of text

7. GUI Design • Do not use absolute font sizes • specify all text relative to the base font size defined by the user's preference setting • text could be defined as "200 • Do not use the !important attribute to override the user's settings • Home Page design rule: more is less • the more buttons and options you put on the home page, the less users are capable of quickly finding the information they need

8. GUI Design • Cascading Style Sheets (CSS) • Hypertext Markup Language (HTML) • Basic web markup language • Styles • A collection of the attributes (font, size, bold, etc.) • Identified and named • Gives documents a ‘Common look’ • Cascading Style Sheets • A collection of the attributes (font, size, bold, etc.) • May be set in a central location to affect entire documents • Not HTML • CSS Properties (DHTML/CSS page 7) • CSS Rule • A single description of the properties for every occurrence of a specific tag

9. GUI Design • CSS Placement • Link to a CSS document • Used to affect an entire web site • Create external text file • Standard CSS rules applied in external document • File extension of .css • Filename.css • Format • <HEAD><link rel=“stylesheet” href=“filename.css”><link rel=“stylesheet” href=“filename.css”></HEAD> • Inserts the CSS into the document • Affects the entire document doing the ‘link’

10. GUI Design Style-Sheet Strategies Place style in external style sheets (.css files) Place styles in a common place (directory location) Easier to locate for updates Define a global.css style sheet Common to ALL web pages Define section.css style sheets Use with specific areas of a web page Create different .css files for distinctive uses Split the .css files into smaller files Larger files take longer to download Import/Link .css files as needed Save download time Avoid using styles directly (inline) in the tags

11. GUI Design • Presenting Text on the Web • HTML TextPros: Easy to edit Fast to download Adjusts to the width of the screen • Cons: Text control is by the visitor’s machine Limited to fonts available on visitor’s machine Text limited for special-effects • Graphic TextIs a graphic (.gif or .jpg) that has textIs a picture not textCan use any fontSlower to downloadMay not fit on the visitor’s screen • Vector GraphicEasy to changePosition itself dynamically (fit the screen)Apply special effects easilyUse any font.svg file typesNot an accepted standardCurrently Micromedia Flash is only vector graphicsRequire Micromedia Flash plug-in