Mobile Web Design

by John Eberhard

There are currently 1.08 billion smart phone users worldwide, with 91.4 million in the US. 92% use them for sending text messages, 84% for Internet browsing, 76% to send emails, and 59% for social media sites. (See more stats)

If you look at a regular HTML web site on a smart phone, the device will usually shrink down the whole page so it will fit on a smart phone. This will render most of the type on the page too small to be readable. It looks nice but you’d need a microscope to read it.

I have written articles earlier about "responsive" web design. This is a type of web design, where it will move items from your web site around on the screen, depending on the size of the device used, i.e. whether it is a desktop or laptop, or a pad device, or a smart phone.

The idea behind responsive web design is that it moves things down the page in a sort of cascading arrangement, so you don’t have to scroll left and right on your smart phone to see all the content.

But I have found that there are some problems with a responsive web design.

1.  Any large graphic content from your page will only be partially displayed, requiring scrolling left and right to see it all
2. Your sidebar if you have one will usually be pushed to the bottom of the site
3. If your header and logo are wider than 280 pixels, you won’t be able to see the whole thing on a smart phone without scrolling back and forth
4. It has a sort of random arrangement. It doesn’t really look like it was purposely designed for a smart phone. Because it isn’t. It is taking the design that was meant for a desktop and moving things around so you can see it on a smart phone.

Overall I have concluded that although responsive web design DOES work and does provide an acceptable smart phone presentation, that there is a better way, a way to get a web design presentation on the smart phone that looks like it was made just for the smart phone. Because it is made just for the smart phone.

Here’s how it works. You set up a sub-folder for your mobile site, with WordPress installed. Then you use a WordPress plugin called WPTouch.

We install code on the site that detects what type of device the viewer is using. When someone views your site on a smart phone, it will deliver up a version of the site that is specifically designed for viewing on a smart phone.

Using WPTouch you can design special pages that will display well on a smart phone. For example, let’s say your home page has a slide show, with images that are 1,000 pixels wide, like on my home page. You can then design a new alternate home page for viewing on smart phones, that either skips that slide show, or has an alternate version of the slide show that is smaller and can be seen on a smart phone without having to scroll left and right.

WPTouch allows you to upload a smaller version of your logo so it displays fully on a smart phone. You can also specify a different set of navigation buttons to be used for the smart phone version of the site. So you can skip certain pages of your site that won’t work well on a smart phone, or create alternate versions.

Three sites I have redone using WPTouch are:

View them on a desktop browser and they look one way. But view them with an iPhone or other smart phone, and a special version comes up especially for the smart phone.

I am feeling more and more that it is vital for many businesses today to have mobile friendly web sites. WPTouch is a great solution and we can use it to make your site look great on smart phones.