Have you ever tried to read a newspaper from 100 feet away with a pair of binoculars? If your website isn't mobile-optimized, that is how your mobile visitors feel.
Many marketers are struggling to find the right strategy to effectively engage all of their Web visitors—and rightfully so! People can now connect to the Web through hundreds of different devices, all with unique screen sizes, resolutions, and device capabilities.
Responsive Web design (RWD) has become the gold standard for website redesign projects due to its fluid nature and ability to adapt to the size of device screens. Responsive design gives peace of mind to marketers, because they know their site will look good on any screen.
However, that is only half the battle. The other half is making sure your website performs across all those different devices. Are your users finding the information they're looking for? Are they completing the tasks? Is your site loading as fast as possible? There are many performance questions that responsive design doesn't always solve, and it's important to consider these as you set out on a redesign.
Here are some best-practices for implementing a responsive design.
Think 'Mobile First'
According to Cisco, global mobile data traffic increased 70% in 2012. Analyst firms, including IDC, have measured tablet market growth at more than 75% year over year. Gartner predicts tablet shipments to top 200 million in 2013. But even though PC sales are stagnating, millions of people still use desktop screens as part of their omni-channel journey as they work, communicate, and research products and services throughout the day.
Taking a mobile-first approach means starting your design from the mobile user's perspective. Start by figuring out what experience the mobile user needs and build up from there. That is much easier to do than starting with your desktop design and trying to chip away components to make a tablet and smartphone experience.
Taking a mobile-first approach enables you to craft much more effective designs, and it doesn't leave smartphone and tablet users as an after-thought. When designing mobile-first, always keep these traits in mind: better, faster, easier. Better content, faster load times, and easier navigation.
Tips for Making Your Responsive Website Shine
Although most marketers understand the importance of being responsive, making the move may seem daunting, if only because of the scope of the project. Here are some tips for success:
- Understand your customer. What pages of your site are visited most often on each device? Dig deep into Google Analytics to understand which devices visitors are using to find your website and what information they're looking for. What you find will help inform your decisions as a marketer.
- Make sure mobile isn't forgotten. Although responsive designs will look good on every device, the smartphone experience is where RWD's downsides are most relevant. Make sure your site performs well on smartphones. Especially keep in mind load times and file sizes. (The Mobile Grader tool can help.)
- Define your customer engagement goals up front. If lead generation is a priority, evaluate your content and calls to action to ensure that they're relevant to each device user. For example, the mobile experience should have short forms, easy-to-digest content, and simple tools for immediate engagement, whereas desktop content can be more in-depth.
- Put technology in the right place. A responsive site should be easy to deploy and maintain, but it requires an open dialogue with your engineering and IT teams to make the site successful. Ideally, marketing and business users will be able to easily update the site on an ongoing basis.
- Measure success. Bake data and analytics into the site's backend technology so that you can easily see what's working, what's not working, and where you can make improvements.
Migrating to Responsive: What's the Launch Strategy?
Obviously, designing a responsive site is only one side of the equation. You also need to consider how to deploy your new site. Responsive redesigns can take months, even years, to roll out. Can you afford to wait that long, especially if you don't currently have a mobile strategy?
One solution that has been gaining momentum recently would be the progressive rollout your responsive website. With progressive responsive (AKA responsive retro-fitting), you start by launching a mobile version of your site, then designing and launching for tablets, and eventually rolling out your desktop redesign.
That approach lends itself very nicely to a mobile-first design, and it allows you to solve your most immediate needs quickly, without having to wait for the full redesign to be complete.
Conclusion
The Web is no longer simple. As Web-connected devices continue to grow in popularity, so too does the difficulty of providing each device with a good experience.
Responsive Web design is a great tool to ensure your website looks good on all devices; however, it's important to be strategic about how you're designing and implementing your responsive strategy.
By thinking "mobile first" and introducing responsive design over time, you can address the most urgent need first and then allow your content to evolve and adapt for tablets and desktops. That way, marketers ensure their website performs well across all devices that customers use.
