Mobile First Bootstrap

By Alexandre Magno
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies

About this book

Bootstrap changes the way we develop websites in the frontend, and mobile web development has grown incredibly over the past few years. There are over 1.2 billion mobile web users in the world, and 25% of those mobile web users are exclusively mobile. Now, Bootstrap has also gone mobile-first. The mobile-first version of Bootstrap lets you first think about the mobile site and then think about how it expands to larger screens. To build websites for mobile devices that improve the overall experience of your customers, you need to be skilled at using the mobile-first feature of Bootstrap.

Mobile First Bootstrap covers the new features in Bootstrap 3 and focuses on how they affect development from a mobile-first perspective. It will show you how to use Bootstrap 3 for developing websites for mobile and how to use that knowledge for your own development projects.

The book starts by highlighting the new changes that have been made to Bootstrap 3. After learning about these new features, you will discover how to easily build websites for mobile. You will learn how to run Bootstrap 3 Docs to customize Bootstrap for your needs. You will then be introduced to the new mobile grid system, the responsive utilities, and how to use mobile-first for navigation. Then, using JavaScript, you will explore the power of data attributes and progressive enhancement before starting to develop a web project from scratch. The last section of the book will discuss the main issues that affect the performance of Bootstrap as well as the issues that arise while dealing with responsive images.

Mobile First Bootstrap guides you through everything you need to know about Bootstrap 3 and helps you to understand and use the mobile-first approach in your own projects with the help of an example project.

Publication date:
December 2013
Publisher
Packt
Pages
92
ISBN
9781783285792

 

Chapter 1. Bootstrap 3.0 is Mobile First

Twitter Bootstrap framework's upcoming version is Mobile First. This milestone is not just technical, it's strategic. It follows the current paradigm of design for the Web. It's a design for the future.

But why Mobile First? Why did Bootstrap completely change its course from Desktop First to Mobile First to get into this new way to develop more suitable websites and web applications? Why did the most popular frontend framework embrace this change at a time when responsive web design is continuously growing with better suited and standard techniques such as media-queries, fluid layout, and JavaScript on demand?

Mobile browsers are increasing support for the brand new HTML5 and CSS3, with the philosophy to offer, for older browsers, a less stylized but fully functional component, and for capable browsers a rich and full experience that comes from mobiles to larger screens such as TVs.

For older browsers (such as IE 8 and IE 9), Bootstrap has functional support, but enhanced features such as rounded corners and a placeholder attribute for tips in input fields are not supported for these browsers. To see the full details on browser support, check the Bootstrap documentation from the Getting started section (http://getbootstrap.com/getting-started/#browsers).

We are living at a time when mobile use is increasing at a pace that will soon surpass desktop usage (http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6). Apart from the statistics, one thing we can presume is that the web scenario is changing so fast that we have to embrace the certainty of devices getting better and smarter.

In this chapter, we will explore the main changes in Bootstrap 3. If you are already familiar with Bootstrap 2, check the migration guide (http://getbootstrap.com/getting-started/#migration) to have a practical overview about what has changed. If you're not familiar with Bootstrap, there's nothing that's too difficult for you to understand directly from this book about this new version. The only thing you need to have in mind is the Mobile First approach, which is covered well in this book.

You will be guided to design with Mobile First, discover why Mobile First is so important, and how to make Bootstrap a powerful frontend platform to make your site friendly for a wider range of devices.

We can take a step further and add to your previous Bootstrap knowledge by thinking of a concrete way to design processes as a continuous layer of capabilities and embrace the constraints and not fight with them. Mobile First with Bootstrap is an elegant solution for frontend development. Combined with server-side techniques, we get a full bag of solutions to get your product better suited to different users and needs in different platforms.

This chapter will cover the following topics:

  • Bootstrap reviewed

  • Desktop to responsive

  • The new mindset – Mobile First!

  • Now Bootstrap uses Bower and Jekyll

  • Running the docs

 

Bootstrap reviewed


In the third era of Bootstrap that is coming, the developers have redesigned the whole framework with a different approach. Let's get started building interface components of small and simple screens, instead of adapting the existent UI components to fit in a constrained environment. From mobile, we will then go to desktop. However, we will not adapt the experience as we usually do with responsive design going from desktop to mobile. Now with Mobile First we will enhance accordingly as we increase the device screens.

Why should I do this if my target audience will be using desktops? Going to mobile indirectly benefits desktop users. But how? To better understand this, let's recap Bootstrap history for a while.

In 2011, Bootstrap was launched to serve as a live and agnostic style guide that was used by Twitter to create their products. It became an open source framework at that time. It was a time when we worked in pixel-perfect layouts and explored CSS3 animations, and we found in Bootstrap a well-documented and standardized set of features.

Bootstrap creates a new design for the browsers because you don't need to define basic interface elements from scratch, such as buttons. At the same time, you have utility elements like badges to cover the most common interface elements. Bootstrap does what a framework is supposed to do: Bootstrapping! The term means the act of taking off a new project; it's like saying, "give me the tools that I will need to start developing my application for different needs". Bootstrap is a toolkit belt with standard conventions from well-defined classes with clean and practical documentation to live code that is ready to use and be customized for your needs. It's not a magic solution to solve the interface element reuse issue, but it's a kick-start. It fits in so many scenarios that developers are increasing its use with their own tools.

"CSS moved beyond type, forms and grids. People get tired to create the same stuffs"

— Mark Otto, one of Bootstrap's creators, in the Desktop First to Mobile First Bootstrap presentation (https://speakerdeck.com/mdo/desktop-first-to-with-bootstrap)

A must-have from this breeding ground of possibilities is the Bootstrap extension font-awesome (http://fortawesome.github.io/Font-Awesome/). It uses font-face, which is widely supported and flexible, instead of sprites for icons. With a single CSS file and font resources used to render the custom fonts, you have a tool that can handle all your icons. This shows the flexibility of Bootstrap tools; for example, font-awesome is independent, works as a standalone project, and is a great fit with Bootstrap.

There are a lot of ways to use Bootstrap. You can customize and extend components, from editing the source code in LESS variables or customize via the Bootstrap download page (http://getbootstrap.com/customize/).

At the time of this writing, Bootstrap is the most popular project on Github, so it's just one more reason to consider its importance. There's now an official Bootstrap Expo (http://expo.getbootstrap.com/). This is one of the changes in this new version. Bootstrap Expo is the official directory for websites and web applications that are being developed using this framework.

A lot of developers get their first touch with the capabilities of HTML5 and CSS3 with this framework. Bootstrap has amazing capabilities such as offering a responsive grid, dozens of JavaScript components, and a customizer in a web interface or through the LESS variables, if you're an experienced developer. It's suitable for any level of developer and designers because it has solutions that suit both scenarios. This is the second of Bootstrap's main philosophies—it's made for everyone.

 

Desktop to responsive


With the rise of smart phones, there is a need for responsive content to cover the growing demand. It's possible to add an optional file with media queries and a bunch of CSS code and be adapted to mobile needs.

Media queries, a CSS3 module introduced in June 2012, is a basic structure that gives a namespace with a bunch of CSS rules and declarations according to the user resolution, density, and screen capabilities. So, with CSS files, it is possible to manage the ongoing rise of smartphones. It was possible with just one stylesheet file with good support to adapt according with the device and make a website mobile friendly.

In Bootstrap Version 2, we used to have an optional file (responsive.less) that used to have all the media queries necessary for Bootstrap to work well with mobiles.

Another good news is that we can adapt to tablets as a bonus. We have breakpoints for the most common mobile resolutions—this means we have a range of width (768 px to 979 px) that can represent tablet devices. A breakpoint is the extreme point (minimum and/or maximum) where you can define CSS rules specific to that range and change your layout. This could be achieved with a simple declaration of media queries in your CSS:

@media (min-width: 768px) and (max-width: 979px) { ... }

But sometimes it's indispensable to rethink some elements—some of those already developed only for desktops—in a pixel-perfect scenario. There's no flexibility in a pixel-width accommodation. No matter how much the screen is different, the website will behave like you were using a desktop when we work with fixed units. This is when we can use a bunch of media queries to get more flexible. Even with this solution, redefining dimensions and CSS rules according to the device using media queries will solve screen flexibility issues but not solve performance issues on mobiles.

Performance is one of the main concerns when we go mobile. We have to consider scenarios where the Internet connection is slow and it is a recurrent issue. You will have to perform reverse engineering to make your JavaScript optimize loading, and combine it with server-side solutions. A worse solution would be to just hide content after considering what could be painful for your page load; for example, images have a deep impact on the final performance. Lower page response time is equivalent to more money spent, as we can see in this article about page loading versus user patience (http://blog.kissmetrics.com/loading-time/). One of the curious things this research points to is that mobile Internet users expect their browsing experience in phones to be comparable to what they get on their desktops.

We are living at a time when the Web is filled with rich content and we have faster Internet connections. We have to be prepared to offer the closest thing to a fast and optimized loading, at least for our most important content.

This does not involve just the use of CSS to hide content and show content depending on the device, as we can do using media queries. It's all about keeping the concepts simple and focused and developing each interface component thoughtfully from scratch—the primary use, with the constraints and its enhanced capabilities. It's not just about adapting, it's exploring the device's capabilities and delivering the best user experience across platforms.

Sounds familiar? Yes, for sure, the same concept as progressive enhancement, you might think. You're not wrong. Progressive enhancement was a term widely used at a time when we talked about HTML page dependency on JavaScript to be functional. Progressive enhancement is a strategy for web design that relies on semantic markup and technologies such as JavaScript. Nowadays, progressive enhancement is a longer term for Mobile First because it's not just about JavaScript disabled, as it was vastly talked before. A hundred of articles tried to show its benefits in a no JavaScript environment scenarios. Now progressive enhancement is about to be faster (http://coding.smashingmagazine.com/2013/09/03/progressive-enhancement-is-faster/).

Progressive enhancement is one of the three keys of Mobile First, together with responsive design and giving priority to content over navigation. So, these three rationales are at the background of all the details of Bootstrap 3, from your CSS components to your grid structure.

 

The new mindset – Mobile First


There's no way to be fully usable for all the possibilities of human interactions in one place, as well all the possible scenarios that come as NUI (Natural User Interface), such as touch, gestures, and voice and other innovative initiatives to interact.

But we need to adapt to the unknown. The desktop of today will be the smartphone of tomorrow. It doesn't make sense to think of desktops as the key platform anymore. Imagine a technology that has its own limitations but is flexible and can be relied on for different devices.

When we create a new project, we have to think mobile, not just deploy our sites as we usually do and simply ignore the mobile experience. If we decide to ignore this anyway and start to develop a web application for desktops, we will soon discover that mobile users grow considerably, and maybe it's too late to adapt then because our project for desktop becomes complex and any initiative to go mobile is too complex. Maybe it's not too late if we think positive, but it can become unviable to have an existing site going mobile in an efficient and fast way. Luke Wroblewski, the co-founder of Input Factory, said in his book Mobile First, from the A List Apart series (http://alistapart.com/), published by A Book Apart:

"…if you design for mobile first, you can create agreement up front on what matters most"

Let's presume we want to simply ignore mobile users for a while, and have our Minimal Viable Product (MVP) mobile friendly, thinking that mobiles are too expensive. On the other hand, consider that Mobile First is not only a great benefit for the mobile experience, but, it also enhances user experience for desktops. When you design thinking in the lines of constraints, and gradually increase experience as you progress with the philosophy of keeping only those elements that are of essential value, you get a thin, usable, fast, focused way to do simple tasks easily. With a mobile friendly mentality, you can keep things simple and throw away the unnecessary components.

With a lot of navigation options, it takes longer to decide which option to choose to complete a task, and this fact makes users angry and they would probably leave the website. The user's needs for each device is different.

Users are generally distracted while using their phones. They are not as focused when using mobiles as they are when working on a desktop. These distractions are present even at home; for example, talking with someone while checking some stuff on their phones. A faster feedback is necessary.

The last thing they need is a bad and overloaded desktop experience that requires concentration to choose between a whole bunch of navigation options. Remember that the mobile user taps—they don't have a mouse with a pointer. It makes them less precise. We have to consider that the user needs space and proper margins in each device to have better contact with the website and have complete control with no scope for mistakes and frustration. Everything has to be clear with the responsive site flow.

The Web is blurry. So many functions, so many confusions, and navigations and websites getting heavy. The necessity of a lot of information goes against the need for getting information easily. Usability and accessibility become a worry—a key point of successful projects, but still not obligatory. With Mobile First, progressive enhancement, performance, and interaction capabilities to achieve the final result are a priority from scratch.

This is just one of the reasons for unexpected result if your site was developed expecting the best higher-level support and dependence. The foundation is still HTML and CSS as a markup and presentation layer. The JavaScript came a layer above, handling the behavior, and CSS is responsible to control the behavior of animations and transitions. If your user couldn't have a good experience of your site on mobile and mobile was his first contact with your site, they will probably not access from their desktop to check if it's better.

Another point worth mentioning is about the use of screen readers. Its use is increasing. Read a complete report in this WebAIM survey: http://webaim.org/projects/screenreadersurvey4/. The usability improvements are in little changes such as specifying a language attribute, being semantic, and describing images. These little efforts are closely coupled with Mobile First.

A good example of how we can get a solution that has great benefits in a wide range of scenarios is a simple anchor link. With a simple anchor link wisely used to skip to a particular bit of content, it can be very exciting for screen reader users looking for that bit of content. This can be very precious for mobile users with little space in a very content-heavy site; for example, he does not want to see menu options but wants to go directly to the content. A simple solution like that can be golden because it's simple, a valid markup, and you can style with CSS.

Thinking Mobile First, we can ride in the growing opportunities generated by the exponential rise in the use of new devices, from little phones to TV browsers. We have a great possibility to also enhance user experience, from environments such as desktops on desks to smartphones in hands. Understand that your user's needs are beyond desktops. The key is to know that thinking Mobile First improves the overall experience for your customers.

Simplifying need be expensive or time consuming. It's all about building all the possible user needs in one platform and not writing the same application twice to get full support. We all remember that Apple iPhone was the most used phone and now we have the Android operational system for mobile phones as a strong competitor (http://techland.time.com/2013/04/16/ios-vs-android/). Native apps have their own benefits, but the Web is, even with the troublesome differences between responsive browsers, the most common platform. So, the big networking services such as Facebook and Twitter use the specificity of the native apps and the flexibility of the Web.

Even if you want to explore native capabilities, you can have a browser making part of its strategy. Links from applications point to browsers and applications are fully featured with links that point to some information. If you want to have your place in the market to go mobile with an app, you have to keep track on the Web too. These are not competitors, they coexist together and one solution can make the other stronger as a communication channel.

While native apps have great features and great advantages in performance, mobile web experience has its benefits too.

One of the benefits is its easy access. All smartphones have a decent web browser, even Opera Mini for simple phones. If you do it right, the user gets what he /she wants.

Here is my own personal experience. Once I lost my iPhone (the story of how I lost it deserves another book). I had an old phone and had to use it for a while. I became, for a short while, a potential Opera Mini user, but the only thing I could check were my tweets, and it worked perfectly. Well, I could tweet (that's what a tweeter is supposed to do). You should be able to tweet anywhere. And they made my experience in that phone the best possible—I could log in and then have access to tweets and even tweet about traffic in that little and limited phone, probably faster than my lost smart phone. Yeah, I was a minority and it was temporary, but this is just an example of the big picture: thinking mobiles satisfy users about the service as a whole, not just half-satisfied or satisfied on a specific device. I love Twitter. They are following me in my tough situation. I lost a phone, but I could communicate with an old one. Thanks to Twitter.

Another advantage for mobile browsers is that it is a single and flexible system instead of a specific system for each device. Developing a browser for the iOS and Android is hard because each one has its own language and tomorrow there will be more languages and possibilities. The Web is growing too in a different way alexmagno December 9, 2013 10:58 AM from native applications; the ongoing evolution uses well-known technologies such as HTML, CSS, and JavaScript.

 

Practical example – The responsive dropdown


The Bootstrap Navbar Component (http://getbootstrap.com/components/#navbar) is combined with drop-down menus and is widely used to offer a quick and easy way to give the user an option to navigate to other pages and executing actions.

As shown in the following screenshot, there's a menu to the left that branches into submenus to the right. There's a second option of changing this to a "flip" version, where you navigate through an item to another as if you are jumping between pages. The third solution works for both desktop and mobiles, with collapsed submenus always visible. Thus, we need to think simple in order to avoid creating hacks. It is best to have the optimal solution in both scenarios before even coding and avoid unnecessary workarounds.

 

Now Bootstrap uses Bower and Jekyll


The big change in this Bootstrap release is Mobile First as the design process. But, there are other relevant changes. From the same place that Bootstrap was born (Twitter), other son came to the world, and its name is Bower (https://github.com/bower/bower). The template engine used before, Hogan.js (forked from Mustache) is no more used. Now, in Version 3, Jekyll (https://github.com/mojombo/jekyll) is adopted as the template engine. Jekyll is a template language written in Ruby with native support by Github pages, and it makes it a lot easier to get everything up and running. With Jekyll, is not necessary to compile the mustache templates to HTML, as we had to in the earlier version of Bootstrap.

 

Running the docs


Now, it's time to see Bootstrap V3 up and running and feel the changes for real. Explore the docs, as it is one of the main features of Bootstrap. You get all frontend snippets ready for use in your applications. The official documentation and release is available at http://getbootstrap.com/. But in this section, you will locally run your checkout version from Github repository.

Version 3 in progress in the Github repository

Execute a Git checkout (for a full Git reference, visit http://git-scm.com/) in your console to get a clone of Bootstrap in your machine, as follows:

git clone git://github.com/twbs/bootstrap.git

Now, you can install Jekyll and run the server to get the documentation live in your browser.

Installing Jekyll

Jekyll is a template framework that is very well accepted and widely used for blogs, for users that prefer code with known markdown languages. It is a way to create simple and static pages without the use of databases, just Ruby!

Jekyll has configuration options and a set of nice features for templates, but its use in Bootstrap is very simple; just reuse snippets of HTML, like layout templates. The main feature of Jekyll is that it is recognized as a template language for Github pages. By using Jekyll we don't need to compile to HTML before generating pages, because the Github hosting pages does this for us. So, if you use Jekyll and Github in a certain way, you have a hosted free website.

To install Jekyll, you must have Ruby installed. To get a full explanation, visit https://github.com/mojombo/jekyll.

After Jekyll is installed, you must execute:

jekyll serve

That's it. You now probably have your docs running at http://localhost:9001.

You should see the following screenshot on your desktop or other devices. Enjoy the links, view it in any device, and explore the documentation as you go:

 

Bower


Bower (https://github.com/bower/bower) is a package manager for frontend frameworks that is developed in Node.js to provide good management with client-side libraries. It's a complete API and works in a way that is very similar to NPM, the package manager for Node.js modules.

To install Bower, you have to execute the following command:

npm install bower

You can install Bower globally too, with the following command:

npm install bower -g

Basically, you should install NPM globally only if necessary, but not if it is not needed. Full details are available at NPM's website (https://npmjs.org/). Bower is a frontend package manager, so it makes sense for it to be global. To check the differences, visit the NPM blog (http://blog.nodejs.org/2011/03/23/npm-1-0-global-vs-local-installation/).

With Bower installed, you can install Bootstrap using the following:

bower install bootstrap

First step to responsiveness

There's a meta tag that you should include in the head of your document that tells the browser to give a responsive experience using your media queries to rule the layout:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This meta tag sets the content to the device width. It makes it mobile friendly, not a desktop site on a mobile. But, you have to define the right media queries. The width parameter inside the content attribute means that the viewport will be adapted and optimized for your device, and the initial scale is the applied zoom. But, there's an interesting discussion about its use at http://stackoverflow.com/questions/14775195/is-the-viewport-meta-tag-really-necessary.

So, we use this declaration:

<meta name="viewport" content="width=device-width, initial-scale
=1.0, maximum-scale=5.0">

It makes the user able to zoom in five times the initial scale.

Note

You can see this meta tag in an example that you could use to start a sample template from Bootstrap (http://getbootstrap.com/examples/starter-template/).

 

Making changes in the Bootstrap source code


Now, the command line common tasks executed in Bootstrap with Make are now working with Grunt (http://gruntjs.com/). You have to just use the same commands that you did with Makefile and do it in Grunt. Makefile is a script from Unix platforms that automatically compiles source files and it was used to execute Bootstrap commands in Version 2. The problem comes in the fact that it is only Unix based. With Grunt, which is JavaScript based, with Node installed, you can have the common commands executed in other platforms such as Windows.

Before starting, we can install the necessary dependencies if needed:

  • Install Node (http://nodejs.org/)

  • Install all the dependencies (available in package.json, so you have to be in the root bootstrap directory)

    npm install
    
  • The following is a command to generate a build via Grunt:

    grunt
    

    This command checks if the following aspects from your Bootstrap work copy are fully functional:

    • Running JSHint on JavaScript

    • Compiling LESS with recess

    • Compiling template

    • Compiling and minifying JavaScript

Running tests

If you are a JavaScript expert, you can develop new JavaScript plugins with jQuery, as well as fix JavaScript bugs. For this purpose, you need a test to reproduce the bug to send a pull request for Bootstrap. To check if your JavaScript tests break the framework, you need to execute the following command to run the JavaScript tests:

grunt test
 

Summary


This chapter makes you rethink and understand better the concepts behind Mobile First and why Bootstrap was motivated to be developed with this new paradigm. The Mobile First concepts change the design, code, and solutions. It's a new challenge for us. You learned that Bootstrap makes this challenge easier for us by adapting all the components and the philosophy for mobiles. Thinking mobile is very important to make us better use Bootstrap 3.

You already know some basics of Bootstrap's new structure. Jekyll and Bower are new technologies introduced with Version 3. We need to be at least a little familiar with them to go ahead.

You got in this chapter a simple and running tutorial to open the Bootstrap 3 docs, which is a valuable reference kit. One of the key aspects of Bootstrap is live documentation. It's a live style guide and all design elements are meta-documented. With this knowledge, you will be able to plan a website and explore the powerful features, starting from mobiles and finishing with any device that can browse the Internet.

Now, we are ready to get the CSS components redesigned for Mobile First and learn how they work with the new grid system, forms, and units and the issues that surround stylesheet development for mobiles.

About the Author

  • Alexandre Magno

    Alexandre Magno has worked for 10 years as a web developer, and is currently working as a software engineer at globo.com. He is a very active contributor in the open source community with plenty of projects and acts as a jQuery evangelist and a responsive design missionary. As a multidisciplinary developer, he has strong experience in a wide range of server-side frameworks and CMS such as Ruby on Rails, Django, WordPress, and exploring Node.js. He has developed many libraries that are widely used at globo.com, and was one of the first developers to develop mobile websites with a responsive design in the company he worked at. He is an active contributor of Twitter Bootstrap and the creator of one of its branches, the Globo Bootstrap, which is the first translation of Bootstrap to Portuguese, and also developed some components used in globo.com. He is very passionate about web development, and he writes about it in his blog at alexandremagno.net. He has already contributed in the publishing of a web magazine about jQuery UI and has even made presentations in some technical events, such as the International Free Software Forum (FISL). Writing this book for him is a great step further, after these achievements. Besides technology, he is a musician and song writer too. He likes to remember every moment of his life with a music lyric. At this moment, for example, the verse would be "We are the champions, my friend".

    Browse publications by this author
Book Title
Access this book and the full library for FREE
Access now