‹ Blog / FL1

Your website and Mobile Phones, what you need to know

Sep 17th 2012

Mobile phone technology has come a long way and with the success of Smart Phones such as Blackberry, iPhone and Google’s Android accessing websites from your phone has become common place. But with change comes buzz words: “mobile site”, “mobile compatible”, “responsive”. We look at the differences and what they might mean to you.

With 60% of the UK population research a product or service on a mobile device before making contact, it’s fair to say that making your website available for mobile phones is no longer something to be ignored.

So with so much talk around “mobile optimised sites”, “mobile sites” and many more, what do they really mean and what do you need to know?

Mobile Sites

A mobile site is a variation of a website that’s designed solely for a mobile phone.

If you’ve ever looked at Google or Facebook on a mobile device or tablet, you’ll see that the layout is quite different and much more simplistic.

The fact of the matter is, it’s often a completely different website in reality, with different styles, sometimes content and each web page design and layout is completely different.

Mobile sites often work in conjunction with the normal website, and share content and data, but some times they are autonomous and use completely different code.

With some platforms such as WordPress, there are extensions called “plug-ins” that can render a website as a mobile website, however the main website has to be built specifically with this in mind.

For functional websites or websites with a complex structure that have a high amount of visitors using and transacting, a mobile version of a website makes good sense and can bring enhanced usability. Where a mobile website is in some ways a whole new website, this can mean you’d end up paying for almost two websites, so with than in mind, this should be taken into consideration, and there should be a strong commercial case for it.

Mobile Optimised

Quite often a website can be designed so that it uses the same layouts, however resizes for a mobile device. This can mean the website using different style sheets (these define the structure and sizing of the page content) for different screen sizes. Special code can be added so that features such as touch scrolling can be used, and menus will have natural links so that they’re easy to use and access. Flash animation won’t be used as this isn’t supported on some mobile and tablet devices (most notably Apple’s iPod/iPhone/iPad).

This takes some addition development work over a standard website, however offers a good practical solution without the costs of developing two websites. The layout will need to be built to accommodate this technique, so this can have an impact on the design of the website.

Mobile Compatible/Mobile Friendly

Being Mobile Compatible or Mobile Friendly is really all about making sure your website renders well on a mobile device or tablet.

When a website is built, there are always variances over the different web browsers (such as Internet Explorer, Firefox and Google Chrome) and devices (Blackberry, iPhone and Google Android). With this in mind, for a website to be Mobile Friendly, it’s important to test compatibility over all mobile devices and ensure that the website renders consistently over them all.

Use of Flash animation should be avoided as should complex fly-out menus or Javascript that can cause problems on some devices.

This approach I’d recommend and expect for any new website.

Responsive Sites

A Responsive site is a website that adapts dependant on the screen size and device looking at it. Responsive sites are very popular the moment and make management of the site simple as there is in effect one site, one set of content and it’s only the layout of each page that changes.

All this said, it can be time consuming to build a Responsive site as in effect 4 different versions of each page need to designed, namely:

  • Standard Browser Version
  • Tablet Landscape version
  • Tablet Portrait version
  • Mobile version

Responsive website often change their menus when in a mobile version to ensure space is well utilised.
For and example of Responsive websites visit: http://sewellgardner.com/ (try viewing this site on a mobile) 😉

What next?

Browsers and devices change constantly, so if you have an existing website, it’s likely that it may not be compatible. As new browsers and devices become available, websites will often need to be updated accordingly to render correctly.

If you’re looking to build a new website, bear in mind the three options and decide the best for you.

Never assume your website will automatically be a mobile site or mobile optimised, if it needs to be so, make sure that this is part of the design brief, and adjust your budget accordingly.

If you’re unsure how many people are using Mobile devices to look at your website, why not install Google Analytics?

If you want to learn more about Google Analytics or find out what it does, why not check out our free Google Analytics Workshop: http://www.fl1group.com/google-analytics-workshop.asp