Essentially, responsive design means that you have only one single website, and yet it works across different platforms and screen sizes. In this day and age when we differentiate our businesses with multiple forms of content, media and information, the task at hand is how to communicate your business and brand messages effectively. In this paper we set out to give you and overview of recent expert thinking on web design in the age of the mobile device.
How is Google responding to the responsive design trend?
Often when we do a Google search on our mobile device, the websites we find and visit can be hard to read and navigate. Links that are so small they are impossible to click, text that is too small or otherwise awkwardly formatted and hard to read, or parts of the page cut off or not appearing on screen, so you have to scroll to the side to continue reading.... When you encounter such a website it means the site has not been optimized for mobile use.
As you can probably understand, your customers will become frustrated and disenchanted if they cannot find what they are looking for. Or maybe a partner or investor is looking for specific business information – have you considered what it might say about your business values and professionalism if your website does not welcome mobile users?
Recently, Google has added a search feature that will help mobile users find information better, by marking responsively designed website with the label 'mobile-friendly' in Google search results.
For a web page to be labeled mobile-friendly and be optimized website design, it must meet the following criteria:
- The web-page avoids use of software that isn't commonly used on mobile devices, such as Flash;
- The web-page has text that that can be read without zooming in or out;
- The web-page automatically lays out and sizes web content elements so they fit on one screen size...instead of forcing the visitor to zoom or scroll horizontally;
- The web-page spaces its hyperlinks so that they can easily be tapped on, without missing the links or clicking on something else.
How can I ensure my website design is optimized and qualifies for Google's "mobile-friendly" criteria?
The good news is, Google offers a quick test right here: Mobile-Friendly Test. Go and check your web-page by entering the address, as shown on image.
If the page meets all of Google's criteria, a message will be shown: "Awesome! This page is mobile-friendly".
If your page does not meet the criteria, the message will say "Not mobile Friendly". Usefully Google shows a number of aspects and reasons for not qualifying as mobile-friendly.
If our page has not qualified as mobile-friendly, there are a whole range of things you can do to amend the situation:
- Have a look at the Google documentation on our Webmasters Mobile Guide – there you can find smart tips and guidance on improve your mobile site;
- Go to Google Webmaster Tools, and check the Mobile Usability Report. This reports detects the main mobile usability problems on your entire website (not just on one web-page);
- Google's how-to guide for third-party software (for example WordPress or Joomla) gives advice on migrating your CMS-hosted site hosted on a CMS (Content Management System) to a new mobile-friendly template;
- Once you have identified and understood both the flaws and the Google suggested solutions, go ahead and make the required changes.
Think about communicating your values too ... across all screen sizes
It's important to be mindful that quick-fix, band aid solutions to responsive design challenges can create further problems. Always think about the overall impression you leave to visitors and how you site is consistently presented across different platforms and devices:
- Does your navigation stay the same or does it change depending on which device is used? Do not employ hover states for touch sensitive devices. Also design all touch regions so they enable easy clicking – this usually means making the touch regions relatively large;
- Ensure that all call-to-action elements are easy to find, view and use, on all devices and screen sizes;
- Check that all text copy, imagery and video elements still have the desired effect across screen sizes...which should be to communicate to your audience who you and your brand or business are. This means you may have to optimize these elements afresh for large and small screen sizes;
- When using interactive elements to engage site visitors, are you sure they work as desired on all devices? Also keep in mind that the quality of video playback and overlays is not the same on all mobile devices.
What about brand?
A website is always an expression of your brand. This means your brand values must come across clearly at all times and across all devices and screen sizes. At the start should be a well-considered brand message and visual strategy that can then be translated into a web responsive design strategy. From the strategies you can make sensible decisions about where and how to feature important messages, and how the layout and composition of the site meets your strategic goals.
Search Marketing and Email also make demands on Web Responsive Design
When you consider a website re-design or re-build, you should make responsive design a priority. Your customers and other website visitors are increasingly using mobile devices to access your site – you don't need a more compelling reason to make your website responsive design and mobile-friendly. The same reason applies to your other digital domains:
- Mobile website visitors often arrive at a site from different starting points...maybe clicking a link from another external site, via organic search or a pay-per-click ad;
- When this happens, the visitor usually gets their first impression with a landing page. This makes it imperative that the landing page is optimized for mobile use and communicates your strategic brand messages clearly on first encounter. If you get this right, visitors will have a positive first experience and are more likely to engage with the site, and be converted into sales.
To make your landing pages responsive requires the same methods as for creating a responsive website. To find out which kid of design solution is best, you can design a number of landing pages and then test them on different devices. The best sites use an approach where every page on the website is a landing page.
- Your most important content stands out most strongly;
- Calls-to-action are highlighted prominently, ideally both in the front and in the center;
- The story you want to tell is told clearly and engagingly.
An example of a responsive landing page with the content optimized for different devices and screen sizes
Responsive web design (RWD) is now the standard method to make a website be usable across multiple platforms, devices and screen sizes. Websites are key to communicating brand values, plus have the role of attracting , engaging and converting business – without a mobile friendly site these ambitions would be seriously compromised.
To rebuild your site and make it responsive:
- Study analytics and user research and let the learnings inform your site re-design and architecture;
- Choose a Content Management System (CMS) which gives control of how content is presented across devices and screen sizes;
- Build responsive landing pages as well as email templates to facilitate Search Engine Marketing and optimize for better conversions;
- Use an experienced and professional web development provider to help design, build and support your mobile-friendly site.