The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design All mobile/tablets with fewer media queries ?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #166477

    Hello everyone.

    Is anyone aware of a CSS framework or a simple method to target all smartphones and tablets without using several media queries?

    I’m feeling it’s an endless battle with the device fragmentation – everytime I meet a friend with a smartphone I have not optimized for it breaks the design. Sometimes device widths and heights even overlap each other and optimizing for one device breaks another …

    Is there an easier way? A framework? Or a simple design rule to think into the design?


    yes, you can use twitter bootstrap, or foundation by ZURB.

    you will still be required to use media queries, but there are techniques that will allow you to use less of them…


    Sounds cool BionicClick.

    What are these features that ease this? :)


    I think you need to change the way you think about the breakpoints. Don’t just default to defaults. Add breakpoints at the point where design breaks and employ mobile-first approach. Where you start by designing mobile version first, then as you extend the page you add breakpoints where design “breaks” and it doesn’t look good. This technique eliminates the need to keep track of various default breakpoints (and these will always change, so maintenance is important). When new device comes out will you have to adjust your design to fit that device. If you did it in the way I’m describing, you wouldn’t even have to think about it. Because your changes were based on design, not the device width/height.


    Hi Alen.

    I’m not sure what you mean.

    From the very start of the current page in question I wanted it to collapse into 4 images.

    First they were like:
    A B
    C D

    On the mobile I designed it so they occupied 100%

    So yes, I did think it into the design.

    But then again – there’s tablets and smartphones, and there’s different sizes, and almost always they seem to cause trouble from one device to the other.

    Maybe it’s just me ?


    I usually only use three breakpoints:

    < 720
    < 1020
    >= 1021

    So your 720 breakpoint is something that is scaling 100% fluidly in any device width ?


    I too have many co-programmers that only use three breakpoints. You can attempt to compensate for all designs etc.. but the workload is crazy if you try.


    I too have many co-programmers that only use three breakpoints. You can attempt to compensate for all designs etc..

    The two aren’t mutually exclusive: you don’t need 1,024 breakpoints in order to cover all screens between 0 and 1024p.

    Note that @TheDoc isn’t recommending “720”, “1020”, and “1021”. It’s “< 720″, “< 1020″, and “> 1020″. The “<720” layout still looks good at 320px (at least, knowing @TheDoc, I would assume it does).

    From a practical standpoint, obviously, there will be upper and lower bounds. But the key is that each layout “works” and looks good at its minimum and maximum sizes, and at all points in between.

    He also mentioned that the specific numbers will be “tweaked based on design”—like @Alen said, breakpoints need to be “where the design breaks.” The breakpoints are determined by the design, not vice-versa.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design’ is closed to new topics and replies.