Forums

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

Home Forums CSS [Solved] Media queries "mobile first"

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #38142
    Senff
    Participant

    Quick question about media queries and the term “mobile first”. What does that refer to: design and code a site for mobile first, or put the code for mobile first in your CSS file?

    I’m redoing one of my sites right now, and it sounds strange to do all the work to make it look right on a mobile site first, then add code to make it look proper on tablets, and then add more code for monitors.

    It DOES make sense to put the media queries for mobile first, then for tablets, and then for screens, like this:

    @media (max-width: 320px) {<br />
    /* code for mobile only */<br />
    }<br />
    <br />
    @media (min-width: 320px) and (max-width: 720px) {<br />
    /* code for tablets only */<br />
    }<br />
    <br />
    @media (min-width: 720px) {<br />
    /* all other code if its not mobile or tablet */<br />
    }Because simply put, screen larger leads to lower code overriding previous code.
    

    Basically, is that’s the proper method for “mobile first”, or is it really considered “create your site to look good on mobile first”?

    #103123
    chrisburton
    Participant

    I actually took it as designing for mobile first. Although it’s only an opinion and I don’t agree with it.

    #103184
    Paulie_D
    Member

    Yes, it makes sense to design for mobile first IF you think you’ll need to serve it that way.

    If you are, then your basic styles will apply to all resolutions and you only need to override a limited number of classes for larger screens.

    I think, in general, that will reduce CSS bloat but as ChristopherBurton said, it’s only an opinion.

    Whatever works for you, works for you and that’s all that matters.

    #107098
    bzmillerboy
    Participant

    I’m curious to how people approach their media queries when taking the mobile first approach as well.

    When considering IE8 (and any other browser that doesn’t support @media), this is a big deal. If you write your CSS media queries to use the mobile styles by default then enhance up as the screen get’s larger, IE8 will only use your default styles (ignores anything in @media wrapper).

    So, can you take the mobile first approach with your CSS if you want to support IE8? There are many cases where you don’t want IE8 users to only see your mobile styles.

    #107103
    Paulie_D
    Member

    I think you are misunderstanding the concept of ‘mobile first’

    The idea is to design (not code) with mobile in mind first…you can code it any way you like.

    Media queries can be in any order. CSS styles for desktop can come before mobile styles.

    #107106
    Senff
    Participant

    I don’t think it’s necessarily true that the media queries can be in any order. Especially when there are styles that apply to more than one query.

    #107113
    Paulie_D
    Member

    @Senff I’m fairly sure you can put Media Queries in any order.

    It makes sense to use a logical progression but I don’t think it’s mandatory as long as the majority of your base styles will be used all the time.

    Obviously, any styles you add to your MQ will override the base styles so you have to be careful to avoid bloat.

    #107115
    Senff
    Participant

    Well, what I mean is that if you have overlapping styles/queries, the order does matter since it will take the last one that applies.

    Example:

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* iPhone, both portrait and landscape */
    h1 {color:#f00;}
    }

    @media only screen and (max-width : 320px) {
    /* iPhone, portrait only */
    h1 {color:blue;}

    In this case, H1 will be blue in portrait mode iPhone, and red in landscape mode.

    But if we switch the queries:

    @media only screen and (max-width : 320px) {
    /* iPhone, portrait only */
    h1 {color:blue;}

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* iPhone, both portrait and landscape */
    h1 {color:#f00;}
    }

    In this case, H1 will always be red….

    I understand what you mean if you say the order of the queries doesn’t really matter, but essentially, the contents of the queries do, because that’s just the generic “last one wins” CSS rule.

    I guess the order really doesn’t matter if each query is unique and very specific, and only one of them would apply.

    #108972
    boiseCoder
    Member

    After I read Luke Wroblewski’s “mobile first” one of the main take-away’s I got was, in designing for mobile, it’s an approach or point of view, things like page-load, content priorities and clean simple design come to the fore (as they should in general web design).
    One of the last things he covers is media-queries. It’s a great read.

    – D

    #111777
    Wakkos
    Member

    @media only screen and (min-width : 1em) {}

    =P

    #163955
    smedz28
    Participant

    I understand this is an old post but i’m looking at the ‘mobile first’ concept and there are a few things I just can’t get my head around. However one point that was emphasized in the screen cast I watched for mobile first was the page load times and how coding CSS styles for mobile first reduces the number of requests for images and such giving better performance. I actually think this is a great way to build it and it makes sense.

    The part that I am confused about in the media queries as the tutorial wasn’t as clear in the practical part as it was the theoretical part.

    By declaring the default styles as the mobile first styles is fine but using the media queries for the various break points as we build up from the smallest device are we specifying a query for min-width or max-width? or a min and max width?

    #163956
    Paulie_D
    Member
    #163958
    smedz28
    Participant

    Thanks Paulie_D I have just read through this, so if I understand it correctly for mobile first you would use ‘@media (min-width: 320px;)` and then the same working up through whatever break points you need until you reach desktop screen sizes? say ‘@media (min-width:1024px;)’

    #163960
    Paulie_D
    Member

    Basically yes but you really don’t need to specify the first one since it would be the default styling.

    #163961
    Paulie_D
    Member

    Why not experiment in Codepen.

    Apply a default bg colour for the body and add media queries to change the colour at various widths.

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