Mobile first design is the idea that, when designing an application, you should start by designing the mobile version of the program, and then scale up from there.
There are a number of reasons that mobile-first is a popular strategy. For one, as developers, you want to ensure that you have all of the content and functionality out before any additional bells and whistles. By being confined to a small screen, you can focus on the design and features you really need, and as you scale up, you can include any additional features you want to use to improve your site. This is called "progressive advancement", and is the opposite of the strategy of "graceful degradation" (the idea that you start with the full web application and scale down from there). (More information about these terms can be found here).
Another important element of mobile-first design is that you place content first. If a program does not have quality content, then it doesn't matter how well designed it is--no one will be able to use it. Keeping design and features to the necessity when you're starting your application enables developers to focus on including the best content possible.
Mobile-first design also is important when we consider how widely used mobile phones are, and how mobile phones are many people's primary means of accessing the internet. According to the Pew Research Center, "Today roughly one-in-five American adults are 'smartphone-only' internet users – meaning they own a smartphone, but do not have traditional home broadband service." Smartphone reliance is particularly high for individuals under 29, people are are not white, those who are lower income, people who do not have a high school degree, and those who live in rural communities. By prioritizing mobile first, developers enable programs to be more widely used, reaching a broader audience.
If you are implementing mobile-first design into your application, you can test how your program looks in different devices through Chrome Dev Tools. When running your program in Chrome, type option-command-J, followed by command-shift-M. Then, in the toolbar at the top of the screen, you can try out different devices.
There are a number of things to keep in mind when doing mobile first design. When styling your application, it's important to not use pixels to explain dimensions or sizing, and to instead use ems and percentages. An em unit is equal to the font size for a particular element. If you have text where the font size is set equal to 20px, then 1em is equal to 20px. If you want to ensure that that text has a left margin of 40px, then you'd set the left margin to 2em. If font size isn't specified, the default is 1em is equal to 16px. You can find a handy conversion calculator here.
Why is a pixel on a phone's screen not equal to a pixel on a computer screen? That's because the pixel unit in CSS is actually a bit of a misnomer. According to MDN documentation, a pixel in CSS is "a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible." It goes on to say, "As such, it generally suffices to say that when the unit px is used, the goal is to try to have the distance 96px equal about 1 inch on the screen, regardless of the actual pixel density of the screen. In other words, if the user is on a phone with a pixel density of 266 DPI, and an element is placed on the screen with a width of 96px, the actual width of the element would be 266 device pixels."
This means that 20px on your phone won't look the same as 20px on your computer, and so sizing your components with pixels won't be a reliable way to do design. Instead, using ems or percentages enables you to better control how your components will look on any screen.
In this blog post, I've only touched on a few of the important elements to consider when incorporating mobile-first design. You can find more helpful hints here:
Top comments (0)