June 8, 2016 — By Dale Mugford

Mobile-friendly Revisited

It’s been a little over a year since the great ‘mobilegeddon’ of 2015, when Google first introduced mobile-friendly scoring to search ranking. With search traffic on smartphones skyrocketing, it had become clear that sites which tailored their experience to mobile visitors deserved greater visibility. Those that offer poor mobile experiences would suffer.

Over the course of the past year Google’s search engineers have continued to refine their mobile-friendly weighting, culminating in the roll-out last month of the first major update to their mobile search ranking algorithms.

Although great quality, relevant content can still ensure good search ranking, with an ever greater adoption of mobile search, the pressure is on for sites to provide a mobile-friendly experience.

Industry blog Search Engine Watch identified some of the major winners and losers of this update in a recent post:

Losers

Instructables.com plummeted in mobile search results, with mobile visibility dropping by 75%.

Moveflat.com, already suffering poor mobile visibility dropped by a further 41%

Hipmunk.com, fell victim to poor handling of Google’s robots, losing a third of their mobile exposure.

Winners

Boardgamegeek.com saw a 73% gain in mobile visibility

Brainpop.com gained 44% mobile visibility, reversing an earlier downward trend

Reuters.com improved mobile visibility by 41%, breaking out of another slump.

What does this mean for you?

As Search Engine Watch notes, better ranking in mobile search, combined with positive user signals such as long engagement time and low bounce rates, will contribute to overall improved ranking across devices.

Although responsive themes promise to adjust their display to fit all device sizes, many site owners find that they require too many compromises and lead to large, slow pages on mobile devices.

WPtouch and WPtouch Pro are recommended by Google for WordPress websites looking to provide a rich, mobile-friendly experience.

You can check your site’s mobile-friendly status using Google’s handy test tool and through their Webmaster Tool’s console and–when you’re ready to make your WordPress website mobile-friendly–download our free mobile-friendly guide and get started with one of convenient license options.

 

April 13, 2015 — By Dale Mugford

Making your website mobile-friendly with WPtouch

Starting April 21, websites that are not mobile friendly will find themselves losing rank in Google’s mobile search results.

Many website owners have already used WPtouch Pro, Google’s recommended solution for WordPress websites, to easily and affordably get their website ready for the switchover.

To make sure you’re fully equipped to pass Google’s test, we’ve produced a free guide to making your website mobile-friendly with WPtouch.

Download the guide for information about the change, tips for choosing themes and configuring WPtouch Pro, and easy steps to confirm Google sees your mobile-friendly website.

Download the guide (PDF)

Want to know more about Google’s changes? Read our earlier post.

January 4, 2013 — By Dale Mugford

WPtouch Pro Tips Central: 2012 Top Tips

This past year we launched our WPtouch Pro Tips Central blog series; our weekly posts featuring WPtouch Pro-powered sites built and maintained by designers, developers and site owners like you. Since our first Tips Central post in August 2012, our experts have provided tips for 21 sites including our very first WPtouch Pro Top Site award winner, CigarDojo.com!

Below are three of the top tips from our 2012 Tips Central posts. Read our experts’ recommendations and find out how easy it can be to add these enhancements to your WPtouch Pro site.

Note: Links to support documentation are available exclusively to current WPtouch Pro customers who are logged into bravenewcode.com.

TIP #1 – Customize styling with CSS

In addition to the styling options in the WPtouch Pro admin panels, styling can be adding through a WPtouch Pro child theme. In combination with an inspection tool such as the inspector available in most browsers or Firebug, your mobile theme can be made to be a visual extension of your desktop theme by customizing colours, fonts, and more.
Support Documentation: Applying Custom CSS

applying-custom-css

Applying Custom CSS

TIP #2 – Complete the iOS Web-App Experience

WPtouch Pro offers a one-click method to offer your visitors a native app-like experience. In addition to the many options available, you may also choose to add a custom home screen icon and startup screens for a variety of devices. A custom icon and startup screens are great ways to emphasize your brand while your site content loads.
Support Documentation: iOS Web-App Mode

ios-web-app-mode

iOS Web-App Mode

TIP #3 – Enable iPad Support

WPtouch Pro also offers one-click support for the iPad. Your iPad theme is a separate mobile theme that can be customized independently from your “basic” mobile theme if you want even more control over your mobile experience.
Support Documentation: Enabling iPad Support

enable-ipad-support

Enable iPad Support

December 20, 2012 — By Dale Mugford

WPtouch Pro Tips Central: gmmcal.com.br

gmmcal logo

Our “Tips Central” blog series spotlights WPtouch Pro-powered sites built and maintained by designers, developers and site owners like you. Read about other designers, developers, and site owners’ experiences with WPtouch Pro and get ideas for your own projects. Our experts also provide their recommendations for additional site enhancements using WPtouch Pro.

Site URL: gmmcal.com.br
Site Owner Gustavo Cunha
License Type: Developers’ License
Twitter: @gmmcal

tips-central-gmmcal-mobile-ipad-themes

How long have you been using WPtouch Pro?
Since July 2012, but I’ve used the free version of WPtouch for over two years on my blog and on some clients’ sites.

Why did you choose WPtouch Pro to power your mobile site?
Because it is easy to setup — almost effortless. It works on all major tablets and phones and my clients are satisfied.

What do you like most about using WPtouch Pro?
The easy setup and the default theme (which includes some powerful icons) allows my developers and clients fast results.

What improvements would you like to see included in future WPtouch Pro updates?
It would be nice to have some other themes with great animations and gestures support.

OUR TIPS CENTRAL SUGGESTIONS FOR gmmcal.com.br

Note: Links to support documentation are available exclusively to current WPtouch Pro customers who are logged into bravenewcode.com.

1. Scale the contact form.
The form on the contact page uses fixed dimensions for its fields. Fixed dimensions, by definition, override any scaling offered by iOS or WPtouch. To remedy this for mobile devices, custom CSS may be added to the mobile theme to allow those fields to scale.
Support Documentation: Applying Custom CSS

tips-central-gmmcal-apply-custom-css-to-contact-form

Scale the contact form

2. Add startup images and a custom home screen icon.
With iOS Web-App Mode enabled in the mobile theme, options are available to add a custom home screen icon and startup images for a variety of screen sizes. Adding a custom icon and images are another way to polish your online presentation.
Support Documentation: iOS Web-App Mode

tips-central-gmmcal-startup-screens

Enable Web-App Mode Startup Screens

3. Add social media network links.
The site’s links to Twitter, Facebook, and Orkut may be added as additional links in the mobile menu. This will allow visitors to easily access those networks sitewide. Adding links can either be handled via Menu + Icons > Custom Menu Items or through a custom WordPress Menu.
Support Documentation: Using a Custom WordPress Menu

tips-central-gmmcal-social-media-menus

Add social media network links

4. Bring desktop theme styling to the mobile theme.
With the nearly unlimited styling options available through the WPtouch Pro admin panels and through its child theme functionality, bringing as much or as little of the desktop theme’s styling to the mobile theme is easy. For example, the blue of the background image can be used as the mobile theme background by adding its hex value to Active Theme > Style/Appearance > Background then setting the background tile to “none”.

If more in-depth styling control is desired, custom CSS may be added to an active WPtouch Pro child theme.
Support Documentation: Applying Custom CSS

tips-central-gmmcal-style-matcing

Theme style-matching


Are you interested in having your WPtouch Pro-powered site featured in our “Tips Central” series? Please drop us a note through our contact form to inquire.

December 12, 2012 — By Dale Mugford

WPtouch Pro Tips Central: dinosaurjr.com

Dinosaur Jr logo

Our “Tips Central” blog series spotlights WPtouch Pro-powered sites built and maintained by designers, developers and site owners like you. Read about other designers, developers, and site owners’ experiences with WPtouch Pro and get ideas for your own projects. Our experts also provide their recommendations for additional site enhancements using WPtouch Pro.

Site URL: www.dinosaurjr.com
Web Designer: Anthony Santarosa of Guhru Studio
Guhru Studio Logo
License Type: 5-Pack
Guhru Studio on Twitter: @GuhruStudio

tips-central-dinosaurjr-mobile-ipad-themes

How long have you been using WPtouch Pro?
I have been using WPtouch Pro since July of 2011.

Why did you choose WPtouch Pro to power your mobile site?
I chose WPtouch Pro for its well-executed visual experience on the iPhone.

What do you like most about using WPtouch Pro?
I like WPtouch Pro for its ease of use and its well-documented support.

What improvements would you like to see included in future WPtouch Pro updates?
Nothing that I can think of. WPtouch Pro has so many features I have not used yet.

OUR TIPS CENTRAL SUGGESTIONS FOR dinosaurjr.com

Note: Links to support documentation are available exclusively to current WPtouch Pro customers who are logged into bravenewcode.com.

1. Customize menu to match desktop theme.
The mobile theme menu very nearly offers access to all the content available through the desktop theme. To complete it:

  • The Dinosaur Jr. Flickr feed can be added via Active Theme > Extensions > FlickrRSS.
  • The site RSS feed can be added either by including it in the existing custom WordPress menu or by adding it to the standard WPtouch Pro menu at Menu + Icons > General Settings > Additional Menu Items.
  • An appropriate RSS icon can be assigned under Menu + Icons > Menu and Icon Setup > General Icons + Menu Setup > Pages/Custom Menu.
  • The same goes for adding a link to the Dinosaur Jr. YouTube channel.
tips-central-dinosaurjr-flickrrss

FlickrRSS Plugin Support

2. Customize the home screen icon.
The mobile theme has iOS Web-App Mode enabled but does not yet have a custom home screen icon assigned. Custom icons sit on the home screen as a branded badge. A custom home screen icon may be set at Menu + Icons > Menu and Icon Setup > General Icons + Menu Setup > Site, Theme & Bookmark.
Support Documentation: iOS Web-App Mode

tips-central-dinosaurjr-menu-icon-setup

Customize home screen icon

3. Add startup screens.
For similar reasons that adding a custom home screen icon is beneficial, custom startup screens can be added to the iOS Web-App experience. Startup screens may be added for a variety of screen sizes at Active Theme > iOS Web-App Mode > Startup Screens.
Support Documentation: iOS Web-App Mode

tips-central-dinosaurjr-startup-screens

Enable Web-App startup screens

4. Center the Spotify playlists with CSS.
The page located at http://www.dinosaurjr.com/discography/ uses a custom page template that contains third-party content within iframes. The template is generally well-constructed so we have only a small adjustment to make it perfect: the Spotify playlists contained in the iframes can be centered by wrapping their iframes each in a named div (we’re calling it .spotifyiframe for this example) then applying the given CSS in the WPtouch Pro child theme located at /wp-content/wptouch-data/classic-child-1/iphone/.

.spotifyiframe {margin-left: -10px;}
or try
.spotifyiframe {margin: 0 auto !important;}

Support Documentation: Applying Custom CSS

tips-central-dinsaurjr-align-spotify-frame

Apply custom CSS


Are you interested in having your WPtouch Pro-powered site featured in our “Tips Central” series? Please drop us a note through our contact form to inquire.

December 6, 2012 — By Dale Mugford

WPtouch Pro Tips Central: imofx.com

IMOFX LOGO

Our “Tips Central” blog series spotlights WPtouch Pro-powered sites built and maintained by designers, developers and site owners like you. Read about other designers, developers, and site owners’ experiences with WPtouch Pro and get ideas for your own projects. Our experts also provide their recommendations for additional site enhancements using WPtouch Pro.

Site URL: www.imofx.com
Site Owner: Edwin van der Veer
License Type: Single
imofx on Twitter: @imofx

tips-central-imofx-iphone-ipad-themes

How long have you been using WPtouch Pro?
I’ve been using WPtouch Pro for two years now.

Why did you choose WPtouch Pro to power your mobile site?
That’s easy. WPtouch Pro offers the most in terms of customization and flexibility. I’m a self-taught photographer and I want the pictures I take to be readily available on a mobile platform too. I’ve been experimenting with other mobile “solutions” but none of them offered the options WPtouch Pro has. Besides that, there are a lot of big names that use this plugin. That’s enough recommendation for me!

What do you like most about using WPtouch Pro?
It’s very versatile. It caters to different platforms such as iOS, Android and RIM. Besides that, it delivers content in the most convenient way. BraveNewCode has added support for the (latest addition of the) iPad, so a website can take advantage of that too. Right now I use a responsive WordPress theme alongside WPtouch Pro so that my site looks cool on any platform!

When I encountered some setup problems, I had to fly in the cavalry (the BraveNewCode support team) more than once (due to my lack of knowledge unfortunately). That’s when I knew I made the right choice. Customer support is absolutely fabulous and luckily, they’re very patient too. ;)

What improvements would you like to see included in future WPtouch Pro updates?
That’s a difficult one. It already has lots of bells and whistles and I feel I’m using only a very small part of those options. Oh yes, there’s one: I would love to be able to choose from some more themes. Right now it’s possible to alter color, fonts, background and such, but it would be awesome to give my site just a little more personality.

OUR TIPS CENTRAL SUGGESTIONS FOR IMOFX.com

Note: Links to support documentation are available exclusively to current WPtouch Pro customers who are logged into bravenewcode.com.

1. Enable iPad Support.
On an iPad in portrait view, the desktop theme renders the home page gallery on top of the site menu. This makes it impossible to click the menu items. With WPtouch Pro’s iPad support enabled, more control can be had over the mobile theme in order to present an optimal site experience. The desktop theme’s home page custom template can be incorporated into WPtouch Pro along with custom CSS as a way to keep the mobile and desktop themes consistent while maintaining full menu accessibility.
Support Documentation: Enabling iPad Support

tips-central-imofx-iphone-ipad-themes

Menu issue in iPad

2. Create a custom menu.
Keeping content access consistent helps to smoothly integrate both mobile and non-mobile experiences. A custom menu can be created by using the WordPress menu functionality that will allow mobile visitors to access more site content than is currently available. The Gallery is likely a primary reason for visitors to come to the site; making it available from the WPtouch Pro menu could be beneficial.

The WPtouch Pro menu can be styled with custom menu icons through Menu + Icons > Menu and Icon Setup. Access to the customer login function can be added through Active Theme > Menu, Posts and Pages > Show Account in tab-bar.
Support Documentation: Using a custom WordPress menu

tips-central-imofx-iphone-ipad-themes

Custom WordPress Menu Support

3. Include a custom iOS Web-App icon and startup images.
There are opportunities within WPtouch Pro to enhance the iOS Web-App experience. Branding and messages can be included by customizing the home screen icon and title as well as adding startup screens.
Support Documentation: iOS Web-App Mode

tips-central-imofx-custom-webapp-icons

Custom Web-App Icon Setup

4. Refine some interface elements.
A few items can be refined in order to improve the overall appearance of the mobile theme. These include:

  • Using a transparent logo will allow the image to blend into the header area seamlessly. Header colors can be selected under Active Theme > Style/Appearance > Header Styling or can be customized using CSS in a WPtouch Pro child theme.
  • Similarly, the text-shadow for text in the footer can be changed from white to black or another dark color through the options found at Active Theme > Style/Appearance > Body and Post Styling.
  • By using custom CSS in a child theme, styling can be added to the contact form that appears below the main content in the mobile theme. For instance, {#sfw-respond:margin: 10px;} can be added to allow some space between the form elements and the edge of the screen.
  • The logo can be consistent between the desktop theme and the mobile theme.

Support Documentation: Applying custom CSS

tips-central-imofx-styling-options

Styling Options

 


Are you interested in having your WPtouch Pro-powered site featured in our “Tips Central” series? Please drop us a note through our contact form to inquire.

older posts ›

Previous Blog Entries

Added To Cart

Item added to cart successfully. You can either continue browsing and add more themes or extensions, or checkout now.

View Cart Checkout