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:

  1. The background design can exist in different sizes or not at all.
  2. The advertisements can appear in their own column, under the navigation, or not at all.
  3. The content can be displayed in either one or two columns.
  4. 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.

A-         A+

Table of Content

Variable HTML website, maintained with MySSI    
Copyright © 2012, BitWare Solutions