Albert Mohler

AlbertMohler.com is the long-running and highly-trafficked site of the president of Southern Seminary, Dr. Albert Mohler. I’ve been working on it for nearly a decade now and this design was the fourth iteration of the site.

With prior redesigns there were usually heavy content changes to go along with them which required a lot of energy and thought when considering how the design would support these initiatives. But with this version, the content was set and we were able to focus on optimizing how people engaged with it. And for good measure we decided also to build the front-end with React and tie to a WordPress backend with WordPress’s REST API (more on this later).

WordPress logoReact logo

Design for
Mobile

The first task for the new design was to pare the content length on the home page. The mobile view for the home page on the old design was way too long — it was exhausting to scroll through. We had gotten ourselves into this situation with the design prior by designing the desktop version first and then letting all of those desktop decisions collapse to mobile. This time, we reversed it.

For starters, font sizes and spacing were reduced and tightened, and preview content was refined to only what was necessary. Then, taking advantage of the React front-end, we used React Responsive Carousel to collapse segments of information to swipeable elements in a row rather than stacking them vertically.

Comparison of the old, long podcast episode feature on the home page with the new layout which as been collapsed into a horizontal swiping interface.

For example, in the previous design the recent posts beneath the main featured post each had a large title display and a summary. With the new design, for the recent posts, we just listed the titles in a small, non-display typeface after the featured post. All it took was asking the question “do we need to have a summary of each post?” The answer was no. All it really did was clutter up the page and 99% of the time the title is enough of a signifier to whether or not you would like to read the post.

Comparison of the old post preview which includes a large title, text summary and large Read Article button with the new, which is just a small title.

Not only did this save space, but it made for a better user experience overall. As alluded to in the preceding paragraph, it reduced the noise on the page significantly and in doing so better highlighted the feature article. Also, as the mobile design was elaborated on for the larger viewports having the just the base content elements as the design ingredients made it easier to choose accents and enhancements. For example as the viewport size increases we add the topic label and feature image to the recent posts (see below).

Side-by-side comparison of the article preview section on mobile versus desktop highlighting the efficiency of the mobile design with the extra content (feature images and topic labels) added to the desktop version.

You can see a final comparison of the old design for mobile versus the new design in Figure 1.

Old Design
Complete view of old mobile design.
New Design
Complete view of new mobile design showing better efficiency of space and heirarchy of content.
Figure 1

Comparison of mobile designs. The new design for mobile was meant to blend in with the very hardware of the device. The rounded corners and color contrast that distinguish the main content from the header mimic those of the hardware; and the edge-to-edge images make the hardware the edges rather than use the screen’s scarce horizontal space for edge framing.

The Brand

Meticulous attention to detail in layout and typography presents a cohesive brand that is instantly recognizeable from any page or place on the site. The color scheme has not changed for years and Gotham, Superior Title, and Georgia have been reliable and sturdy typefaces years as well. With the new design we kept the brand elements intact with the addition of the Whitney typeface to add a bit more variety and character.

Screenshot of sample React code in code editor.

The Build

I wrote around 180 custom React components to power the front-end, and Southern Seminary’s in-house engineering team wrote the code that connected it to WordPress’s backend. (They also handled the complicated audio processing among other things, we collaborated closely to complete the React development.)

We took advantage of the plethera of tools available in the React community. We used React Media to set content at will rather than let one layout context dicate the other and we used Styled Components to manage styles as two examples.

I also implemented styled-system for rapid front-end builds and layout testing. This allowed for writing quick “CSS” via a built-in design API rather than having to switch from markup to CSS constantly. See the code snippet below for an example of how this looked (I slightly modified some of the parameter inputs which is why it looks a little different if you’ve used styled-system before).

<Flex
  width={[ 1/2, 1/1, 1/2 ]}
  direction={[ 'row', 'column', 'row' ]}
  justify={[ 'flex-start', 'space-around', 'flex-start' ]}
  pb={0}
  pr={1}
  shrink={0}
>

I would highly encourage you to check out styled-system for your next React project if you’ve never used it. It’s a huge boon to front-end development speed.


The end result was well-received by the President as well as readers of the site and taffic to and engagement with the site continues to climb.


Russell Moore

Working with the ERLC, I designed and developed a new blog and website for the president of the ERLC, Russell Moore. The goal was to create a site that was simple to use but not devoid of personality.

Testimonial

Our team couldn’t be happier with how our project came together under David’s leadership and skill. He was able to take our needs, as well as pain points, and create a clean and thoughtful design. He is easy to work with and delivered a great site on time. We are thankful for him and his talents.

Jason ThackerCreative Director, ERLC