Make your Website Mobile Ready (1/3)

,

3 Ways to make your website mobile-ready (Part 1)

Last year, there were 1.5 billion local searches made from mobile devices.

Information Week reported that there are over 61.5 million smartphones in use today.

What does that mean for your business? Potentially it means lots more customers, but most local businesses have not taken advantage of this huge opportunity for exposure to consumers on their geographic area.

Launching a mobile-marketing strategy is a fairly complex process so get started off on the right foot by going through these three points.

Mobile-compatible versus Mobile-friendly

You probably don’t think there’s a difference. There is. I promise.

The wide range of mobile operating systems, mobile browsers, and smartphone manufacturers has created a compatibility nightmare that web designers haven’t known since IE6. Following the tips below will help ensure that your smartphone visitors get a design that delivers a consistent, positive experience.

Mobile Compatibility

Knotty Alder CabinetsMobile compatibility basically means that when somebody visits your website on a smartphone, they see basically the same thing that they see when they visit it from their computer.

Tips for making your website mobile compatible:

  • Don’t use Flash! In addition to being heavy for loading times, many smartphone devices do not support Flash which means your visitors see nothing! For animation and interactivity, use a JavaScript library like jQuery combined with HTML5 to achieve virtually the same effects as Flash.
  • Validate your code at W3C
  • Use tools like ySlow and PageSpeed to see how you can speed up your load times (this will help for desktop browsing too)
  • Compress your images using Smush.it. Images slow down any site, but are especially heavy for smartphone users. Smush.it can cut your loading time in half in some cases, and usually by at least 30%.

Considerations for making your website mobile compatible:

  • Mobile compatible websites still don’t offer an ideal user experience. Lots of zooming in and out for your mobile visitors.
  • Mobile visitors generally aren’t interested in your entire website while on a mobile device so they may back out of your website because information is harder to find on a smartphone.

Mobile Friendly

Salt Lake City Bankruptcy AttorneyIn contrast, a mobile-friendly design is a completely separate design that only appears for people who visit your website from a mobile phone. A mobile-friendly design should make it easy for smartphone users to access and use information about your company and services.

Tips for making your website mobile friendly:

  • Use a tool that identifies when a smartphone or Mobile User Agent accesses your website
  • Validate your code using W3C’s mobile code validation
    • Warning! This tool is brutal. Be prepared to score 0% your first time through :)
  • Remove images from your mobile design as much as possible
  • Test your design using all of your friends’ smartphones

Considerations for making your website mobile friendly:

  • This isn’t generally very cheap unless you’re using WP Touch PRO in which case it is dirt cheap. Yet another reason to develop on WordPress.

Mobile browser, device, and operating system combinations are virtually endless. So don’t expect your website to look exactly the same on every device or every browser. The important thing is that your smartphone visitors can still navigate your website in a way that allows them to find what they need and contact your business.

Example of a mobile-compatible website: Knotty Alder Cabinets

Example of a mobile-friendly website (visit in a mobile browser): Salt Lake City Bankruptcy Attorney

Comments


Mike

This is sweet. I am going to have to try this on my own site. This should be a must for all locally-focused businesses.

Reply
Chuck D.

Awesome info. This could be very handy for anyone trying to market on the Internet. This may be a dumb question but does an iPad behave as a desktop browser or a mobile device? Tablets could become important in the near future.

Reply
Mark Delorey

@Chuck D. – Every device identifies itself and its browser so whether or not your website treats the iPad and other tablet PCs as a mobile browser is up to you. Just find (or alter) a script that directs a request from an iPad device to whichever you think is most appropriate based on your website.

One trend I think we will see is that more companies will opt to develop iPad apps since it isn’t a traditional mobile device or PC. In fact, web design for tablet PCs could end up being it’s own branch of the industry.

Reply
Steve Cook

This is interesting stuff. I’m working to learn as much as I can about internet marketing right now, because I want to build a website in the near future, and I appreciate you bringing to my attention the importance of mobile devices.

I’ve already kind of gotten the idea that the lazier a website is to browse, the more likely people will take time to look through it, so to take this step to simplify viewing a site on a mobile device is brilliant. Thanks a lot.

Reply
Justin Grice

I used WP Touch on a church client’s website and for the most part it is working pretty well.

Reply