This full-featured framework includes all the tools you need to build a website that’s capable of rearranging itself depending on the end-user’s platform. The Bootstrap framework even includes a robust CSS implementation that works as-is or can be modified and treated like a springboard for giving a website its own style.
The Screen Size Problem: Responsive Web Design as a Solution
Today’s portable devices are as powerful as computers from just a few years ago. Mobile devices have technology capable of handling the robust web experience associated with a desktop or laptop computer but with one major caveat: mobile device screens are a fraction of the size of traditional computer screens.
In the past, web developers resorted to maintaining at least two different sites: one for computers, one for cellular phones, and possibly a third site for tablet devices. The term “responsive web design” describes the practice of using media queries, which activate different CSS designs depending on the width of the web browser’s window, to adjust, rearrange and modify page content to abide by design concepts that work with the device associated with the given screen size.
Essentially, a well-implemented responsive web design site replaces the need for two or three different device-oriented sites with a singular instance. Responsive web design also lets developers take advantage of very large screen sizes without worrying about rendering the site difficult to use for users running low-resolution monitors.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
These scripts can also be downloaded and hosted locally on your own server. You can find out more information about installing Bootstrap here.
Scaffolding and Grid Design
Bootstrap’s “Scaffolding” or “Grid” system is where the framework really shines. Building your own page layout restructuring system with media queries is a time-consuming process.
- The framework’s grid system divides the page content into “rows” and columns” like its namesake.
- The columns act as a fixed percentage of the page’s container space and shrink in size while maintaining the width percentage at four breakpoints.
- The columns can also be configured to rearrange themselves as the screen decreases in width to stack content in fewer columns instead of side-by-side.
Rows act more like general breaking points that prevent content from continuing to line up side-by-side. For example, a site using Bootstrap’s default 12-column setup may use the styles “col-xs-12“, “col-sm-12“, “col-md-8” and “col-lg-8” for the left column while using the styles “col-xs-12“, “col-sm-12“, “col-md-4” and “col-lg-4” for the right column. This content would show up on desktops and large tablets with a left column that’s two-thirds of the page and a right column that’s one-third of the page whereas it shows up with a single column on mobile devices and small tablets with the desktop’s right column stacked under the desktop’s left column.
Additionally, you can build column-sized content that adjusts how many objects appear in a row. The columns do not have to add up to 12 in each row. You can, for instance, store dozens of images in containers with “col-xs-6“, “col-sm-4“, “col-md-4“, and “col-lg-3” classes applied to show two images on smartphones, three images on tablets, and four images on desktops in each row. If the images don’t line up, the remainder will be filled with white space.
Bootstrap works best with a mobile first design mentality, but that doesn’t mean you should neglect your desktop and tablet sites. If you’re trying to maintain a functionally identical experience on all devices, it’s best to err on the side of caution and implement only those features that will work on mobile devices.
If you are going to implement desktop-only features, you can use the “hidden-xs“, “hidden-sm“, and “hidden-md” classes on sections you wish to hide from mobile and tablet devices. Additionally, when designing for mobile devices it works best to eliminate any sort of multi-column structure for displaying content as those design techniques have a tendency to fall apart on smaller screens.
Implementing a design style like an image to the left and floated text to the right on the same column works well for desktop and tablet sites, but these design concepts can lead to a sloppy-looking mobile experience if there’s too much text relative to the size of the picture. The site may end up with very tiny images or large blocks of white space. Try placing text under images instead of side-by-side on the mobile site. An easy way to do this is build two versions of the display (load the same image in both, the browser is smart and will only load it once) and use the “hidden” classes to control which version shows up depending on the screen size.
Bootstrap 2 versus Bootstrap 3
Bootstrap 3 is designed with a mobile-first mentality, whereas Bootstrap 2 restructures content from a desktop site to fit on a mobile site. Bootstrap 3 is more powerful and lets you control column widths at individual breakpoints, while Bootstrap 2 is easier to use because it automatically configures mobile content to adhere to a single column layout.
However, Bootstrap 2 can’t handle things like jumping from a four-column layout on desktop to a three-column layout on a tablet and a two-column layout on mobile devices. Instead, Bootstrap 2 would run a four-column layout on desktop and tablet devices while switching to a single column layout on mobile devices. Additionally, Bootstrap 2 runs into problems when you have more than 12 columns worth of content in a single row that do not share a common height measurement. The page may render with shifted columns and awkward white space.
Things to Watch For
When working in responsive web design, aspect ratio becomes more important than resolution. Ideally, format images to the maximum possible size they could be displayed at within the framework to capture the highest possible quality without wasting bandwidth to download larger images that don’t make a display difference.
Dan S is a former news journalist turned web developer and freelance writer. He has a penchant for all things tech and believes the person using the machine is the most important element.