Deciding Between a Mobile Website or Responsive Website?

In early 2011 Bamboo started to see a shift in the amount of visitors accessing our clients websites on mobile devices such as smartphones (like the iPhone). In those early days businesses would most likely only see upto 3% of their traffic coming from these types of devices. Fast forward to 2014 and there has been quite a noticeable shift. Nearly all our clients websites see at least 15% of their total traffic coming from smartphones and tablets. In some cases mobile access is upto 50% or more.

What does this mean for businesses?

So what does this mean for businesses who already have a website that is not mobile compatible? and what choices are available to business website owners today who want to deliver their content to mobile devices?

It is certainly time to make sure your website is mobile and tablet compatible or you could be loosing a significant amount of leads and sales from your web site. The first step to deciding wether to optimise your website for mobiles and smartphones is to gather information on your current traffic. To do this you need to install some analytics to your web

site so you have some statistics and reports on the type of traffic your business is currently attracting.

The good news is the best analytical traffic reporting tool on the market is free to use and its supplied by Google. Google Analytics helps you analyse your web sites visitors and will paint a complete picture of your audience and their requirements. For instance if you see 80% of your traffic are all using mobile phones and tablets, then you would most certainly want to serve your website to that target audience in the most suitable way. This is a sure way of increasing leads and sales.

There are x3 different ways of delivering your website to mobile devices

Responsive design

A responsive website serves out the same html to everyone but will change its appearance and layout based on the size of the screen the website is displayed on. This means your website can look easier to use on small screens such as mobile phones by increasing font sizes and making buttons easy to press. This is Google’s recommended configuration.

Dynamic serving

Using detection techniques you can show pages that are optimised specifically for the device that has been detected. For instance if your visitor is using an iPhone, Blackberry or laptop they all receive different looking html pages and optimised content specifically for their device. This is great for optimising your website for a very specific device but will result in the management and maintenance of your website more costly.

Separate mobile site

Using detection techniques your website will redirect users to a different web address if they are using a mobile device. This website will deliver content specifically for mobile devices with optimised imagery and content.

Google prefers responsive web design because:

  • Using a single web address for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single web address helps Google index your content.
  • No redirection is needed for your site visitors to get to the device-optimised view, which reduces loading time. Also, user agent-based redirection is error-prone.
  • Responsive web design saves resources for both your site and Google’s crawlers. For responsive web design pages, any Googlebot user agents need to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh.
    – See Google

In summary

The wide variety of different screen sizes and resolutions that people are using to browse the web is widening each day, and creating a different version of a website that targets specific devices is no longer a practical way forward. This is the problem that responsive web design delivers for businesses.

Bamboo are experienced in designing and developing responsive websites. If your company is looking for a manchester web design agency who can deliver mobile and responsive web sites then contact Bamboo today.

Breaking Ads
Google Adwords Heisenberg Effect

Setting up a Google Ads campaign is exciting for any business, generally it’s the first time they’ve advertised their website online and the whole prospect seems a little nervy as well as being exciting. Everyone likes to see how the ads are performing and who else they are competing with. But if you do not search and analyse your ads the correct way, you can, and will affect your ads and search results.

Heisenberg’s Uncertainty Principle says:- You cannot measure observe something without changing that which you are measuring/observing.

As an example –  If you have an ad campaign setup for ‘Your Search Term’ and you google your search term to see where your adverts are but do not click your advert then you have inadvertently affected your ads relevancy for ‘Your Search Term’ in a negative way.

It doesn’t stop there either. I have heard many times people ask me “will my competition click my ads?” and “If I click my competitions adverts will it raise their bill and waste their budget?” – Both of these approaches will damage your own google ad campaign and improve your competitions ad campaign.

How? If you search Google for  ‘Your Search Term’ but click on your competitions adverts and not your own, you are inadvertently telling Google your competitions adverts are more relevant than your own. This will improve their ads relevance compared to yours which will make their adverts appear higher than your own, and also lower their cost per click.

Whilst clicking your competitions adverts Google track IP addresses, use cookies and probably track much more information such as MAC addresses and other geeky data that help them to analyse if your ads (and your competitions ads) have received any invalid activity.

What is it? Invalid activity refers to clicks and impressions that Google suspect aren’t the result of genuine customer interest. Google don’t charge you for invalid activity on your ads and credit those ad click costs back to your account.

For Example – Invalid activity includes clicks and impressions performed by automated tools, as well as accidental clicks – for instance, if someone double clicks your ad.

If you want to track your ads and search results without receiving skewed results due to cookies and ip data then you need to use the Google tools that available in your ad account. The tools Google supply allow us to monitor and track your ads and Google positions the right way 🙂

Download 1200px Photoshop PSD Grid Template

Today I decided to recreate my blank web design Photoshop template file that is retina ready – When I say retina ready I mean its basically 200% larger than my original Photoshop file. The reason I have had to re-draw a new retina ready 1200px grid template instead of just upscaling the original file is so I know 100% that all the dimensions are pixel perfect. Photoshop has a knack of anti-aliasing edges even if you snap to point or grid etc – It never works perfectly, the only way to make sure all grid widths and columns are correct is to re-draw them… So I did today. It’s a tediously boring job and a couple of years ago I would rely on all my web designs to fit and snap perfectly to my grid.

I’ve decided to give my Photoshop file away as a download here – Retina Ready 1200px Grid Template Photoshop PSD

The file has 1,2,3,4,5,6,7,8,9,10,11 and 12 column grids for 1200px width layouts as well as a 960px width grid thrown in there with 1,2,3,4,5,6,7,8,9,10,11,12 and 16 column grid layouts.

At the time of writing this article this is the basis Photoshop file we use to design all our web sites at Bamboo. We all work to a set grid and width before a project starts and this file helps the design process. This is not a finished file by any means though… in fact I am already working on anew file with media break grids in there with columns and I may start to group certain widths and columns together with their common responsive counterpart to make the file even more useful.