What is Mobile-First Design?

We Live in the Mobile Era

On the streets, in restaurants, on the bus, in line... Everywhere you look, people are using mobile phones. From children at a very young age to businessmen and middle-aged seniors, it seems we are glued to our smartphones from dawn to dusk. The development of the mobile phone, which later evolved into the smartphone, changed how we communicate, shop, browse the web, take photos, and more. It revolutionized and forever changed our world. Companies recognize the importance of being mobile-friendly. More and more websites are adapting to small screens or getting dedicated native apps. Let's face it: your business cannot perform well if your website doesn't work, no matter what industry you are in. That is why the mobile-first approach to web development emerged and is here to stay.

What Is Mobile Design?

Some time ago, websites were designed for desktops. Features, functions, special graphics, audio and visual effects were tailored to large screens, providing a great user experience but requiring faster internet connections. Traditional industries still focus on desktops, but in 2019 that approach doesn't work.

In response to the popularity of mobile phones with built-in browsers, the concept of "mobile design" appeared. It means the site will display on a small screen, but don't expect it to look great. Those sites that open on a mobile phone look exactly the same as on a large screen, requiring zooming in and out to navigate between pages — a user experience killer.

Then responsive web design came to light. It is the process of creating websites that work on any mobile device with any screen size without needing to zoom in or out to see all content. Thus, the site content and user experience are preserved.

But it went even further with mobile-first design. So what is mobile-first design and why is it so important? It's simple. Mobile-first design is literally sketching, designing and developing sites for mobile devices, then scaling them up for larger screens.

Benefits of the mobile approach include improved Google ranking — since 2018 Google switched to mobile-first indexing and ranks the mobile version of a site before the desktop version — and increased mobile conversion: the better the mobile site, the more likely customers will return.

Principles of Mobile Web Design

Mobile-first design follows principles that in many cases differ from traditional site design.

Content-First Approach. When implementing mobile-first design, content is paramount because mobile devices have the greatest screen size limitations. The principle "the longer the content, the better" does not apply here. Mobile content should be clear and concise, containing all necessary information at a glance.
Simple Design. A simpler design means less time and effort spent on coding. Creating a mobile site, we can forget about pop-ups, hovers, and other fancy features specific to desktops. Here we have to "think" with fingers, not a cursor. Also remember about one-handed users – everything should be easily accessible.
Performance is Key. When creating a mobile site, performance should be a priority. I cannot emphasize enough how important it is that your site runs smoothly on smartphones, especially given connection speeds.
Convenient Contact. An easy way to get in touch with you is crucial for good customer service. Consider adding a chat to your site so your clients get instant answers to their questions, which is certainly easier on a mobile device than sending an email.
Visually Appealing. Graphic design is just as important for mobile-first as written content. Images should be vibrant, eye-catching, with contrasting colors. This makes your site more memorable and easily distinguishable. However, remember that images should not be too large (since performance is key).

Implementing Mobile-First Design
1. Assessment

To start, you need to assess the existing site (if you have one). You can take the Google Mobile-Friendly test to see if your site is ready for the next step. If not, look for errors such as slow loading times, large images, broken links, pop-ups, etc.

2. Use Media Queries – They Are the Technical Heart of Responsive Web Design

To account for different viewing conditions, responsive web design dictates applying different rules under different conditions, typically depending on the width of the browser or device viewport.

How do you define these rules? Media queries. Media queries are CSS commands that specify the conditions under which other CSS selectors take effect. For example, one media query might tell the browser: "apply rules 1-10 when screen width is up to 320 pixels", and another: "apply rules 11-20 when screen width is 321 pixels or more".

Media queries are easy to identify: they start with "@media". Browsers read the CSS rules (e.g., selectors) listed between the curly braces { of the media query }.

There is no technical limit on the number of conditions a media query can display. Such a query is perfectly valid:

@media screen and (min-width: 480px) and (orientation: landscape) and (aspect-ratio: 4/3) and (color: true) { ... }

Media queries provide us with many options; here are a few: Aspect-ratio: comparison of browser window width and height. Color: whether the device has a color screen or not. Color-index: number of colors the screen can display. Device-aspect-ratio: comparison of screen width and height. Device-height: number of pixels displayed by the device vertically. Device-width: number of pixels displayed by the device horizontally. Height: number of pixels displayed vertically in the browser viewport. Monochrome: number of bits used by pixels on a gray-scale screen. Orientation: device's current horizontal or vertical position. Resolution: number of pixels per inch or centimeter displayed on the screen. Width: number of pixels in the browser viewport horizontally.

Writing custom styles and media queries gives us full control over layout and the minimum necessary code, without extra libraries and frameworks, which I prefer in my work. But if you don't care, you can just use a CSS framework like Bootstrap, which also has built-in media queries.

3. Choosing the Right Framework

An HTML framework will be useful for improving mobile site design. A framework using columns and rows makes it easier to optimize sections for any screen resolution. Currently, the most used CSS framework is Bootstrap, based on a 12-column grid, which includes components and options for laying out your project, including wrapper containers, a powerful grid system, a flexible media object, and responsive utility classes.

4. Alternatives to Heavy Complex Frameworks

There are also Sass extensions for creating flexible layouts, such as Susy and Breakpoint. Creating responsive layouts can be challenging due to math calculations, so designers often turn to frameworks and/or Sass to simplify the process. Many frameworks are based on a 12-column grid, but a responsive site does not always fit that structure. In that case, we can simply use Susy and Breakpoint. More details can be found here.

5. Set Appropriate Body Text Size

Differences in font size should be reduced for smaller viewports. Viewports also differ not only in physical or pixel sizes. Consider how the user interacts with the display. Generally, font scale should decrease when moving from desktop to mobile, but it's also obvious that people usually hold phones closer to their face. Think about how people will perceive the content, and adjust your typography accordingly. For example, on desktop there is less space to play with, but the user is farther from the screen and can read much smaller text. Your typography should scale to account for reading habits.

Declaring max-width for content and font-size via media query allows us to control the number of characters per line on different devices. A guideline is 45 to 75 characters per line. Longer lines, up to 95 characters, are read faster on screen, but it's unclear whether readers enjoy reading more or understand the text better.

6. Use Not Only Size But Visual Variation

Page layout and typography should work together harmoniously across different scales. For example, in expansive desktop design, headings can be several times larger than body text for impact and drama. On mobile screen, large headings simply push body text out, breaking cohesion and requiring excessive scrolling.

7. Remember Responsive Images and Videos

By responsive image we mean a method of providing the browser with multiple image sources depending on screen density, the size of the image element on the page, or a number of other factors.

Devices of different sizes require different resolutions for the same image. The problem is that images have inherent dimensions. We cannot stretch a 500×250 pixel photo beyond 500 pixels wide because it will become pixelated.

Retina displays and mobile devices complicate matters further. To make images responsive, you now need to consider three factors:

Device dimensions
Image dimensions
Device screen resolution

The idea of resizing images by the browser has been a key part of responsive web design from the start. CSS and HTML already allow us to solve this problem and load the appropriate image on the appropriate device using the srcset and image-set() functions.

Another thing is that we should compress images before placing them on the page. To reduce file size as much as possible, you can use an online tool like TinyPNG.

8. Responsive Typography

Choose fonts wisely – working across scales requires even more effort from fonts. Select fonts sparingly. Don't overload on fonts; two or three different typefaces are enough. Be sure to test the actual font in the browser on different platforms for appearance, page weight, and rendering speed. Layout can ruin the most careful typography. Remember white space around words – where the eye can rest – and the use of imagery. This is where the responsive designer must be especially attentive. On a narrow screen, images can degrade readability. A floating image can wrap long words beneath it instead of beside it.

9. Adjust Line Spacing

Line height, traditionally called "leading", is often neglected. What is sufficient for lines to be clear at one scale or dimension may be too large at another, causing the reader to lose focus when trying to move from one line to the next. Nobody likes reading between the lines. Remember to optimize line heights at different breakpoints.

10. Responsive Content

For layouts to look visually "right" and to manage line length, width values and padding should change depending on viewport size. For example, when setting breakpoints between multi- and single-column layouts, a wider column with horizontal space can be