Forums

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

Home Forums Other Consensus on Media Queries

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #190956
    justaguy
    Participant

    There seems to be 2 general schools of thought on the application(s) of media queries in RWD / AWD. Uncertain whether this is a natural “evolution” in thought with the passage of time, or “tried & true” best practices. (?)

    Approach #1 : Incorporate the use of a (rather lengthy) list of “common device widths” which address specific devices and work on that premise while modifying the accompanying CSS breakpoints as you work “up” from “mobile first” ideology. The common belief is this approach is the least “future-proof” and a nightmare to maintain. The information here at CSS-Tricks seems to support this very approach. Here is an example:

    Mod edit, added link instead of code: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Approach #2 : Choose a more limited, say 3 (“small” / “medium” / “large”) media queries assignments, again based on common device widths and modify as dictated at design breakpoints (layout, styles, typography) in the purest sense of “responsiveness / adaptability” of the site design. Basic idea :

    /*==========  Mobile First Method  ==========*/
    
    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
    
    }
    
    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
    
    }
    
    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    
    }
    
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
    
    }
    
    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
    
    }
    

    For those “familiar” with me, am I still procrastinating? Alen pegged me, ” Paralysis by analysis.”

    Ciao

    #190958
    Paulie_D
    Member

    Not sure what you are asking but please don’t dump code like that. It takes up WAY to much room. A link is preferable.

    #190968
    Alen
    Participant

    Breakpoints for responsive design are found in the design itself, not on the sizes of any particular screen.

    +100%…

    Choose a more limited, say 3 (“small” / “medium” / “large”) media queries assignments

    Mobile First is not about “small, medium, large”. It’s about embracing the constraints of mobile and designing for that form first, then using Progressive Enhancement to enhance the experience as the viewport increases. The small, medium, and large approach is a lazy-man cookie-cutter-boilerplate crap. Mobile First is a different mindset completely. It’s fundamentally different from Desktop First approach.

    Responsive Design is about embracing fluidity of web. If you separate the layout from your content. As long as your individual pieces of content are responsive, where they are in the grid shouldn’t matter, as long as the grid itself is responsive. It helps to look at things individually and how they behave in specific space at specific viewport. Don’t be device specific, be space specific. If that makes sense.

    Hope that helps,
    -Alen

    #190971
    TheDoc
    Member

    I think Approach #2 is where you want to go but defining breakpoints regardless of design would be a mistake. Maybe you only need two breakpoints. Maybe you need four. I don’t think there’s ever going to be a definitive method for every project.

    Avoid Approach #1 though :)

    #190977
    Alen
    Participant

    Not to be a misfit, but why start building for the smallest target group?

    Do you mean mobile? If so you couldn’t be more wrong. Mobile is outselling Desktop since 2010!

    #190979
    Robby
    Participant

    First of all as __ said above, definitely don’t use preset media queries. Add them where ever your design requires them. There’s a million devices and screen sizes, there’s no fit-all formula.

    As far as where to start, it all depends for me. If I’m going to support IE8 and below I start at a medium resolution that will fit in 1024px wide. If I’m going IE9+ I start with the smallest resolution, that way mobile users aren’t rendering a ton of css then changing/hiding it. Not to mention its a lot easier (for me) to add rather than subtract.

    #190980
    justaguy
    Participant

    Sorry ’bout that Paulie_D. I am one who relies on the formatting “widgets” here in the comments section to enable me to use such functionality. Where did those go by the way? Point me in the right direction and I’ll make note of them in the future. Thanks for the mod btw. I’ll consider my hands “slapped.” :)

    #190982
    justaguy
    Participant

    Thanks for all the replies. Approach #1, as I understand it, is the one approach to avoid at all costs. I fully comprehend the notion that device specific media queries are to be avoided at all costs. Screen sizes & devices are in constant flux. I wasn’t sure how verboten it actually is as there still exists a lot of references to it as a viable “school of thought” on the net. Clearly outdated according to the comments I have received here. That’s good.

    With regard to approach #2. I would have imagined more supportive commentary, the values chosen were only to illustrate an example. It’s not that I considered assigning preset breakpoints per say, I understand “breakpoints” are identified when negative results occur as the site (elements) “grow” from the mobile first platform onto larger screens like those found on tablets, desktops, etc.

    The mobile first approach is my plan of attack. I read more advantages than disadvantages to it’s reasoning and benefits. This is my first attempt at thinking outside the box of fixed-width (static) designs toward “responsive” designs and functionality. I am looking forward to playing with it SOON. Grids still confuse me, perhaps I’m not understanding them as I should. Here I go again, but can someone point me in the right direction as to which grid is most beneficial and easy to use. I really see no difference in the many that exist out in the wild. Working with columns & rows in varying numbers seems I dunno – like riding a bike with the training wheels on…..

    I do understand the idea of Progressive Enhancement, thanks Alen for the link, that one is new to me. Question: where do I start if not from at least one media query (mobile) to “set-the-stage.” The user agent has to have a starting point, right? (Screen size wise, am I making my point clear?) 320px?

    I apologize if my thinking is difficult to follow, and appreciate those who were capable of responding to my inquiry with crystal clear insights.

    #190983
    Alen
    Participant

    Question: where do I start if not from at least one media query (mobile) to “set-the-stage.” The user agent has to have a starting point, right? (Screen size wise, am I making my point clear?) 320px?

    No. You’re thinking fixed width again. Your initial style is mobile style. Your first breakpoint is modifying the mobile view. See very simplified example:

    http://codepen.io/alenabdula/pen/Eayjdm

    #190984
    justaguy
    Participant

    @ Robby

    I think I can safely dismiss IE 8 at this point, it’s market share is diminishing at an accelerating pace. I don’t see it as a major hurdle I need to be overly concerned with.

    Thanks

    #190985
    justaguy
    Participant

    @Alen,

    “Your initial style is mobile style.” Wow, never even thought…..!

    Am I missing something here?

    “See very simplified example:” (?)

    #190986
    Alen
    Participant

    If you resize the browser when looking at the CodePen example you’ll see the box change colors at certain breakpoints. If you look at the code you’ll see what I mean by “Your initial style is mobile style.”

    The very cascading nature of CSS… Mobile view will be red, next breakpoint is yellow, then blue, and finally pink.

    #190987
    justaguy
    Participant

    Gotcha!

    Thanks bud.

    #190988
    justaguy
    Participant

    Thanks, illustrates your point very well. Pretty cool actually, starting from “nothing” like that, then of course assign styles at your breakpoints.

    I needed to “see” something like that.

    #190999
    Senff
    Participant

    Adapting a mobile design to a huge screen is much easier than adapting a huge design to a small screen.

    Not necessarily.

    First: in general there’s not all too much difference between creating mobile styles and then add up for desktop on one side, and creating desktop styles and then remove for mobile on the other.

    But for me personally, designing mobile first is just less natural cause my actual development process takes place on desktop.

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