Designing with a Mobile-First Mindset

The greatest benefit to having a mobile-first mindset is you are thinking without the visual bloat. Mobile users want information fast. They don’t want to hunt. When you get to desktop, your UI is already end-focused. An optimized mobile experience will keep users on your site. Would it surprise you, the numbers don’t lie, that a third of users in the “Mobile Path-to-Purchase” study used mobile exclusively (didn’t even touch a desktop)?

Most responsive design tutorial/guide sites I see are all about the code behind the design, and not the design itself. That makes it very difficult to explain (especially when you get into design principles). One of the trickiest I’ve come across is the “mobile-first” mindset. When I get in front of Photoshop and I’m ready to start concepting, I don’t start with mobile first. I certainly think enough about it. The biggest downfall of web designers these days would be for the ones where their skillset is strictly design with little/no experience coding (and/or no desire to). I can’t tell you enough how important it is to understand basic fundamentals of code. It would definitely make all those tutorial/guides more beneficial and meaningful.

So here are some tidbits of knowledge when sitting down and starting a design (assuming you don’t code), with a mobile-first mindset:

• Realize that type don’t scale responsively, it wraps. It’s like changing the margins on a word processor. The biggest problem is when you have type that doesn’t easily wrap (long words). That said, there are utilities developers can plug into the site like FitText (which are only meant for headlines). It’s not always the best solution to fill a site with a whole bunch of JS fixes when it could be a design-stage solution. Developers can use breakpoints (varied sizes per set device-width), but the fewer the better if you can. Why? There are so many devices out there it’s impossible to hit all of them (see this article on Medium on breakpoints and designing responsively). Medium’s best advice: “The best screen size to target is every size.” The best way to do this? Limit your type sizes and fonts. See Google’s article, where they say to limit your number of fonts and sizes. I like to stick with headings (h1-h3 are typically all I need) and standard paragraph.
• Realize that images don’t scale unless developers set them to (like width:100%;). When they do scale, they are going to set a whole lot smaller on a phone and a whole lot bigger on a retina display. It also means when you design, you need to keep in mind you’re going to have to have images that while small in desktop, will most likely need to be large in mobile (767px).
• When you do bottom-up design, think about how the elements will shift/move when you scale. Real estate in mobile is very precious. The goal isn’t to make people scroll past pictures to get the content. Developers also want to make sure the images loading on mobile are proportionate to their desktop counterparts (square works better than thin landscape on a portrait-view phone). This forces you to prioritize.
• Where does your menu go and what does it look like? Hamburger icon, or “Menu” text? If you have some snazzy and revolutionary menu in desktop, make sure it can translate to mobile (if you don’t actually design in mobile first).

Mobile is your foundation. You make it lean, fast, and beautiful. Then you add more bells and whistles when the screen gets bigger.

One thing useful to do (regardless of your mindset) is make your canvas size the size of your browser when it’s full-width. So if you’re on a pretty retina display, do the exact same thing. I started doing this about five years ago when I realized that as when I designed in a 960px container, things just looked odd (and small…and clients complained). Then of course, Jerritte would always tell me (back when I only showed him stuff for his UI input and he wasn’t my “boss”) to stick the design in a browser. When you do that, and you see the grid/guides in the center, it helps you also visualize your content (and prioritize elements as you can see everything that will be displayed to a normal desktop user). What is “in the middle” is not the mobile layout.

Don’t think of mobile-first as a restriction. Think of it as a challenge to consider everyone’s individual experience on the site equally. Don’t make mobile an afterthought.