The pinch and the zoom. This action with our thumb and index fingers can be all-too-familiar if you've ever opened a website on your smart phone or tablet that was not optimized for mobile. The accidental tap. It can be both frustrating and reminiscent of an unpleasant game of hide and seek. According to a 2013 study by eMarketer, roughly 40% of Internet users access it through a mobile device, and it has been shown that Responsive Design websites retain visitors for longer periods of time and provide sustainable content strategies in the long run.
[ibimage==30498==Original==http://www.devbridge.com/articles/the-importance-of-responsive-web-design/?topic=strategy-technology==self==ibimage_align-center]
Responsive Web Design: Abridged
Responsive web design (RWD) is an approach to web design in which a website is created to provide an optimal viewing experience with minimal resizing, panning, and scrolling across a wide range of devices from desktop computers to tablets to mobile phones.
The best way to see it in action is to load a website on various devices like a phone, a tablet, or a desktop monitor. You can also drag the corner of your web browser window to see how the layout responds to a different size.
The Benefits
A responsively designed website eliminates the need to build separate mobile and desktop sites. One build for all devices is a long-lasting investment providing you with the assurance that you won’t need to build another version when a new device comes to the market, which inevitably occurs as technology progresses
More than just a cost investment, it also acts as a time saver. Updates on a responsive site are done in one place, which saves the hassle of updating the content on different platforms. Just set it and forget it.
But, most importantly, visitors reading content will receive the same experience on any device. Regardless of the size dimensions of the screens, information will be easy to find and easy to read. This is exactly what a website provides and what RWD does to enhance and optimize the user’s visit.
Adapting to a RWD Workflow
Unfortunately with RWD, there is no one-size-fits-all process for creating a website. Companies must consider the limitations that each device brings to us. With more and more powerful, and faster devices like the iPhone 5S are introduced, we use progressive enhancement to make sure we are delivering the functionality of the website on smaller devices without relying on too many process heavy features that detract from the experience. This method ensures that we are adding features, pictures, and animations that take into account the slowest performing device on the market to ensure that the same experience is delivered throughout any device.
In addition, we find it best to start with building out the content on the mobile device first. It helps make sure your core functionality and message stay consistent. In addition, it causes the designer to focus on the content and functionality rather than the UI. Having that drafted also quickens the process as fewer changes need to be made in the long-run as it helps create more accurate designs.
Next, when sketching out the general framework of the website, there are a few different tools available. UI template pads act as stencils so we can see the layout physically. In addition, we also use paper prototyping where we cut out paper models with repositionable elements of a web or mobile site. We’ve learned that its portability and accessibility makes the sketching process efficient.
To read more about our RWD Workflow, check out the rest of the blog post on Devbridge's website.
