Mobile-first or Desktop-first Design?
Mobile-first in planning, Desktop-first in execution.
Mobile-first is a fine idea, but starting design execution at the smallest screen can lead to a colder experience when scaled up. At Blenderbox, an interactive design agency in Brooklyn, NY, we’ve operated on a “mobile-first” design philosophy for a little while now. One thing we’ve realized is that when you start at the smaller, utility-focused level, you lose a certain sense of visual exploration. Sure, your micro-interactions are on point, but is the actual visual language engaging at every scale? Does it hold up to scrutiny when more can be seen at once? When everything starts small, the answer is often “no” when things get big.
As a concept, “Mobile-first” is nothing new. In interactive design, it refers to the practice of designing a web application with mobile hardware at the forefront of your mind. In theory, you’re creating a streamlined, efficient design that scales up to larger screen sizes. The decision to go down this route is a mixture of site-specific analytics along with the growing trend of people using mobile devices as their primary form of web interaction. If the brunt of a site’s user-base are on their phones, it makes perfect sense to cater to them, ensuring they can access the most important information with ease and delight.
However, that speaks largely to content hierarchy and site function. Where does the look and feel of the site fit into that? Well, we’ve found that starting the design at the mobile-level creates a certain homogenization of the look and feel. The focus is clarity and ease-of-use, using design best-practices to guide the approach. Margins follow an optimized pattern; design flourishes are diminished since they can be distracting; stacked content forces hierarchy and obviates some distinguishing elements.
These best-practices are important in making a usable design for mobile and desktop, but starting at a zoomed-in level leaves little room for visual experimentation around the content. The net result is hyper-functional and attractive on smaller mobile devices, but when you scale up, that razor-sharp focus leaves a lot of open, inactive space.
Depending on the type of site, that can prove to be fine. If it’s a content-rich site with all sorts of news items, things will fill in most of the gaps. But for sites with a more singular purpose, such as a non-profit marketing site, the “desktop version” may feel empty and malnourished. Even sites flush with content will lack a certain character. This leaves you with the task of adding elements to fill in the gaps. Fun, but inefficient. You’re now adding details for the sake of adding details; you’ve planned everything to be as crisp and efficient as possible, but now you have five times the space and no toys to play around with in it.
So what can you do?
Well, at Blenderbox, we’ve modified our approach. We continue to start with mobile for planning and wireframing. Our wireframes largely focus on the mobile aspects, so we can establish a clear content hierarchy without worrying about the visuals. We then expand that out to see how it can scale up, and whether we have room for more detail when there’s leg room. As we start to flesh out the look and feel in design, however, we start big (desktop view, for instance) and work our way back down to mobile-size. By starting with the larger canvas, there’s more room to explore and be innovative in how we communicate our client’s message. The important thing is we have this plan, this user-focused, mobile end-goal, which gives us the freedom to take other risks in design. We know where the designs need to be most flexible as we create the maxed out view, so that when it scales down, it does so gracefully.
After all, it’s often wise to refine or remove elements before inventing news ones.
In exploring and experimenting with the content and visual language, we can tease it apart to find finer details to highlight. We can then exaggerate or diminish those aspects when the design needs to get smaller, sharper, and simpler.
By planning for the small-scale early but designing the look and feel at a larger scale, we keep the big picture in sight. This leaves more room to experiment, refine visual details, and hone in on what makes the content unique. It becomes easier to capture the essence of the project, creating a perfect blend of practicality and personality, no matter the size.
