“We're just now starting to think about mobile first and desktop second for a lot of our products” -Kate Aronowitz, Design Director Facebook
Traditionally, most web agencies strategize the desktop version of a website first and leave the mobile and tablet versions to be designed later. Even with the rise of responsive design, many designers are still working on the “full size” project first, then designing their way down.
There is a growing trend in the industry to flip this workflow around and prioritize mobile website design. Read on to find out why.
What is Mobile First?
Building a website specifically for people on the go means designing your digital presence using a mobile-first approach. This implies creating the concept for the smallest screen first, then working our way up. Designing with the smallest screen first is a great strategy for creating outstanding responsive or adaptive campaigns, experiences, and more.
Why Mobile First?
The idea is that your mobile interface is the hardest working part of your website design and therefore your digital agency should focus on it first. Having to design a full-size website for a small screen means flushing all the information to the bare bone of what users are looking for. It boils down to your most important business message and your most essential web features- think of it as the heart of your UX.
As mobile resolution has limitations (screen size, bandwidth), it forces your digital agency to prioritize your content.
Mobile-First = Content-First= User-First
Volume and Influence
If your website looks great on a mobile device, you can tap into the deep stream of users “on the go” or those who just use the mobile device more than ever. As mobile phones are becoming the most used device for browsing online (half of the world’s web traffic comes from mobile phones), more brands are realizing the importance of having a site that reads effectively on a smaller screen.
With Google’s algorithm and stats pushing mobile dominance, having a good responsive design should be high on your priority list.
Mobile users in numbers:
- There are over 10+ billion mobile web users worldwide
- In the U.S., 25% of mobile Web users are mobile-only (they rarely use a desktop to access the web)
Commerce:
- Amazon: over $136 billion spent via mobile devices in the past 12 months
- eBay: global mobile sales $2 billion in 2010, ~$4 billion in 2011, 9.5 billion in 2016
- Best Buy: mobile Web users are doubling every year.
Social:
- Twitter: 80% of active users access the site via mobile
- Instagram: Numbers of photos share to date: 40 Billion
- Snapchat: over 166 million daily users
- Facebook: There are 1.15 billion mobile daily active users
Looking at the numbers above, there is a definite shift from desktop users to mobile users. The reason: people surf the net on the go, on the bus, on the way to work, when they need to quickly check information.
Mobile UX Designed to “Feel Amazing”
Thinking mobile-first forces us to think about what’s really important. All the marketing clutter is removed from the start, and instead of animations, we focus on displaying your content in the most rational way.
The goal here is to:
- Reduce the distance as much as possible between user & content
- Make the mobile site reactive to users’ input
- Create a predictable, intuitive, guessable, realistic design
- Enable direct manipulation of objects & content (the user is physically swiping, tapping, interacting directly with your content)
- Reduce visuals that are Not content
- Leave users in total control of their experience
If there is a need for visually stunning web images, animations, and “eye candy”, these elements can be added to the desktop and tablet versions. But, to reiterate, you start conceptually with a very minimalistic strategy. This means creating a strong, versatile, and purposeful content is of utmost importance. You have to know your audience in order to display what is most important to them.
Online Products Should Be Designed for Mobile First
Mobile users sometimes require different content than desktop users. Device-specific information can be analyzed according to your business proposition. For example, a smartphone view should reflect your most popular or newest items on sale, it should highlight your calls to action with a single tap of a finger, and it should also create different scenarios for your UX path.
Keep in mind that most of your mobile visitors pay only partial attention to their screen, hold the phone in one hand and scroll down with their thumb. Your website requires a focused design to incorporate this behavior.
Smart Capabilities
Designing a mobile-first approach means also thinking in terms of innovation. A smartphone has many capabilities your website can explore, namely:
- Device positioning & motion
- Proximity: device closeness to physical objects
- Location detection
- Video & image: capture/input from a camera
- Dual cameras: front and back
- Responsive Multi-touch feedback sensors
- Orientation: direction from a digital compass
- Gyroscope: 360 degrees
- Audio: input from a microphone; output to a speaker
- Device connections: through Bluetooth between devices
- Ambient Light: light/dark environment awareness
- NFC: Near Field Communications through RFID readers
Why a Mobile-First Approach Works
“Human perception of time is fluid and can be manipulated in purposeful and productive ways” Chris Harrison
The digital landscape is increasingly interactive. It includes a vast array of mobile devices, smartphones, tablets, specialized devices, eReaders, TVs, Internet of things, traditional digital devices, desktops, laptops, tablets…and who knows what else is around the corner? The question is: how do we design a website or marketing campaign for all these different screen resolutions?
That’s what makes mobile-first a great approach. Starting with the most compact design covers all bases. Then adding enhancements, design elements, animations, conditional script loading, media queries, and other components will optimize the experience for different device users.
Is your website optimized for mobile users? Let’s boost your online image and sales together. For advice, say hello@edesigninteractive.com.