CHI-WEB Archives

ACM SIGCHI WWW Human Factors (Open Discussion)

CHI-WEB@LISTSERV.ACM.ORG

Options: Use Forum View

Use Monospaced Font
Show Text Part by Default
Show All Mail Headers

Message: [<< First] [< Prev] [Next >] [Last >>]
Topic: [<< First] [< Prev] [Next >] [Last >>]
Author: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Subject:
From:
Jeff Johnson <[log in to unmask]>
Reply To:
Jeff Johnson <[log in to unmask]>
Date:
Mon, 17 Apr 2006 11:46:40 -0700
Content-Type:
text/plain
Parts/Attachments:
text/plain (73 lines)
Jim Griesemer wrote:
>  With the recent focus on using CSS for positioning, I have noticed 
>more and more
>  sites falling back into a set screen width, usually the common denominator of
>  accommodating 800 x 600.

I use CSS for layout almost exclusively, and always aim for the most 
fluid layout possible.  Of course, there are situations in which 
non-fluid layout is required, e.g., data-entry forms or some Home 
pages.  But in my opinion, fluid layouts are usually preferable 
because they help minimize the need for vertical scrolling.

Using tables for web-page layout is, in my opinion, a temporary 
workaround web-designers devised to obtain the desired layouts during 
a period when CSS was not yet widely supported.  But now CSS is 
well-supported by browsers, so tables should go back to being used 
for one thing only:  displaying actual tables of data.

When tables are used for laying out pages, browsers get inaccurate 
information about what is to be displayed.  Browser for 
sight-impaired people and for small-screen devices can't distinguish 
true data-tables from table-based layout, so they can't easily 
extract the essential information to present.  A blind user will be 
told that there is a table here, when in fact most current sites, the 
table is only a layout artifact.

In contrast, with  CSS-based layout, the HTML contains only the 
essential content, and the presentation info is in the CSS. 
Alternative browsers therefore have a much easier time distinguishing 
the true content from the window-dressing.

Some web developers have told me that they continue to use 
table-based layout because they can't get the CSS to produce the 
correct layout across all of their target browsers.  My response is 
that table-layout is worse:  I used to spend *more* time trying to 
make table-layout work across multiple browsers than I now do with 
CSS layout.  I find that fluid layout is *easier* with CSS than it is 
with tables.  When I took the time -- about two days -- to learn CSS 
layout, I found that I could reduce the amount of HTML in many web 
pages by over 50%.  Bottom line: I can whip up a site much faster 
with CSS layout than I used to be able to with table-based layout.

Some web developers have argued that the most popular web-development 
tools use table-based layout, and produce static layout by default. 
True, but there are CSS-based web-development tools.  StyleMaster 
from WestCiv is one.

For an example of a fluid website layed out with CSS, see a site I 
created for a documentary photographer: http://AndePhotos.com .  My 
own consulting website, http://www.uiwizards.com is another example. 
Look at the source code and see how little of it there is; the layout 
is all in the CSS.

Some links for learning about CSS-based layout:
- http://www.w3.org/Style/CSS/
- http://www.csszengarden.com/
- http://www.alistapart.com/
- http://www.westciv.com/
- http://cois.berkeley.edu/training/CSSclass/index.htm
- http://www.meyerweb.com/eric/css/edge/

Jeff Johnson
UI Wizards, Inc.
Product Usability Consulting
http://www.uiwizards.com

    --------------------------------------------------------------
    Tip of the Day: Suspend your subscription if using auto replies
     CHI-WEB: www.sigchi.org/web POSTINGS: mailto:[log in to unmask]
              MODERATORS: mailto:[log in to unmask]
       SUBSCRIPTION CHANGES & FAQ:  www.sigchi.org/web/faq.html
    --------------------------------------------------------------

ATOM RSS1 RSS2