Create a Mobile Website Using WordPress

Just a few short years ago, all you needed to reach the majority of web users was a single website that was compatible with all major web browsers on your desktop computer. The introduction of the mobile devices changed all this and now your website must be optimized for mobile content in order to maximize your reach. Based on a white paper by ComScore (2013 Mobile Future in Focus) people spend 37% of their total internet time on mobile devices.

Below are some ways you can design your site to be mobile friendly for both the iPhone and iPad.

Onswipe

One way of making your website more iPhone and iPad friendly is to use Onswipe. To use it, simply sign up for a free account on Onswipe and adjust the settings on how you want to view it on a mobile device.

Features of Onswipe include

• accelerometer aware content
• integrated comments
• customized homescreen icon
• built in social media sharing capabilities

Below is an example of a site using Onswipe. The top image is the website as seen on a desktop; the bottom image is the website as seen on a mobile device.

WP Touch Plugin

WPTouch, on the other hand, is a great WordPress plugin for those needing a simple solution for mobile users. Once you install the plugin it automatically renders a version of your site for mobile users. The best thing about WPTouch is that is doesn’t give you any additional coding tasks to achieve that mobile view that you are looking for.

Responsive Design Themes

Another option you have for your WordPress site is to use a responsive design template. A responsive design takes the content of your website and automatically adjusts it according to the screen that it is being displayed on. The great part about a responsive design is that it will optimize your site for most mobile devices without needing to setup different sites, customize your one site for multiple platforms, or install a plugin. To learn more about themes and a responsive design template, check out this video that gives you complete steps on how to create a mobile friendly WordPress site.

http://www.youtube.com/watch?v=KAPGp61XY6c

If you’re not sure where to find a responsive design theme, check out this article from Mashable. It features twenty of the hottest and most popular responsive design templates you can use for your website.

Using Different Stylesheets

If plugins or responsive design themes aren’t to your liking, you can create different CSS stylesheets for various devices. These stylesheets customize the content of your blog or website based on the settings you designate. For example, you can have individual styles for iPad users, iPhone users, etc.

A piece of advice, though: If you aren’t comfortable or familiar with the backend of your blog or website, we highly recommend working with your webmaster. It’s very easy to mess up the backend (coding) of your blog or website. It’s best to take this one to the experts before pushing through with using different stylesheets. However, you want to try to do this yourself, there are stylesheet plug-ins you can use to get the desired effect. One recommended plugin is Custom CSS Manager Plugin from WordPress. Another important tip: Be sure to back up all of your original files in case something goes wrong.

Testing Your Site

If you hope to have the best website experience possible, one of the final things that you need will need to do is become a user and test your site on the your designated mobile devices like an Android phone, Windows phone, iPhone, and the iPad. As you test your mobile site, keep these items in mind:

• How does the layout work when you load the screen?
• Are there any problems with menus, graphics, or video?
• Does your site present the most important information to your user? (This is especially important most if you’re testing a business site.)

Taking the time to test your site like this will help you fix any potential problems before they drive users away from your site. Soon enough, with a little bit of effort and creative skills, you may be just a few steps away to making your new or existing website in better shape for your mobile visitors.

This guest post is from Dean Chester. He is a freelance web developer/writer and a WordPress junkie by heart. He has just started a group with his fellow colleagues called Press The Word. When not in front of his computer to do some coding, he likes to spend his time with friends at beach parties and EDM concerts.