Mobile Friendly, Responsive Design

Mobile Friendly Design

Spend any time researching current web design trends and you will hear all about responsive, or mobile friendly design.  Responsive refers to your website automatically displaying itself in a way that is optimized for the device’s screen size.  Responsive design as become exceedingly important in the last couple of years, both from a user experience standpoint, but also for search engine optimization.

in 2015 mobile access to internet overtook desktop access; a trend that continues today.  The fact is that 90% of North Americans have cell phones, and more and more of them are smart phones every year.  Go into your local wireless provider, and see how many “feature phone” models they still offer.  It will become very clear that smart phone usage is quickly becoming ubiquitous.

It seems obvious that more and more people are accessing the internet via mobile devices than desktop computers. As business owners, we need to make sure that our websites accommodate those visitors with a great user experience. If we fail to do so, we risk loosing them to our competition, who’s site is likely already responsively designed.

Responsive vs. Mobile Friendly

Before we go any deeper let’s look at two terms that we see a lot.  Often the two are used interchangeably, but they actually do have different meanings.

Mobile Friendly:  This means that the design will display well on mobile devices.  It uses a single layout that scales well for both desktop and mobile use.

Responsive:  Responsive sites use media queries to determine the screen width.  The site then uses a set of design rules to change the layout as needed to optimize for the screen width.  Fore example, content may be laid out in columns for desktop, and then it stacks for mobile.

Google Mobile Friendly TestGoogle Mobile Friendly test

If your site was designed in the last few years, it may already be responsive.  Many popular platforms have been supporting responsive design for several years.  If your website is based on a content management systems like WordPress or Joomla, the theme or template you use will determine if your site is or is not responsive.  Google has created a very handy mobile-friendly test to determine if your site fits their criteria for being mobile friendly.  In April of 2015, Google started weighing this heavily for its page rankings for mobile searches.  Basically, if you search from a mobile device, then mobile-friendly or responsive sites will rank higher on your search results.

The test is looking at 3 main factors to make its determination about whether your site is mobile friendly.

  • Mobile Viewport: The viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page’s width and scaling on different devices.
  • Text Size:  text must be displayed at a size that can be easily read on mobile devices.
  • Distance Between Links:  If the distance between links on your page, or in your site’s navigation is too small, then users will find it very difficult to click on a link, without accidentally clicking on the wrong one.

So what do i do if my page isn’t mobile friendly?

The first thing you need to know if if your site is built on a Content Management System (CMS). If your site was not built with a CMS, the site may need to be redesigned from the ground up.  If the site was designed using a CMS then you could employ one of two basic approaches:

  1. Mobile-Friendly Plugin:  There are plugins available for popular Content Management Systems which will save a mobile friendly version of your content for mobile devices.  They do little to preserve the design of your site, but they will allow you to pass the mobile friendly test.  This is the most economical option, since plugins are available for free, or for a nominal fee.  I will place some links at the bottom for mobile friendly plugins
  2. Theme Change:  The theme or template of your site determines how it displays on mobile.  Changing a theme will allow you to keep your website’s content and structure, but it will likely require a fair bit of redesign.  It’s not as bad as a ground up redesign, but it will be a bit of an undertaking.  This has an advantage over the plugin approach in that the look and feel of your site can be maintained across both mobile and desktop version of your site.

In Conclusion

It seems obvious that one of the best ways to ensure that your business’ website is effective is to make sure that people can access it, and find what they are looking for.  With web traffic shifting more and more to mobile, that means you need to adapt.  Speak to your website’s developer to see what his or her recommendations are.  If you built your site yourself, then take a look at the plugin and theme change options.  If you need some help with implementing the changes, feel free to contact us, and let us know how we can be of assistance.

Mobile Friendly Plugins for WordPress

WP Touch  -FREE
Mobile Smart Pro -$16
Handheld -Subcription Required