The sun has been out so instead of sitting for lunch and discussing web design things, we headed out across Manchester to capture our favourite place in the world… Manchester 🙂
– Captured our senior developer Mark on a two step
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.
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.
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.
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.
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.
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.
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.