With Mobile in the forefront of digital government initiatives, laying the foundation for a mobile solution for the Department of Energy (DOE) was a priority. With this in mind, we undertook a proof-of-concept project for DOE to determine if their existing site design could be adapted to work in a responsive, flexible way, and if it would make sense for their users and content. Tasking a single developer to work with their existing assets over a short time frame, DOE and Phase2 were able to quickly get a feel for what a fully responsive design would look and feel like, and together decide whether to proceed with a full-fledged development effort.
Our starting point for this proof-of-concept included a solid foundation – a static, pixel-based, 12-column grid, with some javascript doing additional layout tweaks. We knew that with this as a base, we could create a responsive solution with what DOE already had. Instead of creating a whole new design, we were able to primarily work on the front-end with CSS and not have to add too much javascript or Drupal development to the process.
Our strategy here was to start with the basics – converting the pixel-based grid to a percentage-based grid, to achieve the broadest results in the shortest amount of time. This worked quite well. Our grid was 1000px wide, which made the math quite simple; where it wasn’t we made subtle tweaks to padding and widths to make it work.
Once the grid was made flexible, we started shrinking down the page in-browser, looking for points at which the design and layout broke down. When content got too narrow or the layout just didn’t work, we added additional style sheets at these points, which switched the layout and styling up a little bit to work better. This process is detailed at Web Designer Wall.
We also made some adaptations to the large highlighted “hero” images and image galleries, so that they would provide different size images at different screen sizes, using the Adaptive Image Styles module.
These techniques brought us a long ways towards a fully mobile-friendly site. More importantly, even incomplete, it was clear that a responsive site made sense for them.
The success of this project is as much in our relationship with the Department of Energy and our passion for innovation as it is in any engineering techniques. Their trust in us gave us room to experiment, and determine a direction together.
Proof-of-concept site at multiple breakpoints
The payoff for this approach is that, in just 65 hours of development and project conception, we were able to quickly and efficiently plot a course for the next phase of their platform. This course has now come to fruition, as energy.gov is now a fully responsive, mobile-friendly site – one of the first at the Presidential Cabinet level. More details are available on the energy.gov site.
