White Paper: Advanced Responsive Design, the Four Techniques

Designing for a broad spectrum of platforms and devices, is described as responsive design, which has become an umbrella term for a flexible and adaptable design approach, creating an accessible website on major devices.

Choosing a device strategy is about cost contra generalizations contra specialization. Each device in your strategy will lower your platform cost and increasingly demand a generalization in your design and communication approach.

But what is the technical side of responsive design and the best platform approach?

Technics

Responsive design can be divided into four technics, listed from least, to the most invasive platform strategy; flexibility, media queries, server queries and load balancing.

Flexibility

Within this term is the promise that the design will fill the screen, rendering any empty area with a styling. This is a simple OOD approach, based on a few simply and loose parameters.

Creating a responsive design only on flexibility will demand a simple and fluent design setup, a technic most responsive newsletters and landing pages are following.

This technic is easily obtained and implemented in new and existing solutions. The

Media Queries

A client side media query, is a styling rule rendered on the clients system, based upon a screen-size and resolution-condition, ruling a group of devices.

The queries can be minute changes to the general design or flow. It can hide or show elements to a specific set of devices and alter the appearance of buttons, menus and their corresponding interactions in selected device groups.

With media queries, you can simply rearrange the exciting design and match it towards different devices. This strategy often suffers from the designers technical inexperience as extensive OOD experience is need, for the best results.

Most developers are talking about media queries and flexibility, when using the term responsive design. Creating a design based on these two terms are the most desired strategy, giving you flexibility within each media query.

The technic is cost effective, offering a flexible design and communicative balance between generalization and specialization.

Server Queries

The server can act on the browsers identification, creating server side conditions targeted the accessing operating system and browser version.

This can dramatically alter any output and completely change any aspect of the design.

The biggest problem in this scenario is the inability the cache the output and is therefore not a recommended strategy in responsive design, putting stress on the servers processing and infrastructure. The architecture will often suffer from redundancy and debugging-inefficiency.

Load Balancing

A popular responsive technic, is simply re-routing you mobile users to a website-twin, based on a specific criteria, created for this one purpose, i.e.. mobile devices.

Load-balancers are your servers receptionist and are delegating your traffic inside your hosting infrastructure. In relation to responsive design, load-balancers are responsible for redirecting your users towards the optimal website, within a family of websites targeted the users criteria.

This technic will give you the ability to have completely different websites for your desktop, tablet or smartphone users, among others. This can be a necessary option, when dealing with large or inaccessible management systems. Putting a load balancer in front of such a system, can redirect your new audience towards an optimized website-twin, created for this specific target only.