The Problem With Mobile First
I know that looks like a loaded statement. I mean Mobile First is the rallying cry for the luminaries in our community right?
It embodies what is generally accepted as current best practice, since the majority of the people who will hit your site or app will be on a mobile device. The thinking goes we should begin our designs from this viewpoint and "scale up" for other devices.
If what people actually did was to consider each of the screens that their content will be displayed on, and design accordingly we would have no problem. In reality what happens is that, for the most part, people fall into one of two camps:
- Design for a desktop experience, using a responsive framework to handle all the breakpoint decisions. This camp considers stuffing navigation behind a hamburger menu, and setting some specific widths to be good enough.
- Design for a mobile device, and then throw some extra stuff around for those who hit the site/app on a larger device.
In both camps the design and architecture focus is on a specific situation. Once this situation is taken care of, then we kind of just shuffle things around for everyone else. As long as it looks "good enough" the job is done.
To me, both of these approaches leave much to be desired. We shouldn't be designing for a specific screen size, we should be designing for experience and patterns of use. The way someone consumes content on a mobile phone is different from a tablet, which is different from a laptop.
When we are creating a responsive design the questions should be "How will someone on a 4.7 inch screen want to read my website?", not "What size should I make these divs if someone looks at my site on a 4.7 inch screen?"
When I started crafting this design, I thought about what feeling I wanted, regardless of the device, and designed from there. Instead of looking at what to strip away, or add in, I thought about where elements of the design should live to make the experience of consuming my content best.
Once those things clicked a design approach for each device became clear. It isn't enough to allow your framework to collapse some columns and float a few divs for you. Make no mistake, design is intentional not accidental.
People tend to freak out about things like screen size and density. I tend to freak out about harmony and consistency.
I think if more people stopped for a moment and thought about how they would like to consume content on their phone, or tablet, we would have more interesting, varied and compelling experiences to be delighted by. Instead we have a lot of sites that are the same.
When did this become the cookie cutter age? I sure didn't get the memo.
Enjoyed this article? Follow me on Twitter.
