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!

Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces

This article presents results from a study investigating the personality of typefaces. Participants were asked to rate 40 typefaces (from serif, sans serif, display, and handwriting classes) using semantic differential scales. Responses are shown by typeface class and individual typeface using scaled scores. These results are helpful to practitioners when deciding which typeface to use for online text.”

Enter Coda Clips. Find and install (with a click!) a bunch of really handy code clips! should make development pretty speedy.

One of the coolest things I’ve seen so far is that all of the tutorials are managed by MediaWiki and are completely globally editable! No more out-datedness!

Nice work. Hoping to see some great content here soon.

• Getting Creative with Web transparency – rounds up some good cross-browser PNG transparency techniques
• 60 More AJAX and JavaScript Solutions for Professional Coding – I’m becoming a jQuery or custom-only guy, but there are some neat tricks here.
• eXtreme Type Terminology – Typography lingo 101
• FREE Typefaces from Ten by Twenty – Jura, Nevis, and Munro, three of the hottest free fonts I’ve seen.
• 63 Must-have Grunge fonts – because you know, you need 63…
• Take Control of Your Maps – Don’t default to Google Maps API on your next Web app :)
• 20 Rare Questions for Google Search Guru Udi Manber

• Techcrunch
• Blogherald
• Daily Blog Tips
• ProBlogging
• Somewhat Frank
• Silicon Alley Insider
• Official AOL Corporate Release

Great work Mark and Erik, and thanks, Snook for the killer jQuery implementation

Pinvoke: Icons and Pixel fonts

Small band of rebels versus the unfeeling evil empire :)

A good motivational, conceptual overview of Accessibility. Not much by way of example or technique, but still good. Check out my notes below.

“I don’t think the Empire had Wookies in mind when they build her, Chewie.”

• People in the rebel alliance are all shapes and sizes, imperial storm troopers are all identical.
• Uniformity vs. diversity.

Jar Jar Binks

• Seemed like a good idea at the time. If we were going to do it again, we wouldn’t include Jar Jar
• tabindex. seems like a good idea but you have to do it really really well or you will create more problems than you solve.

Luke and Leia

• Seems to imply something at the time, but as son as we find out more information, doesn’t make as much sense.

Star Wars Holiday Special

• What happens if Wookies work well? MORE WOOKIES! Right??

Early movie concepts

• Early concepts, pretty weak, and odd.
• Iterations are very important to make sure we are putting out a “right” product and won’t be putting out confusing products

Digital Enhancements

• Technology was added over time so more could be done.
• Some scenes (storm troopers in the desert) they enhanced the product, but did not change the content. Done well.
• Cantina scene however, Greedo shoots first. BOOO. Didn’t just change the presentation, they changed the content.

Luke dressed as storm trooper

• Luke doesn’t fit the uniform look of a storm trooper
• No matter what something looks like, it’s what’s under the costume (HTML) that actually matters.

These aren’t the droids you’re looking for….

• Luke’s first experience with the jedi mind trick, and it doesn’t make sense to him.
• Power of suggestion used to make people who are looking for one thing think they are getting what they are looking for, but are given something else.

“Good against remotes is one thing, good against the living is another”

• At the end of the day it’s about the people, not the screen readers!

The Death Star

• Technical marvel! Unheard of in history
• Wide open to a small scale attacks from a very small group of people.
• Sites that are revolutionary and technical marvels are often fatally flawed for accessibility.

Yoda’s Last Words to Luke

• Accessibility people often feel like the last Jedi.
• We have to pass on what we learn.
• We have to use what we’ve learned on a new project on the next one and to pass it on to other “Jedi”.

Try not, do or do not, there is no try

• “Always with you it cannot be done.”
• No difference between the stones and the x-wing
• We can’t say that this is too big of a project, we just have to believe we can do it!

“I don’t believe it!” “That is why you fail.”

• Never give up!
• We need to help make believers out of other people.

• Corey Chandler Lead Interaction Designer, eBay Inc
• Jake Cressman Producer, Electronic Arts
• Chris Maliwat Sr Dir of Prod Mgmt, Vuze Inc
• Micah Alpern Design Dir Social Search, Yahoo! Inc
• Elliot Shmukler Principal Prod Mgr, LinkedIn

Very valuable panel on testing design changes to determine their business outcome before unleashing it on the public at large. Check out my notes below.

What is A/B testing?

• Divert small amounts of traffic to different versions of site design to get metrics on what works.

Is it the job of Interaction Designers to predict the outcome of our designs?

• Shmukler: it’s our job, but is an impossible one. Impossible to predict even with significant expertise in your domain area.
• Maliwat: You can predict, but you can’t know with what degree of resolution you are correct. Testing can verify and validate the decision / opinion
• Alpern: It is our job and is important, but we need to set up heuristics to verify what works and why.

> Netflix: “Predictions color our thinking. We need to test.”

• Maliwat: but that’s not to say they didn’t make choices and predictions.
• Shmulker: you can’t test every choice you make on a page, but testing gives you a way to refine.
• Cressman: every designer brings a toolbox of heuristics to a design. where do they come from and how are they validated is the question. seems they are just passed down from book to book and blog to blog. testing gives us a way to validate our heuristics.

> Article: Design choices can cripple a web site. “None of us know what the BEST page design or copy is until we test. It is time to put away the design/copy expertise of gurus and test.” Concept: there are NO real experts. Levels the playing field.

• Maliwat: you can’t crowdsource a design. at least, the application of that is minimal. iPod would not have been designed by a crowd. Contributions of A/B testing are to help optimize, but not to revolutionize. e.g. “Are two buttons better than one. Is red better than orange.”
• Cressman: sometimes the absurd ideas are effective… but you won’t find that out until you test.
• Alpern: A novice might use testing as their north star, but won’t solve fundamental underlying problems.
• Shmuckler: you don’t have the resources to test every possible option under the sun. You will always have to make choices. Expertise will always be required for starting. Small design changes won’t show you any difference in testing numbers. Changes have to be fairly major for A/B testing to actually show you if it is better or worse.
• Chandler: Small changes CAN affect major differences. Leading can make all the difference between something showing up above the fold vs. below the fold.

> Brian Eisenberg – Clickz Networks. How to decrease sales by 90%. > “You should focus on one change at a time. See if it affects a change. Then make another change.”

• Chandler: There is a lot of overhead on testing. How to keep the big picture in mind? Is it worth doing the testing.
• Shmukler: If the risk is high, extensive testing should be done.
• Maliwat: Testing sounds dull doesn’t it? It doesn’t feel very creative. You have to balance incremental steps towards a solution with keeping the bigger picture in mind. If you are JUST doing incremental changes and not looking towards a larger vision, you are not effecting a very large change.
• Alpern: You have to be willing to take risks and push the envelope and take larger leaps than just small incremental changes.

> Jakob Neilsen: “A/B can only be done if there is one clear, measurable action.”

Chandler: There are things beyond what you are measuring (number of clicks, conversions, etc) that are important. There is a larger issue at play of people enjoying the experience, will they recommend this to their friends? How much attention to the quantitative vs. Qualitative elements?

• Shmukler: You always have to pay attention to the quantitative. There is ALWAYS a goal.

When is it worth it to compromise a core metric to improve customer experience?

E.G: sacrificing 25% revenue to build towards a larger vision.

• Shmuker: So define the larger vision as the metric you are measuring!
• Alpern: The longer term goals are harder to measure vs. instantaneous metrics (PVs, etc). If you are obsessed with the short term metric, your user experience can become perverted.

How might the role of designers change in the future as a result of this kind of measuring.

• Maliwat: testing shifts our responsibility, as our decisions require more validation. Ultimately this will be good for design. It’s good to test and prove before releasing something to a billion page views. But it’s making us feel less important. It doesn’t feel creative.
• Alpern: It’s exciting that the barriers to prototyping and creating products are becoming smaller. We can develop and share test examples with an appropriate sized focus group and that is empowering.

Chandler: How do we decide what level of quality needs to go out for the tests?

(E.G. Seeing if citrus fruits affect scurvy in sailors. Feeling bad for the sailors who didn’t get the citrus…) Are we willing to harm the experience of users for a period of time in order to test a possibility. Where is the threshold?

• Maliwat: When death is not involved, the thresholds are different. :) It’s okay to be radical.
• Alpern: If companies don’t treat their customers with respect, they will lose.
• Shmukler: Bad experience is acceptable for a short period of time
• Chandler: Sometimes you need an acclimation period though! How long are do we wait before we freak out about bad results of a test?

QA Session

** Q: What do you think about sales funnels. Isolated environments for an interaction. (this is a specific UI design question) **

• Alpern: it’s pretty common in registration, etc. The question is “when do you enter it.” Should never be a barrier to exploration. You should always allow a clear path back out. Isolated environments are usually a good thing. Also have to be careful to decide which metric you want to keep in mind because they might be in conflict! (completion rate vs. sales)

** Q: What is your relationship with in-house analysts? **

• Maliwat: I am those other people :). In general you have to be in agreement about what is important, and how to measure what is important.
• Shmukler: many times in-house analysts have an expertise on how to read the metrics and are less emotionally attached to the design and so could point out things you are blind to.
• Chandler: That interaction between the two groups is important. We provide each other insight. Designers can help to interpret the results better than analysts can. Analysts can provide better data than designers can.