Responsive Web Design: Myths and Reality
More than ever, mobile devices including cellular phones, smartphones, netbooks, and tablets have become increasingly popular for web browsing. Until responsive design was introduced, sites, that were designed for PC displays using different browsers such as Firefox, Chrome, and Internet Explorer, were unreadable on mobile devices. Today, however, mobile web access is not only possible, but also easy and stress free for sites that use responsive web designs. These designs have adjustable layouts and scalable images that can adapt to any type of mobile device settings. With a responsive website design, companies can expand the reach of their businesses and websites to targeted traffic.
A fluid grid is one of the key ideas behind a responsive web design. This design allows layouts to fit or adapt to any screen size, from PCs to tiny mobile devices. By equally resizing in width, all the elements in a given layout will be visible in any type of device. Fluid grids work hand in hand with CSS3 media queries in responsive web designs. The media queries are supported by a wide selection of browsers, and they basically enable you to collect information or data from the site user. CSS styles can then be conditionally applied using the collected data.
Without a responsive website design, a website owner will have to give prospective visitors with alternative URLs for accessing the web using different devices. This could be inconveniencing and time-consuming for many users who are seeking quick and easy access to online information. With a responsive design, you will only create your website once, as the designing process includes formatting the site to be compatible on different platforms and operating systems. All these are made through fluid grids, media queries, and flexible layouts.
There are many advantages for having a responsive web design. You will not have to supply your prospective visitors with multiple URLs for accessing the web on different devices. Multiple URLs means multiple websites. Maintaining all these websites could be tedious and very expensive. Also, a responsive web design keeps you from spending extra money on designing multiple websites for supporting different devices. When you want to make changes to your current website, having a responsive web design will allow you to make alterations to only one design. A mobile web design, on one hand, will need you to make specific changes to all the multiple websites you own. Building a responsive web design also increases your chances for greater ROI, since your website will become uniformly user-friendly across different devices.
However, a responsive website design is not without its limitations or disadvantages. In certain cases, a responsive design will need you to download unnecessary markup. This will prolong your download time and take up extra server space. Also, having designs that are specifically built for certain mobile devices have in some cases proved a better option to having a responsive design.
Some site owners attempted to make their sites display acceptably on smaller, handheld devices, usually with limited or no success.
Eventually, as the need to display properly on these devices was obviously taking on greater importance, some went so far as to build additional pages – sometimes even duplicating their entire site – so they could capture that growing share of the market.
This created other problems, of course. The point that many were missing is that they were approaching the issue from the wrong direction.
Set aside entirely the notion of a separate site for mobile devices… that’s a poor workaround, at best. The real problem is created by building a complex site, intended for display on PCs, and then trying to “dumb it down” for mobile displays.
The Proper Approach
Doesn’t it make more sense to build a basic site, and then find a logical way for it to suit every display?
That’s exactly what responsive web design accomplishes. Using HTML5+CSS3, augmented by media queries, a basic website design can be made to display properly on any size and style of device, from a PC (2560px) down to an iPhone (320px).
Media queries, coupled with a fluid proportion-based grid, allows the site to query the display type and max-width, which then allows the CSS3 to tailor the display accordingly according to the device. Shifts from 3 columns to 2 columns are implemented fluidly and transparently, with displays optimized for the characteristics of each device.
What is Gained by Responsive Web Design?
Essentially, you achieve an adaptive design by making your CSS override your standard layout structure, based upon the viewport in the user’s hand.
This may seem like an over-simplified explanation of what a responsive web design does, but it’s really that simple. And the steps to harness this capability really aren’t that complicated, either. They include:
Encompass your header, content, widgets and footer in a page-wrap container – in this fashion, the width of that container can be modified by the CSS3 to suit different viewport widths. This gives your CSS3 a nice neat package it can resize, as needed;
- Reset of the HTLM5 elements to block – this establishes the block of elements to be handled;
- Building the main structure CSS – this sets the width and float for the various elements within the block;
- Setting up Media Queries – these determine which CSS3 set to follow, depending upon the target device characteristics;
- Setting up Fluid Layout – this allows you to set the percentage of width of individual elements in the main structure CSS which should be applied to specific displays.
- Width of images and embedded videos – here you can set the percentage of the display’s maximum width that an image or embedded video may occupy.
The end result is a fluid display which will appropriately fill the area allowed on essentially any mobile device, while the basic design still displays as intended on a PC.