How Variable HTML™ Works
The basic concept of Variable HTML™ is actually quite simple.
Create a numbered series of cascading style sheets and a list of
browser widths at which to change from one style to the next.
The pages of this website, or should I say these websites, were
designed to demonstrate the features of Variable HTML™. Yes,
there are actually two parallel sites, one a fluid design, the other
a fixed width design. You can switch between the sites by following
the links at the bottom of each page.
These sites are in no way examples of the ultimate
website design. There are literally hundreds if not thousands of
ways to develop a template for your website, but the basic concept
for each design is generally the same. You want to present the
variable "content" of each page within a consistent "context".
Using this site as an example, we have a number of choices we can
make about how to design each template for our pages:
- The background design can exist in different sizes or not
at all.
- The advertisements can appear in their own column, under the
navigation, or not at all.
- The content can be displayed in either one or two columns.
- The navigation can appear in its own column, at the top of the
content, or not at all when printing the pages.
If you were designing without the use of Variable HTML or Media
Queries you would have to choose a single design for your template
and then make one decision for each of the four options just
listed.
Variable HTML™ is an adaptive website design script. It senses the
width of the browser window that is attempting to display your pages
and then chooses the design that gives each visitor the best
possible impression of your company. You control each design and the
page widths at which they are used. You also control which design
is to be used for the 2 to 3 percent of visitors that do not support
scripting.
A little more detail!
The best example of how Variable HTML™ works is to view the
source of this page. The head section of the HTML file contains the
following lines:
<link media='screen' href='w0.css' type='text/css' title="w0" rel='alternate stylesheet' />
<link media='screen' href='w1.css' type='text/css' title="w1" rel='alternate stylesheet' />
<link media='screen' href='w2.css' type='text/css' title="w2" rel='alternate stylesheet' />
<link media='screen' href='w3.css' type='text/css' title="w3" rel='alternate stylesheet' />
<link media='screen' href='w4.css' type='text/css' title="w4" rel='alternate stylesheet' />
<link media='screen' href='w5.css' type='text/css' title="w5" rel='stylesheet' />
<link media='screen' href='w6.css' type='text/css' title="w6" rel='alternate stylesheet' />
<link media='screen' href='w7.css' type='text/css' title="w7" rel='alternate stylesheet' />
<link media='screen' href='w8.css' type='text/css' title="w8" rel='alternate stylesheet' />
<script language="JavaScript" src="VariableControl.js" type="text/javascript"></script>
<script language="JavaScript" src="VariableHTML.js" type="text/javascript">& lt;/script>
Each style sheet creates a different design template for the
display of the pages. Style w5 will be used for any browser that
does not support JavaScript.
You don’t need to know JavaScript to create the Variable Control
script. It only contains a few "var" definitions that tell the
browser how to handle your page designs. Here is the var line that
defines vBr, the variable breakpoints, which tells the VariableHTML
script when to switch from one stylesheet to the next. Under normal
use, only one stylesheet will be active at a time.
var vBr = [465,609,800,970,1060,1131,1225,1700,0];
The result is that your website will automatically adapt to the
size of each visitor’s browser window and give each visitor the best
possible representation of your message that their individual
browser can view.
|
