Behind the Scenes: Building a New Burness.com
By Alex Field, January 23, 2015
-->-->
This week we launched a new website after months of work with a demanding, challenging, and occasionally cranky client: ourselves.
Let me back up. During the Polar Vortex of early 2014, we came to a conclusion: for all of the dynamic websites we had built, all the principles of simple user experience and responsive design we had encouraged for our partners, our own digital presence was not walking our talk. The website was built on an old version of Drupal, had long dropdown menus, performed poorly on mobile, and didn’t convey the breadth of our work. “It’s time,” we agreed. “And we have to build the new site for ourselves.”
So began our journey to the launch of the new burness.com website. As with any journey, there were bumps, memes and gifs, and useful lessons on the way to a new burness.com built for the modern web. Here’s a look behind the scenes at a few things we learned:
Lesson 1: Design and build it “mobile first”
“Arghhh responsive design!!!” – anonymous graphic designer
The new burness.com is built on the latest version of WordPress with a custom theme based on Twitter’s Bootstrap framework, which makes it easier to develop responsive websites that adapt to every screen size—from smartphone to big desktop monitor.
While this approach simplifies development, it increases the work for the patient graphic designer quoted above. No longer are designs completed in full-width and adapted to mobile; instead, designs must be built for every ‘breakpoint’.
The effect is brilliant for usability—adjust your screen width or view it on your phone to see how content moves around and stacks vertically when it no longer fits horizontally. But it also means that every element of that behavior has to be planned and designed to keep the site flowing on any device. Starting with the most essential items in the mobile design and building up from there makes the process smoother, and that means happier designers!
Lesson 2: WordPress can do anything
Seriously. With a great web developer, WordPress has nearly unlimited functionality. It has become the common refrain that WordPress is perfect for small sites and blogs, but if you want something serious you need Drupal.
Our team challenged that idea head on. With great plugins like Advanced Custom Fields and WordPress’ ability to create custom content types, we could build page templates that display the right content without sacrificing the user friendliness that makes WordPress so attractive.
Lesson 3: APIs make the world a better place
MailChimp and Twitter are key tools in our digital toolbox. They also happen to have amazing APIs (Application Program Interfaces) that let our website communicate directly with their databases.
What does that mean? For Twitter, it lets us easily integrate team member tweets on their bio pages—just enter the @ name and the tweets start flowing. With the MailChimp API, we simplified our email signup forms, making them a one-click affair in the footer and letting users sign up for the lists that are most relevant (plug: now’s a great time to sign up below!).
Lesson 4: Building a site for yourself? Create a killer “web team”
This week’s launch was a team effort of epic proportions. The process touched every person at Burness in some way, but the heavy lifting was thanks to our core “web team.”
Led by our digital and art group, with representatives from every corner of Burness, this team reviewed each version of the site; added hundreds of blog posts, case studies, and partners; and consistently gave us fresh perspective and encouragement.
It’s not easy building a site for your most difficult client. But with the right group of dedicated and savvy teammates, and powerful tools like WordPress, Bootstrap, and Mailchimp, you can create a flexible new site that makes the journey worthwhile.
Have feedback on the site or want to learn more about our website development services? Explore our work and drop us a line!