8 Ways To Refine Your Site For A Better User Experience

Yes, your site is responsive from a technical standpoint, but is it really providing an all-around good user experience?

Responsive web design (RWD) has been around long enough for us to know that it is a best practice, not simply the latest trend or an alternative to a mobile “sub-site” or app. As mobile web browsing continues to outweigh desktop browsing—mobile devices now account for nearly two of every three minutes spent online, according to comScore—the need for RWD has never been stronger.

The importance of a responsive website was further emphasized when Google announced in April 2015 that it would begin using mobile friendliness as a ranking signal. In fact, Google increased the effects of that ranking signal with an update in May 2016. Now that many organizations are up to speed on RWD and have launched responsive websites (perhaps in haste), it is time to turn a more critical eye on those sites. Yes, your site is responsive from a technical standpoint, but is it really providing an all-around good user experience (UX)?

When revisiting your responsive site, consider the following tips to help you determine whether you are delivering the best-possible UX across the devices and screen sizes.

1. Zero in on content: Ideally, an RWD project should take a “mobile-first” approach in which you first evaluate, refine, and build out content for mobile devices and then expand that content as you work your way up in screen sizes. If you didn’t follow a mobile-first methodology, you probably forced desktop content into a mobile design. Sure, carousels, long blocks of text, and large graphics may work on bigger screens, but they do not translate well into mobile. Go back and analyze your content. See what you can cut or simplify. If you are starting fresh in your RWD project, there is no excuse not to begin with a mobile-first approach.

2. Test your speed: The speed of the site is very important and arguably even more important when it comes to mobile. Users are extremely impatient, and when on a distraction-filled tablet or phone, it’s very easy to move on if a page doesn’t load within a couple of seconds. Development tools and other analytics services can help you see page load times across different devices and networks. You may also find some clues about slow speeds when you go back to review your content.

3. Design for screens, not devices: A lot of early responsive design was done to target specific devices. However, it is nearly impossible to keep up with the growing number of devices on the market. If you designed for devices, you’ll run into trouble sooner or later. Designing your site according to screen sizes and dimensions will provide greater flexibility as new devices arise.

4. Think about touch: Mobile phones aren’t the only devices with touchscreen interfaces these days. If you didn’t think about touch when you went responsive, think again. Always design with device capability and usability in mind. Are touch controls in an easy-to-reach location, based on device size and how the user will hold that particular device? Are content, graphics, and links properly spaced out, leaving room for users to touch individual items (like links and buttons)?

5. Consider context: As you think about touch, consider the context of how users will view your site. Where are they? What they are doing? Are they traveling and need to quickly look up a flight schedule? Or are they sitting on a couch at home, browsing for a birthday gift, scrolling through football scores, or reading the latest news stories? Put yourself in the user’s shoes; is your responsive site providing a positive experience or just creating frustration and inconvenience?

6. Double-check links: It’s a simple step, but vital nonetheless. Check for links to sites or content that is not mobile-friendly. Jumping from a well-designed responsive page on your phone to one that is either completely unusable or requires many pinch-and-zoom maneuvers does not make for a good UX.

7. Maintain consistency: Your site’s user interaction patterns, navigation, colors, branding, and so forth should be consistent and recognizable from one screen experience to another. Again, taking a mobile-first approach and building out from a smaller screen size helps keep the site’s design consistency in check.

8. Understand trim vs. hide: It is very likely that if you find yourself wanting to hide content on a phone or a tablet, that content is probably not very effective on desktop either. While hiding content is very tempting, trimming content and throwing out the “fluff” not only makes for a better mobile experience, but better content experiences on all screen sizes.

When you revisit your responsive site, take your time. Care is required to ensure that your site and its content work well on every screen size. This often means approaching your designs and content with multiple sizes and user contexts in mind.

And if you need some additional insight, analytics tools can provide you with some hints into your responsive site’s performance. Although there is still a lot to be desired, looking at bounce rates, CTA click-throughs, and lengths of stay, you can hone in on how users are interacting with your pages on different screens. For example, if you see that there is a particularly high home page bounce rate on mobile devices, it is a strong indication that your responsive site needs work.

Whether you start fresh or opt to make some tweaks to your existing site, the bottom line is that your RWD project should first and foremost aim to optimize the UX across all device sizes. After all, a good website UX can make all the difference in reaching and engaging current and potential customers.