Tips for optimizing a website for Android's browser?

Question

I'm looking for tips, tricks and resources on optimizing a website design for Android's browser.

I'm building an Android app and some of the functionality will be accessible through a web interface.

Answer 1

As all mobile web pages keep every thing slimmed as mutch as you can..

Answer 2

dev.opera has some articles, not for android of course but for mobile web sites in general. For example:

Making small devices look great

Designing and Developing mobile web sites in the real world

Answer 3

Write the code with a small pen ?

Seriously, don't. "Optimizing" websites for a browser is precisely what scattered the Web during the last decade. Code with standards, and let the big guys work on the browser code to make the best of it.

You can trust Google to render a clean xHTML properly, I think...

Answer 4

If you look for examples of mobile optimized web sites have a look here

http://m.kozlenko.info

Answer 5

I found it went a long way to add these two meta tags to my site:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="HandheldFriendly" content="True" />

Here's more info on them: http://learnthemobileweb.com/2009/07/mobile-meta-tags/

Answer 6

I don’t know of any decent Android resources, but I wouldn’t go too crazy on the JavaScript. If Android is anything like the iPhone, JavaScript performance will be much worse than you might be used to from desktops.

Answer 7

I do relay on two elements to optimize webistes for mobile borwser (especially android and iphone):

meta tagas HandheldFriendly / viewport

Usually I want pages not to have a page width of 800 to 900 pixels, as android / iphone browsers set it to usually. To have the page widht being the same as the device width, I put to the header this:

    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

CSS media queries

I adapt the design to the page width. For instance having a 2 column content for large screens and 1 column for small screens and print. So I use inlcude into main main css-file further css-includes with media queries.

    @import url(style-screen.css) screen;
    @import url(style-small.css) print, handheld;
    @import url(style-large.css) screen and (min-width: 801px);
    @import url(style-small.css) screen and (max-width: 800px);

Answer 8

Regarding jQuery, there is a version optimized for mobile browsers: http://jquerymobile.com/