With so many people accessing the web from their smartphones, a mobile friendly website is essential for all business — no matter how small.
Also called “responsive,” this is essentially a website that adjusts — or responds — to different device sizes or screen dimensions. The terms “responsive” and “mobile friendly" can be used interchangeably with other terms such as "mobile responsive."
If you've ever visited a website on your smartphone that wasn't mobile friendly, you can probably attest to how annoying your experience was.
You likely left that site to visit another website that was easier to use.
A responsive website creates a more optimal experience for the end user since text is readable, you don't need to zoom in, and there is no need for horizontal scrolling.
En savoir plus: Comment créer un site Web adapté aux appareils mobiles avec WordPress
How to make a WordPress site responsive
WordPress has become the most widely used content management system (CMS) in the world. According to W3Techs it now powers more than 62% of the CMS market and 42% of all websites.
If you think you might be running a WordPress website that isn’t mobile responsive, not to worry — there is a solution.
WordPress is based on themes, which are comprised of files and database updates that can be installed quite easily. A new theme can provide a fresh design and solve any responsiveness issues.
Most themes include an interface that allows a website administrator to easily control the look and layout of the website without being a programmer. However, having an understanding of HTML, PHP and most importantly CSS will certainly provide an advantage in modifying a WordPress theme beyond the basics of its theme options.
Editor’s note: Want the fun of WordPress without the upkeep? Try GoDaddy’s Managed WordPress. or Managed WordPress Ecommerce. You create, we take care of the installation, core software updates and security patches.
1. Choose a responsive theme
There are many responsive WordPress themes available online — some can be downloaded for free; others are paid/premium themes. All pass the mobile first index test.
WordPress themes can be installed and configured in as little as one hour’s time.
However, if you’re a beginner, it might take longer to understand the theme’s interface and configuration options.
Premium themes are usually more sophisticated and flexible and come with reliable support. Websites such as ThemeForest provide hundreds of responsive themes that can be purchased very reasonably.
Security improves with a paid theme, as these are regularly updated to close security gaps.
While it can be tempting to purchase a theme based on the stock photos included in the default design, I recommend you choose a top-selling theme such as Avada, X The Theme or The7. These are three of the most popular themes; all come loaded with features that enable anyone to create a mobile friendly website.
Premium bonus: Page builders such as Visual Composer and Beaver Builder are often times included with premium themes. These builders provide an easy drag-and-drop interface to create a responsive layout, complete with other elements such as text, images, widgets, shortcodes and more.
Related: 10 benefits of a mobile website
2. Install your WordPress theme
Installing a new theme can sometimes break the current design and layout, so I recommend you replicate your site to a subdirectory to make the upgrade first. You can then publish live when the new theme is configured.
To install a new theme follow the instructions below:
- Download and unzip the theme onto your local hard drive.
- While you can upload the theme through the WordPress dashboard, I recommend you install premium themes using FTP software such as FileZilla in the /wp-content/themes/ directory. By using FTP, you can avoid any timeout issues you might otherwise encounter when uploading large themes through the browser.
- Activate the theme in the WordPress dashboard through the Appearance > Themes menu option.
- Configure your theme through the theme options in your WordPress dashboard.
- Don’t forget to check every page of the website to make sure they all display properly.
Editor's note: Need a logo to go with your WordPresss theme? Try GoDaddy's Logo Maker for free and create one in minutes using hundreds of design templates and fonts to match your style.
3. No go? Call a WordPress developer
WordPress themes have certainly evolved over the years. However in many cases, the design could require a seasoned web developer to make the changes you want made to it.
Websites such as Upwork or Fiverr might provide knowledgeable and inexpensive freelancers who can help customize your theme. However some might not follow WordPress coding standards, which could result in your website breaking while updating your theme.
If you have the budget, you’ll likely get better service by hiring a reputable WordPress developer who can assist in customizing themes, following coding standards and providing additional feedback.
Don’t get left behind
According to NetMarketShare, which provides information on internet use, mobile and tablet web use has surpassed desktop.
Photo: NordWood Themes on Unsplash
Having a responsive website can also improve other metrics such as:
- Pages viewed per visit
- Time on site
- Conversions
- Overall usability
Since users are likely to leave a website that isn't responsive, mobile friendliness can reduce the overall "bounce rate" (the percentage of viewers who leave a website after viewing only one page). Bounce rate might affect a website's ranking in search engines such as Google.
Why is search ranking important? Because this is how users find your website.
In 2015 Google made it clear that having a mobile friendly website would be used as a ranking factor in their search results. This is commonly referred to as the mobile first index.
How to check if your website is responsive
Photo: Jay Wennington on Unsplash
If you’re not sure if your website is mobile friendly, there are several methods for testing a website. Below are three simple ways to check if your website works on different device sizes and screen resolutions:
Using your browser’s inspector
If you’re using Google Chrome, right-click on the web page and choose Inspect from the menu. Then click on the second icon on the top for the Toggle Device Toolbar.
If you are using Firefox, use CTRL+SHIFT+M or right-click on the page and select Inspect Element. Then choose the icon on the Responsive Design Mode. In both browsers you’ll be able to toggle through different devices and screen sizes.
Install a browser extension
Different browsers will have extensions available. If you’re using Google Chrome, you might consider using the Mobile/Responsive Web Design Tester, which can be downloaded from the Google Chrome store for free. Once installed, you will be able to test for responsiveness by clicking on the responsive icon in the toolbar.
Responsive website testers
There are several websites available — including Google’s Mobile-Friendly Test Tool — that allow you to test your website for responsiveness by entering the domain or URL of a web page. You’ll likely find the first two to be more convenient options.
Get a mobile friendly website
Having a responsive website can increase your online impact, since it is considered a ranking factor by Google. Not to mention the fact that it improves how visitors interact with your website once they get there.
There are many responsive WordPress themes available online that satisfy the requirements of the mobile first index; however some work could be required to customize the new theme.
If you don’t have a basic understanding of HTML, CSS or PHP, I recommend you hire a professional WordPress developer to assist in customizing the look and layout and overcome any limitations you might come across.
