What is Responsive Web Design?
Responsive Web design is a design approach that enables your website to function effectively across a range of devices, including desktops, laptops, tablets and smartphones.
Sites designed before 2012 are typically built to work on the large screens of desktops and laptops. When viewed on iPhone or other common mobile device, they often become slow to navigate, difficult to use, and in some cases, break completely.
How does a responsive site work?
A responsive website is designed with several goals in mind:
- To resize, reflow and reposition its content in order to fit the available screen area.
- To minimize load time, as mobile devices tend to be slower and more prone to lag time when viewing websites.
- To avoid items that don't work on mobile, for example, Flash animations.
- Most importantly, to provide a positive user experience, regardless of the device.
How do I know if my site is responsive?
There's an easy test for this. Open your site on a laptop or desktop device, and resize the browser window until it's very narrow, taking up perhaps one-fifth to one-third of your available screen area. If your site is responsive, the navigation and content of your site should shift and reflow in to a set of tall, narrow blocks of content which you can scroll through in a linear fashion.
Alternately, try viewing your site on an iPhone, Android or Windows Mobile phone. If your site is responsive, it should not appear as a miniaturized version of what you see on a desktop or laptop device, but rather, navigation and content should shift and reflow to suit your device.
Is Versa Studio's site responsive?
Yes it is, including this article. Try viewing it on your iPhone.
Further reading
- Forbes Magazine: Why You Need to Prioritize Responsive Design Right Now (more business-oriented)
- Treehouse Blog: Beginner's Guide to Responsive Design (more technical)
