media-queries VS. fluid grids FOR different mobile-formats

This post is not about code-syntax but about work-strategy, before I start developing the site.

If I need to design the front-end of a mobile-site for smart-phones (Androids { 3 different sizes}, iphones {2 differents sizes}, and other non - smartphones phones) how shall I proceed? (MY DESIGN HAS TO WORK AND BE THE SAME FOR ALL THESE DEVICES)

1- shall I design my work following the idea about flexible images and fluid grids (flexible DIV:s).

开发者_开发技巧or

2- set different media queries-sizes for every target model? (this solution might create more development-work isn't it?)

Thanks very much for yr thoughts...

---

Use fluid grids first. Then you can use media queries to do some final tweaks. Like e.g. float an image to the right if there is room (landscape mode).

This way you support nearly every device out there, and not just the big 2 (although Blackberry is bigger than Android I believe).

---

@ YoniGeek; may be you have to use fluid layout.

For this just define screen width instead of device width & define css for maximum device screen size. So; you no need to define different css for different devices.

Read this article http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Check this site for inspiration http://mediaqueri.es/ & look same in all devices.

---

It's a matter of preference really. You can use a fluid design, media queries (with css transitions) or a combination of all techniques.

On my most recent project, I went with media queries. Once I had the basic design done it took me less than an hour to have it working on varying resolutions from 240 pixels to 960 pixels wide. So more development work... it was not.

My previous recommendation on one of your prior questions still stands:

1. Design (ie: one design.css file or split up into multiple files such as fonts.css, typography.css, etc...) the site without positioning anything. You cam start with a HTML 5 reset, implement font faces, set the backgrounds, color the links, style the inputs but do not position anything (ie: if you have header, nav, content and footer sections, don't position them).

2. Use media queries (ie: layout-240.css, layout-960.css) to target your viewports and position each everything accordingly. They will generally contain less than 100 lines of CSS and take up less than 3 KB of diskspace but that's irrelevant.