Loading...
New webinar: "The Remote Job Search: My Microverse Journey" with graduate Paul Rail
Watch Now

Using a Mobile-first Approach means designing or developing an online experience for mobile, prior to designing it for desktop or another device (ie. tablet, iPad). This approach is essentially the opposite of designing an app for desktop first and then scaling it down for mobile afterward.

The main objective of using mobile-first is to shift the workflow from designing the desktop first, to addressing the mobile design straight away.

Why A Mobile-first Approach Is Better Than A Desktop-first Approach

With the evolution of technology, there’s been a major shift of traffic from desktop devices to mobile devices. The statistics paint this picture even better; in 2013, 17.4% of web traffic came from mobile phones but as reported in February 2021, mobile traffic has gone up to 55.56%.

From a developer’s point of view, with the mobile-first approach, you get the benefit of scaling up rather than scaling down. 

For example, if you were designing something for a desktop, and then thought it should also be adapted for a mobile platform. You would then scale it down to the mobile platform, but the design and experience won’t be as good. On the other hand, scaling up will give you the benefit that a well-functioning mobile product would have all the features which will act as additional elements, rather than removing elements from the platform.

Building Mobile-First With Bootstrap

Bootstrap’s ability to make a project using the mobile-first approach is one of the most brilliant aspects of it. To better understand this, imagine you are shopping for clothes from your favorite clothing brand online. You are browsing using your phone, but it’s simply not as good of an experience on the website as it is on your desktop. You’ll be frustrated, and the clothing store may lose a customer. Hence the mobile-first approach is preferred, and very important for online businesses of all sizes.

Most efficient companies have already switched to a mobile-first approach as they don’t want their users to have a poor experience on their websites. This is because nowadays, the way a company’s website is presented has the same importance as their logo since it can have a great influence on the audience.

Creating a Design Using the Mobile-first Approach with Bootstrap

As we’ve now covered the mobile-first approach and how it is better than the desktop first approach, we will move on to how to build using a mobile-first approach.

There are five key techniques that are important in bootstrap that are outlined below. For instance, we will explain how to use bootstrap in order to alter the dimensions of a box, how to change the typography and so on, with a mobile-first approach.

1. Altering the Dimensions of the Box 

As you might know, every element in the HTML is represented as a rectangular box. That is then interpreted by the browser with the help of the CSS box model or the standard box model. The function of these box models is to recognize the expansion of your elements in the area, which is also termed as the ratio of that actual content to the specified border.

Altering the dimensions of your box termed “box sizing” plays a key role because the behavior of the box model is dependent on its size and spacing. By default, there will be a “content box” that comes with the original dimensions of width and height, in addition to the margins, padding, and borders. So if you want an element to occupy 50% of the screen with a margin of 5px, you will have to define it as : 

width:50%; border-width:5px;

However, there is something else you should keep in mind -- when you implement this command, your results will show with the total width of your element as 50% of the screen, with an additional 10px added to the edge in case your screen is 100px.

Thus, it’s really important to understand the box-sizing and choose it accurately as it also has an impact on the size of the properties being added to the defined width.

2. Changing the Typography

A fluid layout is one where the size of the web page design changes as the window size is changed. In order to have a fluid layout, you will need to use relative measures such as %, em, rem, vw, vh. These measures can be used as the below (source):

  • EM: EM is the relative unit of distance that is calculated in relation to a particular unit. The value of this measure is in correspondence to the size of the parent element.
  • PX: This measure is used to unchangeable values like the background, text shadow and font size.
  • REM: Just like the EM, REM is another relative distance measure. The value of REM is related to font size.
  • Viewport units (source): Viewpoints like vw, vh, vmin, vmax are used when dealing with containers, images, space bars and fonts. This is a really elastic unit. The change here would be 1% of your viewport height. For example, if your total height is 520px then 1vh will be equal to 5.2px. Similarly if the width is 220px, then your 1vw is equal to 2.2px.

As you can see, changing the typography according to the aforementioned points is very important. Consider an example where we choose a font size of 16px and fixed units can be adjusted using the calculation: size ÷ context =result.

3. Choosing the Viewports

By viewports, we mean the area of your computer where the website is displayed.

{% code-block language="js" %}
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
{% code-block-end %}

When the configuration setting is changed, this viewport enables you to define the initial resolution of your website.

4. Defining the Break Points

You need to learn how to define points in order to make substantial changes to the layout of your page. This can be done by applying the Media Queries.

Media Query is a technique in CSS that can be used to apply different CSS styles based on a few particular rules, such as the viewport width.

Consider an example where you need to display an element on devices with rather large screens, such as a desktop. Here’s how you would do it:

{% code-block language="js" %}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { … }
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { … }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* banner displayed only for desktops */
    #banner { display: block; }
{% code-block-end %}

Besides the rules of size that were implemented above, rules such as screen aspect ratio, resolution, orientation, and others can also be defined.

5. Using Scalable Vector Graphics for your Images

Scalable Vector Graphics (SVGs) are used to define vector-based graphics for the web. They are used for two dimensional objects which can be static, dynamic, or even animated depending on what you are trying to do. In the event your browser doesn’t support SVG, you can still integrate them by using the object tag to create the image.

Here’s an example where SVG is used:

{% code-block language="js" %}
<object data=”svg-image.svg” type=”image/svg+xml”>
       <img src=”image.jpg”>
     </object>
{% code-block-end %}

If you prefer to listen to my reasoning, you can listen to the video below.

In Conclusion

Now you should understand why it’s best to use the mobile-first approach, the benefits of it over the desktop-first approach, and the five key things you need to know to create a design using the mobile-first approach. 

All you need to do is to keep learning and practicing these skills, and soon you’ll master them.

Happy Coding!


Subscribe to our Newsletter

Get Our Insights in Your Inbox

Career advice, the latest coding trends and languages, and insights on how to land a remote job in tech, straight to your inbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.