When discussing the process of designing and developing a responsive website, you’ll definitely come across the concept of mobile-first. It has changed the way the digital industry works and has become a buzzword in boardrooms and sales meetings.
What’s Mobile First?
In the past, everyone only used desktop computers. With a greater number of different screen sizes today, responsive design ensures that your site works on all devices. Initially, the process was to design for desktop, and then the mobile component was seen as a scaled-down secondary requirement. All of the desktop features that were hidden in the mobile site still had to load, and websites built like this were a lot slower. Smartphone and tablet traffic combined make up about 60% of all online traffic, so businesses must make responsive sites a top priority.
Team Mobile First
There are definite advantages to mobile-first that we can’t ignore. A mobile screen is roughly 80% smaller than a desktop screen and requires fewer features. This really makes screen real estate hard to come by and each pixel needs to make an impact. It’s easier to talk about superfluous content and features when you start a project out minimally. The idea is that, as the screens enlarge, you can keep carrying that same focus throughout as decisions are made.
Happily Ever After, Right?
So, now we have these beautiful mobile sites that render quickly and only have things we need, life is perfect, right? Nope, now the other sizes still need to be made because, sure, there are more and more mobile users now, but desktop users still matter.
At the desktop stage, teams try to add meaningful content, features, and elements into these larger screen sizes, or they use that similar secondary requirement style of scaling-up the mobile-sites for the larger sized desktops. However, their database or CMS wasn’t built in order to handle these newly-added features. The idea is to focus on on both sizes from the start.
Each screen size has various opportunities to exploit and should be planned for accordingly. Mobile devices offer more possibilities through touch and location, and desktops or laptops have more hardware capabilities, larger screens, and a cursor. Typically, mobile users are more on-the-go and expect things quickly, while desktop users usually have more time to explore a website.
Analogies Explain Things
Think of this as if you’re moving from a mansion to a tiny apartment; you won’t be able to fit all of your stuff. You’ll either end up leaving it all on the curb or making your apartment cramped. Like, furniture-in-your-bathtub type of unusably cramped. If you’re moving from a tiny apartment to a mansion, you won’t have any problem fitting in all your stuff, but you’ll have a pretty empty feeling mansion. If you keep both in mind as you move, you can plan accordingly and be able to achieve a more successful balance.
Each Project is Different
So, how do you decide which approach to take? The type of product has a big impact on that answer. Mobile-first is just fine for a one-channel product or company. If a company’s product relies on mobile function, then they obviously can concentrate on that aspect. They’ll gain users and respect, then the desktop can come later. For a company that is multi-channel or multi-product, it might not make sense because they need optimal presence on all devices. There, I’d argue that web and mobile should be designed alongside of each other.
How We Do It
When we take this mobile and desktop at-the-same-time approach at Webonise, I start designing the desktop as one page, and then jump to the mobile design of the same page. This creates the chance that I might run into elements that I thought would work fine on mobile, but once I got to it in Photoshop, I discovered that there’s a better way. I have realized that this back-and-forth method is key for this moment in technology. As a designer, I’m able to provide my team with the full context: here’s how this page will work in desktop, and here’s how it’ll work in mobile. Either way, we talk about it with all devices in mind, allowing space to explore the fallbacks in order to make the best decisions for the overall experience.
What’s most important is that the experience is seamless across the board. After all, your desktop user today might be your mobile user tomorrow, and your tablet user next week.