This is a guest post by Rich Gubby, Senior Developer at Wapple.net. If you want to guest post on HowToMakeMyBlog, please check out more info here.
Following on from the post about How to optimize your blog for mobile devices, HowToMakeMyBlog.com has been fully mobilized by installing and configuring the Wapple Architect Mobile Plugin for WordPress. Some of the major points of that article were about screen size and making sure the code was valid and following best practices – all of these points and more have been fulfilled, but best of all, it works on a range of handsets from WML phones with no styling, to top of the range iPhones with as much functionality as a modern web browser.
But in order to help you along with mobilizing your own WordPress blog, I have documented every step I took – and the great news is that from start to finish it only took around 30 minutes!
Step 1. Install the plugin
There are a couple of ways to do this – probably the easiest is to log into your control panel and search for “wapple” in the Add New plugin screen. Install “Wapple Architect Mobile Plugin for WordPress”.
Step 2. Grab a free dev key
The Wapple mobile plugin uses web services in order to provide such a great service, but in order to do this, you’ll need a dev key to authenticate who you are. It’s free, so head over to http://wapple.net/register/plugins-signup.htm, fill out the form and a dev key should land in your inbox within 5 minutes!
Step 3. Enter your dev key in WordPress
If you’ve been a bit eager and already activated the plugin, you would have seen an error message telling you that you need to enter your dev key. In the basic settings page of the Architect settings area, the top option is for your dev key – just copy and paste it into this option.
Step 4. Setup a mobile logo
If you want to upload your blog header logo to your mobile version, select the “Basic settings” page and then set “Use mobile header image” to “Yes”. Then browse for your logo in the “Mobile Site Header Image” option and save it. One thing to note here though is that the logo gets dynamically resized on the fly to fit any handset, no matter what the resolution, so it’ll fit an iPhone just as well as an old Nokia 6230. The bigger the better here as well – 1000×200 pixels is pretty good as you want to retain clarity when the image is resized.
Step 5. Set some options to match the mobile to web
There are some options available in the Wapple Architect that are set to be on or off by default. But obviously not every blog is the same so you’ll need to turn a few things on and a few things off so the options match. For example – by default post dates are shown on the home page, but on HowToMakeMyBlog, post dates are off – it’s an option in the “Home Page” settings and it’s easy to turn it off. Another option I turned on for this site was “Show excerpt on homepage” as excerpts are shown on the web version.
Step 6. Make a few styling changes
The Wapple Architect plugin carries a number of styles from web to mobile and in this case, most colours were carried through, however, there were a few little changes that needed to be made. I increased the post title font size a little bit and I added a border to the bottom of the home page excerpt – just like the web version. If you take a look at the “Mobile Theme” settings page, there are a number of placeholder styles waiting for you to change and have comments to help you out.
The Result
And with that it’s job well done and from the screenshot at the top of this article, you can see how great the mobile version of HowToMakeMyBlog.com looks.
All of the points in the mobile blog design article have been adhered to – screen size isn’t an issue anymore and the plugin scores highly on both the w3c mobile test and the readymobi test so you can be sure that your site is valid and conforms to standards.
Another major point that this plugin addresses is that of brand identity and being able to retain it over platforms and devices. By allowing you to upload your logo, change settings and style your site manually you have no worries about your mobile blog looking like thousand others. Looking at the screenshot above, you can see how brand identity has been totally retained from web to mobile.
In addition to all of these benefits, you can be safe in the knowledge that not only will your blog look great and work perfectly on a top of the range Android or iPhone, but because the plugin constructs your site in a device independent mobile markup language, it’ll also work on a WML phone. Obviously if your phone doesn’t support CSS it won’t look as good (the CSS declarations won’t be delivered anyway), but your blog will still work and you’ll still have your logo at the top – as long as your phone at least supports some sort of graphic!
Have you checked out HowToMakeMyBlog on your mobile – if so, what do you think?
Join thousands of bloggers and get all my blogging tips for FREE! Subscribe to HowToMakeMyBlog via RSS or via e-mail.
If you liked this article, you may also like:
Why I run my blog on Thesis Wordpress Theme
Thesis theme gives my blog a professional, clean, easy-to-read layout and SEO friendly design. Thesis makes it simple to make your own blog unique. See more details and get your own Thesis today.
{ 16 comments }
I keep forgetting about my mobile audience because I don’t have a phone with internet capabilities. Wapple sounds like a simple and quick way to make your blog easier to navigate for mobile readers!
This is an excellent way to get going mobile.
I think I read a post yesterday saying that Japan’s net activity is nearly 3/4 mobile?!
With every phone coming out having browsers, it’s a no brainer your website should be available on the mobile web. I think with the addition to augment reality apps it will really take off once people can look at a store and possibly view its website at the same time.
I have seen a big jump in mobile people since I have added a mobile version of my blog. It is great choice to do so and if you don’t do then you are loosing out on a lot visitors and money. Greg Ellison
Just tried your site on my mobile. Looks pretty good. I think it easier to read your site on my phone then it is in a web browser
I have installed the WP Touch plugin for targeting mobile users. This is the first plugin I have ever known to hold similar functionalities. I’ll consider using it..
Thanks for sharing your tips. Google is giving now PPC ad on mobile. I think it should be necessary to learn optimizing tips on blog. Day to day blog going to more important then website, where visitors are spending more time on blog, so tracking visitor on blog through Mobile.
Very good Plugin
Though I have a question:
Does Mobile Plugins Hurts Search Engine Ranking/Bots Crawling in any way?
Thanks
This is a fantastic resource, Marko. Thanks very much for the step-by-step instructions.
I’m wondering if there is any way to tell if your readers are coming in from the mobile apps verus the usual ways (RSS, browser)?
I think I will be setting this up on my blog, even though it’s still early days for me. One less thing to worry about for down the road.
Oh, and do you have an opinion on picture-centric blogs versus text-based blogs on smartphones? I would think that a site like yours would be more geared towards browser-based, rather than mobile as the bandwidth for the pictures would be more. Also, I get so much more out of visiting your site through the browser (to retweet, read comments, etc.)
Thanks!
Karen
@karen : if the plugin does its job as it should, it reduces the volume of the pictures, reducing the bandwith needed to have the pictures displaying (and also the time needed to load them of course).
I also think desktop offers more than mobile though I sometimes also like ‘just getting the core information’. I think it is important to have a mobile version especially when you use twitter, facebook, etc. to promote your blog. People typically use these social networks on their mobile, and I find it really annoying to have to wait always too long before the blog is loaded.
OSMOBI now also has a wordpress module ready.(before, it was only there for Drupal and Joomla!)
Hi – thanks for the replies and positive feedback about the plugin!
I’ll try and answer those couple of questions:
Mobile Plugins and SEO. It’s true that some can hurt SEO, but I’ve tried to replicate your blog settings as much as possible so it doesn’t. I’ve added the ability to change your mobile blog title and mobile blog description so you can really tailor your mobile SEO. In addition, you’ve got the facility to add meta data.
With regards to telling if your visitors are on a mobile or web (or RSS), I’m in the process of adding stats to the plugin so you’ll be able to see exactly how many mobile visits/pagehits you’ve had in a date range – might give you an idea of the % of visitors on mobile. Keep an eye out for an update to the plugin with this included!
If anyone needs any help setting up the plugin, please just let me know and I’ll do what I can to help!
This sounds relatively easy to do if you follow the steps. I will definitely try them out. Thanks for sharing them. And to Rich, looking forward to the stats plugin!
Great article, thank you! It did indeed take about 30 minutes to set up the basic mobile site. I’m wondering if it’s possible to set the home page to a different page for the mobile version. A client of mine has a landing page I would like to bypass for the mobile version. Just curious. Thanks!
Excelent! I’ve tried it, and I keep it.
Thanks!
Thanks for the recommendation on the mobile plugin, will check it out. Great tutorial also, very easy to understand and follow.
I love when I find something interesting and it leads me to something I already like. Just downloaded the Wapple plugin… went to the Mobile Web Junkie blog… and read a post about… you! How to Make My Blog! I’m a faithful reader and was thrilled to see you featured on the Mobile Web Junkie.
And I love my new mobile plugin!
Great stuff Debbie, thanks!