About CSS and RWD: what about IE-first?

Comments

• Conditional comments and viewport tracking — Adrian Roselli (22 July 2013)

  Did you play around with IE conditional comments to load your IE7/8-only CSS? Other browsers ignore them, so no additional requests, and IE7/8 will ignore media queries, sparing them the request(s).

  Also, on #3 you can identify viewport sizes (for IE7 and IE8) with research. Research from the site audience, in fact. I wrote up how you can add script to your page to track viewports using Google Analytics, though it’s no good for getting data before you add the script: http://blog.adrianroselli.com/2013/01/my-viewport-sizes.html

  Reply to Adrian Roselli

• Stéphane (22 July 2013)

  Adrian: Actually we did want to play with conditional comments, but we ended up not using them as we would still call two CSS’s: ie.css and a generic style.css.

  Come to think of it we could also compile a separate, IE-specific CSS. I’ll think about it, thanks for the suggestion (we’re using LESS, so I expect we’ll have to jump through a few loops, but thanks nonetheless).

  As per viewport vs. screen size, I’m with you on this point, although in this special instance we don’t have access to this info, it wasn’t recorded (stats tools used were out of the box).

  Reply to Stéphane

• Marie (22 July 2013)

  Hi Adrian!

  Yes you’re right, we could use a specific stylesheet for IE thanks to conditional comments.

  However, beside the fact we didn’t want to force old IEs to load two stylesheets, I can see two problematics:

  • I can’t see how we could generate a specific stylesheet for IE with LESS, using a similar approach than Jake Archibald’s with Sass. Without such a trick, I can hardly imagine how complicated it would be to create, on one hand, a full media query powered CSS, and on the other hand, a CSS without any media query. Any tips on that matter?

  • Targeting only IE with the no-media-query CSS would exclude the other potential browsers that do not support media queries either. I can’t think of any at the moment, though :)

  Reply to Marie

• Adrian Roselli (22 July 2013)

  Marie :

  I don’t use LESS or SASS, and I have managed to pull it off. I don’t know the scale of the site nor the volume of CSS, but if the CSS you use for the IE7/8 layout matches one of your media queries, just copy-paste that into your IE-only CSS file. I know it’s a bit manual, but you can lean on version control, server-side includes, or other techniques to mitigate that.

  You can prevent old-IE from downloading all the other CSS just by wrapping all of it in a query selector (media: screen is a good start and doesn’t block any print styles you create since I am sure you would have those load separately anyway).

  Whether or not you exclude other potential browsers can be answered pretty quickly by looking at your logs. If you have a year-long span of no non-MQ browsers (I am just pulling that number out of nowhere, your time span may be different) then perhaps you can ignore them.

  Or simplify it — use the same rules you used to decide to no longer support IE6.

  Reply to Adrian Roselli

• Nico (22 July 2013)

  I have the same approach for some web sites : a kind of "desktop first made for IE", and MQ for others. It avoids polyfills.

  If the design allows to style using percents, the website stretches itself, so IE users can take advantage of higher resolutions. The advantage of 1024 px is that you don’t have problem on an iPad... in landscape.

  Reply to Nico

• karl (23 July 2013)

  “and cannot serve ‘dumb’ mobile-like pages to such a large group of users”

  This made the sound of sand on my teeth when eating clam chowder.

  1. You can
  2. Mobile-like pages are not necessary dumb
  3. What the large group of users thinks.

  More explicitly, I have very often heard that users do not like minimalism, simple, FROM Web designers and clients, BUT never I heard that from actual users. Each time I look at people who are not geeks surfing (parents and friends), they like it simple even if ugly.

  Yes a user on a lab test will say "Oh beautiful", but on a long term usage, a simple version might be preferred. One good thing though about responsive design is that we can resize the window for making the design… dumb ;)

  PS: all of that to moderate depending on your own projects, constraints, etc, which are not really known in that blog post ;)

  Reply to karl

• Stéphane (23 July 2013)

  karl : Yes, hence the quotes around ‘dumb’. The design constraints on this one project are very important, we usually can simplify the experience more than that.

  Reply to Stéphane

• Soph (23 July 2013)

  I often do this.
  Copying the 1024px layout in a separate IE 7 - 8 CSS file called with conditional comments doesn’t seem efficient to me (more files to load, a hassle to maintain).
  I’d rather have the 1024px layout as a base, avoid loading heavy resources in it so that mobiles don’t have too much to load, and use MQ for smaller (mainly for layout) and bigger screens (for layout and high-density resources).

  Reply to Soph

• Kaelig (25 July 2013)

  Working right now on that same issue. We plan to support IE8 in the next few months and here is how we did it (It’s inspired from Jake’s method):

  http://sassmeister.com/gist/6079992

  The goal for us is to keep it mobile-first so we can drop everything related to IE8 easily when its market share drops below 1-2%.

  Reply to Kaelig

• Kaelig (25 July 2013)

  I forgot to mention that we plan to serve a different CSS file to IE<=8.

  We will concatenate all our CSS files together and activate the "old-ie" mode in them, resulting in a rasterized IE8-friendly unique stylesheet.

  Reply to Kaelig

• jeremy castelli (8 August 2013)

  Stephane,

  I totally agree with your method.
  I never get the point of the mobile first approach and adding an other css for old ie.
  it’s not good for performance.
  I use the exact same thing as you : a defaut 1024px design (960px), and media queries for below 1024 and above 1280.

  I would like to add that I don’t use "global" breakpoints too.
  I prefer a per module breakpoints.
  Header or main navigation don’t need to have the same breakpoints as the content, the footer or an other part of the page.
  each part or module should be adapted according to it’s content or design.

  For this I use a slightly different version of the Chris Coyier technique http://css-tricks.com/media-queries-sass-3-2-and-codekit/

  @mixin above($device-width)
  @media screen and (min-width: $device-width)
  @content ;
  
  

  @mixin below($device-width)
  @media screen and (max-width: $device-width - 1)
  @content ;
  
  

  and use it like this

  .content
  width:980px
  @include below(980px)
  width:90%;
  
  @include below(480px)
  width:100%;
  
  @include above(1200px)
  width:1200px;
  
  

  for sure I can also create some main breakpoints in variables

  $medium=980px;

  and use

  @include below($medium)
  width:90%;
  

  I will be very glad to hear your thought about this.

  PS: sorry the braces don’t work on comments

  Reply to jeremy castelli

• Kaelig (8 August 2013)

  Sorry, the link I posted is no longer valid. Here is a link to the solution we came up with: http://git.io/sass-mq

  Reply to Kaelig

• Stéphane (8 August 2013)

  jeremy castelli : I’ll fix the braces, sorry, my CMS works too well sometimes ;)

  Reply to Stéphane

• jeremy castelli (9 August 2013)

  Stéphane : merci, ce sera plus lisible

  Reply to jeremy castelli