Web design: To be responsive or not?

Benny December 14, 2011 2 comments

Did we ever anticipate mobile phones to battle computers? On the contrary, it is a well-observed fact today. What it basically means is that with technology you should “expect the unexpected.”  Through innovative gadgets like tablet computers, smartphones, net pads, etc we can access websites anytime, anywhere as and when required.  As a result, responsive web designing is gaining momentum and web designers across the sphere have started to track and emphasize its importance.

Responsive web designing in its simplest form is how your website adapts and responds according to the user environment, namely the device and actions. Bearing this in mind, we suggest three major factors that every web designer should mull over while aiming to design a responsive web page.

Fluid grids:

Conventional fixed layout designing was appreciated a decade ago, but today the scenario is different. The extensive range of screen resolutions in diverse gadgets is a matter of concern when it comes to delivering quality user experience. To obviate this concern, the concept of fluid grids has been propounded which is based on proportions rather than on pixels. Counting the screen size, the layouts automatically adjust and resize in relation to one another. The process of responsive web designing is drastically refined by fluid grids, however, on the flip side, it is not easy to interact when the screen size is thin involving multiple columns.

Flexible images:

One more important feature in responsive web designing is flexible images. Scaling down huge images in a small browser is definitely a tiring task for designers. In addition, optimizing load time is also crucial. Popular techniques  are frequently used to crop images are utilizing CSS and storing multiple image versions on a server in varied sizes. If this doesn’t solve the purpose you can conceal unnecessary images, employing media queries.  For these reasons Web designers increasingly recommend sites with minimum image loads.

Media Queries:

Media queries are logical expressions that check for media features like height, width, color, etc in relation to the device’s screen size. Eventually, with the aid of media queries you can discover the minimum/ maximum width and apply the corresponding CSS3. Crafting a media query is simple, yet to implement an efficient one, it should be thoroughly understood.

It can either be embedded within a style sheet or made external, stacked or overlapped. Besides there are other concerns like what your default CSS style is, minimum/maximum width considerations, orientation, breaking point units, etc.  As you can imagine, each condition has its own advantages and disadvantages. Consequently, as a designer, you should know the what, why, and how depending on the project and its users.

Mobile browsing is expected to overtake desktop browsing in another 3 or 4 years which means that websites should capably handle a multitude of browsers and screen resolutions.  Moreover, it is impossible to create compatible versions for every new device launched. Responsive web designing is, therefore, the one and only option!

Further reading: Fluid Grids, Responsive themes for Drupal designers,