Forums

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
    Posts
  • #166477
    dravine
    Participant

    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?

    #166481
    BionicClick
    Participant

    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…

    #166514
    dravine
    Participant

    Sounds cool BionicClick.

    What are these features that ease this? :)

    #166515
    Alen
    Participant

    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.

    #166516
    dravine
    Participant

    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%
    A
    B
    C
    D

    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 ?

    #166583
    dravine
    Participant

    I usually only use three breakpoints:

    < 720
    < 1020
    >= 1021

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

    #166694
    BionicClick
    Participant

    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.

    #166705
    __
    Participant

    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.