Mobile first and controlling placement

~ micaktvrtko

CONTROLLING PLACEMENT

The ability to resize content based on screen size is extremely powerful. It allows you to ensure that the most relevant information is readily available to the user on a page, regardless of the size of device.

But there’s more to optimizing display for different device types than just changing the size. Sometimes you need to move content higher up on the page, such as a product name, or a “Buy it now!” button. In other scenarios, you need to push content down, such as detailed information, which isn’t necessarily as important to someone just browsing your page. In fact, you might even need to just hide it all together.

Bootstrap offers you complete control over the size, and placement, of content, across all devices.

You can use three main options for controlling placement in Bootstrap. Each option has a syntax similar to sizing content. You’ll start with col, followed by the abbreviation for the screen-size, followed by the option, and then the number of columns. For example, you can move content to the right 6 columns on extra small screens by using col-xs-push-6. Here are the options available to you:

  • offset
    • Offset will instruct Bootstrap to skip the specified number of columns before placing content. With offset, the skipped columns will be left blank.
  • push
    • Push will instruct Bootstrap to move content to the right a specified number of columns. With push, the columns that were left blank can be used by pulling content to the left.
  • pull
    • Pull will instruct Bootstrap to move content to the left a specified number of columns. With pull, the columns that were left blank can be used by pushing content to the right.

MOBILE FIRST

When designing pages, it’s generally a best practice to design for the mobile, or smallest, device first. It’s easier to scale content to a larger size, than it is to shrink the content. The process of designing for mobile devices first is called, creatively, mobile first.

Bootstrap is built with mobile-first in mind. When you use the different commands to control the size and placement of the items being displayed on your grid, it works best when you have the mobile layout defined, and then you use the different push and pull commands to control content placement on larger sizes.

Imagine the following scenario. Let’s imagine we have two pieces of information, or images, that we need to display to the user. Without focusing on the actual content, the scenario is this: I have content that I want to be on the left side for medium and large screens in Bootstrap terms (large screens), but on the bottom for extra-small and small screens (small screens). I also have content that I want to be on the right side for large screens, but on the top for small screens.

I’m going to represent this with text named DETAILS and LOGO, respectively.

Medium & large displays
DETAILS LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

Let’s start by building for the larger screens (medium and large). We can of course do this by just using the md abbreviation.

  2. DETAILS
  3. LOGO
  4. </div>

Now let’s add the code for the smaller screens. We can do this by using the xs abbreviation.

We start by pushing the left side content (Don’t highlight this) data 12 columns to the right, which should cause it to automatically move to the next row. Remember this is the default behavior with Bootstrap grids; if something goes beyond column 12, it is automatically moved to the next row.

We then pull the right side content to the left 6 columns. This will bring it back to the beginning.

We’ll finish everything by sizing each piece of content to take up 12 columns.

  2. DETAILS
  3. LOGO
  4. </div>

The result is not going to be what we want.

Extra-small & small displays
D
O

The first row, or DETAILS, will be wrong because we told Bootstrap to move it to the right 12 columns. While Bootstrap normally moves content to the next row in scenarios where the size is greater than 12 columns, it keeps it on the same row when using push, pushing it all the way off the screen.

Towards that end, with the second row, or LOGO, we pulled the data to the left 6 columns. Bootstrap will try to honor that request by again keeping it on the same row, and pulling it to the left 6 columns. The result is, again, that the content will be off the screen.

Let’s start this over again, focusing on mobile first. We know we want LOGO to be on the top, and DETAILS on the bottom. Let’s build that part first, or “mobile first”.

  2. LOGO
  3. DETAILS
  4. </div>

While I put the column in the same row, I told each piece of content to be 12 columns. Bootstrap will handle this by putting the content on different rows.

Extra-small & small displays
LOGO
DETAILS

Now let’s turn our attention to the larger screens. We want DETAILS to be on the left, taking up 6 columns, and LOGO on the right, taking up 6 columns. What’s great is it makes both thinking about this, and explaining it, much simpler.

We start by sizing LOGO and DETAILS for larger screens.

  2. LOGO
  3. DETAILS
  4. </div>

The output will be as follows:

Medium & large displays
LOGO DETAILS

We want the display to have LOGO on the right, and DETAILS on the left. So we need to push LOGO over 6, and pull DETAILS over 6. Let’s add that in.

  2. LOGO
  3. DETAILS
  4. </div>

And the final result will be exactly what we wanted it to be. DETAILS on the left, LOGO on the right for larger displays.

Medium & large displays
DETAILS LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

In the end, mobile first design not only worked out the way we wanted it to, but it wound up being much easier to plan as well. We sized everything for our small screens, and then just moved things around, relatively simply, for large screens. When designing with Bootstrap, you want to use mobile first.

Leave a comment