In Part 1 of What is Responsive Design?, we offered a history of responsive web design and development. In Part 2, we will touch on some of the benefits of having a responsive website, including better Google PageRank scores, higher customer conversion rates and better mobile usability.

Don't Confuse your Users

The author of this article remembers working as a developer at a large online retailer a few years ago as they were in the process of rolling out a new separate mobile version of their website. The initial launch was a tentative one, served to a small number of customers to test sales conversions; after two weeks of testing, the new m-dot site had a 100% higher user abandonment rate than the desktop site. 30% of users who began the checkout process on their mobile devices quit during the checkout process and switched to a desktop computer to complete the process. Needless to say, after another short round of testing, it was decided that the new m-dot site would be scrapped and the primary website would be made responsive. It may seem as though the moral of this story is that responsive sites are better than separate m-dot sites, but it's not. In this came, the issue came down to usability. The desktop site was easier to navigate; it was easier to find the items you wanted and purchase them, while the mobile site presented users with an unfamiliar interface. By making the existing site responsive, we could retain the same navigation, the same customer flow from search to checkout, the same customer support structure; and we could do so while optimizing the experience for someone on a mobile device.

Speed is King

Those of us in the development industry have all seen the statistics:

• 21% of users will abandon a shopping cart if pages load too slowly
• 85% of users expect websites to load as fast or faster on their phones than their desktops
• 40% of users will abandon a website if it takes over 3 seconds to load
• 80% of users who are unsatisfied with a site's performance will never use that site again

And the list goes on. More than ever, your users are browsing the web on mobile devices (over 50% in the U.S. and 35% globally at time of writing). And as the adoption of mobile web-capable devices grows, the patience for slow page load speeds decreases. To add insult to injury, Google modified their PageRank algorithms in 2015 to deduct points from sites with low mobile PageSpeed scores. Not only do you run the risk of losing clients with a slow, unresponsive website, but you could potentially lose your precious position in Google's search results. So how does a responsive web solution address this issue?

Mobile First

In software development circles, there has long existed a concept known as Graceful Degradation, wherein a software application would be designed for the newest, shiniest computers and devices out there, but would "degrade" across older systems, stripping out extraneous animations, user interactions, and other bells and whistles. This methodology posited that even users on the oldest systems would at least be given the bare minimum functionality required to operate the application.

From this methodology arose the concept of Progressive Enhancement, which flipped Graceful Degradation on its head. Rather than targeting the newest, most cutting-edge technology, Progressive Enhancement posited that we should create the best experience possible for the lowest common denominator, and only add those extra bells and whistles as technologies improve.

Finally, in 2011, an author named Luke Wroblewksi presented the web development community with a contentious methodology called Mobile First. Due to the limited visual space of mobile devices, the increased use of mobile devices, and the additional capabilities of these devices (GPS positioning, user orientation from internal compasses, multi-touch capability, etc.), Mobile First pushes developers to target the mobile platform... wait for it... first. This methodology pushes us to streamline the user experience, decrease page load times, serve better-optimized images to mobile devices, and take advantage of mobile capabilities to create an optimized web experience on mobile devices while simultaneously serving desktop devices the large, image-heavy, User Experience-rich websites we've grown accustomed to.

More to Come...

In Part 3 of What is Responsive Design?, we will give you some insights into how we design responsively, from traditional static comps to mood boards and style tiles; from pixel-perfect desktop comps to rapidly prototyped mobile wireframes. We'll discuss why a "mobile first" mentality has been undeservedly maligned. We will delve into mobile navigation and the contentious "hamburger" menu icon, responsive image solutions for increased mobile performance, responsive text using the newish Viewport Units, and the difference between Adaptive and fully Responsive design methodologies. Finally, we'll give you a look at Level8's browser and device testing methods, from VMs to BrowerStack to our in-house device lab.