Building Brick by Brick: Ed.gov’s Website Redesign and Mobile Implementation
In line with the piecemeal responsive Web design implementation trend we recently highlighted, the new Ed.gov website redesign happened in three phases. In this case, budget limitations and existing content management systems (CMSs) influenced the decision-making process.
“We use three different CMSs,” said Jill James, Web director at the Department of Education. “We timed the phases of our redesigns with technical upgrades that we needed to do anyway.”
The redesign process began in late 2012, with an initial look at budgets and the realities of what a redesign would mean for the website. James and her colleagues in the Department’s Office of the Chief Information Officer determined that timing the redesign with technical upgrades would save money and make the best use of resources.
“The entire redesign process took longer than I would have liked, but we did it to save money,” said James. “If you have the funds, you can accelerate your deployment. But, with tight budgets, you have to be savvy and take advantage of opportunities.”
They started with a WordPress upgrade for their flagship blog, Homeroom. The second phase was focused on upgrading TeamSite/Websphere, and a few of the smaller mini-sites of Ed.gov that were based in WordPress.The website became mobile-friendly in June 2014, when the second phase of the website redesign was finished.
The third and final phase was completed at the end of January. Their homepage and online press room are based in Drupal, which was upgraded from version 6 to 7.
All of Ed.gov’s website and blogs now have responsive design and Bootstrap styling. The combination of responsive themes and Bootstrap means that Ed.gov pages automatically adjust to the size of smartphones or tablets. Going with this style was a pivot from their initial plans.
“As we looked at Bootstrap, we realized it would take care of a lot of theming and styling issues on the site,” said James. “It provided a big shortcut for us. Early in development, when elements on a page would collapse or reorder at different screen widths on the test site, it was a hot mess. Once we started using Bootstrap, things worked better, and it saved us a lot of time.”
James noted that her team had to make only a few content changes to account for changes in navigation.
“We did not remove any pages or content: It was more about the style and design of the layout,” said James. “In some cases, there were links in the left navigation area that were not in the body of the page, so we fixed things like that before we took out the left navigation.”
Although Ed.gov is based on three different platforms, James said that they have worked hard to tie the branding together in a way that is not disruptive to customers. Many customers don’t even notice they are on different parts of the site, James said.
