Grow your CSS skills. Land your dream job.

Learning responsive design!

  • # November 14, 2012 at 11:29 am

    Hey guys and girls.

    I am just trying to extend my skill set by becoming confident with responsive web design, I have basically drafted something up on CodePen and was wondering if I’m headed in the right direction.

    _Note_: I haven’t added any media queries yet as I am still trying to read up on some stuff.

    http://codepen.io/Watson90/pen/fznrp

    Let me know :)

    # November 14, 2012 at 11:35 am

    It’s a good start but you might want to consider a grid system to avoid setting widths on those sections / aside.

    Need something that 66% (2/3), just add a class, etc., etc.

    http://css-tricks.com/dont-overthink-it-grids/

    # November 14, 2012 at 11:39 am

    To me, the very definition of responsive design is that the page layout changes/adapts to your screen size. Simple as that.

    Using percentage widths for your main content and sidebar, that’s basically what it does, so I’d say you’re on the right track!

    In general though, responsive design has (almost) become synonymous with using media queries. I think the best way to describe that, is saying that’s an extra layer to it all, because you use SPECIFIC screen widths to define SPECIFIC layouts. Like “_if screen is smaller than 320 pixels, then use these CSS rules. If screen width is between 321 and 480 pixels, then use these CSS rules_”, and so on.

    So again I’d say you’re definitely heading in the right direction, now it’s time to experiment a little with media queries. Tip: use a viewport resizer to test your stuff, so you won’t have to keep resizing your browser to see the results.

    Good luck!

    # November 14, 2012 at 11:44 am

    As Senff said.

    However, you might want to consider starting with a mobile design (mobile first!) and expanding upward.

    # November 14, 2012 at 12:00 pm

    Thanks guys!

    @Paulie_D

    > Need something that 66% (2/3), just add a class, etc., etc.
    http://css-tricks.com/dont-overthink-it-grids/

    I only watched that video the other day and I totally forgot about the whole grid system, I’m such a dumbass. I thought something wasn’t right when I was coding it up, lol. Thanks!

    Yeah @Senff – it’s one thing making it fluid, and then it seems to be a whole different thing using media queries. Thanks for the advice.

    GMB
    # November 14, 2012 at 12:15 pm

    Regarding viewport resizers, I just came across [this one](http://mattkersley.com/responsive/) the other day.

    Anyone have any others to recommend?

    # November 14, 2012 at 12:25 pm

    This one is awesome. It’s actually a bookmarket.

    It’s based on ipad/iphone etc, but it’s super handy for quick resizing.

    http://responsive.victorcoulon.fr/

    A more in depth and functional one is http://quirktools.com/screenfly/

    It has tons of different screen and device sizes to choose from under each clickable block.

    # November 14, 2012 at 1:00 pm

    All kinds of responsive testers: http://bradfrost.github.com/this-is-responsive/resources.html#viewport-testing

    GMB
    # November 14, 2012 at 1:01 pm

    @andy_unleash — very nice! Thanks for sharing.

    Ditto @Senff.

    # November 14, 2012 at 2:20 pm

    I will be sure to check these out tomorrow guys :) thanks for all of the sound advice!

    # November 15, 2012 at 8:07 am

    @Paulie_D, @Senff – Watched Chris’ Video again, it’s a lot more structured now etc.

    http://codepen.io/Watson90/pen/fznrp

    # November 15, 2012 at 8:11 am

    Very nice.

    # November 16, 2012 at 7:27 am

    @Paulie_D

    It’s so weird…

    My codepen works in ie9 all fine

    However when I take the HTML + CSS out of codepen and put it into Sublime Text 2 and preview it, it messes up and looks like the floats aren’t working properly?

    Only in IE9 though. Any Ideas?

    # November 16, 2012 at 7:36 am

    Sorry I’m on IE10 now and haven’t figured out Compatibility View yet.

    Once I do..

    EDIT: Unless it’s the box sizing…try

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    in that order,

    # November 16, 2012 at 7:37 am

    Actually, it’s okay man. I fixed it with;

    Why is this needed?

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".