On March 22nd AlbertMohler.com unveiled a redesign that was a massive push forward in terms of aesthetics and (according to the organization) technology usage. I wanted to get the designer’s take on the redesign and so, after some digging (via Twitter) to find David Yeiser, I asked and he agreed to answer six questions about the new site. Enjoy:
Q: Describe the problem you were trying to solve with the redesign.
DY: The primary problem was Dr. Mohler had a lot of content that was hard to access horizontally, you had to dig deep in a few places to find it. We wanted to make the content on the site more visually accessible, and browsing it more user-friendly.
The secondary problem was the site was fairly static compared to Dr. Mohler’s actual content output. He uses Twitter prolifically so we wanted to publish this channel of information on the site along with everything else. He requested that it be prominent because many times if he comes across an important article or breaking news it’s much easier to share this on Twitter first than wait to write a long blog post about it.
Q: What about the old site wasn’t working?
DY: It was an older design so it had a few features that would not be considered best-practices today, such as an inset scroll box on the home page. Also, when new content was added it would be wherever there was room, leading to a barnacle effect where call-out graphics, banners, badges and such were scattered throughout without much thought or strategy.
Q: What was working that you kept?
DY: It was a pretty comprehensive overhaul so not much in terms of user experience remains from the old site. Perhaps this is obvious but one thing we did not change was the content. Dr. Mohler’s workflow in terms of how he writes and publishes blog posts largely remains the same. As does the way the radio and other media content was published. So the input remained the same more or less, the information output is what changed so drastically.
Q: I see that you are using WordPress for the blog CMS. What plugins are you using to make this happen?
DY: We use WP Super Cache, a related posts plugin, a custom plugin created to use the SoundManager 2 audio player, and several other custom plugins to make data input more user friendly. The technology team at Southern does a great job utilizing the WordPress plugin architecture.
Q: Rough guess (or exact stats ;-)) on percentage of the readership that accesses the content via RSS?
It’s about 10%.
Q: Tell me about the blog page.
MH: Why the 3×4 grid rather than a more conventional vertical “post stream”? (It’s a common design problem on blogs, wanting to break out of the “traditional” blog format, and I’m always curious to hear the though process of someone who has tried it.)
DY: Dr. Mohler has a wealth of content on a variety of subjects, around 4,000 posts if you include the radio shows. Since he had so much content we wanted the design to be conducive to quick and easy scanning.
We approached this idea of scanning with the list of topics on the left side of the site first. When you click on a topic it displays all the posts associated with that topic. There are essentially three types of posts — text, audio and video. Within the list of posts on that specific topic, we wanted to distinguish the content types from one another. You can do this with meta data like a specific category, but that requires the user to do a bit of analyzing inside of the content. What we did instead was change the form of the post based on the content type. So then the user could view the entire post summary as a unit instead of having to look inside of the data to determine its content type.
Now the content was in small, easily scannable blocks; and rows of information seemed more conducive to browsing this format instead of one column. However when you have rows of information at various heights you can get unsightly vertical gaps between posts. There’s a very nifty jQuery plugin called Masonry that fits the content blocks together like a puzzle, thereby eliminating the vertical gaps and providing a condensed display of information.
The results of this system proved very satisfactory with the topic archives, so we applied the same “rows of information” technique to the individual blog page. Even though the blog is mainly one content type it was still easy to scan the headlines interspersed on the page.
Also, while the sidebar content is important (see the home page for an example) it was not crucial to have it on every page. So with the liberty to remove it we were able to experiment with different methods of information display.
A great thing about a solid design framework is if you find a specific layout is not working as effectively as intended you can easily rearrange it to experiment with other techniques without having to do another “redesign.”
Thanks David!
Anyone have any other questions about the site that they’d like to throw out there? All in all I think it’s a big push forward for the site. David was gracious to take the time with these questions. I really appreciate it!
Leave a Reply