Ethan Marcotte is not a household name; and if you know him, or know of him, then chances are you are a web designer, one of his clients, or in his circle of family and friends. In 2010, in an article that appeared in A List Apart , Ethan Marcotte coined the phrase “Responsive Web Design”; in 2011, he authored a book of the same name. Ethan Marcotte laid the foundation for the modern day Responsive Web Design.
When a user visits his/her favorite website, whether on a laptop, smart phone, a tablet, or a phablet, it is very likely that the site, and its content, conforms to not only the screen width of whichever device he/she is viewing it on, but also to the viewport width (the browser window's width, which also depends on its orientation – portrait or landscape); this is the essence of responsive design.
When mobile phones were first able to access the Internet, they could just display text-only versions of sites. But, technology advanced rapidly, and before we knew it, smart phones had entered the market. Long before this, however, responsive web design was not a necessity. Desktop screens came in standard sizes and had resolutions that were 800 pixels or 1024 pixels wide and websites were designed for these resolutions (fixed-width design). Eventually, however, widespread internet access and mobile devices (having varied screen sized and resolutions) with the ability to access the web necessitated a change. Websites designed for computer monitors and laptop screens appeared ungainly on the new devices.
Before responsive design, though, web developers designed sites specifically for viewing on mobile phones and users were directed to these mobile versions of sites when browsing from mobile devices. This, of course, added an extra burden on developers, who coped by designing mobile sites by discarding some content from the main site. This worked, to an extent (the users didn't have access to all the content), until new devices with other resolutions started cropping; phones also came with the multi-touch feature as well as the ability to be used in portrait or landscape setting. Then, it simply was not viable to use the fixed-width design approach. Responsive design became the need of the hour.
Before it could take shape, however, a few problems had to be solved. They were: varying the layout to conform to different resolutions, determining the kind of device, its scree resolution, and viewport width of the browser that was used on the device, and changing the size of images.
Fixed-width design worked by designing a website for a given number of pixels. Fluid layout worked by measuring size in a different way; instead of using pixels, dimensions were measured in percentages. This took care of the problem of sizing content for different resolutions. But, how was a developer to know what resolution the device had? Media queries came to their rescue.
Media queries help in determining the prevalent features of a device's display which help content to adapt as needed. Media queries have a media type (like handheld, screen) and media features (screen resolution, for example); depending on the output of the queries, appropriate style sheets are applied.
The remaining obstacle that had to be overcome was image sizing. What if you had to display images on your site? Even if your site layout was flexible, unless your images sized themselves accordingly, your site user will not be very happy and it will prove to be your undoing. Enter Richard Rutter and his experiment.
All the pieces were now there, but they needed to be put together so that developers need to design just one website that would, depending on the device it was viewed from, adapt itself to provide the best experience to the user. This is exactly what Ethan Marcotte did.
Responsive design, though, is more than just about resizing everything to suit a given circumstance. Internet access is widespread and mobile devices are very capable; they are also very popular. The convenience of on-the-go access to the web cannot be understated and this is where responsive design matters.
Mobile users pay for every kilobyte of data that they download; they also expect pages to load quickly. Just reformatting a web page to adjust to viewport width is not sufficient; developers have to realize that performance also matters. Users must be able to access content quickly and cheaply. If your website is data intensive and/or unable to load quickly on mobile data plans, then your website traffic will reduce. Reports like this one emphasize this point; more than 74% of mobile users will wait for no more than five seconds for a page to load.
Responsive design is still new, and there are a lot of problems that need to be addressed if you have to truly provide users the experience they crave. One such problem to be addressed is the issue of high resolution images on low resolution screens. Apart from performance issues on mobile devices, developers are also considering applications like responsive email.
Responsive design is not just for the users, it is a boon to companies as well. They only have to maintain one website, which is great particularly from the point of view of search engine optimization. From the user's point of view, one good thing is that they will not have to wait for sites to redirect to their mobile versions.
Yes, there are still a lot of creases to be ironed out and competition is also stiff from mobile apps, but from the time Ethan Marcotte wrote his article on fluid grids in May 2009, a significant amount of progress has been made in this area. Responsive web design has helped to create better user experience; whether users access sites from iPhone, iPad, a laptop, a desktop, a phablet, or through a large monitor connected to their PC, they are able to access the same content but formatted to their various displays and with their browsers set to any size on their screens.