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

Day 1

Day 2

Day 3

Day 4

Day 5

Day 6

Day 7

Day 8

Day 9

Day 10

Day 11

Day 12

Day 13

Day 14

Day 15

Day 16

Day 17

Day 18

Day 19

Day 20

Day 21

Day 22

Day 23

Day 24

Wishing you a very Merry Christmas from everyone at Wapple, see you in 2012
.
.
.

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

We’ve created a fantastic 10 Session Webinar Training Program to aid you in becoming a master mobile web design expert and we’re including an additional 11th session focusing on mobile marketing.

This webinar-based Program starts November 1st and is absolutely FREE and we’re offering it exclusively to registered Wapple users. (not registered yet…click here quick!)

During the course you will learn how to build a mobile site yourself using our fictitous car services site ‘K-Ching’ as the focal point whilst learning some of the exciting key design, marketing & technical features of our intelligent Mobile Publishing Platform.

Once registered you’ll be able to download the Training Pack which will include the Program Schedule, the K-Ching Mobile Site content (graphics, csvs ) and all relevant training preperation.

Be quick though, places are limited and registration closes THIS Friday 28th October.

Register Now for the K-Ching Training Webinar! (or sign up with Wapple first)

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

I used Alexa to identify the top 500,000 websites to determine what percentage of these had a mobile friendly version when hitting the web URL. From this methodology I hoped to determine the REAL number of global mobile-friendly websites today. I classified a site as ‘mobile-friendly’ … or ‘mobile-optimised’ if, as a minimum, I was redirected to a mobile site under a sub-domain or served mobile-formatted and designed content from the main website domain. I excluded every experience where I was simply served the website that was designed for PC consumption.

What is a Mobile-Friendly Website?

A REAL 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.

I did find some gems during my search (not all built by Wapple by the way), some exemplary mobile experiences that were served to my mobile browser from the websites domain.

Example of a Great Mobile Friendly Website – CoverGirl

TABLE: Wapple Mobile Friendly Study 2011
So back to my results, even after including poor mobile experiences in the ‘mobile-friendly’ mix, the outcome of my analysis was very different to the data I’ve been reading. 61 percent of the top 100 sites rated by Alexa deliver a mobile friendly experience however only 8.1 percent of the top 500,000 even try.

It is not mobile-friendly to disregard the needs of the mobile consumer, this is ‘mobile-lazy’.

Many brands that we’ve worked with typically see an 85 percent bounce-rate from mobile devices until they present optimised content for all mobile devices using our technology and then the bounce rate significantly reduces. To put some figures on this, based on 10 percent of traffic from mobile devices, if they generate 200,000 unique hits in a month, this is around 17,000 unhappy consumers.

With mobile web usage rising every day, can you afford to be mobile-lazy?

Published on mStrategy.com 30th September 2011

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/

While Nielsen’s focus groups are small, the message is plain. He says mobile web design has a long way to go and 100% customer satisfaction won’t come for another 15 years. That’s where we disagree with him. We can create rich mobile web experiences using tools that are strong on design and tailor-made for the platform; usability experience will come sooner than 2026.

Our clients and brands are demanding more from us as mobile web design evolves and we deliver quality for them. We are making a difference and one day we might even improve the frankly unweildy design of a certain website created by Jakob Neilsen.