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

Purposes Development Environment Style Sheets

Inline Embedded or document level document External: for global formatting

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

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

Inline takes precedence over embedded Embedded takes precedence over external Demo

Style Sheet Link Book Example

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

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

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:

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

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

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

Usability  Demonstrates good customer service  Produces bottom line results

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

 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

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

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

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

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.

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

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

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

 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

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

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

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

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

 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

Color Contrasts? Dark Background

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

 Health Hazards of Tabacco Health Hazards of Tabacco