Mobile Web Junkie

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;}

Related posts:

1. Showcase of Wapple Architect Mobile Plugin for WordPress
2. WordPress Mobile Plugin Install Guide and FAQ
3. Podcast on Making money and mobilizing your wordpress blog
4. Wapple Architect Mobile Plugin for WordPress – Version 1.4 Released
5. WordPress Mobile Plugin Version 1.2