Responsive web design is a technique which essentially uses Cascading Style Sheets 3(CSS3 media queries with fluid proportion-based grids, to adapt the layout of the website to the viewing environment (that is, the device it is viewed in) and minimize user adjustments of resizing or scrolling.
The term Responsive Web Design was originally coined by Ethan Marcotte in an article on A List Apart in the year 2010(A List Apart). In his words, "Responsive design is not a single piece of technology, but rather a set of techniques and ideas that form a whole."
Need of a Responsive Website
Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013, according to a forecast by research firm Gartner (2013 Gartner Tablet Forecasts). For the first time since 2001, in 2012 PC sales were projected to be lower than they were in the previous year. Before responsive design came in, the solution was to create a mobile version of your site, but the solution is useless when you have a large number of available screen sizes - you cannot keep creating a website version to accommodate each of the devices.
To make a website consistent across all devices, it is better to have a single responsive stylesheet than having its separate mobile and desktop versions. Not only does it help to keep costs down, but it also ensures that the websites are and will be compatible with the recent and future trends.
2013 is being dubbed as the year of responsive web design (Why 2013 Is the Year of Responsive Web Design). Responsive designs solve the problem of making a website work for the endless number of new devices and resolutions being used to access the web. In words of Jody Resnick, CEO of Trighton Interactive (Jody Resnick) - “With a responsive website, businesses can be in front of consumers at every step of their online journey. People who search for a business’ site, begin reading content and viewing videos from their desktop computers at work, and then look for the same business on their smartphones during lunch are able to continue their research into products and services uninterrupted."
“In contrast, if the business has a traditional website and a mobile site, someone investigating products and services online can become frustrated by the lack of complete content on the mobile site or the inability to navigate through the full site on her smartphone. She might give up the search altogether,” Resnick warns.
“Responsive websites provide continuity between different viewing contexts, remaining completely agnostic to the type of device used and the size of the screen it has. What this means is that the same website will present an optimized layout regardless of which device it finds itself being loaded in.” Responsive websites simplify internet marketing and SEO. Instead of having to develop and manage content for multiple websites, businesses with responsive sites can take a unified approach to content management because they have only the one responsive site to manage. The same applies to analytics and strategy development and deployment. A responsive website means there is only one set of analytics to examine and a single strategy to develop and deploy. “In addition, responsive websites are easier for consumers to find than traditional or mobile sites because they come up higher in search engines’ rankings,” explains Resnick. “In fact, Google recommends responsive web design because having a single URL for desktop and mobile sites makes it easier for Google to discover content and for Google’s algorithms to assign indexing properties to content.”
Framework and Technologies
CSS3 media queries
CSS Media Queries are a feature in CSS3 which allow you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print. Style sheets with media queries attached to their <link> tags will still download even if their media queries would return false (they will not apply, however). (Media Queries)
Example : Creating responsive text with media query. Create a html file
<html>
<head>
<link rel='stylesheet' href='normal.css' />
<link rel='stylesheet' media='screen and (min-width: 1400px)' href='big.css' />
<link rel='stylesheet' media='handheld' href='mobile.css' />
</head>
<body>
<h1 id="responsive"> This is responsive text </h1>
<h1 id="res2"> Another responsive </h1>
<p id="handheld"> this is a mobile text <p>
</body>
</html>And css files to support it: normal.css
@media screen{
#handheld{
display:none;
}
}
@media screen {
#responsive {
font-size:60px
}
}
@media screen and (min-width:500px) and (max-width: 900px) {
#responsive{
color : red;
}
}
@media screen and (min-width:700px) and (max-width:1000px){
#responsive{
font-family:arial;
}
}
@media handheld {
#responsive {
font-size:20px
}
}big.css
#res2{
font-size:80px;
}mobile.css
#handheld{
display:block;
}Now, you can open your html page in a browser and try resizing the browser for trivial testing. You can see the responsive page working. Further, you can test it in handheld media to check the responsiveness.
Media queries can do more than just define different font sizes. Often, you will actually move entire sections of the page depending on the available screen size. For example, using a three-column layout might look good on a laptop screen, but it won't work on a small device like a smartphone. In this case, you might want to move one or more columns or elements on the page to adjust to the available space
Frameworks
Using an existing framework reduces the initial work as they promote grid based design and deal with cross browser compatibility issues. Such frameworks cover all bases and you do not need to start from scratch. It ensures you have the responsive grids setup in a standard and best practice fashion, which saves your time for coding and testing. It further allows you to focus on the specific design and content needs for the website.
The trend now seems to be either creating custom fit for purpose responsive layouts or using Twitter Bootstrap Some of its features include:
- 12 column responsive grid
- Endless components: Drop-downs, buttons, button groups, button drop-downs, thumbnails, typography, media objects progress bars, alerts and many more javascript plugins.
- Download customized web frameworks according to requirements
Helium is a frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3. In many ways it is similar to both Twitter Bootstrap and ZURB Foundation but is designed to be much more lightweight and easier to play with.
Other available frameworks are:
- Responsive Grid system
- Foundation 3
- Titan framework
- Gumby
Additional Libraries
These libraries can enhance the look and feel of your responsive website.
Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.
fittext.js is a jQuery plugin that allows text to scale according to the device it’s being viewed on.
lettering.js to make letters fit properly in a container of given size and more control over typography.
Deciding the type of responsive layout according to site's existing content and its presentation is the initial step towards building a responsive design. Multi-Device Layout Patterns
The ultimate key is to keep it simple, in the early stages of Responsive website development - making only fluid text and images and once the basic design is done, find the specific points where you can improve the media queries and implement the advance options.
Testing Responsive Design
Web developer tools
- Using the web developer extensions (as available in Firefox and Google Chrome) you can not only alter the screen sizes, but also can configure the browser to emulate as ‘handheld’ media , ‘print’ media etc.
Using other Website Testing Frameworks
Matt Kersley developed one of the most popular responsive design testing tools on the web[http://mattkersley.com/responsive/].
Wirefy is a reponsive testing framework which requires a basic knowledge of HTML and CSS to fully utilise its potential. Simple and elegant in its presentation, Wirefy lets you plan and structure your content and to build the plan of your responsive site.
Using Physical Devices
One major problem in this method will be while you are still in your development stage on your localhost. One possible solution could be making an Ad hoc-connection from your laptop/PC and connecting the various physical devices(phone or tablet) to that network.
Responsive Design Implemented
Boston Global : Largest responsive website to date and one of the first to adopt the responsive style. It does a wonderful job of presenting an extremely rich and varied collection of data in a clean, pleasant and consumable format across devices.
Smashing Magazine : The website expands beautifully on maximizing and adjusts the content accordingly.
Food Sense Clean looks, use of bold and big fonts, easier to navigate and pleasant to the eyes
Challenges
With responsive design the HTML is the same for every visiting device and each time a page loads on mobile. It also loads all of the HTML elements including images & scripts intended for the tablet and desktop sites. Every time a user visits your site they download the full page content by default – no matter which device they are using. The kind of CSS we use should ensure that the information which is more relevant should be more easily accessible to the user.
Planning well in advance and establishing a good content hierarchy and CSS optimization with tools like Sass can help.Responsive Design Tips
Links to get you started