13 valuable tips on design responsiveness

Practical advice I’ve gathered to create digital products that keep user’s needs at the forefront of decision-making.

1. Begin by prioritizing your content

Content-first approach will make your design focus on what’s important for your audience. You can create a simple list and prioritize it to help you decide what’s going to appear first. Think about where the users need’s and the business’ goals overlap.

2. Then, create the mobile-first version

Now that you know what to show first, you can create a 320px screen showing it. Delete things and see if they were really important enough to be there. Consider screen orientations. Search about navigation patterns.

3. Build your way up to other sizes

It’s easier to add than delete, right? Use content blocks and a grid. Don’t feel pressured to fit everything in the first fold because people scroll.

4. Make buttons easy to tap

Consider fingers, not only cursors. Space things to avoid mistakes. Showing subtle animations (if it was clicked, for example) helps people to notice progress. Write more text inside (like “Buy now” instead of “Buy”) so it’s wider.

5. Place links where is easier to click

For mobile, place call to actions in the lower left to ensure easy access. For tablets, you can use the upper corners to place important links.

6. Forget hover states and modals

On touch screens there’s no hover states. Avoid modals.

7. Use rems as units

Typography must be responsive, so don’t use pixels as units because they’re absolute and won’t scale. You can easily lose control of ems because they are relative to it’s container. Rems are a great option because they avoid cascading problems since they’re relative to the <html>’s font-size.

8. Check your text sizes for all devices

The further the distance between the user and the screen, the larger the text should be. 16pt is a good start for text. Heading text size should be at least 1.6 times as large. Line-height should be about 1.4rem. Keep lines between 50–60 characters wide.

9. Responsive images will save customer’s money

People are paying to see every kb your product commands to download. Images have to be compressed and formats well chosen. Use <picture> with <source> to set which image loads for each resolution. Browser’s that don’t support this tag yet will read the <img src=””> normally.

10. Let people zoom

Don’t use “user-scalable=no” in the HTML. Really, don’t be that person.

11. Minify your files

Use tools to minify the sizes of your front-end files and save people’s money.

12. Test on real devices with real people

Don’t assume that you sizing your browser alone is the same thing.

13. And, of course, use media queries when needed

Place them below the original properties. They have a lot more properties to set control than just screen width, like aspect-ratio, color, height and so on.

All these tips are deeply explained here.

Do you have more? Comment below! :)