Responsive CSS anyone?
Results 1 to 6 of 6

Thread: Responsive CSS anyone?

  1. #1
    Un Re Member cretaceous's Avatar
    Join Date
    Sep 2004
    London UK

    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
    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
    Last edited by cretaceous; 04-24-2013 at 12:28 PM.

  2. #2
    Pedantic Curmudgeon Weedpacket's Avatar
    Join Date
    Aug 2002
    General Systems Vehicle "Running Gear"
    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.
    FAQs! FAQs! FAQs! Most forums have them!
    Search - Debugging 101 - Collected Solutions - General Guidelines - Getting help at all

  3. #3
    High Energy Magic Dept. NogDog's Avatar
    Join Date
    Aug 2006
    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.)
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  4. #4
    Un Re Member cretaceous's Avatar
    Join Date
    Sep 2004
    London UK
    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.

  5. #5
    Senior Member traq's Avatar
    Join Date
    Jun 2011
    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.

  6. #6
    Senior Member
    Join Date
    Mar 2009
    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":

    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.
    Declare variables, not war.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts