Let’s dive into a topic not unfamiliar to many of you internet gurus these days, mobile-first design. The idea of mobile-first is pretty simple, but the result of implementing this in your product has larger reaching implications beyond you site just “working on all devices”. I’m not here to spit out a bunch of statistics about why mobile is the next big thing, you can find those elsewhere.
So What is Mobile-First Design?
Historically, most web applications prioritize the “Desktop” user experience, and leave the mobile user experience as a secondary feature to complete later. In recent years though, the industry trend has been to flip the design approach to mobile-first and work up to desktop versions.
Your product needs to goes where your customers go
Ease of use is a key factor for new product adoption these days. When evaluating new products and tools you can bet the average SaaS customer will be looking to see if your product works on mobile.
We’ll use Trello as an example. Here you can see their dashboard used to manage projects and organize anything. It would be safe to assume a majority of usage comes from desktop users.
However people on the go also need to stay organized and access their content so having a simple experience translate from desktop to mobile makes everything work together and keeps customers happy.
I can’t tell you how many times I forgot to do something in an application on my desktop and visited the site on my phone to find that they only made it “just work” on mobile.. but have a sub-par, clunky experience.
Product Fail Yeti says: Don’t make the effort to build your website for other devices. Rotary phone sales are sure to pick back up. Can you believe that guy? Don't listen to the Yeti. #FightTheYeti
Product Fail Yeti says:
Don’t make the effort to build your website for other devices. Rotary phone sales are sure to pick back up.
Can you believe that guy? Don't listen to the Yeti. #FightTheYeti
Mobile-First design makes a product stronger
Product Success is about what happens on the periphery of your product to make the overall experience for your customers better. There are a few key benefits to mobile-first design that may not be outright obvious to product creators.
1. Establish product credibility
First impressions matter more on the web than anywhere else. If your product doesn’t present a professional look on mobile, your customers will assume your product isn’t up to snuff. If you’ve made effort to make your website responsive and delivers the right experience at any screen size your customers will notice.
Pet peeve when news websites are not mobile friendly, taking forever to load and have terrible UI/UX. So many great devs, hire one!
Hard to believe your website is not mobile friendly… https://twitter.com/wpbeginner/status/663181703754723328 …
2. Promotes solving problems for a streamlined experience
When designing mobile-first you are forced to focus on core content and functionality. With limited space you better deliver the functionality your customers need up-front and easily accessible. When done right this translates to making your desktop service just as usable if not more.
Take MailChimp as another example. When you view MailChimp on a mobile device, you are presented with the information you need and not much more.
When we bump up in size to desktop we add in more features like ordering, mutli-select options, filtering and other features that are “nice-to-have” but essential for mobile users.
3. Forces you to think about the job to be done
When you think about how your customers will use your product and in what context you focus on what is important to them. You will discover what is really useful and what features might be left unused, clunky, and not fail to add tangible value.
Taking a simplified approach to your product and content from the start helps keep your product lean and flexible. Have you heard the phrase “If I had more time, I would have written a shorter letter?” For mobile let’s translate that to “If I had more time, I would show the user less“.
Building your site mobile-first is more about the process than the tools, but here are some things to get you started.
Getting your feet wet with a grid systems
Implementing a grid system is a relatively easy first step towards being mobile-friendly if you already have an established website and style set up.
Starting from scratch with a framework
If you are starting your website from scratch it’s probably in your best interest to start with a framework that has the bells and whistles for mobile ready for you. Just remember these are meant as a starting point, any good product will change to fit its customers needs.
Closing thoughts on thinking mobile-first
Mobile-first design thinking is bigger than frameworks and layouts, because as I mentioned above it’s not just about the implementation. I challenge you to think not just mobile-first, but how you can exceed customer expectations on any screen size using the right interactions.
Share your experience with mobile development below. How has it helped you improve your customer experience? Did you see improved conversion or less churn after switching to a mobile-first approach?
Wrong form ID