Practical Ecommerce

Preparing Your Website For Mobile Devices

With the growing number of consumers using mobile devices, such as cell phones and PDAs, to access the Internet, it’s important to make sure your website can be accessed by potential customers using these devices. To get started, ask yourself a few questions about your website: Have you ever seen your website on a mobile device? Are you confident your customers can find the information they are looking for and make a purchase from your website on their handheld device? If your answer to all of these questions was not a resounding “Yes!,” then you need to read on.

Check with W3C

The first thing to do as a developer is to check the World Wide Web Consortium (W3C) specifications for CSS and mobile devices, which can be found at: W3.org/TR/css-mobile/. If you are still awake after the first paragraph, you can move into some more useful analysis. Is your site using tables? Does your site use a lot of images or multi-media files? Does your site take a long time to download on a web browser. While the Internet works essentially the same on mobile devices as it does on computers, you want to be sure the information on your website is easy to read and navigate.

A good resource to convert your current site into a mobile device friendly format is Skweezer.com. Simply enter your website’s URL, and it will display your website in a mobile-friendly version by removing large images, CSS styles and page elements that will not display properly. I like to look at this as a template, or starting point, for making a mobile CSS profile for the site. To provide an alternative CSS stylesheet for users with mobile devices, insert the following code in the head of an HTML document:

<link href=”/css/global.css” rel=”stylesheet” type=”text/css” media=”handheld” />

A couple of things to think about when assigning styles for mobile devices is to keep it very simple. Mobile devices are still a bit slower, so you want to avoid using lots of images and graphics. In addition, there are varying screen sizes and resolutions with handheld devices, so it’s a good idea to scale page elements by screen size, rather than setting fixed pixel widths for page elements.

Related Keywords

Brian Getting
Brian Getting
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 9 )

  1. Legacy User April 1, 2007 Reply

    The code you suggested inserting did not appear in this article. Is it possible for you to post it? If not, could you email it to me at kiwihut@gmail.com? I'm trying to learn about mobile web design as I have purchased several .mobi names last fall, and I want to get these names up and running. Thanks.

    – *Chris*

  2. Legacy User April 10, 2007 Reply

    You know it never crossed my mind about having a Web site for mobile devices, until I read this. I am getting my Ass. Degree in Web Design and Computer Programming, this here is just another eye opener, I feel like an idiot because I didn't think of it. So, thank you.

    – *Melissa*

  3. Legacy User April 26, 2007 Reply

    I registered a dot Mobi for my webpage. It's a new gTld with excellent resources on how to build mobile compliant pages. For more informations on dot Mobi, you can go to http://pc.mtld.mobi/

    – *Lutfi*

  4. Legacy User November 19, 2007 Reply

    I have been wanting to expand my company and branch into mobile site design. THANK YOU for this research.

    – *SitesThatWork4U*

  5. Legacy User December 18, 2007 Reply

    Thanks for the information you have provided. It helped me get started on creating a mobile website.

    – *JavaGalaxy.com*

  6. Legacy User January 9, 2008 Reply

    Nice article. I have plenty of iphone related domains and want to develop some domains so they can be mobile accessible. Thx!
    iphonedowloads.me.uk

    – *Scorzaze*

  7. Legacy User January 24, 2008 Reply

    Is it necessary to have complete, separate website for mobile devices? Can a browser distinguish whether it is mobile or PC-based? If so, can one not just add additional code that will make the website load differently for mobile devices?

    Is it a lot of work 'converting' a website to mobile?

    Thanks.

    J.

    – *Jesse*

  8. Legacy User April 2, 2008 Reply

    First, page slicing results is a completely out of date way of creating a web site. CSS takes some time to learn—anything worth learning is—but the results are exactly what is called for here—content that is repurposable across media. Ultimately, as web designers and developers, one of our jobs is to make the web site more functional for the client and end user—not necessarily what's easier for us. It's better for the client if they have to maintain one site rather than multiple sites, because one was designed as slices.

    I think most designers are coding in CSS, and most schools are teaching it as THE way to create a great site. Anyone still slicing is well…

    – *Bill Schick*

  9. MobileAppAmerica August 11, 2010 Reply

    Great article! Check out WebtoSmartphone.com. It converts on the fly and it works pretty good on blogs. We launched the service a week ago and we aim to be compatible with as many website as possible. Thank you!

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas