Archive
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
Responsive CSS "Mobile First" vs "Desktop First" Media Queries
Jun 27, 2014Web DevelopmentComments (0)
Which direction should you choose when writing the CSS for a responsive website? With mobile-first you style for mobile size and use min-width media queries to adjust as the browser width increases. With desktop-first you style for desktop (or large tablet) and use max-width to adjust as the browser width decreases.
This is a question about how the actual CSS functions under the hood, and shouldn't be confused with how you design your website. Regardless of whether you use min-width or max-width, you should make sure your website works great at all widths (not just specific device widths).
The argument for this route is that you should deliver the most simple, streamline, and smallest file size experience to mobile first, and then use CSS to add content for more robust desktop users.
The main downside of this approach is that you have to use a JavaScript fix (polyfill), like respond.js, to support Internet Explorer 8 and earlier, since they don't support CSS media queries natively. Unfortunately, IE8 is still popular-enough to not ignore (1% to 7% depending on the type of website), and enjoys a larger market share than IE9 as of June 2014.
The argument for this route is that you won't have to use a JavaScript fix at all. This is because most mobile devices have browsers that support media queries. IE8 and earlier will work fine as they are shown the desktop view by default and can ignore the media queries altogether.
The main downside of this approach: If you have a lot of additional content and style for the desktop view, you will have to "tear it down" in the media queries. This can cause trouble with slower mobile devices, which don't have as powerful of processors and are often on slower connections. Also, images that are set to display:none for small sizes may still get downloaded by mobile browsers like the iPhone.
If you find that you have to make a ton of tweaks to adjust for mobile, you may want to rethink your website as a whole. It's generally good practice to provide the same content and features for the mobile version, and avoid punishing mobile users with missing elements and content.
If you can, find out what your website's mix of mobile vs desktop users is. Use an analytics service such as Google Analytics. If almost all of your users are on mobile, go with mobile-first CSS. If they're almost all on desktop, go desktop-first.
Media queries are great for building responsive website, but there's more to a responsive site than just that. Most elements and text wrap automatically, and percentage margins/padding can help reduce or eliminate the need to create break points. A site can even be fully responsive with no media queries at all. The first thing you need to do is get away from the fixed-width layouts of the past.
This blog, at the time of writing, only uses media queries to adjust header font sizes. Everything else is handled just fine with percentage widths, margins, and padding, and set max-widths.
This is a question about how the actual CSS functions under the hood, and shouldn't be confused with how you design your website. Regardless of whether you use min-width or max-width, you should make sure your website works great at all widths (not just specific device widths).
Mobile-First
The argument for this route is that you should deliver the most simple, streamline, and smallest file size experience to mobile first, and then use CSS to add content for more robust desktop users.
The main downside of this approach is that you have to use a JavaScript fix (polyfill), like respond.js, to support Internet Explorer 8 and earlier, since they don't support CSS media queries natively. Unfortunately, IE8 is still popular-enough to not ignore (1% to 7% depending on the type of website), and enjoys a larger market share than IE9 as of June 2014.
Desktop-First
The argument for this route is that you won't have to use a JavaScript fix at all. This is because most mobile devices have browsers that support media queries. IE8 and earlier will work fine as they are shown the desktop view by default and can ignore the media queries altogether.
The main downside of this approach: If you have a lot of additional content and style for the desktop view, you will have to "tear it down" in the media queries. This can cause trouble with slower mobile devices, which don't have as powerful of processors and are often on slower connections. Also, images that are set to display:none for small sizes may still get downloaded by mobile browsers like the iPhone.
If you find that you have to make a ton of tweaks to adjust for mobile, you may want to rethink your website as a whole. It's generally good practice to provide the same content and features for the mobile version, and avoid punishing mobile users with missing elements and content.
Target Your Audience
If you can, find out what your website's mix of mobile vs desktop users is. Use an analytics service such as Google Analytics. If almost all of your users are on mobile, go with mobile-first CSS. If they're almost all on desktop, go desktop-first.
Using Minimal Media Queries
Media queries are great for building responsive website, but there's more to a responsive site than just that. Most elements and text wrap automatically, and percentage margins/padding can help reduce or eliminate the need to create break points. A site can even be fully responsive with no media queries at all. The first thing you need to do is get away from the fixed-width layouts of the past.
This blog, at the time of writing, only uses media queries to adjust header font sizes. Everything else is handled just fine with percentage widths, margins, and padding, and set max-widths.