Chapter 3. Yes, You Should Go Mobile First
You should be asking yourself, "I thought that we should first do the layout in mobile and then go to the desktop version. Why are we in the opposing way?"
Sorry, you are right! We should always go mobile-first. We went the opposite direction just for learning purposes and now we are going to fix it.
In the current chapter, we will focus on mobile design and site responsiveness with the help of the Bootstrap framework by learning how to change the page layout for different viewport, changing the content, and more. The key points of the chapter are as follows:
To figure out what, we will continue with the landing page that we developed in the last chapter.
Maybe you have asked yourself (or even searched for) the reason for the mobile-first paradigm trend. It is simple and makes complete sense for speeding up your development.
The main argument for the mobile-first paradigm is that it is easier to make it than to shrink it. In other words, if you make a desktop version of the web page (known as responsive design or mobile last) first and then adjust the website for mobile, it has a 99 percent probability of breaking the layout at some point and you will have to fix a lot of things.
On the other hand, if you create the mobile version first, naturally the website will use (or show) less content than the desktop version. So, it will be easier to just add the content, place the things in the right places, and create the fully responsiveness stack.
The following figure tries to illustrate this concept. Going mobile last, you will get a degraded, sharped, and crappy layout and you will get a progressively enhanced, future-friendly...
Bootstrap and the mobile-first design
In the beginning of Bootstrap, there was no concept of mobile-first. It was first used for responsive design web pages. With the Version 3 of the framework, the concept of mobile-first became very solid in the community.
The whole code of the scaffolding system was rewritten to become mobile-first from the start. They decided to reformulate how to set the grid instead of just adding mobile styles. This made a great impact in compatibility between versions older than v3, but was crucial for making the framework even more popular.
As we saw in the first chapter, to ensure the proper rendering of the page, set the correct viewport at the <head> tag:
How to debug different viewports at the browser
Let's see how to debug different viewports using the Google Chrome web browser. Even if you already know that you can skip this section, it is important to refresh the steps for doing that.
First of all, open the current landing page project that we will continue working with in this chapter in the Google Chrome browser. In the page, you need to select the Developer tools option. There are many ways to open this menu:
Right-click at any place on the page and click on the last option Element inspector
Go to the setting (the sandwich button at the top-right of the address bar), click on More tools, and select Developer tools
The shortcut to open it is Ctrl + Shift + I (cmd for OS X users)
F12 in Windows also works (this is an Internet Explorer legacy)
In the Developer tools, click in the mobile phone on the left of a magnifier, as shown in the following screenshot:
It will change the display of the viewport to a certain device and you can also set...
First, we will stop the line from breaking in the Ctrl + D text in the second row of our design. For fixing this issue, we will create our first line of CSS code. Add the <head> tag to a custom CSS file. Remember to place it below the bootstrap.css import line:
In the base.css file, create a helper class rule for .nowrap:
In the HTML file, add the created class to the <kbd> element (line 43):
Reload the page and you'll see that one problem is solved. Now, let's fix the horizontal scroll. Can you figure out what is making the unintended horizontal scroll? A tip, the problem is in the table!
Tip
What is the
meaning of the white-space CSS property?
The white-space property specifies how whitespace is handled inside an element. The default is normal, where the line breaks will occur when...
Creating the landing page for different devices
Now that we have fixed everything and learned some things about media queries and CSS3 properties, let's play with our layout and change it a bit for different devices. We will be starting with mobile and go further until we reach large desktops.
To do so, we must apply the column class for the specific viewport, as we did for medium displays using the .col-md-* class. The following table was presented in the previous chapter to show the different classes and the resolutions applicable for specific classes:
