Last week, Boston-based professional photographer Tony Luong launched his new website, which I built.
Today I want walk you through the design and development process.
Rapid Prototyping #
Tony and I spent a little bit of time talking about what he needed in a new site: It should look and work great on any device, it should have a flexible content management system, and it should be fast.
He actually really liked the look of his current site, but wanted it to work better.
Tony had a great sense of who his audience was and what they’re looking for when they visit his site or check out portfolio. So after a few quick chats, I made a few napkin sketches and converted them into working HTML.
The Kraken boilerplate made it really easy to build a working prototype. In just a few hours, I had a working site Tony could play with, and it really helped him get a sense for how his site would work across a range of screen sizes.
Tony has a strong sense of design, so this was a really collaborative process. We’d bounce a few ideas around, prototype, and repeat.
Once we got things close to where we wanted them, we moved into production with a full-featured WordPress site.
A Customized WordPress Backend #
As a professional photographer, Tony’s had some very specific needs from a content management system. The WordPress API makes it really easy to modify the backend to fit his workflow.
I created custom templates for the different types of content he shares: photo albums, text-based content, and links to other sites. Custom fields let him mark albums as new, and select the photo that will be the cover image for each album.
A theme settings page gives Tony even more control, letting him easily adjust the navigation structure, add Google Analytics, and change his footer text.
A Focus on Performance #
Tony’s a professional photographer, so his site is obviously focused on big, beautiful photos of his work. Unfortunately, big photos can result in big page weight and slow performance.
We spent a lot of time testing, tweaking, and testing again to make his site as fast as possible.
One of the first things we did was take advantage of WordPress’s built-in image compression. By adjusting the compression rate, we reduced the size of his photos by 80% or more, while maintaining a great image quality.
Earlier versions of the redesign relied on jQuery for small-screen navigation and a responsive image slider. Unfortunately, it made the site feel slow and sluggish.
Cutting the Mustard #
When I explained the idea of progressive enhancement to Tony, he jumped at it.
I implemented the BBC’s “cutting the mustard” test to determine browser capabilities. By default, all browsers have access to a basic navigation menu and all of Tony’s photos.
There were a few key takeaways from this project:
- More articles on...
- Design & UX