Responsive WordPress Website Design – Is yours?
Google has recently started talking about mobile friendly websites and how they will (potentially) penalise websites that are not mobile friendly. This basically means – does your website view properly on mobile devices, phones, tablets, etc. This is generally termed Responsive Web Design or RWD by the trade.
If you website is not optimised for these devices, Google are talking about tailoring the traffic for these sites. This could mean that people searching on mobile phones will not see your website IF it is not mobile friendly – of course it may not mean this – but as with Google most of the time, it’s best to try to tick all their boxes if you want to rank properly in their search algorithms.
There are of course many resources to help you determine if your website is mobile friendly or not. Here’s a few:
Google Mobile Guide for WordPress. This is a great start if you are using WordPress and need to do some changes to your website.
Google Mobile Testing tool. This website will enable you to test your website with Google to see that it ticks their boxes for mobile friendly.
How fast is your website. Google is starting to look into the overall speed of websites. Rich websites tend to have a lot of information and content, the content can slow the site down. If you are using WordPress you may suffer from plugin’itus – the problem of having so many plugins that it grinds your site to a slow speed.
Using Google Chrome to Emulate Mobile Devices
If you are using Google Chrome as your browser of choice, you can use the developer tools to take a peek at your website and check that it performs well viewed from the mobile experience. Look at the device mode documentation for developer tools under Chrome to see how to use this effectively.
The Mobile emulator built into Chrome is a great debugging and viewing tool to check what your website looks like when viewed on different devices. A wonderful free tool for developers and if you are a more advanced user, use it and see what your website looks like, for example, on a iPhone 3/4. This will help you understand what needs to be done to your site to improve it.
You can also emulate geolocation and device orientation (portrait and landscape) using the google screen emulator. Handy when you are testing services that rely on location information from your phone or if you holding the device in different orientations.
Using Mobile Friendly WordPress Plugins
In case you do not want to have to change CSS and other aspects of your site, but just have a ‘mobile friendly’ version of your site, you should look at plugins and perhaps having a separate version of your website – just for mobile users.
Mobile friendly resources for WordPress
JetPack from WordPress themselves has many facilities and options for mobile friendly website creation.
WPTouch is a plugin that enables you to run two themes in one WordPress installation; one for desktop and one for mobile devices. Each can share the same content or even have different content for different devices.
If you create a separate website for mobile content you may want to use a plugin that detects that the person browsing is using a mobile device and then divert them to your mobile version of the website – this is a typical Mobile Detection plugin that does this for you using WordPress.
Other Resources
Google development tools for Javascript. Great debugging tools built into Chrome to allow developers to debug javascript. Javascript is used a lot in RWD.
Examine your media queries to see if you are using the correct CSS for different break points and emulations.
Check the WordPress site for the most popular themes, and look at the responsive themes in particular – these will be the best ones as most people are using them. Of course you may want to customise them to suit your business but they are a good starting point. Also search for the key term ‘responsive’ when looking for themes.
Web Notes and Ramblings 