Easy Mobile Website Design – with WPtouch

3 Flares 3 Flares ×

A few weeks ago my boss said those five little words that scared the knickers off me.  “We need to be Mobile! “ 

We know that 69% of people access the net via mobile device DAILY. And that Google LOVES a responsive web design. Read our blog here.

At first, I didn’t know which direction to go. My old brain was firing off several thoughts: do we make duplicate pages for the mobile sites?  Google does not like duplicate pages!  Well, our theme is responsive but when it downsizes you spend too much time scrolling vertically and horizontally back and forth to see the page in its entirety. Not the best solution. 

Then we found WP Touch Pro, and our mobile site came to life!

Here’s how:  

First you need to  purchase WpTouch Pro Version  of the plugin.  After installing and activating the plugin, you will be asked to license the product by entering your email address and the license number you would have received when you purchased the plugin.

Here’s your WpTouch Screen:
Supernova Media

Note:  We did test the free version but for our needs it didn’t provide everything we wanted. I would still recommend checking it out first to see if it will work for you.

Take a few minutes to read over the tabs, and their settings.  The developers at Bravenewcode  took the time to create a very intuitive settings page for their plugin, I found it very easy to navigate throughout.  Another helpful feature, beside each setting is a small blue circle – mouse over it and it will explain the details of that particular feature.   

You have 5 Main Tabs:

General:

Overview:  shows you an at-a-glance view of the plugin’s status, current post from their support forum, wptouch news, and a quick link to their support forum.
Global General:

  • Site Branding – (ie: your site’s Name), Show WpTouch credit in footer, option.
  • WpTouch Landing Page – when enabled it redirects to a page you select.
  • Language Regionalisation – (we left this set on auto),
  • Switch Link – select to show switch link, allows the viewer to have the ability to switch their views between mobile and your regular theme.
  • Welcome – a welcome message that can be displayed the first time someone visits your site.(html friendly)
  • 404 – edit your error messages.(html friendly)
  • Footer – edit the footer area, we added some links and social media network icons. (html friendly)
  • Advanced settings – 1st time visitors see desktop theme option, Force multi site detection option, Convert all plain-text links in post content to clickable links, Respect WordPress setting for date format in themes.

Advertising & Stats –     Mobile Advertising – enter your codes for Google Ads,  Site Analytic tracking code.
Backup – here’s a great feature that takes a back of all your settings. Also allows for import or exporting of the backup file.

Theme Browser:

WpTouch Pro plugin comes with two themes, Classic and Skeleton Theme, you can take your site to the next step by fully customizing a child theme.  We used the classic of our site.

Active Theme:

  • Theme General – I didn’t change any of these, just kept the default setting.
  • iSO Web App Mode –  When checked WPtouch will allow iPhone, iPod touch and iPad visitors to bookmark your site to their home-screens as a web application. We really fell in love with this feature! And you can select your own custom icon too!
  • Web App Setting – You can if you choose create startup or splash pages, if you choose not to your default landing page will be used.  These splash pages can be made various sizes for the different devices.
  • Menu, Posts and Pages – Setting for the display of Theme Menu, Theme Templates, Blog Listings, Single Post and  Pages Setting are all found here.  
  • Style & Appearance – Header styling (set the URL for you custom header), Body and Post styling, Background, and Calendar/Thumbnail Icon settings
  • iPad Setting –  Enable to select custom settings for viewing on the iPad. We did not enable this as our site sizes nicely for the iPad.
  • Mobile user agents – Add additional agents for different devices.

    
Menu+Icons:      

From your wordpress site you can select any of your site’s pages and add custom icons to your mobile site’s menu. You can also add 3 custom URL links as menu items also. Did I mention you can upload your own custom icons to use too!

License Tab:  

Yep this is where you fill in your email address and license number

supernova media

  • The best tip I can give you is to play around with the settings, see what they do.  I found them to be very well organized.  

When you design your mobile site you can take to opportunity to step away from your website’s design and present a sleek slimmed down version. Graphics are nice but you need to consider the load time for the site.  I like to think of a mobile site as the virtual business card for your website!

  • Keep in mind the audience you are targeting, when you are selecting which pages to display on your mobile site.  
  • A simple single column layout works best.  
  • Testing on as many devices as possible helps but sometimes it is hard to do.

Hint: don’t have a mobile device to view your website! I used my safari browser (on my pc), goto, edit, then preferences, then click on the advanced tab, and select show developers option in the menu bar.  Now from the menu bar select the developers option, then you select user agent, then Safari iOS 4.3.3 iPhone option.  Now your browser thinks it is an iphone and you can view the web accordingly.  I also reduce the width of my browser window to give me a more accurate view of the site.  Here’s a screen shot.

 

  • Any “tap-to-call” links will not be working in this test browser, it gives you a pretty good idea of what your site will look like.

Here’s a screen shot of our mobile site with the different areas circled.  

Supernova Media Mobile site

And one of our blog page:

Supernova Media Mobile site

Let us know if you like WpTouch Pro as much as we do!  We would love to help you develop your new mobile site, contact us.

 

———————-
[Blog by Chrissie ]

Want more of this awesome content?

 

Sign up to receive our Monthly Newsletter

 
Chosen one of the Top Ten Social Media Companies in Canada

Join our eClub

Powered by Subscribers Magnet

Follow Us on Google+

View More of Our How to’s on Slideshare

View Supernova Media's profile on slideshare
About Nancy Bain

Our services include building optimized, functional and self managed WordPress websites, Nova Scotia social media training and consulting, interactive full screen high definition virtual tours with lead capture and print advertising. For most of our clients, we are their one stop solution for all things marketing, branding and small business development related.

11 comments
Rome Might Be A Good Way To Visit. The Capital Hot
Rome Might Be A Good Way To Visit. The Capital Hot

Hello! Do you know if they make any plugins to help with Search Engine Optimization? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good success. If you know of any please share. Appreciate it!

self defense
self defense

Hello there! I just wish to give you a huge thumbs up for your excellent info you've got here on this post. I'll be coming back to your site for more soon.

teardrop travel trailers
teardrop travel trailers

Hi there! I'm at work surfing around your blog from my new iphone 4! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the great work!

netflix uk proxy
netflix uk proxy

Greetings! Very useful advice in this particular article! It is the little changes which will make the greatest changes. Many thanks for sharing!

Grant
Grant

Everything is very open with a clear clarification of the challenges. It was definitely informative. Your site is very useful. Thanks for sharing!

Nancy Bain
Nancy Bain

Thanks so much Grant! Come back soon!

krankenkassenbeiträge
krankenkassenbeiträge

These are truly great ideas in regarding blogging. You have touched some nice factors here. Any way keep up wrinting.

Nancy Bain
Nancy Bain

Glad you found this useful. Come back soon!

Derek
Derek

This is a very helpful and detailed article, and I love your annotated screen shots. I have a question however that you may have come across in your own setup. I really want to create 'slimmed down' versions of most of my static pages. I know you can configure a default 'landing page' which presumably switches from automatically from the site's home page, and that you can define a custom WordPress menu (different from your site's default menu) so I guess it would be easy enough to create unique alternative pages. What I don't understand is if you create a different set of slimmed down pages - how are they accessed via search engines without creating duplicate content, or are they all just redirected to the single landing page (if so, once they are on the site I suppose it doesn't matter too much)? I am about to purchase the plugin but would really like to understand this first as If you can really substitute all static pages for slimmed down versions (without creating major SEO problems) then this would be a truly remarkable tool. Additionally I would like to pick your brains on how the iPad option works. Does it use the 'slimmed down' version if that's what was specified for the smart phone, or does it use the main content from the website, or do you have the choice of one layout for smartphones and one for iPad? Hope this makes sense. Derek

Chrissie
Chrissie

I would like to hear your opinions on this plugin. Please comment!

3 Flares Twitter 0 Facebook 0 Google+ 3 Pin It Share 0 LinkedIn 0 StumbleUpon 0 Buffer 0 3 Flares ×