Mobile First Design, and Why it Matters

Mobile first is a design philosophy that suggests you should design your website to work by default on smaller screens (like mobile phones).  This means that older browsers without new capabilities (like media queries) on phone and desktop will default to showing a mobile version of your website.  Why in the heck would you want that?

It boils down to being the lesser of two evils.  If you design for mobile first, people on older desktop browsers will be stuck looking at a version of the website where everything appears much wider than necessary.   It doesn’t make good use of the real estate provided by a full size screen, and everything is stacked and centred.  The important thing to note is that this configuration, though unsightly, is usable.  If we build a website to full size-screen default layouts and configurations, it will look better on older desktop computers, but might not even be usable for practical purposes on older phones.

If you’re hiring a web developer and you think there is an advantage to having your site work on as many devices as possible, consider asking them to use ‘mobile first’ design methodologies.  If you’re a web developer, there are many great guides on the web for properly setting this up, but here are the basics: When you use your media queries for screen size, focus on using min-size conditions, and not max-size.  For example, if your desktop site has three columns, set your default CSS to have one column for mobile, then use a min-size media query to set up three columns on devices that are large enough (and understand media queries).