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!

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!

First up, there was an update to the way that videos are handled on mobile pages. It turns out that in one of the WordPress updates (somewhere between the 2.8 and 2.9.2 versions), the way that videos were output to the browser changed slightly. This meant that the video parser in our mobile plugin didn’t pick up the correct source and didn’t show the video.

All fixed now though.

Bug Fixes

Next up there were a couple of bug fixes:

• A quick one to fix a couple of foreign char issues – there was a string that wasn’t being escaped – it is now.
• Even quicker one to parse links before lists – that means that if you have a link inside a list, it’ll now work ok and not throw an error.

Mobile Themes

And last, but certainly not least, were a couple of awesome new mobile themes – designed by Ryan DC. He did the last set (Wooden/Scrap Book/Obsidian), but he’s outdone himself with the latest 2 – iPhone Light and iPhone Dark – here they are in action:

Thanks for the designs Ryan, very much looking forward to the next set!

So there you have it – a couple of theme improvements, a minor bug fix here and a tweak there. Have you used any of the new themes yet, or maybe you’re using one of the older mobile themes but have tweaked them yourselves? I’d love to see a comment if you have!

Since its launch in June, the Wapple Architect Mobile Plugin for WordPress has seen a huge amount of usage. So much so that it now deserves a showcase article discussing success stories so far about blogs that have installed the plugin.

Hopefully your site is one of those featured, but if not, don’t despair because I’m going to include a few tips and tricks at the end of this article that will mean that in the next showcase, I can’t fail to include yours!
But before showing you a few screenshots of great looking blogs, here’s an overview of why the plugin is so different to other ones and a list of some of the features available.

Why it’s different to other plugins

• Other mobile plugins for WordPress use a default mobile style which results in an inconsistent experience for your users, Wapple Architect Mobile plugin for WordPress retains the styling of your site from web to mobile.
• There’s no redirection to a mobile version of the blog – URLs are exactly the same on web and mobile giving you the ability to promote and use one single domain!
• No transcoding happens here – the mobile version is written in WAPL (an advanced mobile markup language) that results in a completely tailored solution perfect for your mobile visitors.
• Other plugins try to replicate every single feature and plugin you’ve installed onto the mobile version. We know what mobile users want and have written this plugin with that in mind – the result is a far better user experience.

Features

• Every single mobile device is detected and all aspects of your blog are tailored to the visiting handset. Sites aren’t dumbed down to the lowest common denominator but instead use the features and functionality that advanced phones offer.
• Devices are detected by using Wapple’s advanced web services instead of relying on inferior 3rd party tools. If you view your blog with a brand new, never before seen handset, it’ll still work perfectly!
• Any theme you’ve installed and have styled for web will be carried across to mobile giving you a consistent look and feel for each and every one of your visitors.
• Dynamic resizing of images
• Retain SEO, preserve your URL structure and promote one single domain
• Support for multi-lingual characters – even funny characters that make their way onto your blog (from a copy and paste from Word for example) are handled.
• Comment from mobile! Turn on the feature and your visitors can leave comments from their handset.
• Upload mobile specific header/footer images – resized on the fly to fit a visitors handset perfectly
• Place mobile friendly navigation links around your site to help users browse around your blog
• Advanced pagination – split up long posts into manageable chunks that make reading a post on mobile easier
• Complete freedom over how you want to style your mobile site. We’ve done our best to make the mobile stylesheet as comprehensive as possible but no doubt there will be a few things you want to change – you can by editing a few settings.
• Control over almost every element on your mobile page:- change the size and quality of images on posts and pages, show tags and categories in different sections, you can even change the wording of certain elements on your site!
• Plus much much more! For a full feature list, visit the plugin homepage here.

Gallery

So without further ado, here are some screenshots of great looking mobile blogs that are using the Wapple Architect Mobile Plugin for WordPress (click the thumbnail for a bigger view).

WordPress Showcase - Mobile Web Junkie

WordPress Showcase - Red Yellow

WordPress Showcase - Blackberry Boards News

WordPress Showcase - Ben90

WordPress Showcase - The MDA

WordPress Showcase - Evo Hosting

Each one of these sites has been adapted from the standard install of the mobile plugin. Changing it to your particular need is easy work even for a style novice – so far the largest amount of customization has been 10 lines on The MDA Blog. There are classes and IDs available on all elements so you can really get creative but if you need some help and guidance, get in touch.

Tips for making your mobile site look better

With so many options to configure with this plugin, creating a mobile friendly blog is easy. But if you want a bit more help, here are a few great tips that we’ve used to create some amazing looking mobile blogs.

• Upload a header image into the “Basic Settings” section of the Wapple Architect settings page. The best logos that work on mobile are ones that have solid colours in the background and are as big as possible – the image will be dynamically resized on the fly to fit a visitors mobile phone so anything over 500 pixels in width is good.
• Don’t forget that once you’ve selected an image, change the “Use Mobile header Image” option to be “Yes”
• Turn on commenting on posts. In the “Posts Settings” area, change the “Allow comments on posts” to “Yes”.
• If you have lots of really long posts, turn on “Do Pagination” under “Posts Settings” – it’ll dynamically chop up your posts into mobile friendly pages. If you want even more control over pagination, change the “Post length” setting to something suitable – around 2000 is what we’ve found to be the magic number.
• Turn on the “Show home link” and “Show next/previous links” in “Posts Settings”. This will put some handy navigation links at the top and bottom of the page back to the homepage and to the next and previous posts – remember, it’s harder for mobile users to navigate so they need all the help you can give them.

Finally, the biggest tip we can give you is to get styling!

Whilst we’ve made every effort to ensure that the mobile version of your blog looks as much like the website as possible, there’s always room for improvement. So delve right into the 2 mobile stylesheets – they’re both in the “Mobile Theme Settings” area. You can change anything in there but the 2nd one is where you really want to place your custom styles.

With just a few minutes work customizing your mobile blog, it’s easy to create something that looks far better than if you’d have used a standard mobile template or even worse, have it transcoded!

Let me know how you get on and if you do create a blog you think is worthy of being showcased, let me know the URL so I can include it next time!

You’ve installed my Wapple Architect Mobile Plugin for WordPress and entered your Dev Key only to find that although your mobile blog looks great, it doesn’t look as awesome as some of the other blogs that are using the plugin.

So what can you do about it? Luckily for you I’ve compiled a list of some of the top tips to make your blog look awesome on mobile, just follow it and by the end of it you’ll have a great looking mobile site.

Step by Step Guide

1. Upload a header image into the Basic Settings section of the Wapple Architect settings page. The best logos that work on mobile are ones that have solid colours in the background and are as big as possible – the image will be dynamically resized on the fly to fit a visitors mobile phone so anything over 500 pixels in width is good.
2. Don’t forget that once you’ve selected an image, change the “Use Mobile header Image” option to be “Yes”!
3. Turn on commenting on posts. In the “Posts Settings” area, change the “Allow comments on posts” to “Yes”.
4. If you have lots of really long posts, turn on “Do Pagination” under “Posts Settings” – it’ll dynamically chop up your posts into mobile friendly pages. If you want even more control over pagination, change the “Post length” setting to something suitable – around 2000 is what we’ve found to be the magic number.
5. Turn on the “Show home link” and “Show next/previous links” in “Posts Settings”. This will put some handy navigation links at the top and bottom of the page back to the homepage and to the next and previous posts – remember, it’s harder for mobile users to navigate so they need all the help you can give them.
6. Check for any wide elements. Sometimes your web theme may have specified the exact width of elements to be quite wide and as the style is carried across from web to mobile, it may cause horizontal scroll. Have a look at what elements may be wide and reset them in your mobile stylesheet.
7. If you want a bit more control over the various areas of your mobile site, try switch the layout mode from “table” to “div”. If you go to the “Advanced” settings, it’s an option in there.
8. Get styling! There’s 2 mobile stylesheets for you to tinker with and they’re both in the “Mobile Theme Settings” – the first one is a more generic stylesheet that clears a few things down ready for mobile, the second is there for you to make your changes in. You might have installed a completely customized web theme for your blog so you’ll have a little bit of work to do to make it look amazing on mobile!

Here’s a few screenshots of some of the best mobile blogs out there that have followed the guide above: (click on the image to get a bigger version)

WordPress Showcase - Mobile Web Junkie

WordPress Showcase - Red Yellow

WordPress Showcase - The Notebook World

WordPress Showcase - Ben90

WordPress Showcase - The MDA

WordPress Showcase - David Harrell

Hopefully you’ve now got a mobile site to be proud of – if so, let me know! Send over a URL and I’ll feature your blog in the gallery above.

Finally, a few people have asked if they can see the mobile CSS used to style one of the sites in the showcase – as this site was one of them, here is the custom mobile stylesheet used to style Mobile Web Junkie – just drop something similar into your custom stylesheet and tweak it to suit:

body{padding:0;margin:0;}
.main{background:#ffffff;padding:0;}
a, .navigation a{color:#BF362A; margin-bottom:5px; text-align:center;}
a:hover, .navigation a:hover{color:#ffffff;background:#bf362a;}
.homeCategoryHeader, .homeCategories, .author, .search_row, #header, #switchToDesktop, .entry_row, .entry_row_row td, .entry_row_row div,.post-date_row, .post-date, .postTitle, .navigation, .postmetadata, .postmetadata.alt, .spacemaker, .commentTitle_row td, .commentTitle_row div, .nav, .description{background:#f2f2f4;padding-left:2px;}
.entry_row.h2 a{color:#2C343F;font-weight:bold;font-size:1.2em;background:#f2f2f4;border:none; text-decoration:underline; padding-left:5px;}
.entry_row.h2 a:hover{text-decoration:underline;}
.nav{text-align:center; padding:9px 0px 14px 0px; font-size:115%;}
.author{padding-bottom:12px; padding-left:5px;}