Multimedia & The World Wide Web winny HCI 201 Multimedia and the www

What is important in web design? Color – give out the 1 st impression Layout – organize the content Content – the flesh, the key! Text – Important to know that the font you intend may not be fonts in user’s browsers. winny HCI 201 Multimedia and the www

Writing for the Web Reading from computer screens is about 25% slower than reading from paper Guidelines: Be concise Use simple sentences Keep pages short Use bulleted lists Break up text with headings and subheadings Match your writing style to your site's audience and purpose Proofread! winny HCI 201 Multimedia and the www

Text Background does not interrupt the text Text is big enough to read, but not too big The hierarchy of information is perfectly clear Columns of text are narrower than in a book to make reading easier on the screen winny HCI 201 Multimedia and the www

BAD Design for Text… Text that is too small to read Text crowding against the left edge Text that stretches all the way across the page Paragraphs of type in all caps Paragraphs of type in bold Paragraphs of type in italic Paragraphs of type in all caps, bold, and italic all at once Underlined text that is not a link winny HCI 201 Multimedia and the www

What happened with tiny fonts?? Most web designers are young, and so have perfect vision. Tiny text doesn't bother them as much as it bothers people on the other side of 40. Designers also tend to own expensive, high- quality monitors that are easier on the eyes. While creating a website, designers don't actually read the information on the pages. They simply glance at the text to make sure it looks great. winny HCI 201 Multimedia and the www

Maximize the Font color contrast Maximize the color contrast between the text and the background. Make the color comfortable for eyes. Do not use busy or watermarked background patterns. winny HCI 201 Multimedia and the www

winny HCI 201 Multimedia and the www

Fonts for browser: Verdana is very popular for web document now. winny HCI 201 Multimedia and the www

Problems with online delivery Pixelization winny HCI 201 Multimedia and the www

Text as Image Pros –HTML text relies on user’s fonts –Can create effects, shadows, 3D, Gradients Cons –Takes longer to download –Not searchable and cannot be copied –Difficult to change winny HCI 201 Multimedia and the www

Anti-aliasing Using intermediate colored pixels around the edge of letterforms winny HCI 201 Multimedia and the www

A simple mechanism for controlling the style of a Web document It allows you to separate visual design elements (fonts, colors, margins, and so on) from the structural logic of a Web page You can reuse it for other pages/sites Cascading Style Sheets --CSS winny HCI 201 Multimedia and the www

CSS Typographic design and page layout are specified from within a single, distinct block of code Allows for faster downloads, streamlined site maintenance, a simple change in the CSS file, you can updates the whole site’s look. Instantaneous global control of design attributes across multiple pages/sites winny HCI 201 Multimedia and the www

winny HCI 201 Multimedia and the www

Style Sheets Rules Selectors –Types HTML element tags –Attributes such as class and ID names Declarations –Property ("color") –Value ("red") winny HCI 201 Multimedia and the www

Three ways to do CSS Local Global Linked winny HCI 201 Multimedia and the www

Local Local (inline) Specific to a single instance on a page Can be used instead of tags to specify font size, color, and typeface and to define margins, leading, etc. winny HCI 201 Multimedia and the www

Local Example – This is a local stylesheet declaration. winny HCI 201 Multimedia and the www

CSS vs. HTML What can we do with CSS that we can’t do with HTML? –Control of backgrounds –Set font size to the exact height you want –Highlight words, entire paragraphs, headings or even individual letters with background colors. –Overlap words and make logo-type headers without making images. –Linked style sheets –Precise positioning –And more winny HCI 201 Multimedia and the www

Global Global (embedded) Applicable to an entire document Are defined within the and tags, which are placed in the header winny HCI 201 Multimedia and the www

Global Example – Title [DOCUMENT BODY GOES HERE] winny HCI 201 Multimedia and the www

Linked Use a single style sheet (in a separate file, saved with the.css suffix) to define multiple pages winny HCI 201 Multimedia and the www

Linked To apply to an HTML document – winny HCI 201 Multimedia and the www

Inheritance Local overrides global Global overrides linked winny HCI 201 Multimedia and the www