Making WordPress and Gallery 3 Mobile Friendly @ trolettiphoto.com

WordPress – WPtouch Pro

Trolettiphoto.com on Ipod Touch via WPtouch ProTrolettiphoto.com on iPod Touch via WPtouch Pro

 The motivation to create a mobile friendly version of my Photo Blog and Photo Gallery was a simple yet  powerful one, my children followed my work from Los Angeles and they did so most of the time from an iPod Touch. Navigating the regular WordPress Blog was possible yet non intuitive on a mobile device has you’re faced with tiny little links, making it difficult to read and navigate. The same applied for the Gallery 3 Powered Photo Gallery

Many solutions exist for WordPress, some convert your existing theme to mobile friendliness, others redirect upon detection of mobile browser agents to an appropriate theme for the corresponding device. All have glitches and none of them quite deliver all of the functionality you’d be looking for in one friendly package. I’m not going to innumerate them all but I am going to discuss my two favorite FREE Plugins and my top choice, the not so free WPtouch Pro.

My first implementation after trying out so many different solutions was Wapple Architect. At the time I chose it over WPtouch because it enabled you to use the first picture in your post as a thumbnail icon for your post. This was a feature that was extremely useful as i didn’t have featured images enabled due to current limitations in the layout of my desktop theme.

For those of you who visited my site with an IPOD, IPHONE or IPAD in the past, Wapple gave you a pleasant experience. Unfortunately other devices, especially Android based handhelds running Froyo 2.2 were often faced with an error message and that was also true of Blackberry devices. Troubleshooting revealed the error was caused when Google Adsense advertising was enabled. Wapple also lacked the ability to track traffic through Google Analytic or other web statistics solutions. Wapple Architect was just not ready for market and I needed a little more a little faster. I had stopped hoping for new releases of Wapple Architect since the company seemed more focused on finding financing and structuring into a high overhead enterprise than developing useful code.

Without scrapping all of Wapple Architect I simply deactivated it and temporarily switched to the popular WPtouch, the free version of WPtouch Pro. Out of the box WPtouch is fast and intuitive. It offers Adsense and Google Analytic support. However it didn’t allow you to display a thumbnail alongside your blog listing. Your only choice was a calendar icon. It was fast, clear and intuitive but I wanted a thumbnail even though the Calendar Icons grew on me for both aesthetics and loading speed.

After testing the Free version of WPtouch for a couple of weeks I was convinced of the reliability and compatibility of this mobile theme not only on Apple devices but also on a wide range of Android, Blackberry and other Smartphone devices. The choice to upgrade to WPtouch Pro came naturally as Brave New Code, the makers of Wptouch Pro, seemed like a serious company offering an acceptable level of support and documentation for their paid software.

The self hosted WordPress Blog running on trolettiphoto.com is now mobile enabled using WPtouch Pro. It offers support for IPhone / IPod Touch and the theme also is expanded to offer more device specific support for the Apple iPad. Naturally the mobile theme does a great job at offering compatibility with other SmartPhones and browsing tablets. There’s still much customizing to do to get just the right look and feel. WPtouch Pro does support featured images and custom thumbnails but lacks the ability to use the first post image as a thumbnail on the home page. WPtouch Pro also doesn’t handle resizing of pictures within a post as well as Wapple Architect but it delivers every page and it’s content reliably.

 

Gallery 3 – iMobile

Implementing a mobile solution for Gallery 3 was a much simpler feat. Choices and functionality are limited but with a little know-how you can go a long way. The true heart of the mobilization of Gallery 3 is a simple yet indispensable plugin called “Theme Dispatcher” which will route visitors based on user agents to an alternate theme. In my case the alternate theme is “iMobile” a basic yet fast mobile minded theme for Gallery 3. Theme dispatcher allows you to manually configure the alternate theme of choice based on user agents as needed.

Gallery 3 iMobile Theme on an Ipod TouchGallery 3 iMobile Theme on an Ipod Touch

 

Mobile User Agents

No matter what your choice will end up being remember that the trick to routing selectively mobile devices to your mobile site is having the correct user-agents identifying the mobile device. Below is a list of user-agents I use to route my visitors to my mobile sites. These change as new devices and operating systems hit the market. If you have any other ones to add please share. Don’t forget to include googlebot-mobile user-agent to help increase the indexing of your mobile site.

  • ipod
  • ipad
  • iphone
  • incognito
  • webmate
  • android
  • dream
  • cupcake
  • froyo
  • iemobile/7.0
  • webos
  • bada
  • s8000
  • googlebot-mobile
  • blackberry 9780
  • blackberry 9800
  • blackberry9550
  • blackberry9530
  • blackberry9520
  • blackberry9500

 

Summary

WordPress Mobile Plugins:

1. Wapple Architect is a great WordPress Plugin with lots of flexibility. Still needs a few basic features such as Google Analytic and they need to fix compatibility issues when using ads from Google Adsense with an Android Device

http://wordpress.org/extend/plugins/wapple-architect/

2. WPtouch gives you all the basic funtionality and great compatibility with many mobile devices. Advanced features are however found only in the premium plugin WPtouch Pro

http://wordpress.org/extend/plugins/wptouch/

3. WPtouch Pro gives you all the benefits of WPtouch with iPad specific support. It also can run as an iPod application and offers advanced customization and multimedia support for images and videos.

http://www.bravenewcode.com/store/plugins/wptouch-pro/

Gallery 3 Mobile Themes:

1. Gallery 3 is a great way to host your own image galleries on your website

2. iMobile with Theme Dispatcher is an essential first step in getting your image gallery mobile friendly. Advanced customization will be needed to add further functionality to your mobile theme.

Disclaimer:

I purchased WPtouch Pro with my own money based on my satisfaction with the free version, WPtouch. I in no way received money or any other incentives from BraveNewCode to endorse their product and recommend it. However the WPtouch Pro links on this post do link back to BraveNewCode as an affiliate and I will make commission to help sponsor this website if you purchase WPtouch Pro from my link. All other links are non sponsored.

Your Ad Here

3 thoughts on “Making WordPress and Gallery 3 Mobile Friendly @ trolettiphoto.com

  1. Thanks for your great blog Steve. I found its very interesting.

    Do you have a step by step guide, how did you created the mobile enabled gallery. This is awesome. I have a wordpress blog i tried with wptouch free version but it does not show th gallery looks as yours.

    Your reply really appreciate.

  2. Additional likely user agent suspects:
    “Fennec” – Firefox mobile
    “Opera Mobi” – Opera mobile, as opposed to “Opera Mobile”, which gets mapped to the older WAP devices.