A recent study found a quarter of all Americans use mobile devices to access the web. One out of every five people in the world own a smartphone and over half use it to surf the internet.
If your website doesn’t read well on those devices, you’re losing a huge chunk of mobile users. It’s time to embrace responsive design. Getting started can get complicated, but here are some tips to help.
1. Go Mobile First
Before you plan your design for desktop or laptop screens, think about the user experience on a mobile device. A lot of designers are embracing the mobile first movement. Why? Because mobile is becoming more relevant than desktop.
Approximately 1 in every 7 people on earth use their mobile devices to access the internet. Focus on how users interact with your website over their mobile phones first. Then build out your design for larger screen sizes.
2. Get Acquainted with Media Queries
Media queries are a feature in CSS3 that allow content to respond to different conditions on a particular device. Media queries check for a device’s resolution, height, width and orientation. Then it uses this information to determine which CSS rules to apply. Media queries are the driving force behind responsive design.
3. Understand What Mobile Means for Your Users
People interact with websites differently over a smartphone than they do over a desktop. Use analytics to figure out why a user is visiting your website on their phone. They may want to get quick information via the search bar. If that’s common among your users, then make your search bar highly visible and always present.
4. Use Percentages
One of the hardest parts of responsive design is implementing a fluid grid. A fluid grid works together with media queries to display content on different viewports.
Instead of designing breakpoints for every possible viewport, you set a maximum layout size. From there, you define the widths and height by proportion, not pixel. This allows the site to rearrange the layout based on percentages.
5. The Need for Speed
One of the drawbacks of responsive design is slow loading times. In fact, a recent study shows that the majority (48%) of responsive sites load anywhere from 4 to 8 seconds. That length of load time was acceptable in 1997, but in 2014, 64% of smartphone users expect a site to load in under 4 seconds.
The main reason behind a slow site are non-optimized images. Don’t let those images drag your responsiveness down. Quickly scale down hefty images with tools like Adaptive Images and TinyPNG.
6. Eliminate the Unnecessary
Get rid of excessive elements, not only for your user experience, but also for website’s speed. A website weighed down by too many elements will not be pleasant to use or to look at. Use a program like GZIP for compression.
7. To Hamburger or Not to Hamburger
The Hamburger icon – otherwise known as the three lines that show a hidden menu – is the source of fierce debate. Some people hate it, some people love it, but what is the best practice?
For responsive design, the best practice is always a matter of convenience. If a user must always tap the icon to see menu options, it becomes tiring. If you make the most popular menu items visible you can save users from frustration. Keep less popular links in the hamburger menu navigation.
8. Make it Readable
Don’t make your users squint to read or pinch-to-zoom. Make your text size large enough to read from a smaller screen. I recommend a text size of 16 px, 1 em, or 12 pt. Here’s a useful conversion guide for px to em. When designing headlines, use a tool like FitText to create responsive text.
9. Use the Right Button Size
On mobile devices, real estate is premium. Avoid small button sizes. Make sure your buttons are at least 44 x 44 px for a finger-friendly design. Another handy tip is to use padding instead of margins. Padding increases the tappable area, but margins do not. Margins increase the white space around the button.
10. Design for Screen Orientation
According to statistics, landscape orientation wins over portrait orientation 59% to 41%. Design your site to look good on both orientations, but pay more attention to landscape. Make sure that your images aren’t stretched.
Final Thoughts
Responsive design makes it easier for all users to view your website no matter what device they use. These are the basics that will help you get started with responsive design. What are some other best practices that websites should follow to give users a better mobile experience?
Book
Affiliate
Hi,
I agree with all of your points but one. When you talk about using percentages, it does not seem like you are taking the layout into account. If I have two columns, one with image in it and the other with text related to it in Desktop mode, the same layout will look ugly in mobiles because of the available width.
To solve this issue, I recommend showing the image first and show the related text underneath it. So using % does not solve the issues, while using breakpoints solves it. Using % may work in some cases, but I don’t see them working in all cases in mobiles.
Thank you.
What they meant it make both columns width 49% , that way it looks nice and clean as the screen size changes , if this ends up looking ridicilous when all the way down to mobile phone size view , then that is where you throw in media query to handle that case
What are your thoughts on disabling pinch-to-zoom completely for devices?
Even if the website uses a large enough font size, I dislike disabling certain native os functions for a user.
I still don’t understand why any developer would disable pinch-to-zoom. But it happens so often that I feel like I’m missing something. If the user wants to zoom, why stop them?
Thank’s for Sharing a Valuable Information about the Mobile User Experience Design.
The points are fine although I’m not convincing about the order – the way they have arranged. For any work (read before starting anything critical), one should do proper analysis – and this is a general rule of thumb. Then how #3 comes at #3 – to me #3 should be in front of any other point!
Good read indeed.
\m/
Speed is very important, especially in mobile design. The trick is definitely in the coding, the simpler the better. Thanks for sharing!
Don’t make your users pinch and zoom? Tell me, exactly how did you determine that one size that is close enough for all users? There are 10 million people in the US who have low vision and countless millions more with poor vision. And you decided for them?
Pinch and zoom is an invaluable tool for people with vision problems. It is the height of hubris for you or any developer to decide what is best for everyone. Furthermore a developer should never decide what functions on a users device will and will not work.
Disable pnch and zoom?
The Web Content Accessibility Guidelines (WCAG) version 2 Level AA 1.4.4 requires that sites be scalable without assistive technology up to 200%. This means that the mobile browser’s pinch zoom feature must allow for zooming up to 200% WITHOUT using the assistive technology zoom on the mobile device.
Are you telling developers to ignore W3C standards? Would you hire an electrician who ignored standards? An engineer? An architect?
Guys – where does it say “Disable” pinch and zoom!?
It says “dont make your users squint to read or pinch-to-zoom”, with MAKE being the operative word. Meaning, the user still has the option to pinch and zoom but you shouldn’t by design force every user to HAVE to do it because you made your font size out the gate far too small. The author is saying to give users a chance!
Good write up!!!
Responsive design is a lot more in demand in present scenario. Responsive design should be given more importance then any other since it makes easier for all users to view your website no matter what device they use.
Thanks Jacqueline for sharing this awesome post. The Respond.js which acts as a pollyfill for IE8 and lower. Respond.js enables media queries for older versions of IE8 and can save hundreds of hours trying to code another IE8 version that would otherwise be a mobile first linear layout. Do you have any better idea to solve this issue?
These are excellent 10 tips for website responsive design. Thank you for sharing it. I am just curious. Which do you prefer, AMP ready or mobile responsive? I don’t know if I mention the right term.
“According to statistics, landscape orientation wins over portrait orientation 59% to 41%.”
Uhh, what? In what context? Which statistics, exactly?