WPtouch - Make Your Website Mobile-Friendly

Download WPtouch - Make Your Website Mobile-Friendly

Post on 02-Sep-2015




0 download

Embed Size (px)


Plugin para deixar seu site WP pronto pro mobile


<ul><li><p>MAKING YOUR SITE MOBILE-FRIENDLY</p><p> INCLUDES STEPS FOR GOOGLE MOBILE SEARCH COMPLIANCE</p></li><li><p>2Thank you - Im very </p><p>happy I went with </p><p>WPtouch Pro! My site </p><p>is finally mobile friendly </p><p>in a professional way!</p><p>Eric Tinker</p></li><li><p>3Mobile visitors are an ever more significant part </p><p>of most websites traffic, often overtaking traffic </p><p>from traditional desktop devices.</p><p>After the frustration of WAP and other dedicated </p><p>mobile systems, pinch &amp; zoom made websites </p><p>seem amazingly navigable on smartphones. But </p><p>they are far from ideal: finding and accessing </p><p>content is slow and often frustrating.</p><p>Its time we make the move from mobile-tolerable </p><p>websites to websites that are truly mobile-friendly.</p><p>WHY MOBILE-FRIENDLY?</p><p>WHY NOW?Google has been rolling </p><p>out initiatives to encourage </p><p>website owners to improve </p><p>the mobile experience of </p><p>their websites.</p><p>On April 21, 2015, Google </p><p>stepped up their mobile </p><p>experience campaign, adding </p><p>mobile-friendliness to the </p><p>list of criteria that determine </p><p>ranking of a website in </p><p>mobile search. </p><p>Pages that have been </p><p>identified as mobile-friendly </p><p>will continue to rank well in </p><p>search results. But websites </p><p>that fail to meet Googles </p><p>mobile-friendly criteria will </p><p>find their position in mobile </p><p>searches quickly falling.</p><p>APRIL 2015</p></li><li><p>4IS MY WEBSITE MOBILE-FRIENDLY?</p><p>You can easily find out whether your </p><p>website meets Googles mobile-friendly </p><p>criteria using two free tools:</p><p>Googles quick mobile-friendly test tool1 </p><p>provides results for one page at a time. Use </p><p>this as an initial test and to check whether </p><p>a particular page is recognized as mobile </p><p>friendly by Googles search engine.</p><p>The more extensive (and free) Webmaster </p><p>Tools2 service provides a wealth of </p><p>information about the health of your site </p><p>within Googles search system.</p><p>Look for the mobile usability report (in the </p><p>Search Traffic menu) that identifies pages on </p><p>your website that Google has not been able </p><p>to score as mobile-friendly. The report will </p><p>provide specific feedback for those pages </p><p>to help you complete your mobile-friendly </p><p>transition.</p><p>If your site fails these tests, it is in your best </p><p>interests to invest some effort into making </p><p>your website mobile-friendly.</p><p>1. www.google.com/webmasters/tools/mobile-friendly/ </p><p>2. www.google.com/webmasters/</p></li><li><p>5For WordPress websites that </p><p>do not currently accommodate </p><p>mobile devices, completely </p><p>overhauling your website just to </p><p>use a responsive theme can be a </p><p>costly and time-intensive choice.</p><p>Additionally, many website </p><p>owners currently relying on </p><p>a responsive theme to serve </p><p>visitors have found their themes </p><p>do not meet Googles mobile </p><p>standards, or perform poorly on </p><p>mobile devices. </p><p>While desktop visitors are </p><p>generally well served, mobile </p><p>visitors may have to deal with </p><p>sidebars, complex widgets, </p><p>and large images that have </p><p>been squeezed to fit a mobile </p><p>screen. Meanwhile content that </p><p>is hidden or scaled must still </p><p>be assembled by WordPress </p><p>and downloaded by the mobile </p><p>device at the full size.</p><p>Although responsive themes </p><p>may have been adequate, visitors </p><p>using mobile devices expect </p><p>more than just scaled and </p><p>shuffled content. Todays mobile </p><p>visitors demand a site experience </p><p>that is tuned to their device.</p><p>WPtouch Pro is part of a Mobile-First Strategy</p><p>WPtouch Pro is able to address </p><p>Googles mobile-friendly </p><p>expectations and the limitations </p><p>of standard responsive themes </p><p>in one tooland doesnt require </p><p>you to completely rebuild your </p><p>site to make it mobile-friendly.</p><p>Whether your site currently has </p><p>a responsive theme or still uses </p><p>an older non-responsive theme, </p><p>WHY WPTOUCH PRO?</p><p>WPtouch Pro will detect mobile </p><p>visitors and switch the site to </p><p>a special mobile-optimized </p><p>theme, loading the relevant </p><p>content, sized appropriately to </p><p>fit mobile devices.</p><p>Your desktop and tablet </p><p>visitors continue to enjoy the </p><p>experience theyve always </p><p>had, while your mobile </p><p>visitors can discover your </p><p>website with an experience </p><p>tailor-made for them.</p><p>Thinking about WPtouch Pro but not quite sure? You can try </p><p>our most of the plugins functionality with the free edition of </p><p>WPtouch, available in the WordPress plugin repository.</p><p>WPtouch includes a version of Bauhaus and is community-</p><p>supported via the WordPress plugin forums. You will need </p><p>to purchase a WPtouch Pro license to get assistance from </p><p>our professional support team.</p><p>Visit http://wordpress.org/plugins/wptouch for details.</p></li><li><p>6CHOOSE A THEME WPtouch Pro themes are designed to be incredibly flexible and work with all kinds of WordPress </p><p>websites. For demos of every theme, visit http://demo.wptouch.com/ using your mobile device.</p><p>Themes included with WPtouch Pro display content from </p><p>the standard WordPress title and content fields. If your site </p><p>uses custom post types, additional fields, or uses templates </p><p>to create special functionality, WPtouch Pro can make going </p><p>mobile-friendly fast and affordable by reducing the effort and </p><p>time required to adapt your theme for mobile users.</p><p>v</p><p>GETTING STARTED WITH WPTOUCH PRO</p><p>BLOGS AND OTHER POST-BASED WEBSITES</p><p>Bauhaus </p><p>Built with a clean and modern </p><p>design, Bauhaus is a great theme </p><p>for most websites. A limited </p><p>edition is included with the free </p><p>edition of WPtouch (see sidebar </p><p>for details).</p><p>CMS </p><p>If your site is content rich with </p><p>many pages, categories, tags </p><p>&amp; lots of content, CMS is the </p><p>choice for you!</p><p>Classic Redux </p><p>If you have a taste for the </p><p>nostalgic, consider this refreshed </p><p>and modern take on the iconic </p><p>original WPtouch theme.</p><p>Prose </p><p>Great content and long reads </p><p>deserve careful handling. Prose </p><p>is designed to showcase long-</p><p>form writing and make reading </p><p>on the smartphone a delight. </p><p>BUSINESSES AND ORGANIZATIONS</p><p>Simple </p><p>Easy and fast to set up and </p><p>customize, Simple is made for </p><p>page-driven small-business and </p><p>organization websites.</p><p>Open </p><p>Purpose-made for </p><p>entrepreneurs, Open is a friendly </p><p>theme with business-ready </p><p>features to help you connect </p><p>with your customers. </p><p>ECOMMERCE </p><p>WEBSITES</p><p>MobileStore </p><p>Built for sites using </p><p>WooCommerce, MobileStore </p><p>turns your website into an </p><p>elegant mobile shopping </p><p>destination and offers </p><p>compatibility with the complete </p><p>range of WooCommerce </p><p>extensions.</p></li><li><p>7CONFIGURE WPTOUCH PRO</p><p>Using WPtouch Pros easy control panel you can quickly configure your new mobile </p><p>theme to match your sites brandingwith color, logo, and fonts. Then easily tune </p><p>WPtouch Pros behaviour to match your desired mobile experience with custom </p><p>menus, icons, and more.</p><p>Our support site3 includes a wide range of tutorials to get you started and help you </p><p>dig into more advanced topics</p><p>Does your website make use of shortcodes from your desktop theme? Although </p><p>some mobile tools may struggle with them, WPtouch Pro is able to support them </p><p>on demand. Simply enable desktop shortcode handling in the WPtouch Pro admin.</p><p> 3. http://support.wptouch.com/ </p><p>v</p></li><li><p>8VERIFYING YOUR MOBILE-FRIENDLY SITE</p><p>Im really loving it - and Ive </p><p>had heaps of people tell me my </p><p>mobile site looks awesome! </p><p>Ive been telling all of my </p><p>clients to use it, too.</p><p>Julie-Anne Ellem</p><p>The same free tools used to check if your </p><p>site needs help being mobile-friendly can </p><p>be used to confirm that WPtouch Pro is </p><p>helping your site.</p><p>Choose a page on your site and run it </p><p>through the mobile-friendly test4 to find </p><p>out how Google now sees your website.</p><p>This tools report will include:</p><p> Either a green bar with the text Awesome! </p><p>This page is mobile-friendly or a red bar </p><p>with the text Not mobile-friendly;</p><p> A results summary that indicates any </p><p>particular areas of concern;</p><p> How Googlebot sees this page, which </p><p>lets you know if there are any files that </p><p>Googles test couldnt load (usually CSS or </p><p>JavaScript); and</p><p> A screenshot of the page as seen by </p><p>Googles test.</p><p>All of these elements provide valuable </p><p>feedback to confirm that your site is now </p><p>mobile-friendlyor to identify steps that </p><p>might be needed to let Google correctly </p><p>classify your site.</p><p>When you run a page from your site </p><p>through the test youll see one of the </p><p>following results: </p><p> 4. www.google.com/webmasters/tools/mobile-friendly/</p></li><li><p>Screenshot displays correctly, mobile theme displays on your smartphone</p><p>Google sees your mobile theme and the page you tested is working </p><p>great. Now check the full mobile usability report to confirm your site </p><p>is fully mobile-friendly!</p><p>Screenshot displays mobile theme incorrectly, mobile theme displays correctly on your smartphone</p><p>Googles bot is likely being prevented from accessing WPtouchs </p><p>stylesheets and JavaScript. This is most likely due to a robots.txt file </p><p>preventing access by Googles bots to your /wp-content/plugins </p><p>directory.</p><p>Fix this by adding the following to your robots.txt file:</p><p>User-agent: Googlebot </p><p>Allow: /wp-content/plugins/wptouch-pro-3/ </p><p>User-agent: Googlebot </p><p>Allow: /wp-content/wptouch-data/</p><p>To allow Googles test to access your theme files while running the </p><p>free edition of WPtouch, add the following to your robots.txt file:</p><p>User-agent: Googlebot </p><p>Allow: /wp-content/plugins/wptouch/</p><p>9</p></li><li><p>Screenshot displays mobile theme correctly, mobile theme displays on your smartphone</p><p>Google is seeing your mobile theme but it looks like some content </p><p>on your page could not be formatted to fit the screen. Sometimes </p><p>WordPress or plugins will add images, tables, and other content with so-</p><p>called inline dimensions that cannot be overridden by our stylesheets.</p><p>Open the page/post and switch your editor to the Code mode to </p><p>identify any content that has a width style set wider than about </p><p>340 pixels (e.g. width: 640px;). Either change the fixed width to a </p><p>percentage (e.g., width: 100%;) or simply remove the width to have </p><p>each browser format the content to its best ability.</p><p>Screenshot displays desktop theme, smartphone sees desktop theme or desktop browsers occasionally see mobile theme</p><p>Either WPtouch is not active on your site, or your site is not correctly </p><p>responding with the mobile theme. You may have a cache plugin </p><p>installed that is not configured to separate mobile and desktop traffic. </p><p>Visit our support site for a detailed guide to configuring most popular </p><p>cache plugins for compatibility with WPtouch Pro.</p><p>10</p></li><li><p>Screenshot shows your desktop theme, but the mobile theme displays on your smartphone (either consistently or intermittently)</p><p>Although WPtouch Pro is configured and running correctly, Googles </p><p>bot is not being allowed to see your mobile theme. This may be due </p><p>to problems with a server-level cache system in use by your hosting </p><p>provider. Contact their support team to let them know youre running </p><p>WPtouch Pro and to get their help ensuring that Googles bots can </p><p>access the mobile site.</p><p>11</p><p>GETTING HELP WITH WPTOUCH PRO</p><p>In addition to a library of articles and tutorials, our professional support team are </p><p>available to help with your questions or concerns weekdays from 9am-5pm (Pacific). </p><p>Login to http://support.wptouch.com/ to get started.</p><p>A support account will be automatically created for you following purchase of a </p><p>WPtouch Pro license. Visit www.wptouch.com/pricing/ to choose and purchase a </p><p>WPtouch Pro license for your website!</p></li></ul>