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.

Create Your Own Mobile Friendly Website Using WordPress

Here is a screenshot of a website as viewed on a desktop. Photo via Onswipe.

Create Your Own Mobile Friendly Website Using WordPress

Here is the same website as viewed on an iPad using Onswipe. Photo via Onswipe.

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.

Create Your Own Mobile Friendly Website Using WordPress

An example of a website with WPTouch installed. Photo via WPTouch.

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.

29 Responses

  1. Dhruv Bhagat May 23, 2013 / 1:00 am

    WP Touch Plugin always do wonders for everyone 🙂

    I am using it on one of my sites..

    Great post for beginners who are not aware of WP Touch Plugin…

    🙂

  2. yogesh pant May 23, 2013 / 2:54 am

    as the craze for having android and other smartphones is rising at a very high rate, it is a very good idea to have a mobile site owned by you. It can earn you a few bucks for sharing some valuable information to the readers. Thanks for giving these great ideas to make the mobile website.

  3. Rudd May 23, 2013 / 2:59 pm

    Is there any testing tool to test for mobile view of our site?
    Well, not all person has every device to try them on.

    • James McAllister May 24, 2013 / 12:06 am

      There are lots of tools available such as the TestiPhone website tool. Additionally, if you own a Mac computer with iOS Simulator installed (comes with Xcode and the iOS SDK) you can use the iPhone simulator to check your website as well.

  4. James McAllister May 24, 2013 / 12:01 am

    I’m a huge fan of WP Touch simply because it works for so many different themes, and is an easy solution to making your website mobile friendly. This isn’t really an issue for me anymore ever since I started using the Genesis theme, but it’s still great for people who use a theme without a mobile friendly version already installed.

  5. Riya Mathur May 24, 2013 / 1:54 am

    Responsive themes are best way to go if you don’t have to worry, I use Newswire on one of my blog for testing and It worked like charm on my Galaxy note and my friends Iphone. if you want to be worry free go for Responsive themes and if you are having issues you have support team for you to fix.

  6. JC May 26, 2013 / 1:36 am

    I use the WPTouch plugin and absolutely love it since I can basically offer it free-of-charge.

  7. Conie May 29, 2013 / 3:01 am

    WPTouch plugin is the best and easy to work with but anyone knows the best plugin to replace the meta login, I’m not a fan of the original wordpress one

  8. Kay May 30, 2013 / 5:01 am

    Thanks for this post, Dean. My site used to load horribly on phones. I just installed the WP Touch plugin and it works beautifully. I know that in the long run I’ll need to invest in an upgraded theme, but for now this fits the bill.

  9. Steve C May 30, 2013 / 2:30 pm

    Thanks for the tips especially for the one
    about onswipe.

  10. Cesar O Perez-Beato May 30, 2013 / 8:53 pm

    Great info on this Blog. I am new to blogging, the tips here are priceless. Thanks, I am telling my collegues about this site. Regards.

  11. Family First May 31, 2013 / 2:16 pm

    WP Touch Plugin is a plugin for WordPress that renders a mobile friendly version of WordPress website or blog.

    i think every blogger should install this plugin.

    btw nice tips!

  12. dickson June 1, 2013 / 3:08 pm

    Thank you very much for the information. I am glad to know that we can blogging through mobile phone or tablet.

  13. Victoria June 3, 2013 / 8:24 am

    Thank you for the plugins – wp touch plugin is exactly what I was looking for – for many WordPress sites, especially blogs its too long to make a mobile version – and this is a great decision to make the site not just available, but functional on smartphone.

  14. dinaviriya June 8, 2013 / 7:53 pm

    Thanks for the recomendation of the wordpress mobile pluins. It is useful for those blogs that most visitor are come from mobile gadget. I will try it.

  15. JC June 8, 2013 / 11:19 pm

    Thanks Melanie. I’ve been using MobilePress for a while but OnSwipe looks like it could deliver something a lot more intuitive and appealing.

  16. Filippos June 9, 2013 / 5:24 am

    Thank you for letting us know how can your site be combatible with mobile themes without having responsive themes!

  17. Marco June 9, 2013 / 6:22 am

    I realy like the WP Touch Plugin. Im using the Mantra theme right now and it works on my mobible but the WP Touch Plugin works beter. But how does it looks on a andriod tablet because allot of sites make goes the the mobile version and you dont want that on a tablet!

  18. John R. June 19, 2013 / 5:51 am

    I never thought that, Building a mobile friendly site is so easy. I am a new blogger and looking for ways to develop my blog for mobile users. Thanks For your tips.

  19. Corey Frankosky June 20, 2013 / 8:13 pm

    I was actually really surprised to see how well the WP Touch Plugin worked. I installed that on my website and have been using it ever since but I appreciate the first service you wrote about. I had never actually heard about OnSwipe but it might be something I use in the future!

    Thanks for the article.

  20. Sharon June 21, 2013 / 6:01 pm

    The video says “Video does not exist”

  21. Osei Fortune June 22, 2013 / 10:36 pm

    You forgot to mention the mobile theme by jetpack 🙂

  22. Len June 24, 2013 / 1:40 pm

    Thanks for the tips – I did not know about this. There seems to be a plugin for everyone on WP these days.

  23. Ciprian Borodescu June 25, 2013 / 4:08 am

    Another great tool for your blog is offered by Appticles.com (currently in beta). It basically takes your content (through RSS/ATOM feeds) and it packages into beautiful mobile & tablet web applications. Supported on iOS(iPhone,iPad) and Android(smartphones, tablets). Windows Phone 8/RT, BB10 and FirefoxOS soon to come.

    Everything is based on HTML5 and it looks amazing, unlike any mobile-friendly site out there. It goes beyond that into providing a native-app like look & feel. Have a look here from your iPhone/iPad: http://app.journalism.co.uk

    Oh, and it is completely FREE.

  24. Robin July 4, 2013 / 4:43 am

    i am thinking to get wptouch pro, but need some honest reviews from users. whether its worth to go for ? if you have any idea please do reply.

    Robin.

  25. chris turner July 19, 2013 / 8:41 pm

    well written article! Thanks again! I used NowMobileME to create my site…check them out http://www.nowmobile.me

  26. Abhijith V M August 8, 2013 / 8:19 am

    I use WPTouch on my blog. I was using a responsive theme but I find using this plugin more convenient . Helps readers I think.

  27. Lalitha September 19, 2013 / 12:23 pm

    I made it a project this week to make my blog responsive and mobile-friendly. This weekend I’m going to take some of these tips for my media queries to make something that works well. Great article.

Leave a Reply

Your email address will not be published. Required fields are marked *