Ron Gilmour from the Ithaca College Library emailed me last week to let me know about the new responsive website they had just launched. I took the opportunity to fire a few questions back to Ron and find out any lessons learned that might benefit you.
The questions I asked included:
- what the problems were?
- how you approached them?
- what things you had to consider?
- what tools/plugins/implementations you used in the approach? and finally
- what would you do differently the next time around?
…lets see what he had to say.
Responsive Web Design at Ithaca College Library – the answers
When I moved into my current position as Web Services Librarian at Ithaca College, one of my goals was to make our web site responsive and get rid of our bare bones “mobile site.” My guiding principle was to make all of our content available (and pleasant) to all our users, regardless of their device preferences.
Many of my decisions were shaped by the unique needs of a college library website. Ithaca College is a mid-sized institution (about 6,000 students). Our primary clientele is the students, faculty, and staff of the College, and we have very few patrons who are not college-affiliated. The College keeps the technology in the campus labs up to date, and the requirements of academic work in general encourage our students to do the same with their personal devices. This allowed me the luxury of not worrying too much about old browsers and devices (more on this topic below).
One challenge that I faced was working in a small shop. The Library has a graphic designer who creates graphics and offers help with general aesthetics, but in terms of writing code, I’m on my own. My solution was to go with one of the existing frameworks for responsive development: Bootstrap. While Bootstrap is regarded by some as unnecessarily heavy, I felt that by picking and choosing the parts that I implemented, I could control the weight. More importantly, by using a framework as a starting point, I could put together a working site in a reasonable time period.
Browser and Device Support
A big consideration was deciding what level of support we would provide for older browsers. To answer this question, I consulted Google Analytics. I found that fewer than 9% of our users were using IE8 or lower. Since that number can only decrease, I decided not to spend a lot of development time trying to correct for older IE. This saved time and also bandwidth, as I’m not loading a bunch of polyfills.
I also looked at Google Analytics to see what devices our patrons were using. They overwhelmingly favored iOS (not surprising, as we’re a fairly Apple-intensive campus). Knowing this allowed me to focus my testing on iPhones and iPads. I supplemented this “real world” testing with Browserstack, a browser and device emulation service.
Skills and Tools
Since I wanted to do a lot of customization to the Bootstrap styles, I needed to get up to speed on LESS. This was not much of a hurdle. LESS makes so many CSS things easier that the very shallow learning curve pays off immediately. I strongly encourage Bootstrap users to download the LESS files for customization. This also lets you slim down the CSS by not including LESS files that you don’t need. I used SimpLESS for compilation. I code with Sublime Text 2 and found an extension that offers syntax-aware editing for LESS files.
Challenges and Choices
Once I got to work on the site, the first big hurdle was the header. I spent far more time on this than any other part of the site. The existing header had a lot of links, where Bootstrap’s default header is pretty bare bones. The challenge was to keep the navigation area from collapsing at too great a width. I wanted people viewing the site on a tablet or in a small browser window to see the major links, not just a “menu” icon. My solution was to make the navigation bar shift to a two-row format at intermediate (tablet-ish) sizes. It only collapses entirely at < 720 px, which is smaller than the width of an iPad in portrait view.
My problems with the navigation were a special case of the larger issue of setting breakpoints. The version of Bootstrap that I was using had three breakpoints (four size classes). Each size class had its own LESS file. It was a long time before I realized that you don’t have to do things this way. You can set different breakpoints for different elements! That’s probably old news to everyone reading this, but a revelation to me at the time. By that time, though, I had continued with Bootstrap’s method, just tweaking the values of the three breakpoints to better match the site’s content.
We all know that using tables for layout can have Eternal Consequences, but sometimes you really do need to display tabular data. Making a table responsive seemed like a huge challenge until I found this article by Chris Coyier. His technique, which involves converting each row to a single cell and labeling the values using the “before” pseudo element, allowed me to display data that really had to be tabular in a responsive manner. With minor modifications, it also works for calendars.
An issue with which I’m still struggling is content choreography. I don’t necessarily want all of the right-column material to go beneath all the left-column material at smaller viewport sizes. In a few cases, I’ve used brute force jQuery to rearrange things at smaller sizes. I know there are better ways of doing this using Flexbox, but this would require some major restructuring of the HTML.
Bootstrap offers a lot of useful jQuery goodies, like modal windows, tooltips, and carousels. Whenever possible, I used Bootstrap’s solution for these features. If their version didn’t have the features I wanted, then I’d shop around for other options. I prefer Flexslider 2 to Bootstrap’s carousel and sometimes use Osvaldas Valutis’s tooltip code rather than the Bootstrap version. Your mileage may vary, but the point is that you can pick and choose what parts of Bootstrap you want to use and use another tool if you’re so inclined.
What I Would Do Differently Next Time
This project was a re-architecting of an existing website, so I was really starting halfway through the design process. At some point, I’d like to go through the full process, beginning with content inventory and building a new site from a mobile-first perspective.
Having gained more confidence about responsive design from my experience with Bootstrap, I might be tempted to try creating my own flexible grid and working from scratch. Then again, in the interest of saving time and not reinventing wheels, I might also go with Bootstrap or a similar framework.
I warmly recommend Bootstrap to those who ask me about responsive design. These are usually other librarians, who may have strictures similar to mine on time and personnel. Frameworks aren’t for everyone, but in my case, Bootstrap allowed me to get a responsive site up fairly quickly and taught me a lot about RWD in the process.
Responsive Design Ebook
A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.
Learn from more than 26 leading responsive design experts across more than 80 pages for the price of a
n expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.