So, You Want a Mobile-Friendly Website?

Recently, a number of my clients have asked about making their WordPress websites mobile device friendly. Therefore,  I decided to embark on a quest to make a mobile version of my website in order to learn what was involved, and if it was simple enough for my clients to do by themselves on their sites. In this article, I am going to detail the challenges that mobile devices pose for website design, and my plan for a mobile version of my website.

The Challenges of Mobile Websites

My first step was identifying the differences between the desktop and mobile browsing experiences. I found two that I felt were worth concern. The first difference is the most obvious: mobile devices, particularly phones,  have much smaller screens. The iPhone sports a 3.5 inch diagonal display, for example.  Most desktop monitors around these days are at least seventeen inches. The mobile device makers have taken this into account, and have designed their mobile browsers to scale the site to fit the screen. To paraphrase Burt Reynolds from the film Best Little Whorehouse in Texas, "That is like trying to squeeze a ten pound bowling ball into a marble bag." You end up with text that is just too small to read and navigation links that are like Lay's potato chips ("You can't [hit] just one"). You find yourself having to constantly zoom in and scroll left-right-up-down just to read a simple blog post.

The second issue is one of capability. Mobile devices do not have all of the features we have come to expect on our desktop computers. Adobe® Flash® is a prime example. Almost none of the mobile phones support Flash®, yet it is used by many websites to play videos, audio, and to create interactive websites (think Farmville on Facebook). As a result, any site that uses Flash to display content will be, at best, only partially viewable on a mobile device.

My Mobile Website Solution

So, it seemed pretty clear that I needed two websites: one designed for desktop browsers and one for mobile browsers. But the thought of having to create two separate websites and manage two copies of my content seemed silly. Therefore, my plan was this: create two styles for my website (one desktop, one mobile), and use the same content base on both.

Fortunately, my site is built on WordPress. And WordPress is built to use themes, which control the visual presentation of the website content. By having WordPress determine what type of browser a website visitor was using, I could then apply the appropriate theme and make subtle changes to content when necessary.

So, there you have my plan for building a mobile-friendly version of this site. In my next article, Creating Your Mobile WordPress Website with WPTouch Pro, I will tell you exactly how I implemented this plan.