SAVAGE Episode 02

UI and UX
Monday, January 20, 2020

Mobile-First Design

And we’re back for another episode of savagery and purely informational, yet comical, satirical, and eloquently lyrical article on what you believe is good design. All of which is probably completely off, or - completely a home run. This week we’re going to cover the infamous and notorious mass murderer, Mobilius Primis, AKA “Mobile-First”. 🤭


Alright, we’ll get to the point and quit screwing around. We only have 5 minutes before you close this window and increase our bounce rate.


You’ve probably scoured the internet and researched similar terms like “responsive” or “adaptable design.” But the truth is, these aren’t similar terms. Designing mobile-first is a term that should only be tossed around when discussing applications, more web than native. If you think otherwise, cash us outside, how bout’ that? (Nevermind, that was so 2018).


We digress, apologies. So it probably isn’t native if you really think about it. Or maybe. It’s complicated really. In this case, let’s talk web-based platforms and applications.


But why?

In November 2019, Statista shows that at least 50% of the users worldwide that access the internet is through a mobile device, and the trend appears to have grown since the Q1 of 2015. Tablets not included.

In parallel, the demand in the market for user experiences that are optimized for mobile have also grown and continues to do so. People want to interact with technology in a very simple and easy way, just like how their common everyday mobile apps allow them to do so. Thus, the concept of ‘mobile-first’ was born - along with the rise of simple-minded hominids. And yes, they’ve been proliferating since. At a rapid rate. Like bacteria.


"Did you know the human brain has shrunk over the past 5000 years by roughly 10%?"


Fighting Back

We’re not going to. Instead we have to be inclusive of them. Since they make up the majority of the population. Instead, implement a solution. The easiest being to just reflect best practices of mobile web design. Most companies and startups make this harder than it needs to be. Let’s run through the top 3 cornerstone best practices that are the bare necessities to make sure that your platform is mobile-first ready.


Typography

Does your font-size use vw or vh? Yes, we’re judging.

The smallest font-size that your website or web platform should use is 16px. Do not go below this, its an accessibility thing. The world is getting blinder, just like you.

Keep it golden Ponyboy. Like the ratio. Not the Outsiders. Want to go up from that font-size? Multiply it by 1.618 and round it. Here we’ll do the math for you, and we’ve rounded it to what we prefer and like. Slightly biased, but after testing - hey, the results are magnifique.

16, 24, 34, 44, 65, 105, 175. We don’t really use the last 2 unless the text is simply a means of art at that point.

Bonus: Spacing Tip

Since we’re on this topic of Fibonacci ratios, reflect similar proportions in spacing between elements. Here’s the line up for that: 6, 10, 15, 25, 40, 65, 105, 175

"Did you know Domino’s was sued by a blind man since he was unable to order food on Domino’s website and mobile app. Let that sink in. Re-read that as many times as you need to."


Buttons

ABC. All Buttons Close. If your buttons aren't helping you close, then f**k you.

The number of times that we see the layout of a mobile website having a button that is 25% or smaller than the device screen width. This is absolutely ridiculous. The reason you put that ‘Add to Cart’ button is so that the user can be 1 step closer to making you a multimillionaire. But you’re incompetent and so you make the button small.  Of all buttons to make small. The one button that rules them all. It’s maddening and yet the easiest way to engage with the user to push your sales (or whatever outcome you want from the user).

To sum it all up, your Call-To-Action buttons, or “CTAs”, should always take up approximately 33% or more of the mobile device screen width. Please keep in mind this only applies to primary buttons and not secondary ones.

Use apps like Hotjar to get a heat map render of how users are interacting with your buttons. Hotjar is for closers.


Pretty Pictures

They can help you sell and boost engagement for your website. But when implementing a mobile first approach to your platform, keep in mind that the same picture that will be used on a desktop needs to properly be displayed on a mobile device. The hero image, for example, on the Apple website as shown below. The image used for the mobile screen size is a separate file compared to the one used on the desktop screen size version. Each image was created to properly render in their own unique device screen size based on a specific media query or fluidity.


The Takeaway

Think user first. Think experience first. Think mobile first.

Design your web and native applications mobile-first. Think otherwise, and you might as well outsource your entire project to India.

Remember, at the end of the day, bad design will always cost more than good design! 😉

Ready to create something awesome or transform your platform? Unlike anyone else in our industry, we can turn it around in less than 10 days, no matter the size of the project, and still cost 70% less than the national average creative agency price. Oh and all of our prices are up front, final, and transparent. So there's no random agency fees that we can sneakily add on overnight unfortunately. Strictly located in the USA. Beat that and we’ll get on the next shuttle SpaceX off of this planet.

Let’s talk!