Website Design Tips: How To Create A Good Responsive Website

|

Have you ever imagined how annoying it is to read a magazine from 100 feet away with a pair of binoculars? That might be an extreme example, but roughly, it’s the same thing when your website isn’t mobile-optimised. Most online marketers are struggling to find the right strategy to effectively engage all of their website visitors. The fact is most people in the world can 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 primary standard for any website redesign project due to its flexibility and adaptability to the size of device screens. Responsive design provides a “safety net” for 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 elements that responsive design doesn’t always solve, and it’s important to consider these as you set out on a redesign. Moreover, here are some best-practices for implementing a responsive design:

Always 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.

Always thinking “mobile first” 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 release of your responsive website. With progressive responsive, you start by launching a mobile version of your site, then designing and launching for tablets, and eventually releasing 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 world wide web is no longer simple. As Internet-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 prioritise 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.