Responsive Design: Some Things You Need to Know in 2018

It wasn't terribly long ago that when designing websites, we would design for a limited set of desktop screen sizes. As more and more users began to view websites on their smartphones, we gave our clients an option to have their desktop design also optimized for mobile. But now it is no longer a question; any website that is designed today needs to be fully functional on a mobile device. If you're hesitant to believe this, here's a statistic: According to Statista, after a growing trend, worldwide mobile traffic has just edged out desktop traffic in 2016 and 2017. If you're still not convinced then listen to this: In 2018, Google is beginning to index mobile sites first, giving them more importance than the desktop version of a site.

So how do you make sure you're good here? This brings us into the subject of responsive design. The term responsive design refers to a method of creating a website that will appear one way on a desktop monitor, then respond to the screen's shrinking in size to a tablet or mobile device. For example, I visit a news site that has 4-columns of articles when seen in my monitor. When I look at the same site on a phone it has only one column.

A key in determining how important responsive design is to your digital product is to check your analytics. We recently had a client who's mobile viewing audience was under 15%. That's tiny in this day and age and in their case brought us to discuss why that is-- do they need to improve their mobile experience, or is there less of a need for it? Regardless the best way to see how your audience uses your website is by using analytics to determine what devices are being used for access.

But still, as the trend toward mobile use rises, and as automatic it is these days for developers to create your site responsively, it is imperative that your site (yes yours!) be built responsively by a developer who has the skills customize it to the mobile level.

First of all, let's look at how responsive design works between desktop and mobile

With a screen that is 1/20 (or so) the size of a typical desktop screen, a mobile device asks different questions of a website than a desktop does. On a smartphone we want to get our audience to their goal as soon as possible. On a desktop screen, we have room to let the viewer do some self-selecting; there's room to look around and decide between 4-5 things before making a selection. On a phone we don't have this luxury.

The image above shows the New York Times home page as it's presented on a desktop monitor. There's a lot there isn't there? There's navigation, advertising, more advertising, and four columns of content. But this amount of information is ok for a news site on a space as large as a computer monitor.

Above we see the mobile version. The image on the left shows the initial view. See how simple it is? Where did the ads go? Where is the navigation? Where is the 4-column array of articles? In mobile it's made super simple. If I'm going to the New York Times website on the go, what do I most likely want to see? The top news story. I simply scroll down to see more. Or I expose the other sections by tapping the hamburger menu.

The image on the right shows the navigation that is exposed when the hamburger icon is tapped.

More involved grids can be simplified just as easily:

TED's layout of a 3-image grid at the top and a multi-square grid in the body, simply aligns the top images into a single column, and the body squares into a 2-column scheme. Each row gives the option to scroll right to see more.

But hey, listen up, there are some things to consider when designing for mobile. Here are a few of them.

THINGS TO THINK ABOUT:

1) Don't Assume the Template is Perfect

One thing to be vary wary of if your designer is creating a site for you, is that many web templates like WordPress are responsive for the start. This means that when your developer builds a site in WordPress, it has the responsive feature built in-- the developer doesn't need to do anything to make it optimize for your phone. The downside here is that if it is automatically optimized, anything that isn't helpful in the optimized version may not be caught. My team members and I are pretty darn thorough at catching flubs and mistakes. But don't assume because your web site is built via template it will be good. This is why we really need to find experienced developers to do this work.

2) Always with the Hamburger?

The hamburger icon, that little fellow of the 3 horizontal lines on a mobile screen that exposes the menu on a mobile device, is an easy-to-use convention. But as a designer I'm always looking to do something better, and even more intuitive than the convention. Facebook's app, for example, has navigation and a search box at the top, but also has a row of navigation and the hamburger menu at the bottom left. One reason for this is because that's where your thumb can easily access it while using your mobile device with one hand.

3) Maybe you need an app!

Websites are not necessarily the be-all end-all for a digital presence. Sometimes an app, in addition, or instead of a fully-blown website, is the tool you need for your business.

ONE WAY OR ANOTHER

If by some odd chance, your website is not mobile friendly, you're not using your website to its fullest potential. Your search rankings will suffer, and your visitors will get frustrated. And that's not good for business!

Need any help? Give our team a holler.