Un Re Member
Responsive CSS anyone?
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
- 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
Last edited by cretaceous; 04-24-2013 at 12:28 PM.
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.
High Energy Magic Dept.
Un Re Member
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 ...
Last edited by cretaceous; 04-25-2013 at 01:15 PM.
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.
Last edited by traq; 04-25-2013 at 01:26 PM.
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":
Declare variables, not war.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)