1. Gayle J Yaverbaum, PhD Professor of Information Systems Penn State Harrisburg

3. Purposes Development Environment Style Sheets

4. Inline Embedded or document level document External: for global formatting

5. 1.Create a.css file with style information 2.Reusable 3.Text file with a.css extension 4.Stored on server where.html file is located 5.Each entry starts with: a. an xhtml tag or b.special tag referenced from the.xsl file 6.Document is linked via an xhtml command External File

6. CSS and XSL  CSS: styles HTML & XML documents.  XSL: transforms documents.

7. Inline takes precedence over embedded Embedded takes precedence over external Demo

8. Style Sheet Link Book Example

9. uUse an external file for the primary design. uWhen necessary, override attributes within the specific HTML tag. Begin to Use in all Work

10. Good screen design  Well-organized information  Well-placed items  Well-chosen graphics  Well-designed icons and buttons

11. Contrast elements on the screen Make different categories/issues different Bring out key elements Make lesser elements less vivid Creates dynamic situations Repeat design throughout Provides consistency Creates unity Group Related Elements and separate others Align Items that form a group Screens:

12. Two-level Hierarchy indentation contrast Alignment connects visual elements in a sequence

13. Screen Resolution  Most users have monitors configured at 800X600 pixels or 1024X768 pixels.  May want to place entire page in a table and width set to a percentage

14. Usability  Usability is the “effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.” – International Standards Organization

15. Usability  Demonstrates good customer service  Produces bottom line results

16. Categories  Navigation  Text  Graphics and Animation  HomePage and Content

17.  Provide good graphical navigation and interactivity with links  Intuitive navigation  Appear in the same place from screen to screen.  Visible site structure on every page

18.  Groupings of 7–9  Needs to be intuitive  Drill-down?  Sequential menus?  Search engine?  Does not hit dead ends  Acceptable accessibility for handicapped

19. Bolding, italics for emphasis (not ALL CAPS) Only links should be underlined High contrast with background Align left

20. Well-organized information:  Leave plenty of “white” space  Do not crowd, clutter, or be text- heavy  Is easily interpreted or scanned  Is “chunked” into bite-size pieces  Presents one topic per screen or use menus  Presents data in tables  Use column formats to create interesting pages

21. Well-placed items?  Important things go at the top and on the left.  Top-left is prime real estate.  Elements should line up.  Show appropriate relationships between items.

22. Fonts can CLUTTER  Don’t use a lot of different type faces and sizes or colors of text. It can really make searching the information difficult  Use color to highlight or draw attention  For large rooms, do not use fonts smaller than 32 pts  Text must be readable  1-2 typefaces on a page  1-3 sizes maximum

23.  Size  Determine how the screen will be viewed  As large as possible  Most legible on screen:  Georgia  Tahoma  Verdana Fonts

24. Content  Continually update  Provide useful information  Write for readability  Write for scannability

25.  Don’t force users to filter out unnecessary information.  Outdated content can undermine the integrity of the rest of the site or message.  People will begin to question the trustworthiness of information if language is over-hyped or showy.  Keep Content Current ABC NBC

26. HomePage  Links are extremely critical  Prefer text-based links  Change color for visited links  If there is a scroll, have links throughout the page

27.  Are consistent with the overall theme  Support and do not distract from the content  Are easily interpreted

28.  Graphics/colors  Need to control size (MB)  Maximum color contrast best  Use color for grouping information (Gestaldt)  Animation  Why?

29.  Provide good contrast with the text for readability  For example:  Dark text on a pastel background or  dark blue background with white text

30.  Color Blindness should be taken into consideration  Avoid red lettering  Use video and audio sparingly  Place images above or below fold  Cultural colors may differ

31. Color Contrasts? Dark Background

32. Animation  Are consistent with the overall theme  Support and do not distract from the content  Are easily interpreted

33.  Health Hazards of Tabacco Health Hazards of Tabacco