Grow your CSS skills. Land your dream job.

Breakpoints?

  • # November 13, 2012 at 8:41 am

    When building a responsive site which breakpoints should I be targeting to optimise viewing on tablet and mobile devices?

    I have looked at a few different boilerplates and read a few articles but there appears no consistency with breakpoints as they change slightly.

    Could someone please clarify what the standard breakpoints would be for desktop, table and mobile.

    Thanks.

    :)

    # November 13, 2012 at 9:07 am

    Well, i don’t think there is such a thing as standard, theres high occurance values, (these usually are iDevices) but because theres so many different tablet’s phones resolutions out there is, its fairly impossible to have a set standard and cater to them, The approach I use and i read somewhere i can’t just think of atm is “put break points at points where your design breaks”

    As for wether you should optimise for tablets and mobiles over desktops, is the ongoing debate of mobile vs desktop first design.

    But you can priortise issues by thinking about what the primary audience for your site will be, is it likely to be people using mobile devices, or people infront of a desktop.

    # November 13, 2012 at 9:42 am

    I agree that one should put breakpoints as required by one’s design.

    However, the actual answer is:

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    # November 13, 2012 at 10:07 am

    Just of note – I purposefully avoid breakpoints at devices sizes purely because responsive web design is about any and every potential screen size.

    My breakpoints occur at random intervals depending on when the content looks dodgy or columns get too close/text is harder to read etc.

    Obviously when you get to an arbitrary “mobile” size then it’s worth floating or re-aligning everything to be vertical, but I highly recommend you don’t fixate on particular devices – that way madness lies and the spirit of responsive design is murdered.

    # November 13, 2012 at 10:25 am

    I have to disagree…one should design / code for “high occurance values” like iDevices purely because of the extensive user base.

    Not to do so would be foolish.

    Putting a breakpoint at, say 1100px and not 1024 (or thereabouts) would mean that your site would look horrible on a iPad.

    By all means ADD breakpoints at the levels you want but make sure the “high occurance values” aren’t ignored.

    I guess I’m sort of agreeing and disagreeing at the same time. :)

    # November 13, 2012 at 10:36 am

    @Paulie_D but, if the site looks good sub 1100px theres no need to put a breakpoint at 1024 unless something breaks at that point.
    Infact I’d go so far as saying putting a break point in where you don’t need one is uncessicary code. Additionally mobile devices market share is only around 10%

    # November 13, 2012 at 10:47 am

    Ah…that’s not what I said…or at least not what I meant

    If you’re putting a breakpoint ONLY at 1100 for design purposes and NOT supporting 1024 and below then that’s a fair decision if you decide not to support mobile but the OP was asking about OPTIMISING for tablet and mobile…and the standard breaks to support those…hence my answer.

    Like I said, I was agreeing and disagreeing at the same time….it’s just the way I am. :)

    # November 13, 2012 at 10:53 am

    TECHNICALLY and THEORETICALLY, breakpoints don’t really have to be pixel-exact.

    For example, if you want a difference between iPhone portrait (320px) and iPhone landscape (480px), you can set your breakpoint anywhere in between, since iPhone doesn’t have any mode where it’s anywhere between those two values.

    This would work for iPhone landscape mode:

    @media only screen and (min-width : 321px) {
    /* Styles */
    }

    But this would have the exact same effect:

    @media only screen and (min-width : 479px) {
    /* Styles */
    }

    In both cases, that’s the style you’ll see when the iPhone is in landscape mode (and any resolutions higher than that).

    Again, all theoretically and very specific, and should NOT be used like this — just pointing out that it’s not necessarily required to be *exact* about the common break points, and this is just an extremely limited example case to show you can use different values.

    I would still use the reference that @Paulie_D mentioned above.

    # November 13, 2012 at 10:57 am

    The breakpoints on my latest project are determined by where the site fails to look right. Of course at certain places there are styles specifically for mobile devices, but as mention there is no hard-set rule for it.

    Re-size the browser until the site breaks. That is your next break point.

    # November 13, 2012 at 12:46 pm

    @Paulie_D – Why target exact device sizes? Responsive is about suiting any potential screensize. Sure it might be beneficial to have it do certain things for ipad/iphone, android etc – but ultimately it should look good regardless of screen size.

    I’m not advocating abandoning mobile/tablet styling – I’m just suggesting that you have no idea what screen size a potential user will have and therefore should not assume they will have a particular device or not.

    # November 13, 2012 at 2:26 pm

    As I said, I’m not suggesting targetting ONLY specific device sizes, I’m just saying you shouldn’t ignore them.

    Here’s what I said

    > I agree that one should put breakpoints as required by one’s design.

    and

    > By all means ADD breakpoints at the levels you want but make sure the “high occurance values” aren’t ignored.

    However, whilst I’m sure the discussion is useful it’s not the answer the OP was asking for…which I provided.

    # November 13, 2012 at 5:12 pm

    Please, let the content and the context dictate breakpoints. Not the other way around.

    # November 13, 2012 at 7:08 pm

    +1

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

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