WPtouch - Make Your Website Mobile-Friendly

Download WPtouch - Make Your Website Mobile-Friendly

Post on 02-Sep-2015

212 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

Plugin para deixar seu site WP pronto pro mobile

TRANSCRIPT

  • MAKING YOUR SITE MOBILE-FRIENDLY

    INCLUDES STEPS FOR GOOGLE MOBILE SEARCH COMPLIANCE

  • 2Thank you - Im very

    happy I went with

    WPtouch Pro! My site

    is finally mobile friendly

    in a professional way!

    Eric Tinker

  • 3Mobile visitors are an ever more significant part

    of most websites traffic, often overtaking traffic

    from traditional desktop devices.

    After the frustration of WAP and other dedicated

    mobile systems, pinch & zoom made websites

    seem amazingly navigable on smartphones. But

    they are far from ideal: finding and accessing

    content is slow and often frustrating.

    Its time we make the move from mobile-tolerable

    websites to websites that are truly mobile-friendly.

    WHY MOBILE-FRIENDLY?

    WHY NOW?Google has been rolling

    out initiatives to encourage

    website owners to improve

    the mobile experience of

    their websites.

    On April 21, 2015, Google

    stepped up their mobile

    experience campaign, adding

    mobile-friendliness to the

    list of criteria that determine

    ranking of a website in

    mobile search.

    Pages that have been

    identified as mobile-friendly

    will continue to rank well in

    search results. But websites

    that fail to meet Googles

    mobile-friendly criteria will

    find their position in mobile

    searches quickly falling.

    APRIL 2015

  • 4IS MY WEBSITE MOBILE-FRIENDLY?

    You can easily find out whether your

    website meets Googles mobile-friendly

    criteria using two free tools:

    Googles quick mobile-friendly test tool1

    provides results for one page at a time. Use

    this as an initial test and to check whether

    a particular page is recognized as mobile

    friendly by Googles search engine.

    The more extensive (and free) Webmaster

    Tools2 service provides a wealth of

    information about the health of your site

    within Googles search system.

    Look for the mobile usability report (in the

    Search Traffic menu) that identifies pages on

    your website that Google has not been able

    to score as mobile-friendly. The report will

    provide specific feedback for those pages

    to help you complete your mobile-friendly

    transition.

    If your site fails these tests, it is in your best

    interests to invest some effort into making

    your website mobile-friendly.

    1. www.google.com/webmasters/tools/mobile-friendly/

    2. www.google.com/webmasters/

  • 5For WordPress websites that

    do not currently accommodate

    mobile devices, completely

    overhauling your website just to

    use a responsive theme can be a

    costly and time-intensive choice.

    Additionally, many website

    owners currently relying on

    a responsive theme to serve

    visitors have found their themes

    do not meet Googles mobile

    standards, or perform poorly on

    mobile devices.

    While desktop visitors are

    generally well served, mobile

    visitors may have to deal with

    sidebars, complex widgets,

    and large images that have

    been squeezed to fit a mobile

    screen. Meanwhile content that

    is hidden or scaled must still

    be assembled by WordPress

    and downloaded by the mobile

    device at the full size.

    Although responsive themes

    may have been adequate, visitors

    using mobile devices expect

    more than just scaled and

    shuffled content. Todays mobile

    visitors demand a site experience

    that is tuned to their device.

    WPtouch Pro is part of a Mobile-First Strategy

    WPtouch Pro is able to address

    Googles mobile-friendly

    expectations and the limitations

    of standard responsive themes

    in one tooland doesnt require

    you to completely rebuild your

    site to make it mobile-friendly.

    Whether your site currently has

    a responsive theme or still uses

    an older non-responsive theme,

    WHY WPTOUCH PRO?

    WPtouch Pro will detect mobile

    visitors and switch the site to

    a special mobile-optimized

    theme, loading the relevant

    content, sized appropriately to

    fit mobile devices.

    Your desktop and tablet

    visitors continue to enjoy the

    experience theyve always

    had, while your mobile

    visitors can discover your

    website with an experience

    tailor-made for them.

    Thinking about WPtouch Pro but not quite sure? You can try

    our most of the plugins functionality with the free edition of

    WPtouch, available in the WordPress plugin repository.

    WPtouch includes a version of Bauhaus and is community-

    supported via the WordPress plugin forums. You will need

    to purchase a WPtouch Pro license to get assistance from

    our professional support team.

    Visit http://wordpress.org/plugins/wptouch for details.

  • 6CHOOSE A THEME WPtouch Pro themes are designed to be incredibly flexible and work with all kinds of WordPress

    websites. For demos of every theme, visit http://demo.wptouch.com/ using your mobile device.

    Themes included with WPtouch Pro display content from

    the standard WordPress title and content fields. If your site

    uses custom post types, additional fields, or uses templates

    to create special functionality, WPtouch Pro can make going

    mobile-friendly fast and affordable by reducing the effort and

    time required to adapt your theme for mobile users.

    v

    GETTING STARTED WITH WPTOUCH PRO

    BLOGS AND OTHER POST-BASED WEBSITES

    Bauhaus

    Built with a clean and modern

    design, Bauhaus is a great theme

    for most websites. A limited

    edition is included with the free

    edition of WPtouch (see sidebar

    for details).

    CMS

    If your site is content rich with

    many pages, categories, tags

    & lots of content, CMS is the

    choice for you!

    Classic Redux

    If you have a taste for the

    nostalgic, consider this refreshed

    and modern take on the iconic

    original WPtouch theme.

    Prose

    Great content and long reads

    deserve careful handling. Prose

    is designed to showcase long-

    form writing and make reading

    on the smartphone a delight.

    BUSINESSES AND ORGANIZATIONS

    Simple

    Easy and fast to set up and

    customize, Simple is made for

    page-driven small-business and

    organization websites.

    Open

    Purpose-made for

    entrepreneurs, Open is a friendly

    theme with business-ready

    features to help you connect

    with your customers.

    ECOMMERCE

    WEBSITES

    MobileStore

    Built for sites using

    WooCommerce, MobileStore

    turns your website into an

    elegant mobile shopping

    destination and offers

    compatibility with the complete

    range of WooCommerce

    extensions.

  • 7CONFIGURE WPTOUCH PRO

    Using WPtouch Pros easy control panel you can quickly configure your new mobile

    theme to match your sites brandingwith color, logo, and fonts. Then easily tune

    WPtouch Pros behaviour to match your desired mobile experience with custom

    menus, icons, and more.

    Our support site3 includes a wide range of tutorials to get you started and help you

    dig into more advanced topics

    Does your website make use of shortcodes from your desktop theme? Although

    some mobile tools may struggle with them, WPtouch Pro is able to support them

    on demand. Simply enable desktop shortcode handling in the WPtouch Pro admin.

    3. http://support.wptouch.com/

    v

  • 8VERIFYING YOUR MOBILE-FRIENDLY SITE

    Im really loving it - and Ive

    had heaps of people tell me my

    mobile site looks awesome!

    Ive been telling all of my

    clients to use it, too.

    Julie-Anne Ellem

    The same free tools used to check if your

    site needs help being mobile-friendly can

    be used to confirm that WPtouch Pro is

    helping your site.

    Choose a page on your site and run it

    through the mobile-friendly test4 to find

    out how Google now sees your website.

    This tools report will include:

    Either a green bar with the text Awesome!

    This page is mobile-friendly or a red bar

    with the text Not mobile-friendly;

    A results summary that indicates any

    particular areas of concern;

    How Googlebot sees this page, which

    lets you know if there are any files that

    Googles test couldnt load (usually CSS or

    JavaScript); and

    A screenshot of the page as seen by

    Googles test.

    All of these elements provide valuable

    feedback to confirm that your site is now

    mobile-friendlyor to identify steps that

    might be needed to let Google correctly

    classify your site.

    When you run a page from your site

    through the test youll see one of the

    following results:

    4. www.google.com/webmasters/tools/mobile-friendly/

  • Screenshot displays correctly, mobile theme displays on your smartphone

    Google sees your mobile theme and the page you tested is working

    great. Now check the full mobile usability report to confirm your site

    is fully mobile-friendly!

    Screenshot displays mobile theme incorrectly, mobile theme displays correctly on your smartphone

    Googles bot is likely being prevented from accessing WPtouchs

    stylesheets and JavaScript. This is most likely due to a robots.txt file

    preventing access by Googles bots to your /wp-content/plugins

    directory.

    Fix this by adding the following to your robots.txt file:

    User-agent: Googlebot

    Allow: /wp-content/plugins/wptouch-pro-3/

    User-agent: Googlebot

    Allow: /wp-content/wptouch-data/

    To allow Googles test to access your theme files while running the

    free edition of WPtouch, add the following to your robots.txt file:

    User-agent: Googlebot

    Allow: /wp-content/plugins/wptouch/

    9

  • Screenshot displays mobile theme correctly, mobile theme displays on your smartphone

    Google is seeing your mobile theme but it looks like some content

    on your page could not be formatted to fit the screen. Sometimes

    WordPress or plugins will add images, tables, and other content with so-

    called inline dimensions that cannot be overridden by our stylesheets.

    Open the page/post and switch your editor to the Code mode to

    identify any content that has a width style set wider than about

    340 pixels (e.g. width: 640px;). Either change the fixed width to a

    percentage (e.g., width: 100%;) or simply remove the width to have

    each browser format the content to its best ability.

    Screenshot displays desktop theme, smartphone sees desktop theme or desktop browsers occasionally see mobile theme

    Either WPtouch is not active on your site, or your site is not correctly

    responding with the mobile theme. You may have a cache plugin

    installed that is not configured to separate mobile and desktop traffic.

    Visit our support site for a detailed guide to configuring most popular

    cache plugins for compatibility with WPtouch Pro.

    10

  • Screenshot shows your desktop theme, but the mobile theme displays on your smartphone (either consistently or intermittently)

    Although WPtouch Pro is configured and running correctly, Googles

    bot is not being allowed to see your mobile theme. This may be due

    to problems with a server-level cache system in use by your hosting

    provider. Contact their support team to let them know youre running

    WPtouch Pro and to get their help ensuring that Googles bots can

    access the mobile site.

    11

    GETTING HELP WITH WPTOUCH PRO

    In addition to a library of articles and tutorials, our professional support team are

    available to help with your questions or concerns weekdays from 9am-5pm (Pacific).

    Login to http://support.wptouch.com/ to get started.

    A support account will be automatically created for you following purchase of a

    WPtouch Pro license. Visit www.wptouch.com/pricing/ to choose and purchase a

    WPtouch Pro license for your website!