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.