Do’s and Don’ts of Responsive Design

Loren Marowski  |  UX Developer

March 4, 2016

If you don’t have a responsive website, Google will penalize you by making your site harder to find. So making your site responsive is not only necessary, it’s critical.

Why responsive? Because there are now a variety of screen sizes, viewed on desktops, laptops, mobile devices and tablets. Designing websites responsively is what makes each of them easily readable on the different screen sizes.

It’s not just your website. It’s your email too. According to BlueHornet, over 67% of consumers use a smartphone to check their email (BlueHornet, “Customer Views of Email Marketing 2015”).

But before you start redesigning, here are a few things you should know that will make your site more useful to your customers and easier for your developers to code.

1.  Understand your audience

What devices are your customers using most? What do they typically do on your site? If you don’t know the answers to these questions, you should consider studying your Google Analytics (or other analytics provider) data. Without this information, you can’t know what you should be solving.

Now, this does not mean make your designs work only on the most prominent screen size. It does mean you should understand the size range you’re designing for. Currently, the best range is about 320 pixels x 480 pixels (iPhone 4s) to 1280 pixels x 1080 pixels (typical monitor size).

Keep in mind that the screen sizes your customers are using today may not be the screen sizes they will use in the future. Make sure your code is powerful enough to work on any screen size to minimize additional coding efforts.

2.  Use relative measurements

In the old days, websites had absolute measurements, meaning that when a site was set at 1000 pixels wide, it was going to stay at 1000 pixels wide. Nowadays, site widths are more relative because they change according to the environment around them.

An example of a relative measurement is using percentages vs. pixels. For example, instead of having your sidebar be 300 pixels wide, make it 30%. When the browser scales down, the sidebar will scale with it.

The biggest issue is making sure the developers and designers are on the same page. A designer may design a sidebar for 300 pixels but not think about how it would scale. To get around this, use a responsive grid. There are plenty out on the Web, but try to find one that includes a picture of the gridlines to provide to your designer. This will keep the designer from “drawing outside the lines” and help him or her better understand how the page will shift as it gets smaller.

3.  Create breathing room

Make sure each element has “room to breathe.” As the screen gets smaller, there will be some parts of the site that get distorted or wrap in ways you don’t want them to. Providing enough white space between elements will help minimize the effort required to fix some of these issues.

4.  Fat fingers are different from mouse cursors

An important difference between desktop and mobile is how users physically interact with the screen. A mouse cursor is small and precise. Desktop allows groups of small links to be bunched up really closely to each other.

Mobile, on the other hand, does not have the luxury of a cursor. Fingers are big and clumsy and usually don’t click on what was expected. Because of this, buttons on mobile devices should be large, and links should be spread apart so the user doesn’t accidentally click on its neighbor.

Also, keep in mind that a “touch” on mobile is the same as a “click” on desktop. The difference is that a cursor can hover over an object before clicking on it. Mobile devices have no “hover” state.

For example, a drop-down menu works for desktop because it appears when a mouse hovers over it. A mobile “touch” will immediately click on the menu item and your original drop-down experience has been distorted. It’s important to change the functionality of those types of elements on your site to make them mobile-friendly.

 5.  Removing some elements for mobile is smart

If an element doesn’t work well on mobile or if it really isn’t useful, there’s no point in cluttering up the design by forcing elements into a small screen. It’s okay to hide some less useful elements of a page.

However, do not shorten or hide important content blocks. It’s not good practice to punish users for using mobile devices by removing key pieces of the site.

Keep in mind that mobile users are usually searching for immediate information. So the information your site serves up should help them get their questions answered – e.g., where you are located, store hours, etc.

6.  For Web pages, keep code simple

Mobile devices do not have the same capabilities as a desktop computer. There’s less memory and less hard drive space. Mobile devices cannot handle some things and are overall slower than computers when displaying Web pages.

To keep things running smoothly, keep the code simple. Don’t call a lot of JavaScript or CSS files. Try to combine and unify them to save on bytes. Also, try not to use massive images on your site. Images take a long time to load, which frustrates customers. Smaller images will allow the page to run much faster on mobile devices. Try to keep all images under 100 KB.

 7.  For emails, keep code really simple

Emails are extremely limited in their capability. The list of don’ts here is large, so you may want to consult a developer about potential email designs. Making an email responsive is all the more difficult due to these constraints.

While some multi-column, responsive emails are possible, they are much more difficult to code than single-column emails. Other multi-column layouts are flat-out impossible to code responsively. To make coding emails as painless as possible, consider a single-column design and keep the width below 600 pixels for the best possible results.

The bottom line: It’s not only worth making your site responsive … it’s a must. Nonresponsive sites immediately create a bad user experience for anyone who is not seeing them on a desktop computer. And a bad user experience can cost you an order, a visit, a customer’s loyalty, or worse … it can cost you a customer.

Loren Marowski |  UX Developer
Loren specializes in front-end development, responsive design and client-server relationships. He likes to work on websites that are innovative and cutting-edge in both design and code.

More From Loren

Related Posts