3 Frequently Overlooked Considerations for Your Responsive Website Design – Info B2B

When looking for answers to questions or information on a potential purchase, what do people tend to do first? They grab their phones. In light of this, businesses can no longer afford to not have websites that are optimized for mobile devices.

A smartphone or tablet user has one goal when visiting your site, searching for a specific item or finding an answer to their inquiry. And in today’s digital environment, information is expected to be easy to read and quickly presented in an intuitive, streamlined fashion. Too many clicks, pop-ups or scrolling in the way of getting to what the user needs is certainly going to increase page bounces. And a high bounce rate is a signal to Google that your website lacks quality and authority, resulting in your business being penalized in search results.

It’s a mobile first world – and there are a number of important considerations for creating and implementing a responsive website design that need to be on a designer’s mind when concepting or redesigning a site. A few are too often overlooked, and we’ll talk about them below. These tips for building a responsive website design will help you deliver information on mobile in a readable, direct, and fast manner.

1. Choose a font that supports readability.

The typeface you choose for your site is going to need to work across multiple screen sizes. Because your font needs to be so flexible and readable, selecting fonts that have multiple variations is helpful. Bolds, semi-bolds, and condensed variations will come in handy when you want to make sure your content easy to see on any device. If you’re looking for some good ideas, check out this list of top open-source Google Fonts.

2. Purposefully stack content and make use of page breaks.

When designing for mobile, it’s important to think linearly. On a smartphone or tablet, the modules on your responsive web pages will appear to be stacked vertically (so that it’s not just a shrunken down version of your site), and the user will scroll up and down to view the content. Therefore, it’s critical that the information is presented in a way that makes sense in that stacked format.

For example, your multi-column page might not stack in a fluid readable fashion on mobile if left unattended. To help address this, add in appropriate page breaks to direct the flow and transition of the various site elements. If your multi-column page stacks together on mobile with no breaks, it could affect the user’s understanding of the content, likely leaving them without the answer they’re looking for on your site.

3. Optimize images for faster loading times.

If the file sizes of your images are too large, they’re going to render too slowly on mobile – ultimately causing users to leave. In fact, statistics from Akamai rounded up in this infographic by Kissmetrics tell us that at least 40% of users will abandon a site if it takes longer than 3 seconds to fully load. As the user is operating your site on a smaller screen, one might think to opt for the biggest full-width option you can find to make it more visible. However, this isn’t your best bet.

What you should do is find a good in-between image size that’s not too small to make out crisp details, but not so large that the file is enormous. You can do this by testing your resolution and making sure it isn’t greater than you need. 72 DPI is suitable for web images (as opposed to print). You may even be able to reduce your image size for smaller images by saving the JPG at a lower quality that isn’t noticeable to the eye. In many cases, this can reduce your file size by hundreds of kilobytes. There is a great post on this topic by Lizzy Klingen called Optimizing Images for Web/Mobile: What Keeps Me Up at Night.

There are dozens of other factors that you need to keep in mind when optimizing a site for mobile. But these three seldom receive enough attention when marketers are going through the website redesign process. Follow these tips and you’ll be on the right track to eliminating possible issues that might pop up when you go live with your new design!