In the wake of Mobilegeddon websites have had to either adjust to suit Google’s new SEO algorithms, or face a loss of online business. There are some easy steps you can follow to make sure your site works with the new SEO criteria.
BEFORE YOU START! Test your website to see if it’s mobile-friendly already. You can do this with Google’s testing tool, and may save you a lot of work. If your site doesn’t work well with mobile devices, you can choose to do the following:
Free mobile friendly assessment – Mobilegeddon
Create a Mobile Version of Your Current Site
If you have a non-cms website the quickest way to make your site mobile-friendly is to create a separate mobile version of your desktop site using a conversion platform like bMobilized or Duda Mobile. While this is a simple way to bring your site into compliance, it requires you to have two separate websites. It can be difficult to update two sites, and users may get frustrated if they find less content or information available on the mobile version versus the desktop.
Use Mobile Themes or Plugins on Popular CMS Platforms
The most popular website content management systems — Wordpress, Joomla, or Drupal — all have responsive themes or bolt-on solutions to make your site mobile-friendly without needing two separate versions. Some include additional ways to customize the mobile experience to not only provide the content, but incorporate other features best used on mobile devices.
WordPress Mobile Plugins. WPtouch is one of the best plugins for WordPress sites looking to add a custom mobile experience. It provides a paid version that contains additional features for ecommerce sites. JetPack is WordPress.com’s solution for implementing a simple mobile theme to ensure mobile access to its websites.
Joomla Mobile Plugins. Responsivizer and JoomlaShine both contain simple ways to bring mobile functionality to your site. These may only be necessary if you are using an older version of Joomla, such as 2.5 or lower. Joomla 3.x comes with support for mobile websites.
Drupal Mobile Plugins. Drupal offers two modules — ThemeKey and MobileTheme — that detect whether a user is on a mobile device and automatically switches the site’s theme to a more friendly mobile appearance. Both provide easy-to-use interfaces once you get them installed.
Google has put together a helpful guide to getting your site mobile-friendly, as well as a list of guides for other content management systems.
Or if you’re a comfortable with coding, you can take the following steps.
Set a Mobile Friendly Preferred Width. Load your website in a desktop browser and resize the window to the narrowest width, while keeping your website still readable. This is your minimum viewing size. Now, get the size of that window and set it as your website’s preferred viewport width by adding this meta tag to your page’s head. The next time your website is viewed on a mobile device, it will automatically show your website at this size with all the extraneous space on the left and right side of your website removed.
Set Image Widths to 100%. Give your images a maximum width of 100% so that they are automatically resized if they get too big for the mobile device. When a user zooms in on a picture, the browser will bring back the clarity as you zoom in. However, make sure your website doesn’t have the user-scalable=no property set in a meta tag. If so, the user won’t be able to zoom in and out.
Set Input Widths to 100% After giving your images a max-width, perform a similar trick on the input fields. Simply add this to your website’s CSS stylesheet.When your website is viewed on a mobile device with a preferred width set, the input fields won’t extend beyond the edge of the screen.