Preparing Your Website For Mobile Devices
Tips to convert your current site into a mobile-friendly format
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.
9 Comments
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
I have been wanting to expand my company and branch into mobile site design. THANK YOU for this research.
-- SitesThatWork4U
Legacy User says:
Thanks for the information you have provided. It helped me get started on creating a mobile website.
-- JavaGalaxy.com
Legacy User says:
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
Legacy User says:
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
Legacy User says:
With the Apple iPhone, it can read normal webpages, without conversion. For other phones that have smaler screens, I would agree that you need a different format. Why not redirect them to another site if handheld user is detected, or have a link at the top left?
Second, I've been working in CSS, and although it does work, its much tougher to code than to just create using older methods like page slicing. The article recommends scaling everything down, instead of using measures like pixels. I don't know if this would work, because all the content of a large page can't fit on the same screen of a small device. Would it scale down the text too?
I think it would be easier to have an almost text only version of your site, using either a link, or having a separate web address listed in the mobile search engines.
-- Diana Sproul
Legacy User says:
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
