I led the front-end development of the new, responsive website for the Tampa Bay Times. Our team of developers, designers, editors, and digital strategitsts crafted a new experience that feels at home on any device with a web browser, but is also true to the paper's Pulitzer Prize-winning journalism and bold print design.
I built a CSS framework composed of a resuable modules that could be combined to make the pages throughout the site. The site uses a heavily customized version of the Columnal grid system. Columnal was one of a relatively small number of fluid grid systems available when I began working on the website in 2011. Columnal provides a 12-column grid that becomes a set of stacked 1-column elements on small devices. I added a third breakpoint for midsize devices such as tablets. At this point, the site is 8 columns wide. Each row is broken up into 4 double-width columns and 8 normal-width columns.
I also developed a suite of open source jQuery plugins for the site:
When we encountered problems, I designed new layout options on paper or in the browser, rapidly prototyping and testing various solutions. I worked closely with the design team. For example, the idea for FlexText came from a conversation with a designer who wanted to display headlines over photos without covering too much of them.