Designing with Style
If you are familiar with media=”print” stylesheets, then you already
understand the basic concepts of Variable HTML. For those who are not
familiar with the concept, I’ll give a brief description.
Media = print
A page is printed at 96 pixels per inch, our boring numbers page
explains why. The default left and right
indents for older versions of IE are 3/4 inch. The printed area is
only 7 inches or 672 pixels. Even at minimum 1/4 inch margins, an 8
inch page would be 768 pixels wide. But, most of today’s websites
are designed at widths of 1,000 pixels or more.
Many of today’s browsers compensate by shrinking the page, no
matter how wide it is, until it fits on the printer, even to the
point where you need a magnifying glass to read the results.
A better way to handle this is to create a print media stylesheet
that will hide things like the site navigation or advertisements, or
it might change the width of the columns of text. You are basically
redesigning the page to make it fit on the printer.
Media = screen & screen & …
The web is full of opinions on the proper design width for your
website. Every one of the answers is based on a single page design.
Each site will tell you the percentage of monitor resolutions that
will visit the average website.
You do not have to look very closely to see that not one of those
sites is telling you that 100% of the visitors will have just one
monitor resolutions. The reality is that visitors will view your
website using everything from cell phones to high definition
television sets. There is no single page design that looks good
and is readable on every possible device.
Variable HTML is an expansion of the media = print design concept.
It allows you to create a series of CSS files to redesign your
pages.
How to use this website.
|
