JML Communications was rebranding to PR Partners and I was asked to build their new website by Suzanne Kendrick (The Connector) who was managing the project.
Chris Morris designed the site as a long, scrolling page, with a number of different layouts in the sub-sections, plus another template for the second-level bio pages. Because of the complexity I took a desktop-first approach to implementing the design as a WordPress theme, then added the necessary changes to make it work on smaller screens. Many of the sections had a two-column layout, which lent itself to simply moving the second column below the first on smaller screens. Other sections had two-column tables which I again coded as
<dl> to facilitate turning rows into paragraphs while maintaining semantic markup. The relative positions of the contact details and vCard/social media icons on the bio pages caused some difficulties; I ended up defining four different layouts, depending on the screen size.
One technical challenge was the requirement to have a downloadable vCard for each team member. Existing plugins didn’t quite fit the bill so I rolled my own solution with a Custom Post Type, Bill Erickson’s Custom Metaboxes library and some of the code from the hCard & vCard Generator plugin. I also found the Waypoints jQuery plugin very useful to highlight the current section in the nav bar when scrolling down the page.