The term Responsive Web Design (RWD) was introduced by American designer Ethan Marcotte in 2010, although this design and development technique was studied for the first time by Cameron Adams in 2004.
The aim of Responsive Web Design is to make websites adaptable to all different devices, including computers, tablets, smartphones and so on. This means adapting a site’s layout to device’s display, meaning that with the same design, a website can be correctly visualized in different kinds of devices. RWD defends a better image viewing experience, in order to make visualization and reading easier, minimizing resizing, panning and scrolling to achieve a simpler navigation. To make it, RWD uses a CSS3 feature called media queries, which examine the characteristics of each device and adjust specific website styles accordingly.
Nowadays, an easy-flowing navigation in all devices is quite hard to accomplish, because every gadget has a different screen size, resolution, capacity… so we often see the websites resize as we are browsing them. This usually makes navigation poor, slow and difficult depending on the device we are using, and that’s why Responsive Design can be so useful.
Advantages and disadvantages of Responsive Design
Responsive Design presents several obvious advantages, starting with the ability to correctly visualize websites on mobile devices. It’s a fact that these days people spend more time navigating with their phones (and/or tablets) than with their computers, so visualization and navigation on mobile devices need to be increasingly good, easy and fast. With RWD, the content on the page will be formatted and scaled to view beautifully and legibly whether on a tablet, smartphone or desktop monitor. This increases our visibility and helps us connect to people no matter what device they are using.
Also, RWD is a cost-effective alternative to mobile apps, and you save time and money because you only have to design one website, not a desktop and then a mobile one anymore. In addition, almost every device on the market has a different screen size, resolution, etc, so it’s almost impossible to make a website view well on all of them.
Responsive Design also makes internet marketing and SEO easier and more effective, because you just have to create content once, and it’ll apply to all devices.
On the cons, many designers complain that explaining RWD to clients may be difficult sometimes. They also criticize the lack of a static design phase: you need to change the way old design process was made. Also, it sometimes can be difficult to adapt the same navigation to all the devices. Another problem is images: designers have to make sure that the pixel-density is right, or images and graphics will be scaled up and thus look blurry in small devices. One of the main challenges designers still have to deal with is the difficulty to put all the information of a large number of rows and columns into a small-screen device: if they don’t find a good way to do it, all the information will look squashed. About converting old fixed-width sites into responsive ones, it seems that the easiest solution is to rebuild the site, instead of updating the code base to try to make it responsive.
Some people believe that Responsive Design is going to be more used than native apps in the future, because of the browser compatibility and the cost associated with programming the apps. Anyhow, we’ll still have to wait a bit to see how everything progresses.
Known websites using Responsive Design
It makes sense that technology companies such as Nokia, Sony or Microsoft use Responsive Design webs: they must look optimal in any of the devices they are selling, including the PC, laptop, smartphone and tablet. Other important industries in the technology world use RWD too, like Squarespace or Mailchimp.
But we can also find several healthcare institutions using RWD, including Lakeland Regional Medical Center or Legacy Health. Many associations employ this kind of websites too, like the National Gay and Lesbian Chamber of Commerce (NGLCC), the Solar Energy Industries Association, the International Alliance of Theatrical Stage Employees, the Food Marketing Institute or the American Association of Endodontists.
Lots of nonprofit associations use Responsive Design too, including the Bono cofounded ONE, World Wildlife Fund (WWF) or AIDS.gov. It’s interesting to point that most universities are using RWD, such as Harvard University, UC San Diego or Princeton University. This makes sense, because young people and potential students spend more time browsing internet on their mobile devices than on their computers, so university websites should look great in all devices.
We also find Responsive Design webs in the food industry, with the Starbucks one being maybe one if the best examples. Most of the main publishing groups use RWD too, including Time, Mashable and BBC. As we said with the university sites, the magazine/entertainment websites are ones of those that should look optimal too in all devices: it’s a fact that today, people keep informed mostly via mobile devices.