Responsive (“mobile-friendly”) web design is a design approach that creates an optimal website viewing experience across a variety of devices and screen sizes. The goal is a uniform user experience across the board. Responsive design allows you to develop an adaptive layout that will scale to each user.
(Pixabay / FirmBee)
As you work to craft a responsive web design, watch out for these common mistakes:
- Over-focusing on desktop – Many designers believe that the way your website looks on a desktop is more important than a mobile design. Yet, as of 2016, mobile traffic eclipsed desktop traffic as the most common form of website browsing across most industries.
- Not designing for touch – Designers should include touch technology that offers users the opportunity to navigate with taps and pinches. As mobile has become the dominant form of traffic, keep in mind that many of your potential customers have ditched traditional keyboards in favor of touchscreen devices.
- Masking content – Some designers hide or remove content to fit a smaller screen. This can have a negative impact on your website’s search engine rankings because the search engines can see the discrepancy in content between desktop and mobile versions, knowing that mobile has a poor user experience.
- Non-user friendly navigation – Make sure that your navigation is still easy to use on a mobile site. If you have a lot of links in your menu, consider consolidating them or find a way to have the menu adjust to smaller devices so that everything is still readable without cluttering your design.
- Neglecting page speed – Desktop and mobile users alike put a premium on a fast loading website. No one wants to wait around for a website to load. Likewise, a website that loads could negatively impact your search engine rankings. Keep an eye on your site’s loading speed, and make sure that it is up to par. Two good free tools to use are GTmetrix.com and Google’s PageSpeed Insights.
- Including low-quality images – High-quality images that look perfect on a desktop may get distorted on a mobile device. On the other hand, an image that is pixel-perfect for mobile devices may get stretched out and look blurry or pixelated on a larger desktop. Make sure to use dynamic image features or vector-based graphics so that your imagery can scale based on your visitor’s device.