Cascading Style Sheets CSS for Layout

1
Cascading Style Sheets (CSS)for Layout

• Jerry Lau
• Jerry.Lau_at_noaa.gov
• November 14, 2007

2
Why CSS for layout?

• make your pages load faster
• lower your hosting costs
• make your redesigns more efficient and less
  expensive
• help you maintain visual consistency throughout
  your sites
• get you better search engine results
• make your sites more accessible to all viewers
  and user agents

3
Problem with using tables

• mixes presentational data in with your content.
• This makes the file sizes of your pages
  unnecessarily large, as users must download this
  presentational data for each page they visit.
• This makes redesigns of existing sites and
  content extremely labor intensive (and
  expensive).
• Table-based pages are also much less accessible
  to users with disabilities and mobile devices.

4
CSS and structural markup

• Modern browsers are much better at rendering Web
  standards.
• By using structural markup in our HTML documents
  and CSS to lay out our pages, we can keep the
  actual content of our pages separated from the
  way they are presented.

5
Redesigns are easier and less expensive

• By removing presentational markup from your
  pages, redesigns of existing sites and content is
  much less labor intensive (and much less
  expensive). To change the layout of the site, all
  you need to do is change the style sheets you do
  not need to edit the pages themselves at all.

6
Bandwidth isn't free

• Using Web standards reduces the file sizes of
  your pages, as users no longer need to download
  presentational data with each page they visit.
  The Style sheets that control layout are cached
  by viewers' browsers.
• Reduced file size means faster loads and lower
  hosting costs.

7
oceancommission.gov

• Table layout
• 22 request
• Page size 28KB
• CSS layout
• 6 request
• Page size 9KB

8
Write once, use anywhere, for everyone

• Using Web standards makes our pages much more
  accessible to users with disabilities and to
  viewers using mobile devices to access the Web.
• Visitors using screen readers (as well as those
  with slow connections) do not have to wade
  through countless table cells and spacers to get
  at the actual content of our pages.
• In other words, separating content from the way
  it is presented makes your content
  device-independent

9
celebrating200years.noaa.gov
10
celebrating200years.noaa.gov
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
Links

• Why tables for layout is stupid problems
  defined, solutions offered
• http//www.hotdesign.com/seybold/index.html
• CSS Zen Garden
• http//www.csszengarden.com
• maxdesign tutorials
• http//css.maxdesign.com.au
• NOAA 200th Celebration
• http//celebrating200years.noaa.gov