views:

5670

answers:

8

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.

+1  A: 

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

Petoj
+3  A: 

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

Zitrax
+1  A: 

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...

e-satis
He did say he wanted to optimise the “design” — this could encompass interface design questions that do deserve a specific mobile treatment. And, likewise, if he’s just building part of an Android-specific app using HTML, it seems fine to optimise for Android.
Paul D. Waite
A: 

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

http://m.kozlenko.info

Maksym Kozlenko
+2  A: 

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/

Dave Lancea
A: 

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.

Paul D. Waite
+5  A: 

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);
Daniel
Most tutorials seem to omit this. Very important information those meta tags! Tells the browser that it's safe to use mobile view. The stock android 2.2 browser does not respect most media queries with width, since it tries to set the page's width to be that of a montior.
Dmitriy Likhten
+1  A: 

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

Mike Chelen
Cool didnt know about that one.
Yo-L