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.
Some Live Examples of RWD Websites:
New Adventures In Web Design Conference 2012 – http://2012.newadventuresconf.com
The Boston Globe – http://www.bostonglobe.com
What Makes it Responsive?
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.
Strategies and Best Practices
The various Strategies and Best Practices used today for Responsive Web Design are:
- Adaptive Approach – Adaptive strategy is to have Multiple Fixed Width Layouts. For example, a 4 column layout, 248px each, separated by 20px-wide gutters, on a 1024 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 Approach – Responsive strategy is to have Multiple Fluid Grid Layouts. For example, multiple range bound layouts, each for a particular range of screen size and each of which auto-resizes within their particular range.
- Mixed Approach – In this approach, the web designer can use fixed width (Adaptive) for large and medium screens while Fluid width (Responsive) can be used for small screens.
- Start Small – One of the best practices followed in RWD is to begin with mobile considerations (start by loading the absolute bare essentials on the smaller platforms) and then work up to a larger desktop version. The additional resources are loaded strictly on an ‘as-needed’ basis, to platforms that can handle them well.
- Modular Design – Designing layouts in a modular fashion is, again, something favored by Responsive Web Design. Managing independent areas of a page in modular chunks allows fluid repositioning and segregates content clearly.
Tools & Frameworks
- The Goldilocks Approach: The Goldilocks Approach is a good starting point for responsive web design that allows designs to be independent of device resolution.
- Foundation: Flexible 6 and 12-grid front-end framework developed with Sass. (http://foundation.zurb.com/)
- Skeleton: Minimal responsive framework having collection of CSS files.
Responsive web designing is remarkably different from traditional designing in terms of technical and creative issues and a careful use of this can do wonders while designing. If you business requirement is reach a wide-range of devices, responsive web design would be the right approach for you.
Technical Architect, RapidValue Solutions