: Downside to mobile first (media query / js reliant) design? I'm working on a site where mobile optimization is important. I like the idea of a mobile first approach, where ALL CSS styles are

@Kaufman445

Posted in: #Mobile

I'm working on a site where mobile optimization is important. I like the idea of a mobile first approach, where ALL CSS styles are loaded with media queries, and none are loaded as a ‘base’. This doesn't change how I would style the desktop version, but for the mobile version ill be starting with a blank canvas, rather than having to override the desktop styles. IE8 and earlier don't support media queries but this can be fixed with respond.js.

There is only one potential issue to the approach that I can think of. If a user has a browser that doesn't support media queries, and also doesn't support JS, then no styles will be loaded. If this user wouldn't use CSS anyway (e.g. if they are using accessibility devices) then its not a problem. However if the user did want to load CSS then obviously they would see the unstyled version.

Do these users exist? I've read that generally users without JS make up about 1%. I would imagine it's possible many of these may be on older browsers. However are these users generally on accessibility devices or very old phones that don’t use CSS anyway?

Are there any other issues I haven’t considered? There is an iPad bug where it doesn't respect the min-width media query. I'm aware of this issue, but might other devices have media query bugs also?

UPDATE - Whichever method I choose the site will be functional without styles and JS. Usability will not be compromised either way.

The main benefit to the method is that for mobile, no redundant code or images in CSS will be loaded, improving loading times. The downside to users with no JS or media queries is that the site will look plain, but it will still be usable.

Vote Up Vote Down

Login to post a comment!