Responsive Web Design: One Size for All Devices
With the increasing number of smart phone users, its becoming difficult to ensure that the website gets a good response from the target audience. One way is to create mobile specific website, a separate website, designed specifically for the smaller screens, with less images and text, and to allow people to get the information they’re likely to be looking for, faster. Building such mobile compatible websites is the latest trend set.
Now, as the number of tablet users is increasing each day , should we provide one more option of a tablet specific website? And what about the fast evolving smart TVs with 50 – 60 inch screens? How do you ensure compatibility of your website with these devices?
Yes, each day, the number of devices, platforms, and display systems, that need to work with your website, is growing rapidly. To provide device specific websites across the range of devices, is not feasible. The ideal solution, here, is to have one website that fits all, from a tiny Smart Phone to giant Smart TV, from a Desktop PC to a Tablet.
Responsive Web Design is the answer to this. It is the concept of developing a website design, in a manner, that helps the lay out to get changed according to the user’s screen resolution. Unlike the traditional Mobile Specific Website design, where a separate URL is created for mobile devices, serving a different set of HTMLs, sites that use responsive web design serve all devices on the same set of URLs, with each URL serving the same HTML, to all devices and using just CSS to change how the page is rendered on the device. For example, the RWD concept allows for an advanced 4 column layout, 1292 pixels wide, on a 1025 pixel width screen, that auto-simplifies into 2 columns for smaller screens. Also, it suitably fixes into single column on the Smartphone and computer tablet screen.
Responsive web design has multiple advantages, including:
- It keeps your desktop and mobile content on a single URL, making it easier for your customer to bookmark, share and interact.
- Users, across a broad range of devices and browsers, will have access to a single source of content
- Easy to read and navigate, with a minimum of re-sizing, panning, and scrolling
- Search Engines can discover your content more efficiently. Search Engine crawlers can crawl a page with the same user agent, efficiently retrieve and index all the content.
The various technologies and design patterns that are used today for Designing Responsive Website:
- Flexible Grid: A layout, where each of the element is sized in relative proportion to its container. As the container resizes, all the elements (including fonts) auto-resizes accordingly. Check here (http://cssgrid.net) how flexible or fluid grids work.
- Flexible Images: Image that resizes proportionally, depending on the width of its container. Check here (http://clagnut.com/sandbox/imagetest) how flexible or fluid images work.
- CSS3 Media queries: Media Queries, a CSS3 module, is an enhancement of the @media rules of CSS. This allows to adapt the rendering of web pages, based on conditions such as screen resolution, size of display, color depth, aspect ratio etc. RWD design technique allows building web pages that alter how they look using CSS3 media queries.
- HTML5: The evolution of HTML5, with its semantic elements is a boost for Responsive Web Design.