With more and more internet traffic originating from mobile devices each day, it’s growing inevitable to tailor site experience to the needs of the mobile customer. Very often, a site’s user experience can be the deciding factor in whether a visitor decides to complete a transaction or closes their browser in frustration. If users are trying to view a site optimized for a 1200 pixel desktop monitor on their 320 pixel iPhone, the chances of the user becoming frustrated with repeatedly pinching-to-zoom and inadvertent clicks on poorly sized links are much higher than if they were viewing a site optimized for consumption on a mobile device.
Enter Responsive Web Design.
The goal of Responsive Web Design is to make your website look and feel amazing on any device. You don’t need to settle on a great mobile experience and just an okay desktop experience, or a beautiful desktop site that is lackluster on tablet. With Responsive Web Design, your user experience can be fantastic on every device, all the time.
It seems like new form factors are being created daily, with a mini version of this device, and a “phablet” version of that device. The size difference between phones and tablets can be almost indistinguishable at times. Responsive Web Design takes the ever-changing form factor element out of the equation because it focuses not on specific devices, but instead on actual screen sizes. Using media queries, a fantastic feature of CSS3 and HTML5, developers can set breakpoints to render certain styles based on pixel ranges. Elements can be resized, shifted or even hidden based on screen size so users are always presented with the optimal layout, no matter what device they’re using.
Designing a desktop site first can often make it difficult to arrange the same content on a smaller screen because there is usually so much of it. This means very often you need to remove elements and content from your desktop site so it gracefully degrades and is consumable on smaller devices. At DMI, we use what’s called “Mobile First” Responsive Web Design. Laying out the smallest version of your site first helps you focus on what content is most the most critical to your application. This progressive enhancement keeps the user experience clean and easy to navigate.
It’s extremely important to remember that the same site is going to be rendered on your phone as is going to be rendered on your desktop, making attention to the file size even more important. This can be an issue if your site has a lot of images to load, especially if they need to be at a high resolution on larger screens. At DMI, we use a solution that loads images on demand and allows different images to be set based on screen size. This optimization ensures the quickest experience for the end user.
Responsive Web Design isn’t just great for the end user, it helps behind the scenes as well. Remember that old m-dot site… m.my-ecommerce-site.com? The “m” means that you have a dedicated mobile site with a separate code base from the desktop site. Managing two code bases means double the development effort and double the likelihood of human error. Two code bases means every time you want to add some functionality to your site, you have to add that functionality twice.
When you use Responsive Web Design, you have a single site with a seamless user experience across all devices instead of having a dedicated site for each device. This means a user won’t be confused by the different browsing experience on their phone if they’re used to only browsing your site on their laptop. They’ll already know their way around. Having a single site also means having one URL instead of many. This means SEO dilution caused by multiple URLs can be avoided. Analytics can be simplified down to a single report as well, rather than having one for each site.
With Responsive Web Design you have one code base that shares one framework, one set of stylesheets and one set of scripts. Doesn’t that sound more efficient? Less time-consuming? Less expensive? Doesn’t that sound like a cleaner, simpler, seamless experience?