Make Your Site Mobile Friendly With WPtouch. Easily, Simply & Elegantly

If you’re into web design there was a lot of hype lately about Google search giving more/higher preference to mobile friendly sites. With some WordPress themes this process came natural, but for those themes which didn’t have that function, or those which didn’t look acceptable, WPtouch Mobile plugin (or on WordPress.org) is an awesome way to go.

The world is turning mobile right? This means a smaller screen. Some desktop and tablet themes are just not able to pack the punch into mobile screens. The WPtouch Mobile plugin creates a whole new, elegant looking theme which is automatically activated when your site hits a small screen. Remember to switch off any other mobile friendly themes or plugins you might have activated. The plugin comes in two flavours, free and Pro. The free version had everything I need, so I didn’t test the Pro version, but the functions are available to view under the settings.

You can do the following with the free version of WPtouch:

  • Set a custom site title
  • Choose the menu to display i.e. WP Pages, Primary or Secondary menu
  • Set menu icons
  • Choose which user the site will be displayed to
  • Choose a mobile landing page
  • Desktop / Mobile Switching
  • Add custom HTML, JavaScript & statistics code to be displayed in the footer area
  • URL filtering
  • Add sharing links
  • Add custom bookmark icons
  • Set Footer Social Links for FaceBook, Twitter, Google Plus, Instagram, Tumblr., Yelp, Email and RSS

Apart from Pro, WPtouch also has premium packages available with lot more options. You can check out a detailed list of features and pricing plans.

WPtouch will be active when any of the following user-agents or user-agent combinations are matched : iPhone, iPod & Mobile, Android & Mobile, Opera & Mini/7, BB & Mobile Safari, BlackBerry & Mobile Safari, IEMobile/10 & Touch, IEMobile/11 & Touch, Firefox & Mobile, IEMobile/7.0, IEMobile/9.0, webOS, but you can also add custom ones for example if you add chrome to the list your site will shop up mobile when browsing from Google Chrome (just saying…).

The free version also has a lot of CSS related options that gave me a good look. In my opinion smaller means simple and not overwhelming, so don’t overdo it. You can use the import function in /wp-content/plugins/wptouch/themes/bauhaus/default/style.css to add your own CSS file i.e.
@import url('http://www.yoursite.com/wp-content/themes/yourtheme/mobile.css');

Although advertising is only available in the Pro version, you can easily integrate responsive ads from Google AdSense into your posts and pages (some limitations, I know). (Also see my Fool Proofing Your Site’s Google Ads in WP series for more on that.)

After I started showing the results to my friends, I also realised that having a little mobile friendly website, you don’t really need a website app (but if you are interested in those type of things have a look at WordPress Mobile Pack 2.0). You can simply add some features (easily accessible buttons & menus) for mobile users to find your latest news, Twitter feed, RSS (link) and probably many more…

After making Behind the Scenes mobile friendly with WPtouch, it was tested on the Blackberry 7220 with a tiny, tiny screen resolution of 240 x 160. Worked well. Naas!

Comments

comments so far

About the author
Renier is a veterinarian by profession, but apart from his own pets and keeping his animal hospital afloat, he also finds himself busy with creative web design and his websites, motorcycling, photoshopping, micro electronics, non-commercialised music, superhero movies, bad ass seriesses and many other things that is not interesting to most people.
View all posts by Renier Delport