By Ané-Mari & Marc Peter

Neuer Wein in alten Schläuchen

...and I think now the world is ready for it, now it is called Responsive Web Design (RWD).

Originally trained on grids in print, my head boggeld when I started reading about rule-based design. It is very difficult for graphic designers to 'let go' - the position and behaviour of every pixel is controlled. 

The difference between rule-based design previously and the emergence of RWD is the methodology and available technology. Rule-based designs simply scale down, retaining their proportions.  With the plethora of devices, a website's design needs to not only 'fit' onto screen, but in most cases function slightly differently to cater for differences the platform throws at you when viewing a website on a computer monitor or smartphone.

Over the years, we started to design and programme different skins for the most common screen sizes or uses - originally this was simply a CSS 'print' skin so that a web page had good formatting on an A4 black and white paper.

Where clients had time or budget and mobile phones started to become internet enabled, a mobile skin was added. Using a 'sniffer' to detect the browser, the mobile website version would be served, normally showing the website content in a single column design with optimised positioning of the navigation buttons. The first website on-IDLE developed with a mobile CSS version was Leister AG. Elemental Comms is the most recently launched website with a mobile skin.  

leister.png

on-IDLE's own, brand new website, was the perfect opportunity to 'play' with the design and programming of a full responsive design. 

The layout design is optimised for 3 sizes:
980 Pixel for computer screens
768 Pixel for tablet devices (e.g. iPad), and smaller screens (yes, they still exist...)
640 Pixel for smartphones (Android, iPhone, Nokia, etc.)

To have a play yourself, on a computer screen, drag the bottom right hand side corner of your browser smaller until you reach approximately a 'mobile' screen size - see how the layout shifts to accommodate the resolution?

Responsive Web design

By implementing a fully responsive web design, we have the flexibility to cater for the 'lowest common denominator' screen resolutions on the multitude of devices on the market.

The sweet spot? If a new, popular screen resolution hits the market (a new tablet, a new smartphone, an as yet to be designed device), a simple adaptation of the CSS and interface design will cater for the new size without having to create a separate skin or whole new website version. 

RWD will not be suitable for every application, but for now, it really is the best thing since sliced bread for a designer who wants to control the design, but make sure it works equally well on every device the website will be viewed on. Expect a huge impact on online shopping and mobile marketing. Time to dust off those CSS books...

Make Comment