Our journey into responsive web design began with a brief overview of its history: how it came to be an indispensable website technology.
From the origins of the name to the mobile-first movement, we saw how responsive web design changed the way we design for the web and gave some general tips designing responsive.
In this second part of our series on responsive web design, we’ll explain how to utilize responsive design in the present day to better serve your visitors and offer a better user experience on your site.
In our modern world of smartphones, tablets, and desktop displays, we need to remember one golden rule: you will never be guaranteed the type of display on which a visitor will view your website. More than 95% of users access the Internet from a mobile device, like their phone or tablet, which come in a wide variety of shapes and sizes.
As we said, not all displays are created equal. But this is exactly why responsive was created! Developers saw this change and reacted to it; Why make two versions of the same site (a desktop version and a mobile version) when you can design one that adjusts to both?
If your business has an online presence, then you have gone through some sort of development and design process to put your site online. However, let’s imagine that you ignored the warnings and didn’t make your site responsive. Instead, you had your designer make a beautiful theme for your site and the final product looked amazing… on your desktop and laptop.
Now, go ahead and open your iPhone/Android/Windows phone and load up your site. Maybe open it on your favorite tablet like the iPad/Galaxy/Surface. Notice anything different about the site you saw on your desktop?
It’s so small that only your large images and banners can be seen clearly! No one can read anything or interact with the site unless they pinch and zoom into that region of the site. This is a painful user experience and your bounce rate will reflect it.
In the end, you’re should be trying to give your users a universal experience on every display, not only to ensure brand consistency, but to keep them on your site – not annoy them so they go elsewhere.
All this responsive history and best practices are only half of the modern web design picture. For your business to truly look professional and convert online, there are certain “tools of the trade” all websites need – responsive or otherwise:
As we touched upon in part one of this series, web developers now start to design for the smallest display and scale up to the largest. The key is to react to content flow, not to devices in the marketplace since they evolve so quickly.
When we say “react to content flow,” this might trip some people up. What we mean here is to first mock-up your website in the dimensions of a mobile phone. How do you know what the dimensions should be? Simple! Look up common screen widths and allow the content to dictate how you program the site to react to them.
Now, the term “content” is a broad one in web design. A piece of content could be a text block, an image, or an entire module of your site like a sidebar log-in or Twitter feed. You need to visualize all of these pieces and organize them to offer the best user experience possible for people on any screen size. The better a visitor’s experience with your site, the higher your conversions and lower drop-rate you’ll see!
So, now how are you feeling about responsive design? It’s a pretty powerful design method and can be one simple way to improve your business. As we’ve learned, why make two sites when one could be more powerful, modern and effective?
Stop living in the past and spend your development dollars more wisely! Next up, we see what the future of responsive holds.