When the DEG team decided to completely overhaul our corporate website last summer to coincide with our new brand launch, we saw it as a perfect opportunity to utilize responsive web design (RWD).  Our UI developers had followed the maturation of this adaptive and flexible approach to designing a website ever since it was popularized by Ethan Marcotte. With more and more web-enabled devices of various sizes and capabilities hitting the market each month, we began to actively spread the word around the halls of our consultancy that RWD was becoming a real necessity in the digital landscape. Thus, the soon-to-be new and improved DEG website became an obvious candidate for a mobile-first, responsive web design project.

Planning and building a responsive website introduces a host of new challenges to all phases of the project lifecycle. This article focuses on the experiences of our UI team during build-out of the DEG website’s front end. While we were often able to enlist popular methodologies and third-party code libraries and plugins, some responsive hurdles required more homemade solutions.

The Building Blocks
The bones of the new DEG website consist of HTML5, CSS, and some Javascript when needed. We adhered to the guidelines of progressive enhancement as best we could, serving up a usable experience to older browsers while reserving many of the bells and whistles for their CSS3-enabled modern brethren. Our mobile-first approach ensured that the site was performant on mobile devices and helped us maintain focus on content and prioritization.

We used the CSS preprocessor SASS and the Compass framework to keep our stylesheets organized and maintainable. These tools also made it much faster and easier to implement the myriad of vendor-prefixed CSS3 rules that our site relies heavily on.

To address the lack of media query and HTML5 support among the Internet Explorer crowd, we turned to Scott Jehl’s Respond.js polyfill and the html5shiv workaround included in the Modernizr library.

Responsive Images and Sliders
The problem of images has existed since the early days of responsive design. A max-width of 100% is a good way to ensure that an image grows and shrinks with its containing element and ultimately the screen size of the user’s device. In some instances, however, the file size of an image can be prohibitive for mobile users in terms of bandwidth and performance.

To accommodate wide desktop displays, the hero image spanning the width of the screen on the DEG home page is 1900 pixels wide and can weigh in at well over 100KB. Performance issues aside, it would be irresponsible of us to require a mobile phone user on a limited data plan to download this unnecessarily large asset. Luckily for us, Scott Jehl’s picturefill plugin provides the functionality we need to serve up appropriately-sized versions of an image to a user’s specific device. We export the hero image in several sizes and add a bit of markup, and the plugin does the rest.

The Right Now and What We’ve Done sections on the home page are presented as nuggets of information within horizontal sliders, much like image carousels. Most slider Javascript plugins are not designed to accommodate changes in the size of the container or the items within. WooThemes’ Flexslider, on the other hand, was built specifically to be responsive and allows our sliders to work on a range of devices. The number of visible items within these sliders adapts to the size of the screen.

We were able to combine the picturefill plugin with Flexslider on our work detail pages, which produced a slider that was both responsive to the user’s screen and respectful to the user’s bandwidth. Click on any of the items on our Work page to witness these two plugins living in harmony.

Multiple Interfaces For Content
On the home page, the What We Do section is structured as a series of content sections describing DEG’s various disciplines within the digital world. Our plan was to present this information within a tabbed interface to minimize vertical scrolling, but the screen size constraints of smaller devices such as mobile phones precluded the use of a horizontal list of tabs.

Our solution was to encapsulate the What We Do section in a vertical accordion interface for smaller devices while reserving the tabbed interface for larger screens. To build out this functionality, we knew that we would have to rely heavily on Javascript. We needed an accordion plugin, a tabs plugin, and some way to conditionally activate one plugin or the other based on screen size.

We first turned to Edenspiekermann’s minwidth Javascript library, which allowed us to easily bind to screen resize events. If the screen size fell beneath a certain threshold, we could initiate code to apply an accordion interface. And if the screen size was above that same threshold, we could instead apply a tabbed interface.

Next, we looked for tab and accordion plugins that were flexible enough to work with semantic markup with no built-in HTML hooks. Widgets such as jQuery UI’s Tabs are easy to use but require a strict HTML structure tailored to a tabbed interface. Applying an accordion plugin to this structure would be difficult and ugly to implement.

We opted to create our own lightweight tab and accordion plugins that could process semantic content sections and inject the necessary HTML for each interface. In the event that the browser window is resized beyond a given threshold, we needed to be able to deactivate the tabbed interface and activate the accordion interface (or vice versa). To accommodate this scenario, our plugins were designed to clean up after themselves by removing their generated markup and event bindings. Deactivating one interface will revert the What We Do section back to its original semantic state, which the other interface can then be applied to.

The DEG website, like responsive web design itself, is continually evolving and improving. New possibilities present themselves as the the community surrounding RWD and the power of the web grow. Implementing and adapting to new trends in the world of front-end web development can be as daunting as it is exciting. We are up for the challenge.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments