• Responsive Design: Today

responsive-today.png

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.

Not All Displays are Created Equal

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.

ResponsiveScreens

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.

Tools of the Trade

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:

  • Compressed HD Images – Imagery is important! However, low quality images will look worse than no images at all. In the end, start with a high-definition image and then scale and compress it to your design needs. Remember, smaller files equal faster page loads!
  • Clear and Concise Content – The term “elevator pitch” comes to mind. You need to be sure your writing is informative while being as short as possible. Hit the key points on your homepage and save detailed, longer informative text blocks for dedicated pages within the site.
  • Optimized Styles and Scripts – Modern websites are powered by CSS and JavaScript. Both run off of files stored behind the scenes of your website. Making sure these files are compressed will ensure a faster load time when they are called, like your images.

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 Content Means More Than the Device

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!

Onward and Upward

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.

ThriveHive
ThriveHive
ThriveHive combines easy-to-use tools and expert guidance to help businesses stand out and get found online. Learn more about our guided marketing and advertising solutions here.

Leave a Reply

Your email address will not be published. Required fields are marked *