Tài liệu Speaking in styles- P7 pptx

278

SPEAKING LIKE A NATIVE

THE LAST WORD

A CSS framework is a library of generic styles that can be easily

applied to most Web designs. Th ey come in the form of pre-built

external style sheets that package ready-made design solutions for

common elements such as headers, columns, footers, and sections.

Using a CSS framework allows designers quick and easy access to

well tested, cross-browser compatible, and standards-compliant

CSS code. Th is tends to speed development of better code.

On the downside, when you use a CSS framework you import

code that you may or may not use, but which will increase

download time. In addition, you are relying on pre-built code

that might limit your design choices. Th ere are a wide variety

of CSS frameworks, so choosing one will depend on what you

need it to do.

Here are some popular CSS frameworks to get you started:

Blueprint Provides a solid layout grid, typographic controls,

and a style sheet for printing. Link: blueprintcss.org

Emastic Uses ems to create elastic layouts.

Link: code.google.com/p/emastic

Typogridphy Uses 12- and 16-column grids at 960px wide

and typographic style rules for “creating vertical rhythm.”

Link: csswizardry.com/typogridphy/

YAML “Yet Another Multicolumn Layout” provides fl exible

multi-column layouts that are easy to edit and modify.

Link: yaml.de

YUI Grids Yahoo’s CSS Grids framework provides fi xed and

fl uid layouts. Link: developer.yahoo.com/yui/grids

CSS Frameworks

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

279

Creating Your Own

CSS Frameworks

If you are working in an environment where multiple sources

are creating your Web content, you need a common library of

styles. To facilitate a consistent layout, you can create your own

CSS framework, oft en simple editorial styles, that the group then

shares and can apply to their content. Th is also helps prevent

writers or editors from adding inline or embedded styles when

they need a particular style.

Beyond standard CSS best practices, there are a few things to

keep in mind when creating your own CSS framework:

Use a class name prefi x to ensure that your framework

will not confl ict with other classes.

Add a three- to six-letter prefi x before all framework classes

to ensure they do not confl ict with other styles.

Keep the rules as generic as possible.

Th ese styles should provide bare-bones styling so as not to

interfere with other site-wide styles.

Provide styles for common layout elements such as

columns, drop-boxes, article excerpts, small print, and

image captions.

Framework styles should be used primarily for layout and for

creating commonly used editorial styles.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

280

SPEAKING LIKE A NATIVE

THE LAST WORD

CSS for Other Media

Mobile Devices

Mobile devices are a popular way to access the Web, but not

particularly good for displaying Web pages designed for larger

screens. Fortunately, CSS allows you to set style sheets specifi cally

for mobile screens, but you need to keep a few things in mind

when creating mobile designs:

Use a single column with no horizontal scrolling.

Most mobile devices have a portrait rather than landscape

orientation, which limits horizontal design.

Provide constant top level navigation and hide

secondary navigation.

Many mobile devices have little or no built-in browser navi￾gation, so the designer needs to include back buttons as well

as top level navigation. You do not need a complete index of

the site, though, since mobile devices oft en require the user

to navigate through all links in order to select one of them.

Minimize the use of foreground and background images.

Although images might be a necessary part of the content,

it’s better to provide links to larger images and eliminate any

background images altogether. Th is makes pages faster to

load and easier to read on small screens.

Keep the design simple.

Simple, well-structured pages will be much easier to use on

small mobile screens.

Setting the media

type is explained

in the “Media” sec￾tion of Chapter 5,

“Semantics.”

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

281

Print

Viewing a printed Web page is a very diff erent experience than

viewing it on a screen (even a small screen). Paper, by its very

nature, is not hyper-textual. However, paper is more portable and

cheaper than a computer, and many of your visitors will opt to

print Web pages rather than reading them on the screen. To that

end, you should adapt your designs for print:

Hide navigation and ads.

No matter how hard you press on the piece of paper, it will

not jump to another piece of paper. So all linked elements

should be hidden by using display: none.

Consider colors and images carefully.

Remember that what looks good on the screen doesn’t nec￾essarily look good when printed.

Do not rely on background images for layout or bullets.

Many people will turn background images off , so do not

assume those images will print.

Use point sizes for font sizes.

Although not preferred for screen layout, point sizes are per￾fect for print.

Allow maximum width for important content.

Columns on printed pages should allow the maximum read￾ing area for important content.

Display custom content such as link URLs and footers.

Since the reader may not have the URLs listed, set up your

pages to list any link URLs either at the end of the article or

next to the links in context.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

282

SPEAKING LIKE A NATIVE

THE LAST WORD

CSS Best Practices

Th roughout this book, I have attempted to present the vast range

of techniques possible with CSS, knowing that the future of

Web design with CSS is not in what we know how to do now,

but in what we will learn to do in the future. Th at said, there are

many well-tested techniques that are widely accepted as CSS best

practices. Many of these best practices have more to do with the

limitation of the medium and browsers than they do with good

design practice, but knowing them can speed your development

process and lead to better designs.

General

Use external style sheets.

Th e power of using CSS comes in its ability to make a single

change that eff ects an entire Web site. Th is power is only

possible, though, when styles are collected into external style

sheet fi les.

Use <link> for speed and @import for fl exibility.

@import has the advantage that it can be used equally

well in both HTML documents and external CSS fi les.

Unfortunately there are issues in IE—styles imported using

@import will not load until aft er the content, causing a delay

in page loading. If you notice problems with pages loading,

use <link> instead of @import.

Link to CSS for screen, print, and handheld media.

CSS should be used to tailor the content for each output

media. Designers need to consider how the page will look

when printed or viewed on handheld devices.

External style sheets

are explained in

“Where to Put Style

Rules” in Chapter 5,

“Semantics.”

Screen, print, and

handheld media are

explained in“Media”

in Chapter 5,

“Semantics.”

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.