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)

We now take advantage of mobile handsets browser capabilities – if they support transparent PNGs, and you’ve uploaded one, we deliver it. And we’ve increased the quality of images that are delivered too, so if you have a good quality PNG at around 1000px wide, you’ll get some stunning results on your mobile site.

Of course, our powerful device profiler Wapple Exhibit makes sure that your huge 1000px image is displayed perfectly to scale on any handset and if a particular phone doesn’t support transparencies or PNGs in general, you’ll get the fallback of a JPG (if the phone supports it!) with your choice of background colour. It also ensures that these higher quality images are still minimal in size and load quickly over mobile phone networks.

Get started by logging into Wapple Canvas and upload some new graphics. Overlay some transparent images on top of another background image if you want, the choice is yours!

If you’re using Architect, integrate your better quality Canvas images by using a <graphicChunk> element and reference your new image. More information on how to do this can be found on our documentation site at http://wapl.info/coding-for-the-mobile-web-with-WAPL/chapter/Graphic-Chunk/.

Let us know what you think of this new feature and whether if you’d like to see any other improvements with graphics.

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!

We’ve built a chunk for you that allows you to define your data in a device independent language, and let us do the rest of the job for you.

Tables are created in JSON format – (see http://www.json.org for more details) – and we’re looking at allowing you to build them in XML too.

You can add a header and a footnote to your table, style any cell or row (so you can have zebra stripes on your table!), or apply a style to any cell in your table.

To get started, log into Wapple Canvas, edit a page and add a Table chunk to it.

We’ve also added the table chunk functionality into Architect so you can add it to your WAPL. Have a read of the the documentation for more info.

If you create some really great looking tables – and lets face it, who doesn’t like a good table, let us know!

But one thing we were missing was the ability to have a file upload form item so if you wanted your mobile web application to have the ability to upload photos from their phone, you were a bit stuck.

Now however, you have the option of doing exactly this, by adding a form item and setting the item type as “file”.

Of course, the functionality for this feature is available if you’re building your form with WAPL, just use a <formItem> element, and set the “item_type” to “file”.

Most modern handsets support it, with the exception of the iPhone, which doesn’t allow access to the file system from the browser. We’re hoping this will change in the future, but for now Safari will disable the option.

For more info about how to build form items in WAPL, check out http://wapl.info/coding-for-the-mobile-web-with-WAPL/chapter/Form-Items/

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!

It’s movie time here at Wapple HQ! We’ve been busy conjuring up some neat, little bite-sized chunks of Wapple goodness on our new YouTube channel. We thought this would be a useful and illustrative way of demonstrating how easy it is to develop mobile websites using Wapple Architect & Canvas™.

The stars of the show are:

• Paul Rhodes, senior developer – describing how Wapple Architect allows you to write one output markup that is translated into the perfect markup for every mobile browser on every device.
• Steve Anderson, developer – describing how Wapple Architect integrates with your server application. WAPL is a device independent markup language that Wapple Architect will transform into the required markup for any mobile device.
• Rich Holdsworth, CTO – demonstrating WAPL markup integration into your existing application so that it can deliver accurately to every mobile browser.
• Rich Holdsworth and Ben Freeman, Account Manager – giving you a glimpse inside Canvas™ mobile site builder.

Check out the videos below:

There’s an ongoing debate on the subject of mobile web transcoding, so here’s our take.

Let’s be clear on our language here though. Transcoding videos for mobiles is essential and very good, but doing it to your web output is bad. Really bad.

A reliance on an automated process that takes HTML output and reformats it to mobile markup is a deluded one. Computers are really bad at recognising diverse visual patterns (that’s why we all use CAPTCHA to protect from bots) and you don’t get much more diverse than web design. If a transcoder has been taught your web layout, you’ll find yourself tied to that web design or face losing any learning invested in the system.

The core point however is that mobile users have different desires and demands to you normal web audience. They don’t want to search for information – they want it served to them. They want access to services that are typically mobile, not those that are more comfortably engaged in while sat in front of a 19inch monitor with time to spare.

The solution is to write mobile applications for mobile from the heart of your server outwards, sharing logic and data.

With this approach you can utilise all the logic, models and controllers (if you’re that way inclined) from your existing web services but present them using view layers that are ideally suited to mobile devices. You can omit features that are simply not made for mobile and include new ones that would mean nothing to a web audience but are essential to visitors on the move.

Wapple Architect allows you to output a single markup language for every mobile device. The process will automatically adapt your WAPL markup to each and every mobile device – but this isn’t transcoding – it’s taking the output, layout and data described in WAPL and returning the correct markup for any particular device.  Watch this video to understand more.

Wapple Architect beats automated transcoding

Don’t be fooled by the sirens singing the song of transcoding. They will bite you in the backside sooner or later. Transcoding is at best a quick fix but as an enterprise level approach to catching the mobile web wave it will ultimately disappoint your users, create an extra layer of work for you over and over and simply glosses over an issue rather than addressing it entirely.

Code, don’t transcode.

As there are so many different devices out there in the worldwide marketplace any developer will meet a number of challenges. This mainly concern varying screen sizes, a number of markup languages and device inconsistencies and capabilities.

Obviously, developing mobile internet applications that work across the widest range of devices should be paramount to any serious developer or designer. If your site cannot be viewed on any percentage of mobile browsers then it is unlikely to meet its full potential or any at all.

Often, brand integrity is as important as user experience. This is especially true where mobile marketing meets customer engagement but it is also important to ensure that users have a good experience on even the simplest of sites.

Some older phones have incredibly small screens, while newer smartphones are being released with increasing resolution all the time. Adapting only to this presents significant challenges because typical applications are not all that aware of the device that is browsing at any given time and the screen resolution that it supports.

This is also true of many of the other capabilities and bugs that devices bring.

Of course, development is not just getting the right stuff onto a device – you also have to write great applications too! So that you, as a developer or designer can concentrate on what really matters, the service you provide, Wapple have developed a device independent markup language that helps you focus on functionality while you can be sure that what you want will be delivered to mobile browsers in an optimal fashion.

The product that Wapple have developed is called Architect. At its core is an XML based markup language called WAPL (Wapple Application Programming Language).

WAPL allows your application to describe the layout, components and functionality that your application wants to display on screen just as your application would if it were delivering HTML to web browsers.

WAPL is converted in realtime to the exact markup that your application should deliver to the particular mobile browser that your visitor is using.  You can read more about the importance of optimizing for every mobile web device in this article from Rich Gubby.

All communication with the user comes from your server, and all interactions take place with your application. So, WAPL is simply an intermediary language between your logic and the end user mobile device.

If you are familiar with web development then using WAPL in your application is really easy. You can using WAPL statically or dynamically, just as you would with HTML. All that you need to do is pass your generated WAPL through the Wapple Architect system using SOAP. Architect then responds with markup you can reliably serve to the browser.

Everything is taken care of. Images are resized, pages are optimized, quirks of the browser are ironed out and the delivery is as perfect as the device in use can handle. You can rely that users will be able to engage with your application just as you need them to.

The bottom line is that WAPL makes your application work on ALL mobile phones.

Of course, you still have to write a great engaging mobile application that works well. This is something that WAPL can’t do for you but we can offer some thoughts and ideas on how you can make sure you’re on the right track.

Mobile users do not want to search for information or services. You have to serve them. They want to get to the meat of your application as fast as possible so always be aware that too much fluff around the content that matters will turn your visitors off.

Keep pages clean and focused.

Images are an important part of a mobile site. Presenting users with a trusted brand is an important factor in this. Old-skool standards suggest that you should keep small and images to a minimum but when you are using a technology like Wapple’s you can be sure that images will be resized down to the phone screen in question. Still, you should not overload your page as a lot of visitors will still arrive via a mobile operator and not a wi-fi broadband connection.

Text is always preferential to graphics as the phone browser will pretty much ensure that its native fonts are screen readable (unless you purposefully make them tiny!). Text is always faster than images to load, so use text wherever possible and only use graphics where you really need them.

Also, it is worth considering how delightful it is to read well proportioned text on a mobile device. Get it right and your users will feel very comfortable using your services.

Fitting the horizontal width of the screen is essential. Despite the ability of some smartphones to display full web pages, the experience on horizontal scroll is not a good one to say the least.

Wapple technology naturally fits the sites you describe in WAPL to the screen width of any device in use. The result is a more easily consumed site and better user experience.

Channeling your content is important if you have a large site. This comes back to the idea that users want to be served. By using carefully and concisely defined channels you can allow the user to find what they are looking for without having to type in any kind of search criteria. This is a big plus for your users and will win you a lot of friends.

So, there are some starter points. Expect to see a more detailed article on designing the perfect mobile site in the near future.

With Wapple Architect, you have the tools for delivering to mobile devices. Hopefully you now have some ideas for how you might engage your users as well.

If you are not a developer, perhaps you are more visual or do not have an existing application to mobilize, then you might want to check out Wapple Canvas. It is a graphical web-top tool for for creating mobile internet sites and it is perfect for designers who want to build a mobile site and have it deliver perfectly to every mobile browser. The same technology that optimizes sites is employed but you don’t have to dream in code to use it!

If you have any questions, thoughts or ideas, just comment below and I’ll answer asap!

“Your site doesnt even show up on any mobile phone, other than maybe an iphone. But doing a test on your site it show up very bad on other phones which most of the world use. it only scores a 3/5 on ready.mobi and its very hard to navigate on phones. Obviously you are not the mobile web junkie but the wapple (wurfl rip off hosting solution) for iphone junkie.”

Ouch. Oh well, there’s always one… The reply got kinda long but turned out to be quite a good read. So I thought it would be nice to post it as an article. Here it is:

Hi Jeff,

Thanks for your post. Perhaps some would take it as a flame but I’ll accept it as constructive criticism and a chance to set a few things straight.

Firstly, I’m not sure what you mean when you say that this site doesn’t show up on mobile browsers.

It does.

Are you certain that you typed the URL in correctly? It’s http://mobilewebjunkie.com (you should see this article live on there as well because it’s using the mobile web plugin for WordPress built by Rich G using Architect). Please let us know exactly what you’re experiencing.

But then you go on to say that it’s hard to navigate on phones.  How would you know this if it didn’t work on your phone? I guess it did work after all then?  Perhaps you could elaborate?

Now, let’s talk about ready.mobi.

Ready.mobi assumes a generic site for all mobile phones. The Wapple Architect mobile web plugin for WordPress that this site uses does not generate a static site. Instead it delivers exactly what the device in question requires for its capabilities.

So, I tried http://mobilewebjunkie.com on ready.mobi. I used a useragent for a Nokia N95 as a test (which incidentally, I have and I know that the site works perfectly on it). I could have picked any, but I’m keeping things simple.

So we’re clear before I analyze the results, the resulting site that it tested will have been the optimized version for that particular device. If I’d used a different device the output generated by the Wapple Architect plugin would have been different and tailored to that device’s capabilities.

Here are the so called ‘fails’:

Specify image sizes

Ready.mobi insists that the markup contains width and height attributes in image tags.

These are not required by the N95 and by omitting them the page load times are slightly reduced. On a device that requires image sizes to be specified, the Wapple Architect markup would contain them.

Measures

Ready.mobi says avoid pixel or absolute measures.

The N95 achieves more reliable markup  by specifying measures. If the target device didn’t like them, they would not be there.

Page Size Limit

Ready.mobi complains if it decides the page is too big.

Look, it’s 2009. The idea that pages have to be 5k is so out of date my toes hurt.

Large Graphics

Ready.mobi says don’t make graphics above 200 pixels wide.

Again, here we are delivering the right size graphics to the phone. So, in this case the screen is larger than 200 pixels so we want to see graphics that big. They look great. Hey, the whole site looks great. If we were using a device with a smaller screen, then the graphics would be smaller. That’s the beauty of Wapple mobile browser detection and device optimization technology, Exhibit – and Wapple in general.

External Resources

Ready.mobi is complaining that the site references external resources. I think it means the external style sheet.

This is fine on an N95. It isn’t on some phones and in those cases the Wapple Exhibit engine wouldn’t do it. But in this case the site benefits from external resources because they are cached and the page itself is dynamic. This means faster load times.

All these fails are there because ready.mobi assumes that you have ONE version of a site for ALL devices.

Get a grip, that’s just stupid. It might work for ‘crap wap inc.’ but not for anyone serious in mobile internet. Read ‘Coding for Mobile Web – Automatically Adapting to Every Device and Browser’.

The Wapple platform allows you to build ONE site that dynamically adapts and works perfectly on ALL devices.

Quickly, I’ll look at the warnings ready.mobi flags.

MIME types: Some devices LIKE things the way Wapple does it. Please remember there is a dynamic engine here, not a static, generic service.

Use of stylesheets / stylesheet dependency: The N95 handles stylesheets. Therefore, a stylesheet is used.

Tables: (this is the BIGGEST clue that ready.mobi expects a rubbish generic site for all devices) They say that tables are not supported by all devices – correct, so Wapple only uses tables when it can.

Access keys: They are not needed or wanted by the site. An option would turn them on, but hey what use are they on modern devices without a keypad anyway!

Caching:  Caching is handled correctly for this site.

The bottom line is that the site works really well on all devices. The wordpress plugin is every evolving and based on sound technology that serves some of the largest brands in the world.

The Wapple Platform.

You describe Wapple as a wurfl rip off hosting solution.

What? Seriously, how are you comparing the two?

I have a ton of respect for wurfl. It’s a useful resource of information about devices with some attached tools. But really, how is Wapple a rip off of that?

Have a look at Wapple. I’d be happy to set you up for a full demonstration of the CMS, site builder, etc. I’m sure you’ll love it. Really, take me up on that. You can also sign-up for our developer program.

Wurfl is information. Wapple is a complete building and publishing system with a full GUI and a stack of developer focused tools for writing at an application level.

You simply cannot compare the two.

Jeff, I thank you for your comment. I really do. I hope that you read this reply and take me up on the offer of a tour of the tech. I also hope that you understand that the mobile internet is what you, the builder, make it. Wapple tech delivers it. Appropriately.

By the way, try http://dotmobi.mobi on your phone… [grin]