wptouch logo

WPtouch Pro

Mobile Suite for WordPress

November 29, 2012 — By WPTouch Admin

WPtouch Pro Tips Central: motionworks.com.au

Motionworks 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.motionworks.com.au
Site Owner: John Dickinson
License Type: Single
Motionworks on Twitter: @Motionworks

tips-central-motionworks-ipad-mobile-themes

How long have you been using WPtouch Pro?
Two weeks. I was using the free version of WPtouch for about a year but noticed that WPtouch Pro included a theme for the iPad as well as additional features for customizing the look of the site.

Why did you choose WPtouch Pro to power your mobile site?
The number one reason is ease of use. To get a mobile site all I needed to do was install the plug-in and activate it! WPtouch Pro did the rest.

What do you like most about using WPtouch Pro?
I like that I didn’t have to know any kind of coding to get it up and running and that making general modifications is easy.

What improvements would you like to see included in future WPtouch Pro updates?
Themes. Themes. Themes. Also some way of adding advertising banners easily and also adding customised headers more easily.

NOTE FROM SUPPORT: Advertising can be easily included through the options located at General > Advertising & Stats.
Support Documentation: Enabling Advertising in WPtouch Pro

OUR TIPS CENTRAL SUGGESTIONS FOR MOTIONWORKS.COM.AU

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

1. Add custom links to menu.
The Twitter, Facebook, RSS buttons in the menu of the desktop theme can be added to the mobile theme either by using the options located at Menu + Icons > Custom Menu or by activating a custom WordPress menu. Either choice will allow the site’s social media urls to be available site-wide in a prominent location.
Support Documentation: Using a custom WordPress menu

tips-central-motionworks-social-media-icons

Adding custom links and icons

2. Add startup screens it iOS Web-App Mode.
While iOS Web-App Mode is active on motionworks.com.au, it can be further setup to include startup screens for iPhon and iPad. Startup screens provide an opportunity to include branding or a message to visitors while iOS Web-App Mode loads.
Support Documentation: iOS Web-App Mode

tips-central-motionworks-startup-screens

Web-App Mode startup screens

3. Enable SHOP content.
Currently, the ecommerce content found in the “Shop” is incomplete in the mobile theme. This may be because the desktop theme uses custom post types, custom page templates, or a combination of these. Both can be enabled in WPtouch Pro to allow the store to function on mobile devices. We recommend taking advantage of the support bundled into every WPtouch Pro license to complete this setup.
Support Documentation: Enabling Custom Post Type Support and/or Creating a Custom Page Template

tips-central-motionworks-custom-post-type-support

Custom post type support

4. Enable category page templates.
The desktop theme also appears to use custom page templates for category display (as evidenced on this page: http://motionworks.com.au/category/creativebackgrounddesign). By including this page template as instructed above, all content available via the desktop theme will also be fully available in the mobile theme.
Support Documentation: See WPtouch Pro Tip #3

tips-central-motionworks-custom-page-template-support

Custom page template support

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.

November 29, 2012 — By WPTouch Admin

Web App Mode in WPtouch Pro

WPtouch Pro offers a unique capability that both Responsive Design and competing mobile products for WordPress don’t— Web App Mode, a feature that allows customers to offer their WPtouch Pro-powered websites as a standalone web application that can be installed on all iOS devices- iPhones, iPod touches and iPads.

 

Sometimes we’re asked by customers and users what we mean by WPtouch Pro’s unique “Web App Mode” capability. This post will explain what it is and how to use it.

WPtouch Pro’s Web App Mode: Definition

 Web App Mode in WPtouch Pro does the following:
  • Alerts visitors that they can save this website as a web app on their home screen, and shows them how to do it
  • Saves the website to the home screen
  • When the visitor taps on the app icon on their home screen, it opens the web app, showing them a loading screen while it loads up the web app
  • Once loaded, the visitor browses the website in full screen mode, outside of mobile Safari, just like a full screen, native app
 Web App Mode in WPtouch Pro offers the ability to customize:
  • The message shown to visitors about Web App Mode and the number of days before the message is shown again
  • Home screen icons
  • Loading screens for all iOS devices (iPhones, iPod touches and iPads)
  • Whether visitors enjoy persistence (a feature where the web app remembers the last web page viewed when the visitor left the web app and loads it instead of your home page)
  • Whether Web App Mode loads post and page content with AJAX

WPtouch Pro’s Web App Mode: Setup is Minutes Away!

In WPtouch Pro, enabling Web App Mode is one checkbox away. Simply turn it on, and it’s available to visitors! Next you can easily upload and apply your home screen icons and loading screens. Configure any of the other settings available if you choose, and you’re good to go! Customers looking for a detailed guide on using WPtouch Pro’s Web App Mode can access the guide in our documentation area here (you must be a customer and logged in to view).

BraveNewCode.com in Web App Mode

Background: A Brief History of Web Apps on iOS

Back in 2008 when iOS went to version 2.0, Apple had announced that it was opening up its App Store, a place where developers could sell apps made for the platform. It had released its Development Kit and said to developers excited to get in on the popularity of iOS, “have at it”.

Before that, Apple had consistently advocated that developers should be building web-based apps built for Safari, it’s mobile web browser. Leveraging the latest HTML, CSS and JavaScript technologies, Apple insisted that developers could do everything they wanted via the web. Apple created The iOS Safari Development Center, a compendium of documentation on how developers could set out to create native-feeling and native-looking web-based applications.

Eventually, Apple saw a new market opportunity (or at least, revealed its interest in it) and decided to open an App Store. On July 10, 2008, the App Store was released for iTunes and iOS devices. Many companies who had created web apps were eager to ship native versions of their apps. Apple was eager for them as well— taking 30% of all sales Developers made selling their apps in Apple’s App Store.

Web Apps are Dead!

Apple created a listing of web apps built for iOS on its website. Apple’s attention and interest in web apps for iOS waned in the shadow of the App Store, and in spite of the 30% cut developers had to fork over to Apple to sell in the Store, they flocked in droves to get apps built for users that they could charge for— a strong contrast to web apps which, for the most part, were all entirely free iOS-tailored web-extensions of popular games, websites and tools.

Long Live Web Apps!

But web apps for iOS just wouldn’t die— in fact, many website publishers found that the restrictions imposed by Apple’s App Store prevented them from offering what they wanted to offer to users, and they continued developing their web apps. Apple still maintains its listing of web apps for iOS, and indeed there are several included which are built using WPtouch Pro.

There are some distinct advantages to offering a web app for iOS visitors, and with the ability to do so built into WPtouch Pro in such an easy-to-use, easy-to-setup manner, there’s no reason not to! Many customers use its web app capabilities alongside their native app offerings, giving choice to visitors on how they’d prefer to consume content.

Why Offer a Web App for Your WordPress Website?

Whether you’re a hobbist site like cigardojo.com, or a news-related blog like idownloadblog.com, iOS visitors will benefit from (and enjoy!) that you’re providing them with an elegant web app that they can install and use to consume your content whenever they please.

It’s also considerably less expensive than offering a native app for the iOS App Store. Yet if you’re working on/or have a native app, using WPtouch Pro’s Web App Mode feature is a great way to show your iOS visitors that you care about their experience of your content on their iOS mobile devices, and can be a great way to invite them towards using your native app.

Our customers tell us frequently that their visitors have provided them with great feedback about their WPtouch Pro powered web app, and love that it’s so easy-to-use and easy-to-setup:

“The look and feel of the “mobilized version” of our site is what we like the most about WPtouch Pro… We also love the iPad version of our website; it’s great having two distinct mobile versions of the site, one for phones and one for tablets.”
~cigardojo.com

November 27, 2012 — By WPTouch Admin

New Release: Update now to WPtouch Pro 2.8.1!

We’re pleased to announce our latest release, WPtouch Pro 2.8.1! Included in the release are changes that address iOS 6 and iPhone 5 rendering issues. WP Super Cache users will also appreciate our improved support.

See the changelog below for a complete list of updates and fixes.

Changelog:

  • Added: Better support for WP Super Cache
  • Added: IE Mobile 9 user agent
  • Added: Accessibility roles to UI elements in Classic theme
  • Changed: Web-App title input now maxes out at 14 characters (respects iOS 6 title limitation)
  • Changed: Optimized admin and theme JavaScript for better performance
  • Fixed: Bug related to iPhone 5 startup image not displaying in some situations
  • Fixed: Bug with menu height on iPhone 5 in Web-App Mode
  • Fixed: Issue with videos not resizing when loaded via Ajax
  • Fixed: Bug where the Classic theme minified JS files would not be loaded
  • Updated: add2home script to v2.0.4

November 22, 2012 — By WPTouch Admin

WPtouch Pro Tips Central: Creative Web Development

Creative Web Development 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: http://webdesign-westmidlands.com
Director, Creative Web Development: Derek Plant
License Type: Single Licence
Blog: Wired into the Web

tips-central-creative-web-development-mobile-ipad-themes

How long have you been using WPtouch Pro?
Only the last couple of months, but we very quickly understood how powerful it is and dug a little deeper to try and get the most out of it. We have been amazed by the results.

Why did you choose WPtouch Pro to power your mobile site?
We were looking for a way to create and maintain a mobile version of our website without a great deal of time or expense and without a steep learning curve. WPtouch Pro was the obvious choice.

What do you like most about using WPtouch Pro?
A lot of things. Firstly, although we use Headway which is a responsive theme and works very well, it doesn’t quite have the same user experience as when viewing the site with WPtouch Pro. However they play very well together and we like using Headway for iPad and WPtouch Pro for mobile phones. We think they make a great combination. It depends on the site layout of course, and you need to preview both to decide, but the level of choice offered by WPtouch Pro allows for very fine control.

One of our favorite features is the use of WPtouch Pro’s custom shortcodes. These make it very easy to have fine control over which content displays only on mobile devices and which displays only on the desktop theme.

A way we like to work is to start with a layout of the desktop version then add color-coded, semi-transparent panels over the different areas: For example red for mobile only, green for desktop only, and none for the common elements. This makes it very easy to see at a glance what we can eliminate or even add in just for mobile display. Using just two shortcodes gives us all of the control we need to apply them using the WordPress editor.

The ability to use a custom landing page, a custom menu, and custom icons gives tremendous freedom to give a great user experience that looks and feels that it has been designed specifically for mobile users.

What improvements would you like to see included in future WPtouch Pro updates?
Not many things because it would be a shame to lose the easy learning curve. Maybe an easy way to show widgets would be a good addition although we use a workaround for that — it would be great to be able to display widgets in the menu similar to the way categories display. It may also be good to have a notification bar for announcements.

Other than that we can’t really see much room for improvement. Its beauty is in its simplicity. That simplicity is what inspired us to create a WPtouch Pro video overview and to publish a WPtouch Pro Kindle eBook.

OUR TIPS CENTRAL SUGGESTIONS FOR Creative Web Development

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

1. Add a custom home screen icon.
To round out the current implementation of iOS Web-App Mode, a custom home screen icon may be added. This would complement the existing custom startup screen and custom title for the web-app. This icon may be added via Menu + Icons >; Menu and Icon Setup >; General Icons + Menu Setup >; Site, Theme & Bookmark.
Support Documentation: iOS Web-App Mode

tips-central-creative-web-development

Custom icon support

2. Make the custom landing page consistent in the desktop theme.
We noticed that the custom mobile landing page, when viewed in the desktop theme, did not share many of the same page elements with the rest of the desktop theme. Consistency here is important as the custom landing page becomes the site home page when visitors use the switch link.

We also noticed excellent use of the WPtouch Pro footer to add contact and branding elements that are unique to the mobile theme. WPtouch Pro’s custom menu option was also used to add menu items in the mobile theme that are not present in the non-mobile theme. Kudos!

tips-central-creative-web-development-custom-footer-and-menu

Custom footer and menu

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.

November 15, 2012 — By WPTouch Admin

WPtouch Pro Tips Central: iDownloadBlog.com

iDownloadBlog 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: iDownloadBlog.com
Site Owner: Sebastien Page
License Type: Single License
iDownloadBlog on Twitter: @iDownloadBlog

tips-central-mobile-ipad-themes

How long have you been using WPtouch Pro?
I believe I have been using WPtouch Pro for about two years.

Why did you choose WPtouch Pro to power your mobile site?
There are very few WordPress plugins that offer a turnkey mobile theme. I was already using the free version of WPtouch when I found out that a Pro version was available. The Pro version appeared to me as a no-brainer. It is inexpensive, comes with an incredible number of customizations, and most important, it gives you access to BraveNewCode’s support forums which are very helpful. The ability to edit and tweak the WPtouch mobile theme to my liking was also part of the decision. As a matter of fact, I have been thinking of pushing the theme tweaking a little more and will hire a developer soon to work on it.

What do you like most about using WPtouch Pro?
It’s simple, elegant, and inexpensive. I also love the great support the folks at BraveNewCode provide. Every time I’ve posted a question in the support forums, I received an answer in a very timely manner.

What improvements would you like to see included in future WPtouch Pro updates?
I would like WPtouch Pro to let me customize the theme even more without having to touch the CSS. I am no programmer but I know how I would want my theme to look. Unfortunately I can’t tweak it myself. I’d also want to see more themes available.

OUR TIPS CENTRAL SUGGESTIONS FOR iDownloadBlog.com

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

1. Customize the menu.

There is opportunity in the iDownloadBlog.com mobile theme to create a user-friendly mobile menu with WPtouch Pro. By using a custom WordPress menu, a mobile-only menu may be created that effectively presents site content by bringing priority items to the top level and nesting related items beneath. By refining the menu in this way, social media links may be added for easy visibility and access and extraneous menu items (such as “Search Results”) may be omitted. Note that menu items may also be omitted by using the options at Menu + Icons > Menu and Icon Setup > General Icons + Menu Setup > Pages/Custom Menu. Also, custom menu icons may be added in WPtouch Pro to make menu item selection easier for visitors.

If no customization is desired, improvements may still be had by caching the large menu for speedier performance (Menu + Icons > General Settings > Advanced > Cache menu items to reduce database queries). Opting not to use menu icons which, when a large menu is in play, may also be a good choice for usability (Menu + Icons > General Settings > Advanced > Use Menu Icons).
Support Documentation: Using a Custom WordPress menu

tips-central-idownloadblog-customize-menu

Customize the menu

 

2. Add the desktop theme’s shortcodes.
Raw shortcodes were seen on the mobile site which indicates that they can be added from the desktop theme to WPtouch Pro’s mobile theme. To do so, try the options located at General > Compatibility > Theme & Page Compatibility > Include functions.php from the active desktop theme . Two options are offered in the dropdown menu that address the majority of themes. If neither option works well, then those shortcode functions may be manually included in WPtouch Pro.
Support Documentation: Including Desktop Theme Functions

tips-central-idownloadblog-theme-and-page-compatibility

Theme & Page Compatibility options

 

3. Enable iPad Support and other built-in WPtouch Pro features.
WPtouch Pro offers built-in, one-click support for one of the most popular tablets in use. WPtouch Pro’s iPad support offers another level of control over the mobile experience. Other built-in features include iOS Web-App Mode to create a native app-like experience from your website and the mobile switch which allows visitors to toggle to the desktop theme and back.
Support Documentation:
Enabling iPad Support, iOS Web-App Mode, and Switch Link

tips-central-idownloadblog-ipad-support-enabled

iPad support enabled

 

4. Enable the archives template.
WPtouch Pro offers special templates for use with archives and links. These may be enabled at Active Theme > Menu, Posts and Pages > Theme Templates or “Archives” may be removed from the menu entirely if desired.

tips-central-idownloadblog-archives-template

Enable the archives template

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.

November 14, 2012 — By WPTouch Admin

Responsive Themes vs. Server Side Optimization: WordPress Mobile Solutions Compared

Martin Kuplens-Ewart delivers a presentation about WordPress mobile solutions

Last month I had the opportunity to present at WordCamp Toronto Developers. I spoke about principles and guidelines to building successful mobile websites and spent a fair bit of time looking at the three main approaches to building mobile websites:

  • using a single pure responsive theme, which adjusts page flow and hides/shows content based on the device’s width;
  • building a separate website for mobile devices;
  • server-side optimizations, which is the approach WPtouch enables.

Pros and Cons of Responsive Design

A pure responsive approach to building a website can be a very tempting proposition. After all, it promises to address both your desktop and mobile website needs in one go. Some design firms will even argue that this approach saves you money, especially if your website will involve merely customizing a pre-existing responsive theme. Images are even automatically scaled by the browser to fit the screen. And if the content isn’t helpful to mobile visitors? You can just hide it!

But being able to adapt to changing user expectations and behaviours is critical to being successful in the mobile web. Here, responsive themes’ strongest advantage proves to be their Achilles’ heel. Because your mobile display is inextricably linked to your desktop display, adjusting your sites display for the way people use it with different devices is unavoidably more difficult and expensive than if you use a separate set of templates for mobile and desktop visitors, particularly smartphone visitors.

For example, because desktop visitors are rarely looking to visit your physical location, most website templates will list your address in the footer or on a contact page. But what if, like many business owners, you learn that the first piece of information your mobile visitors actually want is your location? Now you need to retrofit your site templates to add a map or your address at the top of your homepage, too.

Because you’re using a pure responsive template, you can’t just add the content, check it on your phone, and be happy with it. You now need to add additional styles and possibly code to hide the map and address on large screens and then re-test your site in all display sizes to make sure your change hasn’t caused problems. And, over time, your pages become peppered with sometimes-hidden content and elements.

Remember those images you used because they look great on your 20-inch monitor? Mobile browsers can only scale them after the full image is downloaded. The pictures and content you hid? Mobile visitors are forced to download those, too. In fact, many websites using a purely responsive technique will send upwards of a megabyte of media and HTML that can’t or won’t be shown on mobile devices. One American presidential candidate’s homepage was a full seven megabytes though all you saw were thumbnails and small photos!

With many people, particularly in North America, having between 100 and 500 MB monthly data plans, any website that sends oversized and unused images and content that is then hidden from view is placing an unfair (and unnecessary) burden on its mobile visitors.

Server Side Optimization

In these situations, solutions involving server-side optimizations (or as Google refers to it, dynamic serving) prove their worth. By detecting that a mobile device is accessing your site before sending anything to the device, templates specifically designed and optimized for devices are used to display your website’s content.

Rather than sending those large images sized to look great on a large monitor, they are re-sized on the server to fit the mobile device, dramatically cutting file sizes. And because only the information that is being displayed is sent, no content needs to be hidden, and no waste data is sent.

The separation of your desktop and mobile templates also means that you can freely make major changes to adapt to mobile visitors’ needs and also experiment with your desktop site, installing plugins, advertising, and rich media, without an impact on your efficient mobile interface.

And what if you already have a website and just want to add mobile support? Solutions such as WPtouch that enable server-side optimization allow you to do that without rebuilding your desktop site. A pure responsive approach means tearing up your templates and starting from scratch.

Still tempted?

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