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.

One thing I noticed in the design comp for the LMC website was that bullet items for ordered and unordered lists had been styled using the @lmc-green-3 (#009161) color. Here’s a screenshot from the design comp showing the proposed list layouts.

It’s a nice touch but, surprisingly, it is not something you can do natively using CSS. Setting color on lists is an all or nothing proposition and there’s no way to directly style the color of the list markers differently than the list text.

One widely used work-around is to color the entire list (list markers and text) one color and then wrap the text in a span so it can be colored differently. But, besides introducing unsemantic markup, the extra span is an annoyance to implement and probably impossible to enforce in a CMS environment with multiple content creators.

A more elegant CSS-based solution involves removing the existing list markers and then reinserting new replacement markers. Using this technique, you have full control over all aspects of how the list markers are styled, including coloring, padding, and positioning. The drawback is that the code, although logical, is a bit complex.

For unordered lists, you set “list-style-type” property to “none” to remove the list markers and then use the “:before” pseudo-element to replace the marker using the “content” property. The HTML entity “•” (unicode “\2212”) somewhat non-intuitively turns out to be too small to make a good replacement bullet, but the black circle character (unicode “\25CF”) does just fine. The rest of the code is to position the new list marker where it belongs.

ul li {
  list-style-type: none;
  position: relative;
}
ul li:before {
  content: "\25CF";
  position: absolute;
  left: -1.9em;
  width: 1.5em;
  text-align: center;
  color: @lmc-green-3;
}

You use a similar technique for swapping out the numbered list markers in ordered lists. It’s a little more complicated because you also have to reset the list counters and specify that “li” is the counter increment trigger.

ol {
  counter-reset: li;
}
ol li {
  list-style-type: none;
  counter-increment: li;
  position: relative;
}
ol li:before {
  content: counter(li) ".";
  position: absolute;
  left: -2.6em;
  width: 2em;
  text-align: right;
  font-weight: bold;
  color: @lmc-green-3;
}

In the LMC design comp, list items had their indents adjusted so they were aligned with the paragraph’s left margin. Once set, it cascades nicely so that nested list items have the same amount of indent.

ol, ul { 
  padding: 0 1.5em; 
}

Here’s what ordered and unordered list items look like rendered in a CodePen. Since I am aware that I’ll be coding within the environment of Bootstrap 3, the Pen incorporates the Bootstrap stylesheet to help my example work when I start coding for real.

See the Pen LMC List Item Styling by Tom Keays (@tomkeays) on CodePen
3

Although I’m jumping ahead a bit, I’m going to start off my series by showing a simple HTML rendering of the LMC Photoshop design comp that was created for the redesign of the College website. I realized that, before I could do much more work on my own design, I needed to have a good picture of what was being proposed for the main College website.

Continue reading Simple Mockup of LMC Design Comp →

I’m going to be designing a new site for the library I work for over the next few months. We currently host almost all of our library pages on LibGuides. I’ve gotten around the lack of native site navigation in LibGuides by creating a home-brewed tabbed navigation system in the header area. It’s worked very nicely for about 2 years, but the times they are a changing. Two factors are coming together that are driving this change.

First, we will need to move our content to a brand new platform called LibGuides 2. This has a bunch of new CMS functionality that I’m looking forward to but, from a design point of view, the biggest change is that the public-facing side will be using the responsive Bootstrap 3 framework. I’ve wanted to have our site be responsive for a long time (LibGuides 1 is fixed width, with a kind of funky mobile view alternative), but this change will cause our existing tabbed navigation (which relies on the fixed layout) to break. So, I’m getting up to speed with Bootstrap and Less (which is the CSS pre-processor that Bootstrap uses) and beginning to sketch out some rough design ideas.

Second, the College hired a designer to redesign the main campus web site. Last week, I attended a meeting (along with a roomful of other campus web stakeholders) hosted by the design company and the VP of marketing for the campus where they unveiled Photoshop design comps that will inform the coding design. Just a couple of days ago, the design company pushed out a style guide (again using Photoshop comps) showing color and font choices. This was very good timing for me since now I have a sense of how I can make the library redesign work mirror that of the College redesign effort.

So, my intention is to share details about what aspects of the Library redesign will be informed by the campus work and what will necessarily have to be done differently. The purpose of the two sites is different (I may touch on why we no longer host the Library site on the College server as I go forward), but the nutshell is the College sees the main purpose of its site to be Recruitment and Marketing, whereas the Library site is all about Instruction and Research. The two sites have completely different (and conflicting) functional requirements regarding branding, typographic choices, site navigation, and wayfinding, just to name a few.

Enough for now. I hope to post a couple of times a week as I get rolling.