Beautiful at Any Size: Mobile First Design and Development

By Nate Cavanaugh, Director of UI Engineering, Liferay

When designing a website or web app, it’s essential to consider the screen of the person who is going to be using it – and nowadays that means it’s more likely to be a mobile screen. In 2014, 1.8 billion phones, 256 million tablets and 276 million PCs were shipped, meaning more phones were shipped in three months than there were PCs shipped all year. But mobile devices and PC’s don’t exist in their own worlds; users are increasingly switching between devices throughout the course of completing a task. A Google study on The New Multi-Screen World found that “90% [of users] use multiple screens sequentially to accomplish a task over time.”

The new reality is that your website or web app needs to be designed to look good on any device, no matter the screen size.

So, What does “Mobile First” mean?

Mobile first shouldn’t be thought of as a business term. It doesn’t mean “engaging with your customers in a mobile context as the first touch point of the experience meta-fabric.” It doesn’t mean you should be seeing design elements intended for mobile screens displayed on desktop computers.

What it is, rather, is a strategy for achieving device-agnostic websites and web apps using responsive web design and progressive enhancement. Mobile first is a way to guarantee you serve the harshest environment first.

Mobile First Design

As the name implies, with mobile first design you create for your mobile experience as if it were first, and use this exercise to refine and improve the desktop version. You don’t have to start from scratch to do this. As French novelist Antoine de Saint-Exupery said, “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away,” and this is the right line of thinking for mobile first design.

Keep the end goal in mind first, above the design. The design should serve the purpose of what you are creating. Navigation should be kept within the context of your website or web app, and it is less important than content. To limit page load – and any jarring behavior when resizing windows – try to keep the design between device views as similar as possible. This will also offer users a consistent experience across their devices.

Mobile First Development

In developing for mobile first, it’s always good to remember what you don’t know. Don’t tie the screen size to the input method. You can’t assume that a small screen means touch input, or that a large screen means mouse input (phones can have styluses, desktops can have touch screens.)

Also be careful not to hide critical functionality behind keyboard shortcuts or gestures. With CSS, think min-width and not max-width, and have your default styling be for the smallest devices. Have media queries for each breakpoint upwards.

When you absolutely do need to know about the features of the device your website or web app is displaying on, JavaScript offers powerful feature detection. You can check for touch capabilities, location support, CSS media queries, etc. Just be aware it adds processing overhead. You should lazy load as much as possible using feature detection. This can include scripts, CSS files, images, or any asset.

By preparing your design for any screen using mobile first techniques, you can ensure that your website and web apps will be functional and beautiful on any device.

Nate Cavanaugh is the Director of UI Engineering at Liferay, an enterprise open source portal and collaboration software company.