IU1 Fab Lab

When

2015

Who

Intermediate Unit 1

Link
http://www.iu1.org/fablab

Intermediate Unit 1, my employer, received in a grant from the Chevron Foundation to create a Fab Lab and Mobile Fab Lab. As part of this project, the organization asked to have a website produced to promote the services offered by the labs. Additionally, a requirement was made to have a system put in place that could handle online reservation requests for the labs.

Overall Look-and-Feel

The overall look-and-feel of the IU1 Fab Lab website was modeled after the printed materials designed by IU1’s in-house Media Coordinator Sarah D’Urzo. Sarah’s work utilized a dynamic color palette of two shades of blue and a bright, lime green.

Sarah also made use of single, slanted edges on a lot of the imagery boxes. It just so happened that when I began putting pieces of this mini site together, I had just read about how Jeremy Frank and the team at Viget had figured out how to do angled edges with CSS masks and transforms. I was able to employ these techniques to get the desired look for some of the photography and graphic devices, like the banner and banner image on the mobile lab page.

Set Up the Content Management System

The IU1 Fab Lab website was created as new section of the Intermediate Unit 1 website. As such, it was built in the already existing ExpressionEngine install that ran iu1.org. Three unique channels were created for the purposes of this project: one to collect information about the equipment inside the stationary lab, one to collect Fab Lab curriculum details, and a final channel for the Fab Lab blog.

This project allowed me the opportunity to experiment and use some features of ExpressionEngine that I hadn’t used before, namely the layout feature. On the rest of the IU1 website, I set up my templates to use the standard {embed}s. Embeds are like any other embed in a server-side language or CMS: they allow for a chunk of code or markup to be included on multiple templates but managed in one spot. EE’s {layout} functionality works in a similar manner, only in reverse. Layouts allowed me to define overall structures for my templates, but allow for each template to have its own distinctive content and structure.

Responsive Images

This was the first opportunity for me to experiment—in a production setting—with the use of responsive images markup. For the equipment details page, the photo accompanying the details of the machinery is marked up using the new srcset and sizes attributes, with an acceptable fallback image specified in the img’ssrc:

<img class="equipment-description__photo" 
    alt="Photo of a pair of Ultimaker 2 3D printers on a desktop" 
    src="/images/equipment/_default/3D-Printers.jpg" 
    srcset="/images/equipment/_small/3D-Printers.jpg 380w,
            /images/equipment/_default/3D-Printers.jpg 480w,
            /images/equipment/_medium/3D-Printers.jpg 750w,
            /images/equipment/_large/3D-Printers.jpg 950w" 
    sizes="(min-width: 56em) 480px,
            100vw">

Hero graphics, both on subpages and the initial landing page for the project, make use of a similar pattern.

ExpressionEngine 2 has a built-in functionality to automatically resize images to set dimensions when uploaded to specific destination. As you can probably gather, for the equipment photo directory above, I have instructions defined to resize every photo to 380px, 480px, 750px, and 950px. This is probably overkill—as there probably won’t be that significant of a file size difference between some of the breakpoints—but this was my first attempt, and the individual breakpoints can be re-evaluated at a later time.

I chose not to use any sort of polyfill (like Picturefill) in this particular implementation of these responsive images. I felt as though the benefit would be nominal, and the fallback images in the src attribute of the markup would be sufficient for less-capable browsers coming to the site.