5 Essential Responsive Web Design Tips
So, what is responsive web design (RWD), actually? In essence, responsive design is all about creating a homogeneous experience regardless of the browser or device screen size. This is achieved through setting resolution breakpoints—allowing the design to adapt in appearance to fit any screen size using fluid, proportion-based grids, flexible images and media queries.
While there’s no text book approach to creating the perfect responsive website, applying these responsive web design tips to your own project will help you make your website mobile friendly.
Consider a mobile first approach.
Design for the small space first—then expand for the desktop. This will ensure the best possible user experience across all platforms. Although desktop browsing is not declining in total engagement, it is losing share to mobile—which now accounts for 62% of digital media time spent, while desktop engagement is at 38%. In the case of B2B, the percentage of time on the desktop is likely higher than average. However, visitors will still access your site using phones and tablets to research products and services.
Make it legible.
Don’t make your users zoom in to read your content. Ensure that your text size is large enough and comfortable 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. Here’s a good base scale to further illustrate the point.
Use web fonts for icons.
Use a web font icon collection such as Font Awesome to display website icons as scalable vector graphics. The advantage of using icons is that they will scale appropriately to any screen without losing image quality. This means no more blurry, pixelated icons—you will have sharp, crisp, vector quality icons no matter what size screen your site is viewed on, and they look especially beautiful on retina displays.
One of the more common frustrations for mobile users is pressing a wrong link because the site has not been optimized for touch screen use. The optimum size for a clickable area on a mobile device is: 44px x 44px—the ideal dimensions for the average human finger to accurately target the intended link. Achieve this goal by adding appropriate padding around a link to expand its clickable area. Additionally, be sure to maintain adequate spacing between on-page elements.
Test on Real Devices.
There are many mobile emulators available that simulate a mobile experience, but nothing compares to viewing and experiencing your site on an actual mobile device—just as your users will. It’s absolutely crucial to test your responsive site on as many devices as possible. By testing on physical devices you may notice usability and technical issues that wouldn’t have been spotted on an emulator.
Responsive design creates a better experience for all users to engage with your website, no matter what device they use. These tips are some of the basics that will help you get started with responsive design. What are some other best practices that designers should follow to give users a better mobile experience?