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.

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)

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.

Google Wallet, American Express Serve, Mastercard Paypass, Visa Wallet and Isis, a mobile payment based on the near-field communication platform, have all being launched to service this market, and while industry insiders expect near-field communication (NFC) to become the dominant platform over the next three years, it is brands that need to act now if they are to benefit from this huge revenue stream.

Potential customers of mobile payments have little interest in which platform they will use, only that it works whenever they want to make a purchase. Similarly they will insist on the same from the mobile websites of companies they would like to buy from.

Any integration of a mobile payments platform must be done in parallel with a mobile website that is optimised. With digital goods making up 40% of that huge $690 billion figure, brands need to choose their partners wisely, and to merge that decision with a well-thought mobile strategy… and a mobile website that is fast, secure and scalable.

Well, I care deeply and I imagine you do too. I care for EVERY mobile OS and ALL the many thousands of mobile devices that run on them and therefore I was compelled to read.  To my shock I discovered that the individual who asked the question does not care and dismisses a vast percentage of mobile web consumers in the US!

He is Jeff Williams, a UX lead at Marketing Drive and he publishes the fact that he and the company he represents don’t in fact know how to automatically optimize for ALL devices & browsers, yet they are building a mobile experience for the 4th largest retailer in US.

That retailer has, no doubt, invested heavily in their mobile strategy and trusted their mobile site with Jeff and friends at Marketing Drive but their mobile site is only going to run on Android and iOS because when Jeff realised he couldn’t make it work on the others his colleague said “Who cares”!

Wanted! For crimes against mobile OS

Oh dear!  Perhaps somebody might advise me who the fourth largest retailer in the US is so that I may inform them of current traffic stats in their region.

64% of US traffic to the many thousands of mobile sites and major brand ad campaigns on Wapple is generated by Android (34%) and iOS (30%) combined therefore 36%, I’ll repeat that, THIRTY SIX PERCENT is generated by all other operating systems that Jeff and his colleague don’t care about.

Admittedly, when I first read his article I was a little upset and may have suggested he was being lazy but let’s be clear here I don’t hate Jeff (who could), on reflection I can kind of see how he gave up trying.  He was attempting to create single versions of the site for each OS (let alone the thousands of variants he would have encountered trying to adapt to all the makes and models).  If he had built the site on Wapple technology he would have built just 1, I’ll repeat that too, JUST ONE SINGLE SITE and then applied simple conditions to it so only the smart phones got the cool features he was trying to implement.

Jeff, if you’re reading this, get in touch, it’s not too late to fix.

But as we’ve improved the Architect schema, one area of documentation we’ve sadly neglected was telling you how to use these advanced Canvas features in your WAPL.

Not any more

We’ve create a new area of documentation with an explanation of how it works – the short version is you create a feature in Canvas (menu / page / poll / etc), grab the ID, and reference that in your WAPL. You then configure all the options you have in canvas through elements and attributes. You’ll find this page on our Canvas Chunks doc.

Also, we’ve added a few pages that tell you how to build FAQs, use Canvas graphics and deliver graphics as wallpapers with the <graphicwallpaperChunk>.

Over the next few weeks we’ll be adding all the other Canvas feature chunks and of course we’ll keep you up to date of what we’re up to! But if you want to give us a call or get in touch about anything specific, we’d be only too glad to talk to you!

What we’ve done is integrate Bing Maps into Wapple Canvas and Wapple Architect, so you can easily create great looking maps, with plenty of options that always works on mobile.

Examples

Here are a couple of examples to show what you can do:

The first one is a dynamic map showing The Leaning Tower of Pisa – which displays on modern phones with the capabilities to handle the Bing Maps code, the second is a static map of NYC, which is the fall back if a dynamic map can’t be shown.

Options

You have a bevy of options to configure your maps – graphic sizes, map types (road/aerial/hybrid/birdseye), pushpins and zoom levels. You should be able to create something to suit by tailoring the settings.

You’ll have to sign up and get a Bing Map API key from http://msdn.microsoft.com/en-us/library/ff428642.aspx before starting, but the keys are free so why not get one!

We’ve also updated our WAPL schema, so if you’re building mobile pages with Architect, you can add a <bingmapChunk> element safely. For more info on how to do this, check out http://wapl.info/coding-for-the-mobile-web-with-WAPL/chapter/Bing-Map/

If you’ve already created a Bing Map chunk, let us know about it and we’ll show off some of the best ones.

It’s called the Video Link chunk – login in Canvas and add one to a page to see it in action!

If it’s a YouTube video you want to show, a thumbnail is generated automatically, but for other video sharing websites, you can specify the location for an accompanying picture.

If you have an iPhone, videos will display with a play button on, allowing you to play the video with the native controls on the phone. Anything else and you get forwarded to the URL – of course when other handsets add functionality in for video playback, we’ll update the chunk!

If you want to know how to add a Video Link chunk with Architect and WAPL – check out http://wapl.info/coding-for-the-mobile-web-with-WAPL/chapter/Video-Link/ for more info.

Overcoming the barriers of mobile web design and development – it’s the tagline of our blog and something that we strive towards each and every day.

We’ve given the development community some amazing tools that allow you to create some fantastic mobile sites and we’ve created plugins, components and classes that help you at every step.

But one thing every Wapple Architect application has in common, is that in order to use it, it must be done via SOAP.

Or should I say, used to have in common, because this week we’ve created and released a REST web service for every SOAP call you can make.

Using Wapple Architect with CURL

What this means as a developer is that you can choose whichever method you want to communicate with Wapple Architect. If you want to use SOAP, carry on doing what you’ve always done, but if you want to use REST, use it. And to show how easy that can be, here’s how you would check if a visitor to your site is mobile or not using PHP and CURL:

<?php
$headers = '';
foreach($_SERVER as $key => $val)
{
 $headers .= $key.':'.$val.'|';
}
$postfields = array(
 'devKey' => 'YOUR_DEV_KEY',
 'headers' => $headers
);
$c = curl_init();
curl_setopt($c, CURLOPT_URL, 'http://webservices.wapple.net/isMobileDevice.php');
curl_setopt($c, CURLOPT_POST, 1);
curl_setopt($c, CURLOPT_POSTFIELDS, $postfields);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($c);
curl_close($c);
if($result)
{
 // We're a mobile device! Generate some WAPL and use getMarkupFromWapl.php service!
} else
{
 // Not a mobile device - generate HTML and output to screen.
}
?>

Once you’ve established that your visitor is a mobile visitor, you can use the getMarkupFromUrl.php or getMarkupFromWapl.php services and amend your $postfields array to include the ‘url’ or ‘wapl’ keys respectively.

Architect with SOAP or REST

So if you’ve looked at using Wapple Architect before but for one reason or another couldn’t or wouldn’t install SOAP, you’ve now got another option that allows you to mobilize your site or app!

We’ve already integrated these new services into our Wapple Architect Mobile Plugin for WordPress so that if you don’t have SOAP installed on your server, you automatically fall back to using REST. And lets face it, if you’re on a shared host, getting SOAP installed is not a task to be taken lightly and can be tricky.

What do you think of these new REST services, does it mean you’ll use Wapple Architect? Do we need even more coverage of web services – XMLRPC for example? Get in touch and let us know!