Variable HTML

P

PapaGeek

New Member
Yes, take a look at the design of this site, but more important, look at the concept!

As you view the site, change the size of your browser window to see how it reacts.

I’ve written a JavaScript that redesigns your page based on the width of the browser viewing it, similar to Media Queries, but I believe the implementation is a lot easier. I’m going to offer the script as a free download for non-commercial use on the site.

I also wrote an SSI emulator which I am also giving away.

The site is still incomplete; there is no navigation yet on very narrow pages. That will be coming shortly.

I also plan to make a parallel site that uses fixed width templates.

I’d love to hear your comment on the site and the concept.

http://www.variablehtml.com
 
P

PapaGeek

New Member
I should add something here before you compare this to Media Queries.

The Media Query CSS links are not compatible with older browsers. You have to use a separate set of links inside “IF” statements in the head section – if this is IE8 or greater use these CSS files – if it is not IE8 or greater use these CSS files. Very ugly and only about 50% of the visitors will have the latest browsers.

Variable HTML runs strictly off of JavaScript which 95% plus of the browsers support. It also uses a single “stylesheet” definition which is the default for browsers not supporting JavaScript. The remaining styles are “alternate stylesheet”. If the script does run, which it will over 95% of the time, it will redefine the style sheet “rel” tags to activate the proper one. No “IF” statements are needed!
 
Last edited:
P

PapaGeek

New Member
Thanks Leroy, I didn’t realize that CSS had that feature. Can you point me to some documentation on how to test for various page width to control display of columns?

And yes, this one is a fluid width design. I'm going to create a parallel site to demonstrate fixed width designs.
 
P

PapaGeek

New Member
Phreaddee said:
http://www.alistapart.com/articles/responsive-web-design/
Click to expand...

The article you mentioned deals with Media Queries, and I do agree that they are a great concept. The problem is the implementation.

As the article states, you replace the media tag with lines like:
media="screen and (max-device-width: 480px)" and every stylesheet is defined as rel=stylesheet


If the visitor has a browser that supports media queries it will have the same result as the script I wrote. The problem comes in with browsers that do not support media queries, which is currently about half of your visitors. They will see the entire series of media tags and do one of two things: They will recognize the word screen in the media tag and activate every stylesheet at the same time, or they will not recognize the word screen and not activate any of your stylesheets. Again, they are using older browsers that do not recognize the query portion. That is why they need two sets of CSS links, one for the list of browser level that support the tags and another for those that do not.

By the way, how do you write that “IF” statement that says if this is ie8 or greater or ff3.5 or greater or whatever chrome and opera levels … use these stylesheet links. If this is not ie8 or greater etc use these stylesheets. And of course you have to change all of your if statements as other browsers support media queries.

As I stated before, the concept is great but the requirement to use those ugly “IF” statements so your pages don’t break on older browsers is a really horrible implementation.

From a purely academic point of view, everyone should be using the latest technology; from a business point of view you can’t show garbage to half your visitors.
 
You must log in or register to reply here.
Top