I stepped into Indonesia recently and it’s been 2 weeks. All I notice was people are on their mobile browsing, it is a hot media right now in Indonesia, their 3G rate is very low and reliable, I even get myself a SIM card to browse with my mobile phone. That remind me about creating mobile-compatible web. Checking into my Google analytics, I saw some Opera Mini browser. After I log into my web with my Opera Mini, I notice that it took about 50kb to load a full website, which is very heavy for mobile web.

When creating mobile web, there is only few things to consider…

1. Stylesheet media handling
2. Re-structure the CSS/Web layout
3. Trim down images loading

Anyway, I might miss something else, but do correct me if I’m wrong. After all, it’s my first time working on mobile web. Can’t say it’s a pure mobile web, but it’s a transformation from a screen web to mobile web, depending on how Opera Mini was config. I have a Nokia E71 with Opera Mini too, I have to set it to “Mobile View” in order to use the handheld view.

Stylesheet media handling

Normally a website should consider 3 stylesheet, one for screen, one for mobile and one for printing. For mobile, the media is “handheld”
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
Only browser that set to view in mobile only can view mobile version though, or else it will still shows full web.

Due to the cost of mobile browsing, consider hidden all the images on the site.

Re-structure the CSS/Web layout

When it comes to re-structure the same layout, display: none is a good friend. I’ve hide sidebar, some header images, content images.

Trim down images loading

By using also display: none it should help mobile browsing faster.

Things that you should consider to display: none:
Sidebar
Most people will crumpled their sidebar with ads and images, which will take a lot of bandwidth. Consider don’t need the sidebar when showing in mobile, the common screen resolution of mobile are just only 240×360.

Footer or the sitemap
Because browsing in mobile is a “light” activity. There is no need for full information on the web anymore.

Advertisement and Javascript
Advertisement and Javascript are those takes the longest time to load and also the bandwidth eater.

I’ve trim down from 50kb to only 5kb load of mobile web, saving my bandwidth and cost

Tags: Browsing, CSS, Mobile, Web design, Web designers