Class Notes (809,510)
Canada (493,754)
CP202 (46)


8 Pages
Unlock Document

Wilfrid Laurier University
Computer Science
David Brown

11/12/2012 7:03:00 PM Text  Second only to having good content, good text formatting is key to good website design  Use of text on web pages is similar to use on paper - many of the same rules apply  Major difference - paper is not dynamic; web pages can be resized  Unlike paper the Web is a fluid medium - text must be able to flow and change with the browser that displays it  Designers can force a 'look' by using images to display text o This is a very bad idea for large chunks of text Text Design  Leave the font up to the user unless choosing a font for emphasis o Then use a concise, easily readable font with fallback options  DON'T SHOUT - use all uppercase sparingly  User horizontal rules to separate sections of a page  Use strongly contrasting colors for background / foreground o use an RGB color wheel for color contrasts o white on black may not print properly o red vs. green may be a problem for those with red-green blindness o remember that color printing can be expensive  Be consistent in use of headers and headings o Clearly distinguish between different levels of headings  Follow paper conventions for things such as references and bibliographies  Create a separate style sheet for printing purposes o hide navigation sections o do not print white on black o hide background images and colors  Use the same class names but apply different properties better suited for printing or excluding  For a static, restful design, balance elements on the page o put similar margins on both sides o make the page symetrical  For a dynamic design use asymetry o balance text against white space instead of other text  Contrast draws the eye to important elements o contrast fonts with different sizes, shapes, position, weights and colors o contrast headings and images with different sizes  Harmony is the opposite of contrast and is used for elements of equal weight o use similar shapes, sizes, color and style for items of equal importance  Examine a layout for both: o what stands out - is it a useful contrast or just jarring? o what doesn't stand out - is it in harmony or just boring?  Have someone else examine your design o Do they share your opinion of your text layout? o Do they have any accessibility problems you have not dealt with? o Do they see the same contrasts and harmonies?  Don't use graphics if you can do it with text o text is smaller and loads faster o text can be indexed by search engines Color  Color is defined differently in different media (i.e. screen vs printing)  Computer video cards use RGB (Red Green Blue) combinations to represent colors  Different combinations of red, green, and blue create different colors o 'all' colors becomes white o 'no' colors becomes black Primary Colors  Primary colors result from using only one the primary RGB colors while keeping the other two colors at 0. These colors are: Dithering  Dithered colors are colors made up of a combination of other colors that can be displayed directly  In the example, red and blue produce violet o the smaller the pixels the better the color display Color Schemes  When using a color scheme pick one color to be dominant and let the other colors be complementary to it - use the subordinate colors for headers and, titles, sidebars, lines and rules, boxes, etc.  Analogous: o colors near each other on a color wheel  Complementary: o colors opposite each other on a color wheel  Triadic: o three colors that form an equilateral triangle on a color wheel  Split-Complementary: o uses two analogous colors and a complementary color  Tetradic: o uses four colors in two complementary pairs  Square: o uses four colors evenly spaced around a color wheel Usability  A usable website is: o Easy to learn o Efficient to use o Memorable o Easy to recover from errors o Pleasant to use o Useful  Web pages should be self-explanatory  If the user has to think about how to use the page, it's a poorly designed page XHTML  Extensible HyperText Markup Language  XHTML is a combination of XML and HTML What is HTML?  HyperText Markup Language  the standard publishing language of the World Wide Web o specifies a small set of structural and semantic tags for authoring relatively simple documents o supports hypertext and multimedia Why XHTML?  Stricter enforcement of markup rules than HTML  Forces separation of document layout from its structure with style sheets  Easier to introduce new tags in XHTML  XHTML is a independent standard  XHTML integrates other XML languages such as SVG and MathML easily XHTML versus HTML  XHTML requires lowercase tags  XHTML requires quotes around all attributes  Tags cannot be intertwined in XHTML  XHTML requires DOCTYPE declaration  XHTML tags structure rather than layout Bookmarks  Long documents may need internal links to make navigation easier, as in: o Tables of contents o Lists of topics o Different content types  By referencing a bookmark a link can jump directly to that point on a web page Hyperlinks  Hyperlink address can be absolute or relative o Absolute addresses start with http and include the address of the website as well as the destination web page o Relative addresses leave off the website address - pages are assumed
More Less

Related notes for CP202

Log In


Don't have an account?

Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.