Yesterday we refreshed the Food Network website with a new header, sponsored links area, and footer. Similar to HG-Lite, we didn’t touch the interior of the site, and opted for the face-life approach instead.
Since the design was very similar to the previous iteration, I didn’t alter much of the code. Instead, I renamed a couple ID’s and classes so that I could override styles and drill down into the sub-containers.
Like HG-Lite, there was no DOCTYPE, but we had the advantage of existing markup to work with. One of the more interesting and challenging parts of this project is that the Food Network site has no “true” width. Instead, it relies on JavaScript to determine the width of the individual page, and then resizes the header and footer accordingly. Sometimes it’s very wide, and sometimes it is very narrow. Most of the late night pre-launch was spent reviewing some of the width extremes, and making sure that everything rendered correctly.
This project would not have been possible without the help of Sam who tightened up the styles and JS while I was in San Francisco for WWDC. Thanks to the project managers, Ops team, backend guys, and everyone behind the scenes that made this launch go smoothly.
Leave a Reply