Responsive vs Mobile Website

Published on 11 January 2013 by Oliver Yeates in General News, Mobile, Responsive Design

The topic of conversation this week is the merits of either a fully responsive website or a specific mobile version of your website.

As you may have seen mobile web browsing has soared in the past 2 years and Google estimate that 2013 will see mobile web browsing become more common place than traditional desktop web browsing.

Typically mobile web browsers have smaller screens and users usually use their (often clumsy) thumbs to navigate around – this makes navigating some websites a real pain and research shows users will often give up if it is too difficult to use.

So basically you need to make sure your website works easily for mobile users to ensure you convert mobile users into customers.  A recent case study of ours has shown a massive improvement in mobile conversion rates after the launch of a dedicated mobile website.

So what are the options?

  • Re-design your website as a fully responsive (this is the buzz word at the moment) website- This is a website which automatically adjusts it’s visual look and feel in accordance to the browser window size.For example a desktop user may see a nice wide design to suit their screen size but should they resize their browser window, the content will adjust itself to match the screen size, ensuring it is still simple to use.This includes mobile screen sizes (e.g. iPhone), which typically have the smallest pixel widths but also will adjust itself for slightly larger pixel widths such as the iPad.

    Often a fully responsive website will change its entire navigation system to suit your screen size and some graphics may swap to suit smaller or larger screens.

    This is usually the most expensive option as usually your website will need to be completely rebuilt, however it is certainly considered the most technically elegant solution as each and every different screen size is catered for.

    Example: see http://foodsense.is – try it out by resizing your browser window!

  • Build a specific mobile version of your website-  this is a commonly used method which swaps the entire visual style of the website based on whether the user is using a mobile or desktop device.

    Usually a script is used to detect a mobile browser and then serve the mobile user a different website design to make it easier for the user to navigate.

    Typically the same content to the desktop website is used but the content is completely re-organised to suit specific smaller screens such as iPhones.Should a desktop user resize their browser window the website stays at the same pixel width and usually we choose to serve the desktop website to tablet users (such as the iPad)

    We currently utilise this method.

    This is usually a cheaper option as the existing desktop website will not necessarily need to be altered but is a less elegant technical solution.

    Example: see http://www.clicky.co.uk/?mobile=on - this is made for an iPhone so obviously is best viewed on a mobile device.

So what should you do?

We are advising customers on a case-by-case basis, but should a customer be building a brand new website it is definitely worth considering a fully responsive website.  For existing websites it may be easier, cheaper and simpler to create a mobile version of their website (see some examples here >>)

A fully responsive website is a great demonstration of technical ability and many agencies (like us) are redesigning their websites to demonstrate their ability but it does come at a cost, and not just a monetary cost.

A fully responsive website does create some design limitations and when any edits are made you need to consider every different screen size before you carry them out.  It also may be more time consuming in the future to create different graphics for each screen size and some design elements may not be possible at all.

Admittedly if done well, responsive websites are great, but we cannot expect our average customer to be too impressed – after all they just want it to work and they may even notice a lesser visual experience due to the new limitations in design.

Some of the big boys have opted for mobile versions (maybe just for now) such as eBay and Amazon as making their websites fully responsive is a massive task (maybe even not possible)

Either way we need to consider mobile users and also a range of different devices to ensure their experience of your website is a good one.

Find out more about our mobile website design services here >>

Further reading: Smashing Magazine 

Continue Reading

Clever responsive design on Apple.com

Published on 26 October 2012 by Oliver Yeates in Responsive Design, Web Design

Just noticed a nice simple bit of responsive design on Apple’s new home page which shows off the new iPad Mini.

The screenshots below show how the main feature area alters itself based on the size of your browser window.

Responsive design is the latest method for adapting websites based on the screen size of the user. Users are no longer using just PC’s to access your website and ensuring your site looks good regardless of the device’s screen size is becoming more of a challenge.

Check out the screenshots below to see it in action.  (BTW – not entirely convinced the hand looks quite right!  Could Apple be the latest victim of poor Photoshopping or do they have a model with a extra wide hand?!?)

Home page with small browser window

Home page with medium browser window – Notice how iPad image is larger

Home page with large browser window – Notice how the iPad image goes below the text

Continue Reading

@clickymedia: @DJMaXimumOutput Hi, we've sent an invitation for you to link to our account on 9th May. Let us know if you need any help!
@clickymedia: Which are the top brands on for followers, comments, likes and re-pins? Find out with @clickymedia
@clickymedia: Our very own @JasonClicky has been published on @seomoz! Read his article "Using for SEO Success" #youmoz
@clickymedia: @thelivingroom_ Because we have table football?
@clickymedia: … & results focused. It has been a pleasure dealing with them" Find out more about our services here
@clickymedia: Another really nice testimonial from our SEO client, Aaron & Partners "the team at Clicky have been responsive, easy to work with...
@clickymedia: See the end result here
@clickymedia: I would happily recommend Clicky Media™, and look forward to working with them on new projects and features in the future." Thank you!
@clickymedia: …They encouraged us to take part in the creative process and were prepared to push the boundaries...
@clickymedia: A nice testimonial from our client West Coast Energy - "Clicky understood from the get-go what we were trying to achieve with our new site..
@clickymedia: Hi having a few issues with our phone system this morning - calls directed to mobiles so please bear with us if you can't get through!
@clickymedia: Delighted to have @mybunjee as a new client! (As seen on @BBCDragonsDen) Can't wait to get started!
@clickymedia: We've launched a new minisite for West Coast Energy! Find out more, here: #web
@clickymedia: RT @suzanneclicky: @clickymedia @westcoastgroup Check out the exciting new minisite we've just launched for West Coast Energy! /…
@clickymedia: @ClickyMedia are proud to announce the launch of the brand new @AproposUK Mobile Website!