These days, websites definitely need to be responsive and mobile-friendly, no matter what they may be about or what they contain. With the sheer number of mobile users out there these days, ignoring them would be hamstringing your website quite a bit, especially if a big chunk of your target audience happens are frequent mobile users.
WordPress is known to be a very robust content management system (CMS) that has a balance between functionality and ease-of-use. Perhaps it’s no surprise then that WordPress is widely used for mobile-friendly websites all over the Internet, and you too can harness its power.
Best Way to Make Mobile-friendly WordPress Sites
Now that pinching to zoom in and out to browse a website on a smartphone is no longer the preferred method of consuming online content, you need to learn how WordPress can turn a website into a mobile-friendly one. Remember that it’s a website, not an app, so it still has to look and function as one. That includes going to the best practices in web design, the use of SEO to make your content more visible, and so on.
There is the difference between a mobile site and a responsive site. The former is exclusively for mobile use while the latter adapts with a change of screen size and/or resolution. WordPress itself is responsive, with its backend admin area having a responsive design that can be viewed optimally on any device, desktop or mobile.
You may be able to make a website more or less responsive to the use of media queries—special CSS code for changing properties when the website is under certain conditions, like being viewed at a certain screen resolution. You can make select elements appear or disappear, change the sizes of various things, and so on through this method.
Do note that there are some disadvantages to using WordPress for your mobile site, especially since it may not be that conducive for complex real-time apps that can’t be pulled off by simply being contained in a conventional website. You may need some HTML5 or Javascript chops for that which may require more than just WordPress to pull off, although it may still be possible to use them within WordPress just to keep things organized.
As long as you know what WordPress is capable of and what it can’t do as well, then it shouldn’t be too hard for you to get a mobile site out of it that suits your needs.
Creating an eCommerce Site with WordPress
Many businesses could benefit from having an online storefront, especially those that take orders for selling products. Making it even more convenient for customers to buy from you by having an online store can definitely boost your business a great deal. You can create an eCommerce site through WordPress, making the management of items and the shop itself easier.
The WP eCommerce plugin is a great place to start. Go to the ‘Add New Plugin’ menu and search for it, then install and activate it. Once it’s activated, you can then set it up by specifying your region and the preferred currency, as well as linking the plugin to your PayPal account (preferably a merchant account) in the Payments menu.
You can then change the look of your new online store through the Presentation menu, including the labels of the different buttons and menus. Once you get it just to your liking, you can then start adding your products to your online store. You should find a Products menu on your WordPress dashboard, wherein you can add a new one. You then input the name, price, description, and an image of the product.
That’s pretty much it for creating a simple but effective online store on your WordPress site. You may want to use a different eCommerce plugin, but the basics are pretty much the same.
5 Great WordPress Plugins to Make Your Site Mobile-friendly
1. JetPack
The single most powerful plugin there is in WordPress. It’s a suite of plugins that can take your website into overdrive, giving it functionality, unlike any other plugin, can ever do. One of those functionalities is being able to set up mobile themes for your website to make it mobile-friendly without you having to do much else.
2. WPtouch
Another widely-used WordPress plugin that includes the WPtouch theme, making your website responsive and also faster through an Infinity Cache and sharper with a Retina interface. It also has a pro version if you want even more features.
3. WP Mobile Detector
If you want to make sure that your website knows whether the user is on desktop or mobile, then this plugin should give you a foolproof way of distinguishing between the two platforms. This plugin has an advanced analytics system and an internal catalog of more than 5000 mobile devices to make sure that it knows what the website is being viewed on.
4. WordPress Mobile Pack
The name pretty much says everything it’s meant to do for your website. It’s a powerful plugin suite that lets you customize your website to fit any platform, operating system, and device. If you want to make your WordPress site as responsive as it can really be, then this plugin should work for you.
Download WordPress Mobile Pack
5. WP Mobile Edition
If you want your website to be purely mobile, then this plugin should help you out. This plugin has a mobile switcher for platform detection while also allowing users to switch between desktop and mobile versions of the site. It’s adaptable, smart, and flexible with wide customizability and SEO-ready features for your needs.
3 Great Tips For Optimizing Your Mobile Site with WordPress
We now know that mobile platforms constitute a significant percentage of web users in the world today, so it’s important to have a mobile-ready site that works well and looks great. With that in mind, you’ll have to optimize your mobile site with WordPress in order to make it work seamlessly.
1. Choose the Right Approach
You’ll have to make sure about how you’re going to tackle the problem of making your website mobile-friendly. There are three basic ways of doing this. The one that is quite popular these days is Responsive Design, which basically maintains most of your web design’s look and feel, but has your CSS provide different rules depending on the current width of the browser.
Then there’s RESS, or Adaptive/Dynamic Serving, which means that while the URL you’ve entered remains pretty much the same, a different set of HTML and CSS files are retrieved depending on what type of device you’re viewing the website in. It’s a bit more advanced, but it gives you a bit more flexibility with your web design.
Then there’s having a separate mobile site, which is common with a lot of major websites like Facebook, wherein it detects what device you’re browsing the site in and retrieves the mobile version if it’s appropriate. The URL would usually be something like (m.facebook.com) or something similar.
Each of these methods has different advantages and disadvantages. For most people, Responsive is the best way to go, but there may be some people out there who may require more of an adaptive approach or even a wholly separate mobile site for their needs.
2. Pick Your Mobile Web Design Mindset
Of course, this is pretty much the foundation of your mobile site. Designing for mobile is definitely different from that for desktop as the input method is different. What can be done with the mouse may not be done as well with a touch screen and vice versa.
A ‘Mobile First’ approach would be ideal in this case as you can then design a desktop site based on the mobile site, but not everyone can do this. Do note that a ‘Mobile Second’ approach may be a bit harder, but is inevitable for a lot of people. If you’re going with the latter, then you design a desktop site, then either adapt that design to fit mobile platforms or create a wholly separate mobile site altogether.
Going ‘Mobile First’ means that you take on a minimalistic approach that makes use of well-sized buttons and fonts to make everything clear and easily interactive while staying within size constraints. You then adapt that approach to your desktop site, making it relatively the same while making use of the bigger screen size.
3. (Re)Organize Content
In making a mobile site, you can’t have as much freedom with layouts since you only have so much space for much of your design elements. Therefore, compromises and rearrangement of the content are necessary since you don’t have as many liberties with the real estate.
For smartphones, in particular, you’d want images to be viewed at full width to make them more visible, then have text captions on the bottom if necessary. You may also want to make the font for body text a bit bigger to make it more readable, as well as use a font face that’s legible on mobile screens.
If you have menus, either reduce them down to a few buttons that can be fitted in one row well enough without compromising interactivity or put them all in a drop-down hamburger menu.
You can get more tips on optimizing your website for mobile platforms through Google’s official guidelines.
Making a mobile site that suits your content isn’t that hard, but it does take some doing. As long as you know what you can do with your content whether it’s a blog, an eCommerce site, or so on, then you should be able to come up with a way to make it all optimal for mobile use.
This article is written by Johann Carpio. He is a marketing consultant. He does inbound marketing for various websites, helping them increase their audience and readership through content and social media. He also writes about the current trends and practices of the industry.
Web Developer & SEO Specialist with 15+ years of experience in Open Source Web Development specialized in Joomla & WordPress development. He is also the moderator of this blog "RS Web Solutions".