“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” – Jeffrey Veen
Responsive Web Design (RWD) is, in a nutshell, all about designing your website so that it can be optimally viewed on a wide range of devices such as tablets, smartphones, laptops, etc. The idea is to design and maintain one website that can be viewed on all. The best online graphic design programs will likely cover Web design principles including Responsive Web Design, but you don’t have to be a student to learn about it.
Responsive Web Design revolves around of three core features:
- Media Queries are used to detect the type of device which is accessing the website, its capabilities, and the dimensions of the browser being used. An appropriate CSS is then applied with styles that are relevant to the device.
- A Fluid Grid is designed by making all page elements in relative units (e.g. setting the font size to 100%) rather than in absolute (e.g. setting the font size to 16px), etc. This allows the website to fluidly adapt and resize according to the viewer’s screen size.
- Flexible images are created to be sized in relative units such as width: 100%; vs. absolute dimensions such as width=”950″ height=”534″. These images will then dynamically resize according to the dimensions of the viewer’s browser.
All of these principles combined allow websites to automatically adapt and re proportion themselves whether the user is viewing them on a desktop computer or an iPhone.
Examples of Responsive Web Design
(Test these sites out by adjusting your browser size and watch them respond!)
The Boston Globe – This is the largest responsive web design project to date
Why Librarians Need to Know About it
For the first time in 11 years, PC sales were predicted to drop drastically in 2012. What’s gone up? What are people buying instead? You got it…tablets. Tablet sales are expected to exceed 100 million this year according to Mashable. Also, according to Nielsen, more than half of US mobile users now own smartphones. What’s more, according to Pew Research, 60% of tablet users prefer reading their news on the mobile web rather than via an app. So if you’re torn between whether to start developing a native app for iOS or Android devices you might want to shift your focus (and budget) to developing a for the mobile Web instead. And that’s where RWD comes into play. You can create one website for the desktop Web that also serves all of the other devices that are out there. Libraries need to start thinking about this new Web design trend and incorporating it into their redesign plans so that they’re not left behind as businesses increasingly shift to responsive sites.
Resources to Find Out More
What The Heck Is Responsive Web Design? (Presentation)
Why 2013 Is the Year of Responsive Web Design – Mashable (Article)
Tuts+ Great web design tutorials and articles
Treehouse Web Design and Development Learning Site
The Future Of The Web: The Case For Responsive Design – Forbes.com (Article)
This Is Responsive (Patterns, resources and news)
Responsive Web Design – Clever Tips and Tricks (Presentation)
Responsive Web Design – MSDN Magazine (Article)