CSS: Renegade Rehabilitation - Page 7
September 25, 2002
Because the browsers took an early adoption to CSS, designers have plunged to
use the power of this technology in Web design. That's a good thing. Due to
the shoddy implementations of CSS, practical use was years away until today. Now
we can start shedding the old habits thanks to standards-based browsers from the
major browser vendors, but you will need to know a couple of things:
-
Forget how you used to develop Web pages in the traditional "HTML
Renegade" fashion.
Just so there isn't confusion, this is what you will be giving up
for contemporary Web design:
Single pixel GIFs for positioning
HTML tables for page layouts
Non-breaking spaces for leading, propping table cells
The ability to put important text into images
Framesets
If you've built for the Web before through traditional "HTML
renegade" methods, you will need to reinvestigate HTML.
Your content shall be clean of excessive markup that's purely for
visual presentation, such as slicing images and placing them into an HTML
table.
Take the time to learn CSS. Buying this book is a good start; however,
you must also try reading the specification that the W3C set (see
http://www.w3.org/Style/CSS/)
or Eric Meyer's Cascading Style Sheets 2.0 Programmers Reference
(McGraw-Hill Professional Publishing, 2001).
Validate your markup against the spec during the development of your
Web site. Valid code will allow your content to be compatible with browsers that
follow standards and for browsers that haven't been released
yet.
HTML, the markup language that was used to make most of the Web pages in the
1990s, is actually an implementation of SGML. To the average Web designer, SGML
is not that all that interesting. Designers should know that SGML depends on
having documents be very structured. The root in HTML is structured documents.
Just because you can code malformed documents doesn't mean it's the
right way.
Why bother with structured content? Well, forward compatibility is one
reason. Forward compatibility is the ability to mark up your content in a
manner today so that it will ensure proper display in future browsers.
If you use W3C recommended markup, in theory you won't need to
fear browser vendors' extensions. As Web builders, we generally hope that
the W3C and browser manufacturers keep backward compatibility as a primary goal
as they work on refining and creating Web technologies. It's not a perfect
situation to be in, but your Web sites will be in a better predicament for
following W3C recommendations than not.
By following W3C recommendations, you will save time and money in future
redesign costs. If properly set up, revised CSS will automagically update your
site's appearances faster than a competent text editor can search and
replace.
Also, remember the Twinkie sites? With preformed cake shells that are common
in such sites, you run into another problem. Often, you will need to place "body
copy" into text-area form fields (see Figure
1.16). The inherent context of marking up the content in HTML is lost when
you're using systems like these. The integrity of the site is at the hands
of the people who might not know how best to maintain the site.
Figure 1.16
Yahoo!'s GeoCities page builder asks for content through a Web form.
In addition, by producing your content in valid HTML or XHTML and applying
the style through CSS, your pages will be more accessible to people who have
disabilities. If you run a Web site for an American government and an
American-funded agency, it's more than a sensible approach to your Web site
project to follow the Americans with Disabilities Act and its Section 508.
It's the law in the United States.
Content that is trapped in HTML that has been marked up in traditional Web
design methods will not be able to be leveraged down the road when changes in
browsers or Web technologies occur. In theory, structured content that takes
advantage of CSS will be able to take advantage of these changes, like future
versions XHTML or CSS allowing for greater control of the page layout and style.
By using Web standards, you have a way to update the content more easily than if
you have used single-pixel GIFs, GIFs for text, or numerous nested tables.
CSS: Renegade Rehabilitation - Page 7
Designing CSS Web Pages
Content Structuring Exercise - Page 8
|