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!
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:
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:
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.
- 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.
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.
- 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.
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!
Yep this is where you fill in your email address and license number
- 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.
And one of our blog page:
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 ]