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.
