Bootstrap 3 At A Glance - Part One - Motivations
In August 2013, Version 3 of the Bootstrap framework was released.
The first version, developed by Mark Otto and Jacob Thornton at Twitter in 2011, was a pure CSS library. It was designed to provide a solid foundation for the most common user interface tasks that front-end developers faced every day, including grids and page layouts, typography, navigation, input and forms. It hid the chronic problems of layout incompatibilities between different browser versions, and offered a consistent styling and customization mechanism with the LESS CSS dynamic stylesheet language. Clearly, it fulfilled that need very successfully: by 2012 it had become the most watched and forked project on GitHub.
But 2011/2012 was also the year that SmartPhones and Tablets exploded onto the consumer scene. In the UK alone, 34.3% of the population had SmartPhones in 2011, and by 2012 this figure had grown to 41.7%. In the US, there were over 28 million iPad users in 2011, growing to over 53 million in 2012. (Data from New Media Trend Watch.)
Web developers quickly learned that the experience of browsing on these mobile devices with their smaller screens, limited bandwidth and touch (or pen) interfaces was very poor.
The first response was to try to develop "mobile" versions of existing sites. These chopped out functionality, using much simpler page layout and smaller (or no) images to help reduce the bandwidth demands, and fewer complex user interactions or animations that mobile browsers couldn't support, or don't work so well when you're prodding a screen with a finger or stylus. This was so-called graceful degradation. It was usually implemented by detecting that you were running on a mobile browser, and redirecting the user to a special mobile-only site.
However, there was another school of thought. Steven Chameon, at a SXSW conference in 2003, had coined the term Progressive Enhancement for an approach to design that starts out by considering the simplest version (using very basic mark-up and navigation features that are available on all browsers), and enhances it if more features are available on the user's client platform, by linking external CSS and JavaScript. The progressive enhancement movement also embraced the need for developers to consider issues of accessibility and semantic structuring of content.
The SmartPhone revolution of 2011 brought these ideas into the mainstream. The notion of designing for the simplest version first became known as mobile first, and the notion of seamlessly enhancing and adapting layout and interactions with CSS and JavaScript became known as responsive design. Responsive design was particularly appealing to developers who struggled with the costs and challenges of developing and maintaining two separate sites for mobile and desktop clients, and it became one of .Net magazine's top trends for web development in 2012.
The Bootstrap developers were aware of the need to support responsive design techniques, and in 2012 they released Version 2 of the framework. This included some (optional) files that used the newly enhanced CSS3 @media queries (which were widely supported by both desktop and mobile browsers) to allow the grid and other layout elements to adapt to different screen sizes. You could choose whether to use a fixed grid (where the grid columns are fixed pixel size), a breakpoint approach (where the grid switches size at particular thresholds corresponding to common screen-widths) or a fluid approach (where the grid adapts seamlessly as the display size changes on a particular device, or as a browser window is resized).
By 2013, it became apparent that it would probably be less than a year before a majority of page views on the web would be from mobile devices (or, at least, non-desktop devices, including tablet, mobile and smart TVs). The argument for a mobile first design philosophy becomes much stronger if the majority of your visitors might be coming in on a mobile device!
With that in mind, the Bootstrap team took a strategic decision to bake responsive design into the core of the framework for their version 3 release, and to encourage a mobile-first approach.
Their key goals were:
- To simplify the CSS to make it smaller, and quicker to render on low-powered devices. This included changing their default styles to remove gradients and shadows (which are still not well supported across all browsers, and expensive to render), focusing on a clean, flat colour scheme.
- To make the basic layout engine responsive by default
- To make all graphical elements (including the standard icon set) scalable by the use of Web Fonts
- To give more control over the layout in mobile form-factors. In Version 2, mobile layouts would always stack vertically. In version 3, you can be more flexible.
In this series, we're going to look at some techniques for mobile-first design. We'll consider the needs of the mobile user versus a desktop or tablet user, along with the impossible challenge of being all things to all people. We'll see how to use Bootstrap Version 3 to progressively enhance their experience and minimize the impact on power consumption, bandwidth, SEO and accessibility, without adversely impacting the cost of developing and maintaining the code.
We're also going to see how Bootstrap alone is not enough to meet the technical requirements of a mobile-first design philosophy, and how some simple CSS and JavaScript techniques can be used to help optimize the implementation of your site for a mobile user.
We're also going to look at how to work with and overcome the constraints of the Bootstrap framework, and learn how to produce semantic HTML, customized to your particular requirements.
We'll get started by looking at some basic tools of responsive design (including the Boostrap 3 grid system), and then think about what mobile-first means for the creative process.
