One of the givens in moving the Library site to LibGuides 2 is the fact that the platform uses Bootstrap 3. With this version, Bootstrap is natively responsive and, in particular, describes itself as “mobile first”. “Mobile first”, a refinement of responsive web design, has been getting a lot of buy-in from web developers. A good place to learn a lot more about this approach is by reading the book and blog by mobile expert, Luke Wroblewski.

When the concept of responsive web design was first proposed by Ethan Marcotte in 2010, web designers were still making the assumption that you designed first for the desktop and then stripped away things to accommodate smaller devices. However, the fact that mobile devices generally have less bandwidth (I think we can assume this is generally still true and will remain true for a number of years) means that transmitting large resources required by desktop viewers is detrimental to the mobile user’s experience. The idea behind “mobile first” is that you send all viewers the less resource heavy mobile stylesheets and then send additional style information for more complex layouts.

That’s the idea anyway. In reality it is more complicated. You can’t make bandwidth assumptions solely on device screen size. By default, my laptop receives the desktop layout for responsive sites, but those sites have no way to assess that I actually have good bandwidth. Maybe I’m using a cellular hotspot out in the field and my connectivity is poor. In such cases, I probably would prefer a “mobile first” layout along with smaller sized images, but my browser can’t relay that information to the server up front so I get everything. Conversely, I might be using a phablet in a fast wifi network and so my receiving a more rich desktop experience might be completely appropriate and desirable.

Secondly, the reality of most sites is that they send the same stylesheets and images to all devices without regard to actual device screen size. Bootstrap, out of the box, falls into this category. When Bootstrap says it is “mobile first”, what it means is that it applies a cascade of media queries that provide typographic and color choices which comprise the base layout. These are then reused (with some modification) by all layouts, including higher resolution layouts. In addition, at higher resolutions, more styling information about how to place page elements and modules into columns and rows is passed to the browser’s layout engine. But, since all devices ultimately receive the same stylesheets — using media queries to determine and render additional layout options — no bandwidth savings are actually achieved. You also have to consider the trade-off between sending one stylesheet (ideally optimized and compressed) or sending a base stylesheet and using media queries to send supplemental stylesheets appropriate to the device’s screen size. Each file you send impacts page load time, so you have to weigh the benefits of sending fewer files for small devices against the hit that desktop machines might incur.

Never-the-less, web designers agree that composing “mobile first” CSS has other benefits, including giving the designer a better top-down conceptualization of how pages will be delivered to different users. Using a framework like Bootstrap also means that you start with a good structure for abstracting your site’s layout, thus increasing the reusability of your code (reducing duplication) and providing better semantic names to your class names. At least that’s the sales pitch.

A legitimate complaint about Bootstrap sites is that they tend to look a lot alike. Coming into the Library website redesign project, I already had a pretty good handle on the various structural “furniture” available in Bootstrap — i.e., various buttons, tabs, list items, navigation elements, sidebars, etc. — but I less knowledgeable about how to apply custom styles on top of that. Over the summer and beginning of this semester, I looked at a variety different Bootstrap designs in the wild, some of them very creative and individual, giving me inspiration and hope about the possibilities for transforming generic Bootstrap design into something more.

However, to get going, I needed to work with a more basic starting theme. I spent a bit of time looking at what’s offered by the Bootswatch theme site. I also found the book, Extending Bootstrap by Christoffer Niska (Packt Publishing, 2014) which uses Bootswatch in its examples, so I thought I’d give it a go. The book recommends starting with one of the free themes and then modifying it to achieve a customized design.

I am currently using the Bootswatch Sandstone theme as my starting point. I selected it at a time prior to having access to the LMC design comps, but I did know what the College’s current design looked like and Sandstone, except for color choices, was closest to my guess about the direction the College redesign would take. I’m not a graphic designer, so having the design comps for the College website design will facilitate my work going forward. As I iterate more and more changes to my prototype template, it will cease to have a recognizable Sandstone foundation and will become it’s own theme.

I’ll end this post here and pick up next time with some examples of what I think my workflow is going to look like.