In case you haven’t noticed, smart phones are everywhere.
With the trend of smartphone usage and web browsing growing, mobile phone internet usage has basically overtaken desktop usage. With the world of technology and website browsing changing so rapidly, people are still designing their websites to work on desktop computers and ignoring mobile users.
That sucks because it’s not hard to create a responsive design – especially with a solid WordPress Theme that has all of the customization options.
This is a big mistake!
If predictions are correct that means that every website designed exclusively for desktop computer usage will be catering to a minority of website users and ignoring the majority – a really terrible way of spreading awareness and connecting with the reader of the website.
Let’s look at the now…
Years ago, 48% of mobile users believe that a website not suitable for mobile browsing indicates that the business really doesn’t care, 67% of users are more likely to purchase from a mobile friendly website and 74% said they would most likely return to that site. (Source: Margin Media) That number has only increased.
There is a solution of course, design for Mobile / Smart Phones!
It’s not hard to figure out that you need to design for mobile phones, but what’s the difference?
Primarily you’ve got a smaller screen, with a lower resolution that is no where near enough to display most desktop based designs. The problem is that desktop users are and still will be a decent percentage of internet users – so you can’t ignore them either!
So in order to cater for both major groups you need a website which can be displayed on either type of device. There are many different Content Management Systems and website types out there, but I’m going to focus on one major player – WordPress.
WordPress is one of the most popular forms of CMS on the web today, with millions using it to run their websites because of it’s flexibility and stability (not to mention user friendly operation). Once installed on your website, WordPress is relatively easy to customize and use – but how do we make it friendly to both desktop and mobile?
Here’s a few solutions to that problem!
Create a Separate Mobile Site
Depending on how much information is on your site, you can create an alternative that is designed primarily for Mobile.
This is easy in WordPress since you can simply set up a sub domain (if your site is myblog.com, it could be m.myblog.com), and install the plugin Mobile Redirect. This plugin detects when a mobile device is being used and sends the user to another website address specified by you.
The main limitation behind this approach is that if someone lands on a page deep within your website, they’ll be redirected to the homepage of your mobile site. So while it is an option more suitable for smaller, easier to navigate websites, it’s not to the best solution out there. It is simple and convenient, however.
Choose a Theme Switching Plugin
There’s multiple methods of achieving this.
There’s the WordPress Mobile Pack that switches to a simple (very plain looking) theme that works quite well. But it is not the best if you want to keep a certain look about your site.
There is also the Mobile theme switcher by Jeremy Arntz. This allows you to pick certain themes for WordPress to switch to for certain mobile browsers, allowing you to have more control over how you site is displayed on each type of device.
The main problem with this method is that you have to design multiple themes for your WordPress website. The advantage is that you have more control and can get each theme (depending on the theme) looking exactly how you want it.
Go Responsive!
This is, in my opinion, the best route to take for most people.
Code it down told us in 2014 that 88.5% of the top 78 Alexa ranked websites are responsive – that’s a big chunk of the worlds best and that was years ago!
Responsive design is about designing one layout for your website that adapts to the size of your screen and rearranges itself to fit in any given space.
This approach will allow you to keep all of your visitors on one site, with one template and have all of your content fit regardless of browser, technology or screen resolution.
If you’re unsure what a responsive layout looks like, you’re currently looking at one right now! Simply resize your browser and you’ll notice things shrinking, moving or rearranging to fit. By using the right CSS values and coding, you can invest a lot of time creating a responsive layout. ..
…or you could find a simpler way like I did for this website.
Going Responsive the Easy Way.
This is not ‘the‘ way to get a responsive website – just a quick look at how I did it.
I went for a responsive WordPress theme that I could customize called Divi Theme. Once I installed it, the default layout was already responsive, I simply used the control panel settings to customize the website to how I wanted it. It’s extremely easy to customize – I did it all in one afternoon!
So one way to go is to use a responsive theme for your website. A customizable choice like Divi make this easy to get exactly what you’re after.
I have a video walk through on using Divi here
If you’re not looking to customize your theme but choose a pre-existing design, Elegant Themes have a large range of professional themes that are responsive.
Another choice is to hire a professional designer or developer to design (or convert your design) to a responsive layout, or learn how to do it yourself! (Check out this guide at Tuts plus if you want to learn more).
The choice is yours!
As you can see there’s more than one way make your website mobile compatible. If you’re looking for a cheap solution doesn’t need to be bullet proof the first two may work for you, but ultimately Responsive Design is what’s going to take over in my opinion.
But weigh up the cost and time required for each option and you’ll quickly know which way to go!
Related Posts for WordPress Design and Themes
