how-to-make-moble-website

http://www.thinkvitamin.com/features/css/make-your-site-mobile-friendly

10/31/2007 7:01 AM
Virginia DeBolt
my blog, Web Teacher, f

how to write standards-based HTML and XHTML using semantic markup and about how to separate content from presentation with CSS. If you stick to best practices in those two areas,
Using CSS to separate content from presentation means your content will be accessible, even on the least capable mobile device.
good alternative text is an essential for any non-text element in your pages. Make sure that form fields are properly labeled.

testing results
1. with an actual device.

2. free or
3. fee-based testing options can equal the

2 Free

Opera browser,
1. helpful online mobile simulator at operamini.com/demo.
Opera provides a free browser that can be downloaded and installed on handheld devices. It’s called Opera Mini.
2. Firefox’s Web Developer extension. Use this tool to disable images, JavaScript, and CSS and you’ll have a good idea about whether your content is going to make sense and be navigable in one of older and less capable mobile phones.
An important tool in the Firefox Web Developer Toolbar is CSS >
View CSS by Media Type > Handheld. I
3. (For example, Sony Ericsson’s Developer World,
4. Nokia has a developer forum with an XHTML section,

How to write
I’ll add a stylesheet for handheld media to the testing mix. It contains

only two rules —
1. to reset the sizes of the content div and sidebar div and
2. to remove the float.

Here’s the entire stylesheet:

#content {
float: none;
width: 95%;
}
#sidebar {
width: 90%;
margin-left: 5%;
}
The link to this stylesheet was added to the document head after the all media stylesheet, so as to be last in the cascade. I’ll use a link element for this. For those mobiles that do understand CSS, using link is more reliable than using @import for bringing in styles, although some of the more capable devices understand @import. Here’s the link element:

smaller than sign here
link href="mobile.css" rel="stylesheet" type="text/css" media="handheld"
greater than sign at closing
Media types are mutually exclusive. A user agent can only support one media type when rendering a document. If I want to retain any of my existing styles in a handheld display, I need to take one more step, and that is to list all the media types I want my existing styles to apply to in a comma separated list. I change the link element for my existing stylesheet, which is called 2col.css to include this media attribute: media="handheld,all". The two link elements are now:

smaller than sign here
link href="2col.css" rel="stylesheet" type="text/css" media="handheld,all"
greater than sign here

smaller than sign here
link href="mobile.css" rel="stylesheet" type="text/css" media="handheld"
greater than sign here

The styles and the color scheme I have in 2col.css should also apply to handheld renderings, but the two column layout will be removed by the mobile.css rules.
Testing with the Firefox Web Developer Toolbar menu CSS > View CSS by Media Type > Handheld should now show handheld media results, and it does.

Since many wireless mobile devices load very slowly, you want to really simplify things for handhelds. In that case, simply leave the handheld media attribute out of your main stylesheet. I’ll give you more tips for simplifying things for handheld media shortly.