Welcome back to Front End Center! This week we’re discussing the idea of using Mobile First as a Foundation.

Mobile phones might be something you’ve heard of in the past couple of years. Like Beanie Babies and Tamagotchi, it’s a safe bet that mobile browsing of the internet is something that’s here to stay. As a matter of fact, we are probably still in the early days of seeing mobile saturation, much less whatever strange and unique user interfaces will eventually come next.

Whether you’re in the US or abroad, mobile use is huge. It’s also not an optional luxury to consider anymore. Many users with both a phone and a dedicated computer still prefer to browse most websites from the convenient screen in their hands. A growing number of people don’t even have a laptop or other computer to speak of, beyond their mobile device.

I recently completed a design and development project for a client who was understandably interested in making sure his new business site had a good mobile usability. More than just worrying about a generic mystery-user who was mobile only… the client himself was mobile-only!

I’m happy to say that from initial contact, through agreement signing, website testing, and final approval, it’s also one of the smoothest client relationships I’ve had. There were no roadblocks or weird workarounds we had to endure. If the entire process of commissioning a website can be handled via just a mobile device, it should stand to reason that just accessing most websites from mobile is a given.

There have been many methods and ideologies revolving around how to approach mobile platforms, with each contributing some very good AND some very bad ideas. They run the gamut from m-dot subdomains with custom HTML and CSS files to dedicated mobile apps for every website.

As CSS standards forged ahead, we’ve found a champion in media queries that has seen widespread use. Leveraging media queries allows a developer to implement very finely-tuned CSS changes based on screen width, and in a variety of measurement units! Throw in a little JavaScript to handle particularly complex changes in environment, and you’ve got a very well rounded toolset to adapt one unified set of files for display on a wide spectrum of devices.

This still leaves a standing issue, though. If you know what your site looks like on a full monitor… and you know what it looks like on a phone… which one is ‘first’? What is the default state of your website, and what is the amended version driven by clever use of media queries?

The two camps of thought here are, aptly named, Mobile First and Desktop First. There are merits to both, depending on your perspective.

Mobile First makes some bold claims that hold up fairly well. When designing an interface to relay content or provide user interaction, the limited space afforded on mobile devices can make quality design pretty clear. If your front-end is working well on a mobile device, you can tell. If nothing scrolls, the content runs off screen, and half the text is too small to read, you can’t really shrug it off as good enough.

It also forces you to genuinely consider your user experience and content strategy. What calls to action do you want to emphasize, and what content must the user have easy access to?

Effective streamlining of process, content, and user interface is a great thing, but does it have its downsides?

Desktop First apologists are often accused of just being behind the times. They’re supposedly unwilling to let go of those “simpler” days when you just had to worry about a big screen and could reasonably expect to only have to worry about compatibility with one or two browsers.

That’s definitely not the defining argument of a genuine Desktop First approach though. The desktop experience is going to be one of the fullest you can have with a website. Especially if you’re starting from scratch with a new brand or full website, the desktop experience is a blank canvas.

Where you’re restricted to colors and short-hand references to brand experience in many mobile situations, you can afford more room for a desktop site. Larger images, more complex user interface interactions, and better browser technology all give your user a richer experience. Starting a design and user experience road map from this scale and then fitting it down to mobile sizes gives the most creative breathing room from step one.

From a general perspective, these arguments mean that Mobile or Desktop First are both viable options and generally up to preference. When it comes to actually developing the code for your project though, it’s a different story.

The process of your project is something malleable that should suit your needs best. When it comes time to cascade styles, ensure dependencies, and actually put code in an editor, there’s a new set of priorities.

Developing with Mobile First methods means that you are starting with a stronger base, and making incrementally more minute tweaks as you increase the size and complexity of your browser environment. CSS is the best example of this, though HTML5 technologies and JavaScript also have their own caveats and Mobile First methods.

Thanks to the ordered cascade of styles, you need to consider what the “default” state of your website is. From a Desktop First perspective, that means that every time your page loads, it styles as a desktop site, and then checks to see if it needs to make changes based on a number of variables you’ve set.

This can lead to a few, important conflicts. First, the mobile styles are generally simpler and more universal. Most of your content that is floating in blocks, columns, and other layouts in a desktop view will be uniformly wide across most of the screen in mobile. It makes for far more organized code to have those similar widths and layouts as the base CSS, while keeping the very specific and particular changes to the media queries, where they can be quickly referenced and understood.

Mobile first can matter for users as well as developers. While most CSS will load and run media queries in the blink of an eye, that’s not always a guarantee. Too many resource requests can visually slow the load of your site, and it is a MUCH more common occurrence for mobile users than desktops.

Even under the worst conditions, a mobile-sized site is more usable on a desktop than a desktop interface on a mobile phone. Even a quick flash of un-styled or mis-styled content can be disorienting on a mobile device.

So, while the general process is up to personal taste, my experience has shown that Mobile First development is the key to reliable and maintainable work. Have you found any cases where that might not be true? If so, let us know! Until next week, this has been Chris Landtiser and Front End Center.