Having a responsive website has become a necessity for website owners that is hard to ignore.
With increasing number of people, using mobile devices for browsing the web, you might lose a lot of potential customers if you don’t have a mobile optimized website.
According to a recent survey conducted by SmartInsights, time spent on mobile screens seems to have glided past the tipping point:
The above statistics clearly indicate that you won’t be able to expand your business reach to a wider target audience base without a mobile-friendly site.
No matter whether you want to build a mobile version of your WordPress site from scratch, or need to overhaul your existing website design to make it more mobile-friendly, here are a few important considerations you must focus to increase your business growth:
#1. Analyze Your Mobile Traffic
First and foremost, you need to know about the number of mobile users that are visiting your website. Simply put, it is important to measure the traffic you’re receiving from mobile devices.
It is no secret that the use of mobile for browsing the Internet and performing online activities is rapidly increasing. But, what if the majority of your website traffic is comprised of desktop users? In that case, it doesn’t make much sense to waste a lot of your valuable time and effort in creating a mobile version of your site. Instead, you can choose a responsive theme that adjusts according to the device that is used for accessing the site.
Whether you want to create a separate mobile site or should simply opt for a responsive design depends on the amount of mobile traffic you’re getting. One great way to do so is to install the Google Analytics tool on your WordPress website. Though, this tool is free to use, however, you need to create a Google account in order to use the Google Analytics tool.
The Google Analytics tool help in tracking mobile traffic on the basis of 3 web properties:
- a non-responsive website or a mobile optimized site containing a single URL;
- a separate mobile site having different URL;
- and a mobile app.
After successfully installing the Analytics tool, all you need to do is to fill in basic information in your site to get started. Next, add the Google tracking code above your website closing tag.
Note: In case you’re using a standard WordPress theme, it is advised that you must create a child theme. And then, place the Google tracking code in your child theme’s ‘header.php’ file. But, if you are using an advanced WordPress theme, you will most likely get an option to add the tracking code in your theme settings area.
#2. Lightweight, Fast and Mobile-Friendly Theme
If you’re seeking a way to create a mobile-friendly WordPress site quickly, then you can install a suitable pre-built WordPress theme to achieve such a need. This is indeed the easiest way to come up with a WP website that is optimized for all mobile devices.
You can easily find a plethora of WordPress mobile-ready themes over the web – as free and paid themes – that help make your website design uniform, whether it is being accessed and viewed on a desktop computer or any mobile device. When selecting a mobile-friendly theme, make sure to pick a fast and lightweight theme, as it helps in improving page speed. But, with thousands of themes available online, finding the right one can be strenuous and time-consuming.
Thankfully, there are many reliable sources that offers WordPress (free and premium) themes that looks good on different screen sizes and resolutions, such as:
WordPress.org: This is the official WordPress website that contains a “Theme Directory” containing an ample number of free to use, mobile-friendly WP themes.
Envato Market: This is one stop destination that helps you find brilliant premium WordPress themes that are optimized for all devices.
#3. Use Tools To Test Your Site
So, once you have chosen a mobile-friendly WordPress theme or are already running a mobile theme, make sure to test whether your website works well on mobile and tablet devices. While you can test your site on different mobile devices to check if it is truly mobile-friendly or not, but it is won’t be practically feasible to test your site on all the devices available in the market.
Also, you can’t possibly purchase tons of Smartphones and tablets for testing mobile-friendliness of your website. You can overcome such an issue, by setting up a testing environment either on your desktop system (or MAC system), such as WampServer, MAMP, etc. Doing so, will help you test your site mobile-friendliness without using a host of mobile devices.
And, of course, you can make use of Google’s “Mobile Friendly Test Tool” to see if your site or theme is mobile friendly or not.
# Techniques To Make a Mobile-Friendly Site
If your responsive or mobile website fails to pass the mobile-friendly test, then you most likely consider throwing out your existing WordPress theme. But, it doesn’t make sense to get rid of a well-designed site. A better option is to make it more optimized for mobile devices with help of the below mentioned techniques:
- Use Media Queries
This is one of the most recommended ways suggested by experts to make a WordPress theme truly responsive. With every responsive WordPress theme, you’ll get a CSS file (i.e. a stylesheet) after installing that theme. The CSS file can be used for both desktop as well as a mobile version of your website. However, the default stylesheet will be different depending on the device’s screen. And so, you will have to adjust the stylesheet for standard screen sizes, such as 320px, 480px, 720px and 1280px to name a few.
Below is a line of code that uses media query to specify the maximum width of the device to “320px”:
@media screen and (max-width: 320px)
Note: In the above code, you can change the max-width to other screen sizes as well depending on your needs.
- Make Your Website Images Responsive
Even if you’re using a responsive theme, chances are that the images added in the theme might not be responsive. Thus, for making your WordPress website design truly responsive, you will have to make your website images responsive. You can do so, by assigning relative units as opposed to absolute pixel dimensions to your design. For this, you just need to set your image’s max-width to 100% as shown in the following line of code:
<img style=”max-width: 100%; height: auto;” src=”img-sample.jpg” alt=”this is a sample image” />
- Adjust Your Website Text
Apart from images, the text used within your site might not adjust to fit the screen size. This usually happens, when your website contains large-size text that is commonly viewed on devices with a small screen. To resolve such an issue, you need to adjust the size of your text according to the device’s screen size.