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)

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.

For anyone wanting to display a listing of their products, be it either a one off list, or a list of categories, or a list of items inside a category – it’s all now possible.

You’ve got a load of options to play with:- display thumbnails next to product titles; upload separate thumbnails for each category; options for pagination and of course as with everything in Wapple Canvas, it’s fully multi-lingual.

Right now the shop chunk allows you to show your products, but we have plans for adding checkouts and to integrate with mobile payment providers such as PayPal mobile express checkout. When we add these, we’ll make sure we let you know.

We’ve already used the shop chunk to display product listings on a number of sites – it’s great for showing information and allowing your consumers to browse through items.

Get in touch and let us know what you think of our new feature or if you’ve tried it and have a suggestion to improve it!

One option is to design it with CSS – add a border here, a background there, and you’ll get something that looks a little bit like a button. Take advantage of some CSS3 features such as border-radius and maybe a gradient background and you can come up with something really nice.

But what happens on phones that don’t handle CSS3 (or CSS in general) that well? You’ll get a rubbish looking button, that’s what !!

Another option with CSS, is to create an image, and reference it with via a background CSS property. But you’ll have the same issue as above – some phones will display it ok, but some won’t.

So to try and help with this, we’ve added a new form item – Image submit. You’ve had image submit buttons in HTML for ages and now we’ve added this feature to both Canvas and Architect.

In Canvas, you simply create a new form item of type “Image Submit Button”, and assign it a graphic you’ve already uploaded. No relying on CSS and if a handset can’t handle it, we’ve got a fallback in place.

In Architect, create a <formItem> element, and specify a “graphic_src” element – the system will use this URL as the basis of the image. If you don’t want it to scale, set the graphic_scale to 0 – check out our formItem documentation for a more in depth analysis.

Let us know if this new feature helps you out and send through the URL of your site so we can take a look at your new submit buttons!

They allow you to tailor chunks of functionality so they only appear on specific versions of a particular mobile operating system – and up to now, we only enabled it for the BlackBerry OS.

We promised that there would be more, and indeed there are! We have added the following operating system rules:

• Android
• iPhone OS
• Web OS
• Windows Mobile
• Symbian

In addition, we’ve added a dynamic rule to test for the vendor name, so if you wanted, you could target a campaign at all Samsung phones.

Couple these with our impressive super rules, and you can target a Samsung phone, on Android, running Froyo!

Dynamic rules are Canvas only right now, but they will be coming to WAPL in the very near future – we’ll keep you posted on our progress.

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!

Store locators, POI locators, Location Lookups – call them what you want – we’ve integrated them into Canvas so you can have location based services built into your mobile site.

The system is two fold.

Geo caching

First up, you create your locations (either manually or with a CSV file) – you don’t need to know exactly where they are either, a zip or postcode will do. We’ll then use geocaching techniques to work the rest out including an exact latitude and longitude. We use a mixture of Bing, Google, Yahoo and Multimap for that but it’s configurable, so if you find your locations in your area are more accurate with Bing, then use Bing.

Location Lookup Chunk & Maps

Once that’s done – place a Location Lookup chunk on a page, specify which location group to grab data from and you’re done!

You get a whole raft of options with the chunk, ranging from which map provider you want to use (Google Maps so far – but more to come), to the colour of the marker/pushpin you want to use to show locations.

We’ve also employed some new techniques and technology with this chunk -  if you have a handset with a browser that supports GPS capabilities, the chunk can automatically find your location. Particularly handy if you don’t know where you are and need to find a coffee shop in a hurry!

Also, if you have an iPhone, you can click on the map and it’ll automatically open up Google Maps, again very useful if you want to pan and zoom. Of course if you don’t have an iPhone, you’ll still get a great looking map with all the locations mapped on it.

Store locators are the obvious and probably the most widely used application for this functionality, but you don’t have to restrict yourself to just that – surf spots and locations of music events are two others that spring immediately to mind. You could get really creative and track vehicles/people, and then allow visitors to your mobile site the ability to find them. Who knows, you could even create some sort of city based spy game with it!

If you’ve already created a store locator or any kind of location based service – or would like more information about how to get started, get in touch, we’d be only too glad to talk to you about it.

We’ve created a Sitemap chunk, which displays links to all pages on your site, alphabetically, with nice URLs (if you have it turned on).

Not only will Google, Bing and other search engines be able to find your pages easily, your users will thank you for providing better access to pages across your site.

To get started, login to Canvas and edit one of your pages. Drop a Sitemap chunk anywhere on it, and we’ll take it from there. We’ll work out which pages are available, which shortcut letters should display at the top, and the URL structure of the pages.

If you want more from the sitemap chunk, or would like to talk to us about mobile SEO, drop us a line.

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.