Responsive CSS anyone?

cretaceous

Any of you guys converted a site to Responsive CSS ?

I've been asked to look into converting a site I built of around 400 pages and counting.
It only has a couple of page templates and they are similar to each other.

I guess catering to three target sizes is enough:
iphone size smartphone
tablet
standard pc

should maybe add larger smartphone as well

But the more you look into it, the longer it's going to take.
I'm thinking the navigation needs a complete rebuild for touch screens - it's a slide out /hover to view thing now.
Then again you wonder if everyone will soon have electrOmagic iPaper that goes any size in their hand and this is just a passing fad.

I know this is front end stuff and shouldn't be on this forum, but this is the only web dev forum I'm on (cry).
Feel free to add anything on any other interesting HTML5 goodies

Weedpacket

Not yet (we'll probably be going that way in the near future) - but being a back-end guy I tend not to have to deal too much with that side of things (generally the most I've done is played with Firefox's responsive display settings). If I understand rightly, you start by coding for the dumb and small-form-factor displays, and then once they can cope use media queries to take advantage of more expansive environments.

NogDog

Likewise, I'm not much of a front-end expert. My understanding though is that one of the tools is to use JavaScript to monitor the size (in pixels, I'm guessing) of various containers, and if they are below some size, selected elements within that container can have relevant style settings changed or simply set to display:none. That way you don't have to worry so much about device type as simply(?) about screen real estate. (And of course it could be used in conjunction with device type, whether via user agent on the server side and/or CSS media type.)

cretaceous

One of the annoying things nowadays is how a search on Google for the item one is looking for, in this case 'responsive css mobile' returns many very general links. There's so much noise.

a) on how you really should do it, it's the future.. but no discussion, apart from spam "yes I agree" comments
b) things like "use a responsive wordpress theme" or "use webtool xyz and its built in responsive layouts"
c) blog posts that are so basic you wonder why the person put them up

I reckon for mobiles I'm going to have to do a whole lot of style swaps to move columns around, change widths , make icons bigger (recommended size is an enormous 40 px square for average finger tips), swap large images for smaller ones to avoid un-needed data download, do an alternative menu structure, handle pixel density for high res screens.

There's quite a nice mobile preview tool as an Opera download, but really you need a touch screen at the least - I better get a tablet.

All reminds me of the issues of getting things to work in IE 6/7/8..., Safari, FF etc.. which we all thought were just about gone for good..
Heyho, I'd much rather be coding PHP ...

traq

you might check out foundation. I use it quite a bit. Good functionality; easy learning curve.

In general, yes, design for small screen first and then expand for larger screens.

However, use the content as your guide for when to switch breakpoints, not screen sizes. There are too many screen sizes.

Design your content for as small a screen as practical.
("Smaller-than-practical" screens get a super-basic stylesheet.)

...Make the screen bigger until the layout looks "wrong."

That's a breakpoint - redesign the layout and add a media query.

...Repeat.

Bonesnap

I haven't converted a responsive/reactive website, but I am in the process of writing one. A coworker is in the process of writing another one as well. We have targeted four main "sizes":

PC
Tablet landscape
Tablet portrait
Phone landscape

We decided not to target phone portrait (boss' call). @media queries will become your best friend, as well as using some percentages instead of hard widths. Keep in mind though that @media queries are a CSS3 rule and will not work on IE8 and under. We have found a JavaScript workaround (don't remember where I got it from but I can take a look if anyone is interested). This script parses your CSS file looking for specific @media rules and then (I think) creates events on the browser window to fire if it reaches the sizes you specified in your @media queries. Either way, it seems to work on IE8 pretty well. We haven't noticed any issues (aside from JavaScript being disabled, but not much you can do there). All mobile browsers I am aware of support @media queries.