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
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.
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.
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.
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.