Bootstrap: Everything a designer should know

The world of Product Development is vast, very vast !! To simplify the way we work, create, develop and execute products, we see new methodologies and technologies emerging at the speed of light, I know I am exaggerating but honestly, the speed of evolution of these technologies seems to be faster than the evolution of mankind. This pace picked up with the revolution of smartphones. There are around 3.5 billion active smartphone users worldwide( Statista, 2019) and this number is only going to increase every day. With this ever-changing digital landscape, to support multiple devices and resolutions, responsive and/or adaptive design has become a key differentiator between good and great products.

As designers, we always focus on end-users’ needs. For us, the end-user experience is of utmost importance. If the applications can’t simplify the end user’s workflows and tasks and also make their experience enjoyable, then what’s the point of our designs? But over the past few years, I have realized that as designers, we also have to empathize with the business strategy and development teams’ constraints. We as designers also have to wear the hat of strategists!

BTW, have you heard about Bootstrap? I am sure, you are even reading this blog as you are keen on knowing Bootstrap from a designer’s perspective. A few years back, when I was looking up Bootstrap and tried reading about it, it felt like gibberish. Honestly, I did not know where to start and where to end. All I understood were the 12 grids and the anatomy of them. As I aged, I do understand how Bootstrap can simplify the product development cycle.

As I started doing my research, I realized it is very popular and is one of the most used front-end frameworks available in the market. It’s based on the holy trinity of web technologies HTML, CSS & Java. As of today, approximately 3,932,942 websites and web applications are using BasedBootstrap and around 3,080,668 unique domains are currently live. Additionally, tech giants like Samsung, Twitter, Spotify, Udemy, Lyft, and many more already use Bootstrap.

From what I read, ~4.57% of Computers, Electronics & Technology sectors use Bootstrap, followed by ~3.82% science & education companies, and ~1.98% of Arts & entertainment sectors globally. USA, Russia, India, Germany & the UK are some of the leading countries that are actively using Bootstrap. These numbers are proof of the positive impact of the Bootstrap framework during the product development stage.

Source: https://www.similartech.com/technologies/Bootstrap

Why do businesses use Bootstrap?

Many big, midsize, and small companies use Bootstrap with the hope that their goto market time can be minimized. This framework provides a great number of advantages that help the respective teams to quickly design & develop a product. The following are a few:

• Consistent Designs

One of the biggest challenges that the design teams face is to maintain consistency across all the designs. This is especially true when multiple designers are working on the same product. Though style guides are there, as designers, we bring in our own creativity, and sometimes we also miss keeping even small things like paddings and alignments consistent. Based on my experience, there have been several cases where the designs were not consistent. And, it increased the iterations which in turn increased the design and development time. With Bootstrap, you can control this to a great degree by using its design library that helps maintain consistency throughout the product even at different resolutions.

• Mobile-first Designs & Development

With mobile usage increasing every day and people using their phones to log in to most of the applications, most of the companies are going with a mobile-first approach. It is always not necessary to replicate all the features across all resolutions. And, we can limit these features to the user journeys of the users on that particular resolution/device. Bootstrap makes it very easy to progressively enhance these features based on the resolutions.

• Responsive Grid Structure

Bootstrap consists of a 12-column structure framework that enables quick & easy adaptation to the designs. It supports a great variety of nested and offset elements. You can configure the grid to be responsive or adjust it to a fixed layout. Its flexibility provides vast possibilities for developers to implement responsive designs for different devices. You can use it with LESS or CSS and even SASS.

• Ready-made Components and Resources

These components significantly speed up the development process. The beauty of these components is that they help the development team to quickly implement different layouts without involving the designers at every step of the process. Pre-styled elements include typography, forms, images, navigation bars, dropdown components, alerts, which are part of the huge library that Bootstrap offers. Also, Bootstrap neatly organizes the code structure which then can be used at any point in time. It also guarantees a simple and minimal code structure.

Things to keep in mind while working with Bootstrap as designers

The choice of usage of Bootstrap is a business decision and as designers, we have to adapt to it. In the bigger picture, it makes a huge difference to the business. While there are tons and tons of documentation to help developers understand and adapt to Bootstrap, there is hardly any documentation that is clean and simple for designers to understand why it is also an ideal design framework.

Here is my attempt to explain the key differentiators:

1. Grid System

Like we discussed above, Bootstrap defines a basic responsive grid that can be customized. The Bootstrap framework takes the mobile-first approach with guidelines to adapt to all resolutions with certain constraints. This does not mean that you have to stick to template-driven designs, you can customize the designs as per the need. As designers, it is essential for us to understand the 12 column grid structure by Bootstrap. Based on my experience with Bootstrap so far, I have seen that the transition of the designs into development has not been seamless when designers are not completely aware of the pros and cons of Bootstrap.

The Bootstrap grid divides the screen into 12 columns with margin space on the sides. We define this space between the columns as gutter space. By default, this 12 column grid has preconfigured settings, based on which the design/screen adapts to a particular resolution. When the page design is not complex and design is adaptable across multiple resolutions, then the development time will be quite less as the developers don’t need to worry about writing HTML/CSS for supported resolutions as the design elements will automatically get adjusted. Even when the designs are not completely responsive and are unique to different resolutions, the framework definitely makes things simpler for the team.

Let’s take an example,

In the image below, we see 4 rows of boxes laid out in a pattern. This page is however divided into 12 columns based on Bootstrap guidelines. In row 4, there is one single big box that covers all the 12 columns whereas, in row1, there are 4 boxes with each one of them using 3 columns. So based on the device and number of columns these boxes will automatically adjust their positions which is further explained in detail below.

Source: https://www.invisionapp.com/inside-design/design-with-developers-in-mind/

Why use 12 columns?

12 is the most easily divisible among reasonably small numbers. You can have 12, 6, 4, 3, 2, or 1 evenly spaced columns, which makes our design decisions a lot easier when you work with these restrictions in mind. Using this grid also allows the developers to predefine the screen resolutions/breakpoints & the number of columns associated with it. This means that all they have to do is set it up once and no need to develop each screen size separately. Generally, it is suggested that we align our design elements to the left in each column. Bootstrap’s columns are percentage-based (instead of pixel-based) this means that the content automatically adjusts based on the device screen size.

Here are some resources that can help you to get started with bootstrap grids:

• http://gridcalculator.dk/
• https://www.sketchappsources.com/free-source/3952-bootstrap-4-default-grid-system-freebie-resource.html

2. Breakpoints/Screen sizes (The Container)

Screen resolution, screen size, or breakpoints are basically the same thing. It is basically the canvas on which our designs will be displayed. Currently, in the market, we have a huge variety of digital devices with a range of screen sizes. From smartwatch, mobile phones, tablets to laptops, and desktops, each device presents a different challenge when it comes when creating a consistent user experience. The following are the screen sizes/breakpoints preexisting in Bootstrap. These will help you to quickly check your designs in different products saving a huge amount of time in developing device-specific screens.

Here are the screen sizes/breakpoints in bootstrap:

• Extra small(xs): 320px — 577px (Smartphones)
• Small(sm): 575px — 767px (Smartphones)
• Medium(md) : 768px — 991px(Tablets)
• large(lg) : 992px — 1199px(Laptops)
• Extra large(xl): 1200px + (Desktops)

Read more: https://getbootstrap.com/docs/4.5/layout/grid/

3. Different numbers of columns at different widths

In Bootstrap each screen resolution has a predefined number of columns that screen will be divided into. For example, let’s say a text box is spread across 8 columns (of 12 column grid structure) on a 1920 desktop resolution. Then, the developers can easily configure (in the Bootstrap config file) for the same text box to adjust across 4 columns on a responsive mobile screen. And ‘Voila’ your content adjusts automatically.

You might be wondering why only 4 columns are used/configured on the mobile screen? Well, there’s no restriction on the columns on any particular resolution. You can set it to be any number you want. However, Bootstrap recommends 4 columns on the mobile resolution. Since the design elements are positioned & adjusted based on the number of columns they cover, on smaller screens, it will be harder to accommodate these elements with less number of columns as they would be too compressed.

For example, let say on 1920×1080 desktop resolution a text box covers 12 columns, and another text box covers 4 columns. On the 320px mobile resolution if the same 12 columns grid is used, then these text boxes would look really small, especially the one using the 4 columns, and this will affect the readability of the content. In this case, the user might need to manually zoom into every section and read the content, which is not a good experience.

To ensure consistent and user-friendly designs across the application, Bootstrap has different numbers of columns for different resolutions.

4. Gutter Space

This term is derived from print media, it’s the place between the two pages where the pages are attached to the spine or other binding . In Bootstrap, it’s the space between 2 columns, or in simpler terms, it’s the padding between 2 columns. The main advantage of gutter space is that it provides visual alignment cues that reduce design & development time. The rule of thumb to follow while designing for Bootstrap is that your designs shouldn’t start or end in the gutter space. You can adjust the gutter space based on your preference or the project requirement. You can even completely eliminate the gutter space, if required.

5. Rows

Rows are design elements that are in place one after another in a horizontal line. In Bootstrap, depending on the number of columns available, the elements on the right end of the row will be wrapped into the next row, followed by the actual elements in that row.

For example, in the picture below, colored boxes in columns 1,2,3 are in 1st row positioned right next to each other. Let’s say this covers the whole 12 columns on the 1920 desktop resolution. So when we adopt the same page to 680 mobile resolution (smaller screen size), the blocks on the right will automatically wrap into the next row. Moreover, this still will follow the same sequence. In this example, the number of columns is reduced to 8 so the rows adjust accordingly.

Source: https://www.invisionapp.com/inside-design/design-with-developers-in-mind/

Source: https://www.invisionapp.com/inside-design/design-with-developers-in-mind/

Source: https://www.invisionapp.com/inside-design/design-with-developers-in-mind/

When you further move down to lower screen sizes the blocks will stock up one below one another. However, the will still maintain the row sequence.

6. Nested elements

Different visual elements in the same row that are grouped together are called nested elements. They can cover any number of columns as a group on a particular screen resolution. For example, there are 3 boxes in 1 row that cover 12 columns on a 1920px desktop resolution. Let’s consider that box 1 & 2 are ‘Group 1’ which cover 8 columns & box 3 is ‘Group 2’ which covers 4 columns. So on a mobile screen with 4 columns, Group 1 elements will be adjusted in 4 columns and the extra part will be wrapped around in a new row, followed by Group 2 in the consequent row.

7. Offsets

In general, Bootstrap recommends us to place or align the design elements to the left, but that doesn’t mean that it has to be strictly followed. In case the design element needs to be offset from the start of the column. Then, that can be done based on defining the offset space from the start of the column in development. While doing this, it’s better to check the rendering of these design elements on different resolutions. It will help make sure these adjustments are not breaking the overall look and feel of the page. And, they are also easy to implement as these are custom-defined.

8. Color

Bootstrap comes with a range of color palettes for different states, fields & actions, that can be easily assigned & managed. This enables the team to quickly change the overall look of the product/web application without spending time on tweaking each element separately.

Conclusion

Bootstrap is one of the best available frameworks that offers great features that can accelerate the design and development process. It saves many hours/days of work when designing and coding an application. Every component and plugin is thoroughly documented with live examples including code blocks for easier use and customization of the application. Adapting to this framework will help the business strategists align their business goals with their deliverables.

For more such insights, check out our other blogs.

Originally published at https://www.divami.com on September 21, 2020.