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

I rely on two elements to optimize websites for mobile browsers (especially Android and iPhone):

Meta tags: HandheldFriendly and viewport

Usually I want pages not to have a page width of 800 to 900 pixels, as the Android and iPhone browsers set it to by default. To have the page width the same as the device width, I set the following meta tags:

<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 include into the 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);