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
All these tips are deeply explained here.
Do you have more? Comment below! :)