Big Orange Software Blog

With the plethora of mobile devices around these days, well, within the offices I tend to work in, the car parks with *YouTH* hanging around on the devices…crikey, mobiles are everywhere! As to how best to approach the mobile sector, do have a look at our guide to all things mobile. For those companies that are already mobile, several have created specific sites for touch devices, namely Apple’s iPhone, Android powered Google devices (such as the recent lovely Samsung Galaxy) and others. How does this differ to designing for standard mobiles? Touch is the new click!

What is YouTube up to?

YouTube recently launched a new version of its mobile site at http://m.youtube.com to offer a better mobile browsing experience. Specifically, it aimed to:

• provide an HTML5 powered video experience (without Flash)
• give users better quality than video through YouTube apps on devices
• be targeted at more devices, including ones with smaller screensizes
• h.264 codec for video, instead of WebM or anything else more open source

So, how does this shape up with their touch site? Which would you prefer to use on a touch device?

Touching YouTube

YouTube rolled out a customised version of their old mobile site for touch devices about two months before their new mobile site. Strangely, it still contains features that would be good for both standard mobile handsets and touch ones. Do check out the gallery on Flickr and add your comments, or just the site a try and let us know what you think. Specifically, the site still wins because of:

• tabbed navigation for content areas
• use of JavaScript functionality
• advanced searching
• better use of screen size
• its use of vertical layouts

Tabs will save us all

Laying content areas out with a tabbed navigation just seems like a no-brainer for both mobile and touch devices. There is a much smaller screen size to design for so using short, often single, words as the labels on tabs to get to content is a real winner for the touch site. The mobile site on large screens seems lost without it.

Send for Javascript!

JavaScript support is patchy in the mobile world, but better than you may think to start off with. Even mobile devices with a medium level of support for XHTML, CSS and JS, will be able to carryout basic manipulation of the XHTML that the page is made of. The touch site uses JavaScript for some lovely show and hide interactions, only showing the minimum of information to start off with and allowing you to find more onClick, as you browse around.

Search to the Power of 11

If you aren’t browing videos or following a few channels, the next thing you will be doing is searching. The touch site has some great searching, remembering recent searches and more. Admittedly, it can use the power of Ajax, so hovering suggestions boxes are very easy on the eye and draw you in. Apart from this, the actual layout of search results are also better on the touch interface, easier to browse through, clearer layout of the key information, a win all round really.

Screens The Size of Postage Stamps

One of the fallbacks of designing for mobile browsers, even if you are checking the user agents and serving different versions ( what, playing with media types too? you crazy dawg ), is that you will still generally have  a smaller screensize to deal with. This means the touch site is going to beat you hands down every time in the amount of space it will have to display content. Thumbnails are bigger, buttons can be used instead of text navigation, more than one option can be provided in menus and so on.

Verticality is the new black

Touch devices tend to major on the perceived degree of  **control** that users get, compared to standard mobile devices. Heck, it probably gives iPhone 4 users something to do while they work out how to hold their device and get a signal, right? High fives all round! Oh, you have an iPhone? Okay, lets move on…;-)

Vertical layouts for content are great on touch devices. People are getting more and more used to scrolling layouts and the YouTube touch side does allow for this to a much greater extent, allowing more content to be shown, providing more menu options and so on.

Just look, don’t touch!

So, if touch is all that great and easy to design for by doing those things above, what are the pitfalls to be ignored Mr Smarty Pants?

Well, these are probably the main ones:

1. Feedback for users is key, clicking 20 times on a button won’t help anyone, least of all the site (sounds and other visual techniques can be used to help here) 
2. User inputs need to be large enough to be used, but also ones that don’t need the non-existant hover state
3. Remembering data where possible, such as search results, so people don’t have to retype – cookie support is also better in mobile browsers than you might imagine, heck, get people to sign in and store session information too if you like!
4. Only thinking about one orientation and screen size – enter the accelerometer! 
5. Make sure your links are clear and ever present - use tabs where you can
6. Don’t forget that **touch** doesn’t mean Great Internet Connection (TM) so don’t go crazy on those large graphics, this is like the “Wild West Web of 1992 – Sheriff Neilsen“

Okay, I am SOLD! What else can I touch?

So far, the other touch-optimised site that has been recently released is Facebook – http://touch.facebook.com – but if you find any more you like on http://www.mobileawesomeness.com - let us know and we will check them out!

As Blackberry releases its latest OS, Apple iPads spread into Leicestershire then the EU and Nokia shouts about N8 it does seem like the world is going app-store crazy and that we should have definitely listened more to Dom Joy.  

So why bother with mobile?

As mobile devices have got cheaper and cheaper over recent years, their take up has increased. The amount of smart phones sold keeps going up and up each month. Apple iPads are predicted to sell around 300,000 units by the end of this year and even Rupert Murdoch thinks it is the way of the future.  

The main point for any owner of a web business, or organisation that has a website, is that people are often out and about or away from their computer, yet still want to get information from you and your site.    

Don’t believe me? As most people are using Google Analyyics on their site, why not drill down and check out either the mobile tab or the screen resolutions – the tell tale 320 px by 480px is the default size of the iPhone browser – check out the sample from our site below: 

Okay then, how and what should I bother with? 

If you don’t have any mobile site at all, you need a strategy. With phases. With a common sense approach (TM). Based on what I was talking about in terms of homepage design, you always need to consider your users first of all. Are they either: 

• high rollers (A B C 1) with the latest iPhone 4, iPad and iEverything
• students with a reasonably new phone, Android or Nokia powered
• my mother, with a Nokia from the days when phones were house-sized
• anyone else, with a generic phone and a very basic Internet browser

Why does this matter?

You have a choice of what to build for mobile users – a mobile website optimised for the smaller screen or the world of apps for particular phones. Oh and don’t forget SMS messages too.

Mobile websites

e.g. http://m.guardian.co.uk , http://m.flickr.com or http://www.bbc.co.uk/mobile

Pros? – A mobile website can be accessed by a wide variety of devices, from the latest to the older. It isn’t tied to a store, like Apple’s App Store, so can be updated easily and quickly. Generally speaking, the development cost is also lower for these types of sites. Also, with the adoption of HTML5 by *some* devices, these sites can even work out where you are e.g. http://mobile.papajohns.co.uk so you can find your nearest source of Pizza Joy

Cons? -  Your mobile site is effectively another website, so you have to then keep two websites up to date as the content is slightly different on both. Text still works much better on mobiles so you won’t be able to use many images. The layout is very *vertical* in nature, so this might limit the number of pages you can have. Also, if people are browsing the site away from home, you need to keep the site relative small and quick so they don’t incur a bill for thousands of pounds for accessing the site. Last of all, despite the fact that mobile browsers are getting better, they often struggle with animation and other media like video so interactivity has to be limited.

Apps 

e.g. *plug alert!!!* our free, lovely SEO website analyser tool, produced with Impact Media – download today

Pros? Apps, especially iPhone ones, have a certain level of *cool* attached to them, even still. If you want to associate yourself with this and the latest iPad craziness, then you need to have an app. They can access parts of the phone that a mobile website cannot e.g. contacts and camera, so tend to be used more frequently than a mobile site. They are more engaging as they can contain video and other elements which mobile sites sometimes struggle with. People often want something to own, to take away from a site and an app is perfect for that, building a relationship with a person as they carry your app with them.

Cons? Generally speaking, apps tends to cost more to produce than a mobile site. Then which platform do you develop for? iPhone / iPad, Android, Blackberry, Nokia, Windows devices all take different apps which have to be produced separately. Each will then cost to produce so to cover all bases and app stores could be expensive.

SMS

e.g. “Get 10% off all our new products by quoting product code TENOFF – only valid this weekend! http://www.shop.com for details”

Pros? Texts are relatively cheap to send and every phone, even the old bricks, can use them. They are also quick so can be useful to send out updates and the latest news easily. They can also contain links to web pages, which devices that have Internet browsers can use.

Cons? None whatsoever, apart from the fact that some people find them annoying. Make sure users are opting in to receive them otherwise they may well hate you forever.

I think I get it now. Erm, what is everyone else up to? 

Recently, the big food retailers have been engaging in M-Commerce. Cringe. I mean mobile things. Here is a list of what they are all doing (some of these links only work well on a mobile phone!) :

• Marks and Spencers – mobile site? yes | apps? no (since May 2010 1.2m unique visitors to the site, 300,000 who purchased goods – marketingweek.co.uk 03 August 2010)
• Tesco – mobile site? no | apps? Nokia Ovi - iPhone shortly - Winefinder launched
• Asda – mobile site? no | apps? iPhone due Dec 2010
• Sainsburys - mobile site? corporate | apps? no
• Ocado - mobile site? yup | apps? Android - iPhone    (4.4% of all orders since it launched in July 2009 – nma.co.uk 20 April 2010)
• Waitrose – mobile site? yes | apps? iPhone
• The Co-operative – mobile? no | apps? iPhone
• Aldi – nope
• Lydl – nothing at all

What is interesting about this is that the offerings do seem to matched to their user base – as I pointed about above. Ocado is going to be targeted more towards the higher earner, so iPhone seems like a natural choice there. Tesco pitching their lot towards Nokia first of all, as well as iPhone later, is definitely done with their user group in mind, Nokia having a much greater user-base than iPhone, in all social groups.

Okay, so what’s a good first step?  

1. **blatant plug alert** contact us about a mobile site, app or for some advice – ding!
2. A simple mobile site
3. A content management system, that is mobile-enabled – our VEBO system will have this very shortly for you.

I would definitely suggest to anyone to get a basic mobile site up and running at http://m.yourwebsite.com or similar, just a few basic pages. If you hook in your Google Analytics, you can see how much use this gets and then see what device are using it, allowing you to target some apps in a second phase. Sound like a plan? Good! Enjoy