We stress the importance of optimizing a website for the variety of devices customers use to access the web. After taking the leap to “go responsive,” it’s important to remember responsive design isn’t a simple copy and paste job. While the optimized website design should reflect the native site’s branding, different devices demand different viewing needs.
Before we dive into what you should be changing, Hubspot outlines some elements you should not be implementing:
- Flash, Quicktime or other animation plugins that are not mobile compatible
- Increasing the width of the page
- Decreasing the font size below 11px
- Creating too small of a navigation menu
Scrolling is the death of mobile visits. If your current copy is lengthy, it may be best to reevaluate it for smaller screens. See how you can get the same message across in fewer words or delete whole paragraphs together if you think they provide low value and aren’t engaging the customer. For many mobile visitors, they’re not on your website to read a novel—they’re there to get quick facts and information.
The development backend will automatically resize images to fit devices, but it’s still important to evaluate images on high value pages such as the homepage and service pages. Perhaps your product images need updating because the details are too small—it’s OK to scrap images for the optimized site in favor for others that will complement the mobile experience. Additionally, scaling down the total number of images of a webpage will help load times.
Annoying ads and popups
Be sure to remove all ads and popups from your mobile and tablet sites as these are not easily modified for mobile devices. They also slow load times and are difficult to close out of when using a smaller screen.
Your current developer should know to implement an HTML5 video player so video streams smoothly over mobile. Additionally, watch your video on a mobile device to experience it as your visitor and modify the time and quality if needed.
Navigation is critical to a successful website—regardless of platform. There should be a responsive equivalent page to every page on the native site. At times, a responsive site may even feature more pages when copy needs to be broken up to attract visitors. Additionally, the navigation menu on the responsive website should be “finger friendly,” meaning the navigation bar is large enough for user to tap on their smartphone or tablet.
5 Reasons Your Responsive Web Design Fails