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
2. WPtouch
3. WP Mobile Detector
4. WordPress Mobile Pack
Download WordPress Mobile Pack
5. WP Mobile Edition
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
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
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
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.