thephilgray logo

Global Software Survey Site Redesign

Convert an existing fixed-width site template to be responsive without changing the desktop version or losing existing browser compatibility.

May 17th, 2016

  • Restructure template codebase
  • Migrate to Jekyll
  • Rewrite stylesheets with media queries and Flexbox

Lessons Learned: My theory at the time was that you could take any fixed-width stylesheet and strategically apply Flexbox as a progressive enhancement to make it responsive. However, responsive design is a lot simpler when you're working with mobile-first code. I was forced to reverse engineer a lot of the original code. It probably would have been easier if I was permitted to build a new a theme from scratch. In the end, though the desktop version was virtually indistinguishable from the original, under the hood, it was totally different. I even migrated to Jekyll to benefit from its dev server, templating, and asset handling.