Responsive Design and Bootstrap

“A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries,…” –Wikipedia

In a nut shell, responsive design practices allow for the content of a single web page or web site to flow naturally into any size device.

Take google.com for instance; on your phone, it looks and feels natural. You can see and do most of the same things on Google no matter if you’re on your desktop computer, laptop, tablet, or what ever else you have in your pocket.

Now wrap your brain around this blog post. It has a header, menu, this article, sidebars, footers, maybe ads, etc. But if you’re on mobile, you can already see how that content has been reorganized to fit neatly on to your screen. A prime example is the universal menu icon sometimes comically called the “hamburger” or “pancake” menu due to it’s iconic shape. This little widget squeezes all of the main site navigation into a tiny little package so you can get right to the guts of this article without having to scroll too far.

But reorganizing that content logically on any device is no simple task. Enter Twitter’s open source responsive library: Bootstrap! It has CSS, JS, and code snippets for a vast array of layouts and functionalities. Tabs, menus, and buttons – oh my!

So, just for a quick example, I reworked an older version of my Resume site using Bootstrap libraries. The libraries I used here were graciously provided by MaxCDN and can be found on the Bootstrap site under “Getting Started: Bootstrap CDN”.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>