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.
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.
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.
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.
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.
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):
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.
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.
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.
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.
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!
Umair Arshad is a curious person who enjoys contributing to the software industry.
Career advice, the latest coding trends and languages, and insights on how to land a remote job in tech, straight to your inbox.
