This article struck me as particularly misleading for those seeking genuine advice on mobile strategy and creating a future friendly mobile web presence. After some interesting discussion around this on Twitter it’s become apparent that there are many mixed messages out there leading to a significant misunderstanding of mobile web on design, usabilty and delivery to multiple devices.

It is only possible to adopt the  methodology of “one site fits all” if you are using a technology platform that optimises the content to each device at a granular level. If you don’t use such technology and decide to approach mobile web with only an understanding of web practices then you would disregard a decade of experience and development held by mobile web specialists. Additionally you could very well be making some critical errors in mobile design, user-experience, device rendering & marketing such as those made by American Airlines (placing QR codes in their in-flight magazine) or I Cant Believe it’s Not Butter (series of iPhone ads linking to a non-mobile optimised site).  Specialists ensure successful implementation of mobile friendly content suited to all, rather than just a small screen desktop or a discriminatory experience that discounts a large percentage of your consumers.

Over the coming few weeks I aim to talk in greater depth around these issues dispelling some of these myths and clarifying what a mobile web specialist can offer over and above a web agency and would welcome your thoughts, feedback and questions on this topic.

Coming Next: Demystifying Mobile Web Development | Design and Usability

The first and foremost problem dealing with styling and mobile optimisation client side, is that the user viewing the website on their mobile will still incur download hits for assets and elements they may not even see.

Take for example this Media Query and CSS (commonly used in Responsive Web Design)

@media all and (max-width: 320px) {
       #largeElement {
             display: none;
       }
}

Now, all devices will still download this element, yet the user will not see it. A pointless waste of kilobytes.

When using Wapple’s Technology, we can detect what device the user has and send appropriate images and assets at the correct size which does not clog up their downloading of the website.

Take for example http://wapple.net – if you examined this website in YSlow you would see that the weight of the homepage when viewed on a mobile is around 150Kb. Very streamlined. Compare this to http://www.apple.com/uk/. Their desktop site weighs a total of 387kb, and in this unoptimised state, 387kb is unnecessarily downloaded to the user’s phone.

The trend seems to be that some people will develop their desktop site and add the mobile version as an afterthought, this results in certain small screen websites looking, frankly, dull. Recently, The Boston Globe made the headlines as it was the first large website that was redesigned using Responsive techniques. Now, even in this article, the phrase “Responsive design allows the Globe’s content to be refitted to any screen size available automatically” uses the word “refitted”, it just doesn’t sound very elegant. What seems to happen with Responsive Web Design is that content and styling have to be kept minimal and very text heavy, now simple single column websites adapt well to this approach but anything above and beyond struggles to remain fluid. A tweet from Simurai details this very succinctly: “My excitement for Responsive Web Design is fading a bit. It’s great for simple websites, but not enough for more complex web apps.”

The user of a smartphone buys a smartphone because they want a powerful, fun gadget in their hands. Responsive Web Design allows nothing more than styling tweaks. The real power of a mobile experience is using technologies such as Geolocation, SMS integration and now even, the phone’s Gyroscope. 360 Panorama have accessed the iPhone’s Gyroscope in Mobile Safari to give a native app feel to their Panoramic images.

Wapple were proud to be involved in the building and developing of the Microsoft Office 2010 mobile website, this site uses the smartphone’s GPS to access the user’s Geolocation and tell them where they could buy Microsoft Office 2010 around them.

“There are 5.3 billion mobile subscribers (that’s 77 percent of the world population)“. In a nutshell, this means that a LOT of users will be accessing your website through a mobile phone. Don’t just squeeze your website into a small screen, give people a mobile experience.

What we loved: Looks nice and is consistent with Apple branding
What we’d love to see improved: Apple are currently only providing the desktop version of their website for their mobile consumers.  Let me repeat that.  Apple are currently only providing the desktop version of their website for their mobile consumers!!  This is bad form for any brand but Apple probably receive c.15% of their traffic from mobile users.  This is very bad for all the reasons we’ve discussed in other Mobile Friendly/Mobile Lazy posts.

The load size of their home page is nearly 400kb which makes for very frustrated consumers waiting for the page to load on mobile.   When it finally does load the consumer experiences the exasperation of zooming in for content and zooming out for context.  When they do zoom in they are then presented content that is completely irrelevant to their mobile needs. Additionally the videos they present on the homepage will not play on most mobile devices – including my mango-updated WP7.

With little analysis, it would probably take Apple marketers less than an hour to work out what their mobile web consumers want from them and then another hour to present an appropriate solution.  Apple make smartphones – they more than the majority of brands should understand mobile web.

Go mobile and tell us what your experience of APPLE mobile is… and cast your vote below http://apple.com
Or see who else is Mobile Lazy

What we loved: The homepage wasn’t too heavy despite the content so loaded on a range of mobile devices…BUT this site was designed for desktop not mobile!
What we’d love to see improved: Everything! At the moment Play are delivering their desktop website to all mobile devices meaning a lot of zooming in for content and zooming out for context – a classic example of mobile laziness! The site will frustrate the mobile consumer and they simply won’t stick around for all of the unnecessary content loading on all of the internal pages. Play would likely report significant increases in turnover just like Gap did if they mobilized their website with technology like Architect.

Go mobile and tell us what your experience of PLAY mobile is and cast your vote below… http://play.com

What we loved:The website is relatively uncluttered because of the nature of the service with great branding so it is not too badly presented to mobile devices but…
What we’d love to see improved: This is a desktop site!  118 is a huge directory service brand – they would benefit greatly from offering mobile-relevant experiences such as ‘Search near me’ and ‘click-to-call’.  The brand is perfect for mobile web and they must get way above average hits to this URL from mobile consumers currently but they simply are not maximising the opportunity.

Go mobile and tell us what your experience of 118 mobile is and cast your vote below… http://www.118.com/

What we loved: Great design optimised across a broad range of devices with consistent style. Good usability and clickable links.
What we’d love to see improved: The site would benefit from a lighter load, 87.9kb is big and runs the risk of alienating consumers on older devices or pay as you go. Introducing some unique customer or location based experiences for customers would bring the mobile site alive for users and add to an otherwise great mobile experience.

Go mobile and tell us what your experience of FORD mobile is and cast your vote below… http://ford.com

What we loved: An effort to create a mobile presence had been attempted with text set at a width to fit a number of phone screens.
What we’d love to see improved: Everything else! The navigation bar stretches full width of desktop site, and no other mobile usability has been implemented. The buttons/links have been reduced so significantly in size they are too small to use. This really is a very mobile lazy website but there really is no excuse for a publisher like Smashing Magazine given its web-dev knowledge-base and readership.  We’d love to work with these guys to make their website truly mobile friendly so that they can be seen as an authority on mobile as much as they are on web/platform development. I know our dev team here at Wapple would be delighted to work with them.

Go mobile and tell us what your experience of Smashing Magazine mobile is and cast your vote below… http://smashingmagazine.com

What we loved: Presentable, easy to use, strongly branded experience on iPhone and Android.
What we’d love to see improved: Faster loading across all mobile devices and improved styling and layout on Windows and older phones.  There is an assumption that everyone has Android or iPhone, this is not the case as 36% of mobile web traffic is generated by Windows and other OS. By offering a mobile web version for all devices could increase mobile web usage by up to 1/3.

Go mobile and tell us what your experience of PHOTOBUCKET mobile is and cast your vote below… http://photobucket.com/

What we loved: The site is optimised across a broad range of devices with consistent style. Simple navigation, good usability and clickable links, readable search results. In terms of functionality Argos ticks all the boxes.
What we’d love to see improved: Not all of the branding carries over from web to mobile – e.g. buttons. The store locator could be location-based e.g.”Nearest store to me now!” Perhaps additional location experiences such as location based promotions or local store updates.

Go mobile and tell us what your experience of ARGOS mobile is and cast your vote below… http://argos.co.uk

Mobile Lazy
Serving your PC website direct to mobile browsers is not friendly; it is ‘Mobile Lazy’! Your website will not recognise the mobile user’s real time location or their behaviour, you will not be able to consider the unique capabilities of the mobile device, you create barriers that prevent the consumer interacting easily with you and potentially a needlessly poor experience for your customer.

Neither should you assume that mobile friendly means dumbing down your website or brand and providing lowest-common-denominator output to cater for all devices. There are technologies out there, including Wapple’s, that allow you to present rich and dynamic content, whilst optimising the best experience possible for every single type of mobile phone and customer.

Mobile Friendly
A mobile-friendly website should present the same web company branding but one that is designed for small-screen display and browsing. It should take into account the mobility of the consumer and present only relevant information and content from the website for their ‘in-situ’ need.

It should interact with them for their unique device and provide mobile-specific opportunities such as location-based offerings. Interaction should be simple and easy with few clicks, forms should be low maintenance and contact numbers should display as click-to-call.

Here at Wapple we put a team together to visit a number of urls to determine exactly how friendly or lazy some of these big brand websites are across a spectrum of mobile devices.
There is clearly a lot of knowledge to impart but it is not rocket science and over the coming weeks I intend to demonstrate exactly how easy it is to become Mobile Friendly by publishing examples of websites that are Mobile Friendly and those that are utterly Mobile Lazy…you might be surprised by the results.

To get things kicked off, here is our first example Covergirl are…Mobile Friendly