Gates Foundation: Case Study in Responsive Design

02/06/2013 - 15:39

Overview

In January, our team worked in partnership with ProMotion Arts to launch a conference website for the Bill & Melinda Gates Foundation. The Gates Foundation is currently very active in examining the U.S. school system looking for effective ways to leverage its strengths. Our team had the opportunity to participate in building online tools to help stakeholders connect at the annual Teaching is Learning 2013 conference (they call it their "convening").

As a front-end developer, this project was interesting because we were building a fully responsive website in a short time frame. This meant we needed clear mobile-first designs with clear layout guidelines.

The design we received met the requirements: it was clean, fit into the 960 grid, provided a style for every display layout (mobile, tablet and screen), and considerable thought went into how each block would flow on the adaptive theme. This significantly reduced the amount of CSS code we needed to create and helped us to style "general elements" instead of focusing in "singular custom blocks". Mega props to Brandon who designed the site!

Rubber Meets the Road

The rest of this blog post is meant for theme designers or anyone interested in learning about techniques for responsive layout. It gets pretty technical.

So how did we create a responsive theme ready for production in a week? Let me tell you.

To accomplish this we had to work fast and be confident that our tools would work. By letting Omega 3 and Display Suite 2 take care of the responsive layout I could concentrate in the creation of the custom theme where I used Compass for my style sheets.

To accommodate the use of two responsive slideshows on the front page (one for images, one for Twitter) I used Flex Slider. This automatically resized our images and block sizes for each responsive layout without us having to resize anything ourselves. We did have to add a small amount of custom code to have the sliders shift out of synch (in synch they looked a little funny).

Responsive Main Navigation

The main navigation menu was a bit of a challenge. For the mobile layout the menu had to display in a clickable dropdown style. To add some hot and spicy to the recipe we wanted to include a breadcrumb on the mobile navigation as well.

In the diagram above, you can see the menu in the various responsive layouts (the top is the normal screen size). By using Menu Block 2 we were able to display the 2nd level of the navigation in a separated region when needed (normal screen size). I decided to keep the full HTML menu structure intact to use it to my advantage on the mobile layout where some jQuery magic was needed to complete the metamorphosis. The expanded menu is just a simple inline menu. Below, you can see the Compass and JQuery code I created for the mobile menu.

Compass code

nav.compact-menu { background: url("../images/arrow-down.png") no-repeat 98% 14px $dirty-white; border: 1px solid $light-black; &.expanded { background-image: url("../images/arrow-up.png"); } > h2 { @include adjust-font-size-to(14px); @include trailer(0); background: url("../images/tools.png") no-repeat 6px center; font-weight: 700; margin: 4px 0; padding: 0px 4px 12px 38px; position: relative; text-transform: uppercase; &:hover { cursor: pointer; } .mini-breadcrumb { @include adjust-font-size-to(10px); bottom: 0px; display: block; color: $light-black; font-style: italic; font-weight: normal; left: 38px; position: absolute; text-transform: none; } } > ul { display: none; } ul { list-style: none outside none; margin: 0; padding: 0; li { list-style: none outside none; margin: 0 !important; padding: 0; } a { border-top: 1px solid $dark-gray; display: block; padding: 5px 10px; &:link, &:visited { color: $light-black; } &:hover { background: $secondary-link-color; color: $dirty-white; } &.active-trail { font-weight: 600; } } ul { margin: 0 10px; a { padding: 2px 10px; } } }}

jQuery code

/* * Responsive menu */var bmgf_responsive_menu = function() { // Main menu // TODO: Improve this section // This should have been done on php and not here, but I wasn't able to find a nicer solution if ($('#region-menu nav > h2').length == 0) { $('#region-menu nav').prepend('<h2 class="element-invisible">Main menu</h2>'); $('#region-menu nav > ul').attr('id', 'main-menu'); } // End of TODO if (Drupal.omega.getCurrentLayout() == 'mobile' || Drupal.omega.getCurrentLayout() == 'narrow') { $('#region-menu nav').addClass('compact-menu'); $('#region-menu nav > h2 .mini-breadcrumb').detach(); $('#region-menu nav > h2.element-invisible').removeClass('element-invisible'); $('#region-menu nav > ul').removeClass('inline clearfix').hide(); // build breadcrumb var breadcrumb = '', active_trail = $('#region-menu nav > ul').find('li a.active-trail'); for (var i = 0; i '; } } $('#region-menu nav > h2').append('<span class="mini-breadcrumb">' + breadcrumb + '</span>'); } else { $('#region-menu nav').removeClass('compact-menu'); $('#region-menu nav > h2').addClass('element-invisible'); $('#region-menu nav > ul').addClass('inline clearfix').show(); } $('#region-menu nav > h2') .unbind('click.bmgf') .bind('click.bmgf', function() { $(this).siblings('ul').slideToggle(); $(this).parent().toggleClass('expanded'); });}

Remember that on screen hover events need to be replaced by click actions for touch screen devices.

Finishing the Fiddly Bits

Some other quick fixes included the Callout Boxes at the top of the content pages - these are the green boxes that say "Learn everything you need to know about...". Now I know you shouldn't use tables to control your layout, but this is an occcasion where it was the optimum solution for us. By using a background image I was able to control the size of the displayed icon at each responsive layout size.

One of my biggest challenges was to make these pretty boxes below. When you hover over the boxes the background colour changes and the entire box can be clicked. Nice and intuitive functionality, but a small challenge to implement (see code sample below).

There is no JavaScript here, since HTML5 allows anchor tags to have block and inline elements inside. Something like I'm an h3 tag is now completely acceptable, however the wysiwyg editors haven't caught up just yet. Unfortunately, disabling the wysiwyg editor was not an option for us so we simply needed to disable it when saving these blocks.

Wrapup

As I've said before, the mobile Internet is here to stay. Building fully responsive themes is a logical and necessary progression in our theme development. Working with the right tools like Omega 3, Display Suite 2 and Compass for my style sheets can make the process of developing responsive layouts easy and fast. However, to be successful the key ingredient in our secret sauce is an awesome website graphic design that considers mobile first! This makes all the difference.

Original Article:

Gates Foundation: Case Study in Responsive Design