- This topic is empty.
-
AuthorPosts
-
March 21, 2014 at 6:14 am #166477dravineParticipant
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?
March 21, 2014 at 6:56 am #166481BionicClickParticipantyes, 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…
March 21, 2014 at 1:11 pm #166514dravineParticipantSounds cool BionicClick.
What are these features that ease this? :)
March 21, 2014 at 1:18 pm #166515AlenParticipantI 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.
March 21, 2014 at 1:23 pm #166516dravineParticipantHi 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 DOn the mobile I designed it so they occupied 100%
A
B
C
DSo 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 ?
March 22, 2014 at 12:19 pm #166583dravineParticipantI usually only use three breakpoints:
< 720 < 1020 >= 1021
So your 720 breakpoint is something that is scaling 100% fluidly in any device width ?
March 24, 2014 at 12:19 pm #166694BionicClickParticipantI 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.
March 24, 2014 at 1:52 pm #166705__ParticipantI 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.
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.