Responsive & Mobile Optimised Websites

When implementing a zeckoShop website we at Terracor have traditionally built a “desktop” oriented design. This meant that the design of our websites were created with only desktop and laptop computers in mind.

More recently however with the increasing use of mobile devices (phone & tablets) to browse the web and purchase products we’ve enhanced our process in order to build sites that look and behave as needed on these devices.

You will hear lots of different terms and phrases used when describing ways to build a website that works well across mobile devices and at Terracor we specifically refer to:

  • Responsive Design
  • Mobile Optimised

So what does each of these mean?

Responsive Design

When we say that your website is designed to be responsive what we are implying is that your website design will “respond” to different screen sizes by adjusting the layout, content & element sizes of items on your website as needed to maintain a proper look and feel.

The best way to describe this is by showing an example site. Below you will see three screenshots from www.iStockPhoto.com which illustrates how their site responds depending on the devices viewing it:

Desktop
iStockPhoto Desktop

Tablet
iStockPhoto Tablet

Smartphone
iStock Photo Smartphone

A couple of important details are worth mentioning:

  1. The site did not respond based on the devices viewing it but on the screen size. You can test this for yourself by going to the website on your Desktop and shrinking the browser screen. Notice how it adjusts and adapts as you change the size.
  2. Also, the site being displayed in the screenshots is the exact same site with all the same content. It may look like different versions but due to the adaptive nature of responsive design it adjusts itself appropriately based on the screen size it’s being viewed on without the need for an alternative site or design.

Mobile Optimised

So once you have a responsive website you may be left wondering how well your site behaves on mobile devices which leads to two main questions:

  1. What is mobile optimisation?
  2. Why should my website be mobile optimised?

So let’s start with the what: simply put, mobile optimisation gets your responsive website and optimises several aspects of it to allow for a great user experience on mobile devices i.e. smartphones & tablets.

As an example here are some optimisation techniques we employ:

  • Images: here we remove unneeded images, shrink dimensions and compress the files sizes, allowing for quicker loading times over mobile networks
  • Home page: here we build your home page specifically with smaller screen sizes in mind which allows for removing unneeded elements along with changing the layout, content & widgets as needed
  • UI: here the general user interface of the site behaves specifically with mobile devices in mind. For instance the cart/checkout contents are stacked in a mobile friendly way to make viewing and modification a more natural experience on these devices

An important note here is that although the mobile optimised site is responsive, the changes made to optimise it on mobile only appear on those devices. Unlike the iStockPhoto example previously, if you shrink your desktop browser you will not see these changes in action as their activation is dependent on the actual device viewing the site.

Let me show a really good example of a site that behaves very differently on mobile as opposed to desktop: www.etsy.com. Note, only the top portion of each page is shown below for brevity but feel free to view the site on different devices and browsers to see this in action yourself.

Desktop

Etsy Desktop

Smartphone

Etsy Smartphone

You’ll notice here how the Smartphone version isn’t simply the desktop version with slight changes but in fact makes the following large changes:

  • Several pieces of text have been removed
  • Search has been made more prominent
  • Images are no longer heavily used
  • Categories are presented at the top to the user and simple icons used to illustrate

Next let’s discuss the why: there are dozens of reasons why you should have your site optimised for mobile and here are just a few:

  • Google will like you more: having a responsive design is a must with Google’s search engine ranking as otherwise you will be heavily penalised for not having one. In addition to this, having a website that behaves and performs well on mobile devices will also improve your Google ranking
  • User experience: by tailoring the user experience specifically for the device being used you can ensure that those users of your site have the best experience possible
  • Increased conversions: following on from the previous point, since you can optimise for mobile users you can streamline the whole process to make sure they see only the information they need and can navigate the shopping process as efficiently as possible
  • Number of mobile users: Over half the traffic on the web now is through mobile devices so it’s becoming a necessity to ensure you are catering to and building your website with this set of users in mind as you move forward

Conclusion

So should you stick with just a responsive site or go the extra mile and optimise for mobile?

This of course depends on your needs, business, user base etc but our recommendation with the pace of Smartphone adoption and the need to keep your website modern is to cover all bases and ensure you give the best user experience to anyone on your site no matter what device they are on.

Leave a Reply