Watching:

Bootstrap 3: Understand the Mobile-First Approach


show more Understanding the mobile-first approach provides you with in-depth training on Web. Taught by Ray Villalobos as part of the Bootstrap 3: New Features and Migration show less
please wait ...

Understanding the mobile-first approach

One of the biggest Bootstrap 3 announcements is not a new feature but a new approach to building websites called Mobile First. Mobile First is an approach coined by Luke Wroblewski and it means thinking of how websites should be designed for a mobile device first, before you consider how it should work for a desktop. Doing this, makes you focus on the critical information users are looking for on your site and suggests that your design focus on that information first. So how does Bootstrap 3 do this? In the old version of Bootstrap, to activate the responsive features, you had to add a different CSS document. In the new version of Bootstrap, there is a single CSS file that is responsive by default.

There's a single fluid-grid system which uses percentages over pixels and is mobile first. That means that it starts out stacked and scales up instead of starting with a 940-pixel width and scaling up and down, as before. Responsiveness has also been added to modals, which are the pop-up dialogue boxes. The height class is no longer necessary on modals, they also show up larger on bigger displays than the current version. Form input fields also default to 100% width, which means your forms automatically look great on mobile devices.

With the mobile focus, Bootstrap also gains a few additions, including two new components, Panels and List Groups. Panels let you encapsulate an element into a box and easily add a heading. Whereas List Groups are for creating mobile-like lists with chevrons, badges, and other mobile-like sections. With these new additions and changes, Bootstrap 3 changes its focus from a desktop-centric to a mobile-first approach, and although there aren't a lot of new components, List Groups and Panels do add some well needed mobile features.

Understanding the mobile-first approach
Video duration: 1m 43s 46m 57s Intermediate

Viewers:

Understanding the mobile-first approach provides you with in-depth training on Web. Taught by Ray Villalobos as part of the Bootstrap 3: New Features and Migration

Subject:
Web
Software:
Bootstrap
Author:
please wait ...