Building Mobile Friendly Websites: 3 Options

Intel Mobile Device

There is an undeniable growing trend of folks surfing the internet using mobile phones and devices such a iPads. According to new research by Cisco, there will be more internet connected mobile devices such as smartphones and  3G tablets than people in the world before the end of 2013! Here are the 3 options for building mobile friendly websites.

A site designed with one fixed width and layout for a larger desktop screen, will look odd on a mobile device with smaller screen. There is no “one size fits all” in the current online world.

So, how do you make sure your site is mobile ready? There are 3 main options for WordPress sites and I will give you my highest recommendation after outlining each one, with pros and cons for each.

1) Online Services

Just enter your web address and these services will convert your site into a mobile site. The best of these is bmobilized http://bmobilized.com/en/  PROs: this option is drop dead easy, and fast. CONs: the site is not on your server so you have to depend on a 3rd party service and you have to pay a monthly fee for it. There is a negative effect on SEO as incoming links to your mobile site will not benefit your main site. The options for control and placement of various site elements is limited.

2) Responsive Themes

Search themeforest and themetrust for “responsive” themes and you will see lots of these coming out. These actually adjust themselves automatically depending on the size of the screen, even knocking out the right column when going to smaller Phone screens. PROs: Advantages of this approach are simplicity and just having ONE site to manage. Whether large screen, mid or small, your site will adjust to fit and make intelligent choices depending on screen size. Simplest option for solid SEO as there is only ONE domain address. (separate sites are often at m.domain.com) CONs: this approach is a bit of a “shrinking head” style and are essentially downsizing the main site to fit into a smaller box. Sometimes the header image that looks great on larger screens, even on iPads, will be unreadable on phones, even though it does theoretically “fit”. Most usability experts agree, the 3rd option of separate mobile site is a better user experience.

3) Device Sensitive Mobile Themes

This option serves up a separate mobile site for users who visit via Mobile device. Mobile and Pad surfers are sent automatically to m.domain.com for example, where you have an entirely different stylesheet, or theme in the case of WordPress.

PROs: this option gives you the most control over the layout and user experience on mobile devices. A logo that would be too small to read if simply reduced the size of a larger screen layout, can be optimized especially for the mobile devices.

The example below shows a site that shrinks for the iPad, which works well, but shows a different layout entirely for the mobile device, which makes the logo clearly visible. If this entire site continued to shrink, it would be unreadable on the mobile devices.

mobilescreens

CONs: it can take a bit more work to get a separate site set up and when there are updates you have to update both sites. If set correctly, the incoming links to the mobile domain address can count for SEO value to the main site, but if not, SEO efforts may be complicated.  For SEO, responsive themes are simpler.

There’s a plug-in for that!

iphonekaizen
A page on Kaizen site as viewed by Mobile phone, using WPTouch

Fortunately for WordPress users, there is an easy and fully functional plug-in that automatically serves up a separate mobile optimized theme, allowing you to create mobile buttons, and fully customize the mobile look and feel. It’s called WPTouch and is available for free via the WordPress plug-in directory.  For $49, you can upgrade to the PRO version, which adds custom menu options, iPad support and many other goodies. Is a one time purchase and well worth it.

http://www.bravenewcode.com/product/wptouch-pro/

WPTouch also avoids the potential SEO pitfall of mobile sites by serving up a separate theme for mobile, but NOT on a separate domain like m.domain.com. Therefore the search bots won’t even see the WP version of your site, except for Google’s mobile bot, which will index it for Googles mobile search.

Bottom line:  Consider your users and your site objectives when making this choice. For example, a restaurant might want a separate site to take full advantage of the phone location manager since users may be looking for directions. If user experience is most important, the 3rd option or mobile theme wins. If simplicity and easy SEO is most important, then responsive theme wins. If you decide on the mobile theme option, definitely check out WPTouch, the most elegant solution available as a WordPress plug-in. For most small business WordPress sites, I recommend option 3 using WPTouch. Contact me to help custom build a mobile version of your site using WPTouch.

 

Enhanced by Zemanta