0

Basically, I'm desinging websites for android phones, however, I'm finding that these phones have many different resolutions. The biggest problem is that some phones have a height of 800px and others only 320px lol. I'm assuming I need to do fluid layouts, but I'm still confused on how I can make a mobile website fill up the whole user's screen and still look good if it's 800px tall compared to 320px tall.

I madea mobile site, but realized it looked like complete crap on different android devices with the use of a simulator (it looks like a tiny icon on some devices).

I found this stack overflow question similar to what i'm asking: Tips for optimizing a website for Android's browser?

And the person said he uses Meta tags: HandheldFriendly and viewport which makes sense to account for the actual device size so it doesn't resize, but then he mentioned "CSS media queries". He gave this example of css 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);

I'm assuming this is for different screen sizes, but I still don't understand what he is doing. I have been searching for hours trying to find tutorials to show me how to do this basically, but mobile is so new I don't think there are many resources out there or I'm missing them. I've seen android site, but it seems to be for app developers and they just list screen sizes, but not sure how to make them nice websites to fill the whole person's screen lol.

If anyone has any tutrials or tips or links they could share with me to learn how to make a mobile website fill up a whole phone (or close to it) instead of having a tiny icon which is what my mobile website looks on it. thanks.

(i also want to add some nice mobile images optimized of course, but not sure how that would work either, would that be fluid also?)

Community
  • 1
  • 1
king
  • 1,304
  • 3
  • 23
  • 43

1 Answers1

1

css3 and media queries are suitable for your needs; some infos here

user1555320
  • 485
  • 2
  • 8
  • thanks for that. but how do i know how many of these extras to make? like, do i make one min height 800, then min height 400 or something? – king Sep 09 '12 at 08:25
  • and am i supposed to be just making a whole new design with each media query? – king Sep 09 '12 at 08:28
  • how many css it's up to you; you should define wich kind of user experience is best for any resolutio; this subject is also called 'responsive design'; usually you define 3 different layout for each template, each one of wich has a max width; portrait or landscape shouldn't be important, unless there are visual elements that need a min height to work properly. take a look at sites like this http://www.jyskebank.dk/wps/portal/jfo/forside for understanding how it should work – user1555320 Sep 09 '12 at 10:37