Mobile web application with maps and results

Question

I'm working on a mobile web application that needs to include some basic elements for a search box, a small list of results, and their corresponding locations on a google map. I have "full web" apps that do this without issue, but the hangup Im having with the mobile version is the layout on the screen. If I try to do a small map with the results on the side, it is really cramped when the phone is held vertically, but works ok turned sideways.

Since this should be a pretty common mobile type of web app, I'm looking for some best practices of some kind... either an existing web app that I could get ideas from, or sample/demo project of some kind. I see a lot of "how to use maps in a mobile web app" demos out there, but they are never quite what I'm looking to do.

I'm using MVC3/asp.net, but that shouldnt matter much for this.

Answer 1

Responsive design. Read this article: http://www.alistapart.com/articles/responsive-web-design/

That should equip you with the knowledge and excitement to take your current solution and add media queries so that you can use the same code-base to style for mobile apps as well. Without seeing some of your code it would be impossible to suggest a more specific example.

Hope this helps!