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.

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!

So if someone hits your site but ends up on a URL they shouldn’t, you can now create a handy 404 page that might have links to your sitemap (or even a Sitemap chunk on it), a link to the home page, or anything you want.

You can edit your 404 page exactly the same way as you do any other page on your site – create some text, drop a graphic or two on it and you’re done.

If you want some inspiration for cool looking 404 pages, check out this link: http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/ – there are some great 404 pages on there and if you create something similar, let us know and we’ll publish some of the best!

If you want to split a text chunk over a number of pages, just include [/pagebreak] in the body of your text and pagination links will split the text over multiple pages. Simples.

You can even control the text of the pagination links in the labels page of Canvas.

Just zip up your graphics and upload that file where you would normally upload an image file. Once uploaded, the zip file will be unpacked and each image will become its own site graphic. Whatever rules you set at upload will be applied to each site graphic, but be sure to either remove or replace the new site graphic name. Whatever is in this box will prefix the filename of the source graphic when the site graphic is added

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.

Well all these problems and more have been solved with the latest chunk to be added to Wapple Canvas.

It’s called the Bing Search Near Me chunk and is an integration with a number of technologies from those clever folk at Bing. It allows you to search for locations near to you – pizzas, restaurants, golf clubs, fitness centers – they’re all there ready to be searched for.

Lots of Bing

First of all, it integrates with the Bing Maps Search Service, which allows you to enter a location and keyword – and return relevant results. Tie it in with GPS lookups on a mobile phone browser and you’ve got something that will find you stuff right where you are!

We’ve also integrated the chunk with Bing Maps, so not only can you find locations near you, but you can see where they are on a map – very useful if you’re not too familiar with an area.

And finally we’ve used the Bing Maps Direction Service, so after seeing your nearby spots on a nice looking map, you get handy directions that show you exactly how to get there and how long it’ll take!

Some practical uses

If you want any kind of search on your site to find businesses, or shops, or restaurants or whatever, this is the chunk for you. It’s massively configurable, so if you want to allow your users the ability to click the link to phone the shop direct, or change walking to driving directions, you can.

It also has a setting for overriding the mode it starts in – so if you have an event and want to show the nearest 3 Sushi restaurants to your party in downtown Manhattan, set the mode override, specify the where and the what and let the chunk do the rest!

To demonstrate just how useful this chunk is – we had a guy at Wapple HQ needing to find a tyre in a hurry. He used the Bing Search Near Me chunk to find a tyre shop nearby, used the click to call functionality to check if they had one in stock, and followed the directions and map to get there to have his tyre fitted!

It’s all available in one chunk inside of Canvas – so log on and add a Bing Search Near Me chunk to your page to get your users looking for locations near them!

If you’ve got some ideas for using the chunk and would like to talk them through with us, drop us a line.

Rules to check if videos are supported, rules to check for active campaigns, rules to check for specific screen sizes.

Of course we have hundreds of others, but something missing from all of them was the ability to have customizable rules to specify your own test criteria.

Dynamic Rules

So what we’ve done is add dynamic rules to Canvas so you can actually define values for certain rules to meet.

For example, if you wanted to launch your site on BlackBerry phones running RIM OS version 4.6.0, you’d create a dynamic RIM OS rule and enter “4.6.0″ as the value.

We will be rolling this functionality into a load of other dynamic rules, Symbian OS, iPhone OS, Bango operator results plus many more – we’ll of course keep you updated with any new developments!

Alternatively, if you want to find out how rules work in WAPL and Wapple Architect, check out our help documentation over at http://wapl.info/coding-for-the-mobile-web-with-WAPL/chapter/Rules/

UPDATE

We have added even more functionality into this feature – the ability to have operators on rules, so you can test if a software version is above a certain value, or equal to something else.

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.