Responsive Design For Old School HTML Coders

The older browsers slowly fade away and while the German statistics site Webhits.de still sees a 40ish % market share for the IE with version 7 or lower, Google analytics shows a massively decreasing amount of older Internet Explorer versions:

browsers feb. 2013

and it is good to know that the amount of version 7 or lower reaches now a point where you should focus on creating pages fully in HTML5 and CSS3:

IE Usage Feb. 2013

So, it is safe to say: there are now more users around, surfing on their smartphone or tablet than users with an IE7 or lower.

If you are still using your old HTML styles and your way to develop you did 5 years ago: it is time to sit down and learn. I am now finished with my first round of websites that are fully RESPONSIVE and thought I share some infos with the hardliners:

Responsive Design

Responsive Design means nothing else than creating a HTML page the way it is really usable on any modern device. By modern, we talk iPhone 3 and older. That is done by focusing heavily on the DIV elements in your pages and applying a style sheet that “recognizes” the display width of your viewing device. You arrange every piece of information in a way it “floats” down or disappears on smaller devices. What is left is the core information and functionality on the smallest device addressed.

HTML5 & CSS3

The DIV element of HTML pages is older than HTML5, so basically you CAN design still with only the elements you are using for a few years now, but the good things with HTML5 are the tags for structured data like <article> and the like. Google loves that and it makes your site better anyhow.

While we are trying to bring our flagship Tradebit to the new generation of interface design, we have used the simplest trick out there:

@media only screen and (min-width: 320px) {
 body {
  zoom: 0.8;
 }
}
@media only screen and (min-width: 760px) {
 body {
  zoom: 0.9;
 }
}

We just zoom the content up and down depending on the size of the screen. CSS3 does allow that and recognizes the targeted system.

And that is the also basically the trick for responsive design in the first place: Working with style sheets depending on the screen size of your user. The problem with older sites is, that changing INTO that technology is a pain in the butt. A redesign today IMHO must consider the new approach to succeed.

For you real graphic designers and detail loving developers it also means: not everything is possible if you want a barrier-free site. Creating a list of DIVs to hold the information and representing your company CI can be impossible, if you want to keep it simple.

2 thoughts on “Responsive Design For Old School HTML Coders

  1. You can write responsive code that will run in older IE versions. Have a look at the modernizer project as well as the Respond project (https://github.com/scottjehl/Respond). You can find most of this stuff all bundled up at HTML5 boilerplate project (H5BP). There is a link to that project from http://www.initializr.com/ which is another great resource.

    We’ve been converting sites like crazy the past few years. One of these days we may even convert our own 😛