Getting Your Website To Work On Mobile

We’re getting closer to an era where having a website compatible with mobile will play an important role in your success. That being said what does it take to make your website compatible for a mobile?

The answer: not much.

Mobile phone browsers come in different shapes, sizes and capabilities. You should be ready to accomodate the fact that all mobile phones might not support stylesheets, images, tables, columns and floats. And you can almost forget about using Javascript (for example, dropdown menus) and Adobe Flash. Unlike monitors, resolutions can all be different. That means items with set widths such as images or css items might end up causing scrollbars or other usability nightmares.

The best way to tackle all these problems? A stylesheet dedicated uniquely to mobile media, of course.

Setting up a mobile stylesheet

It’s simple really, just as we did previously to set up a print stylesheet, all it takes is a separate stylesheet file (or files) with an HTML markup like so:

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

Simple!

What are some things you can do with your new stylesheet?

• Delete Everything - Yup, you heard me correctly, delete every single element from your CSS file, and have a look at your page. This should be your starting point.
• Keep It Simple - As soon as pages start getting complicated, who knows what can happen with the hundreds of mobile phones out there.
• Hide Useless Elements - Huge banners, huge images, irrelevant information (links to PDFs?). Mobile users will typically have teeny-tiny screens to fit loads of content in, hide the useless stuff. In CSS, you can use the syntax: #myHugeHeader {display:none;}
• Make Sure It Works - Disable Javascript in your browser (you’ll have to poke around the options) and see if your website and menu items still generally work.
• Make Flash Alternates - Use SWFObject to display alternates in the event that Flash and Javascript are not supported.

That’s all for now. Good luck.

Related Posts

• 2008 New Year’s Resolutions for the Blog
• Fixed vs Fluid Website Layouts
• Profitable Websites Are Hard Work…