What we learned – Responsive Web Design for a University Magazine

As another site is launched, I’d like to take a minute to look back and see what we did right and what we could do better. This week, we launched a responsive rebuild of Carnegie Mellon Today.

Doing a code re-write is a completely different creature than building a site from scratch. The design choices that were laid out with the technology at the time are still the baseline of how your code works and your limitations.

At its core, Carnegie Mellon Today was a prime example of what we developers praise as a content-driven website. The layout was simple yet elegant, and the site was filled with rich content and powerful imagery. Not wanting to lose that appeal, Elliance was tasked with taking the current site and re-writing it to make it responsive.

What we learned

Change isn’t always easy – When working with existing content and procedures for placing said content, changing how things work on a CMS level is not always as intuitive as you think. With this client, we went back and reviewed how their content is currently setup and built a smarter system for them to use, while still maintaining all of their old content.

On the front end, effects that were only available with hard-coded images are now available with CSS. Things like image opacity, overlaying content and fancier fonts are things we can improve with new coding practices and allow for a better user experience.

Old code isn’t always bad code – As a responsive web design agency, reusing old code is a rare occurrence. Technology on the web moves with such momentum that a site that’s only a few years old will begin to show its age without annual maintenance.

With CMU, I found myself going back to the original code and realizing that there were ways of styling the content that have long been out of the spotlight but provided better handling and cross-browser compatibility than a lot of the cutting-edge practices.

Split that code up – With this project, our back end work was completed before I started doing my front end code. With this approach, we were both able to streamline the process and get the bugs worked out of each part at separate times.

This also helped by giving us time to notice any unique differences in the templates and correct them for this new version of the site. The result was that we had to tweak the grid system very little, which makes cross-browser support easier.

Conclusion

With every project comes a new set of challenges and situations to learn from. With CMU, it was all about being efficient with our time management, not reinventing the wheel and, as always, giving our clients a website that we can all be proud of.

Learn more about our responsive web design services