Russell Moore

RussellMoore.com is the website for the President of the Ethics and Religious Liberty Commission (ERLC), Dr. Russell Moore. The ERLC wanted a site that would serve as a platform for Dr. Moore’s writing and podcast as well as point of reference for media outlets looking for commentary on specific subjects.

Mobile First

Like many websites, the majority of the traffic was coming from mobile devices and as such it made sense to us to design the mobile view first. And while not a new insight but still worth repeating, the very narrow and vertical nature of the mobile screen has the added benefit of forcing discipline in prioritizing content.

A selection of initial designs that show the progress on the mobile view are shown below in Figure 1.

First draft design, podcast is featured first and artiles below.Second draft design, podcast design is more polished at the top, includes the podcast show logo now, called Signposts. Recent articles are better separated beneath featured article with reverse contrast white on navy background.Third draft: Article group is moved to top now with podcast below. Podcast block is no longer visible.Fourth draft: Typography is closer to finished state for lead feature article, header has been switching back and forth between dark logo on white background and white logo on dark background.Fifth draft: Typography and layout for articles and other elements close to finished. This version shows the header (logo and navigation) as an overlay on the lead feature article image, but this was scrapped as an unsustainable strategy.
Figure 1

Various designs for the mobile view.

The final design is shown below in full in Figure 2.

Final design for the mobile view of the home page.
Figure 2

Final design for the homepage mobile view.

The Brand

We wanted the site to have a touch of personality without being overbearing — what makes a site interesting and unique at first can easily get tired by the 100th viewing.

Taking cues from old country music posters (the ERLC is headquartered in Nashville and Dr. Moore is a fan of country music legends like Johnny Cash, Merle Haggard and the like) I thought various combinations of font weights and widths would make for an interesting visual mix while not being too outside the norm.

I settled on GT America as a perfect type family for the job. I paired various widths and weights for “Russell” and “Moore” to create the logo for the site. The proposed logo was “Russell” set in GT America Black and “Moore” in GT America Extended Black (see Figure 3).

Initially proposed Russell Moore logo.
Figure 3

Initial logo proposed

In addition to a logo, we created an “RM” mark that could be used as a favicon and webclip icon as well as proposed a new color scheme as part of the new brand. Variations of the mark and a sampling of the color options reviewed can be seen below in Figures 4 & 5.

RM marks
Figure 4

Various “RM” marks

Color options explored for the brand, shown in all their hues with multiple columns of logos, each logo showing a different color.
Figure 5

Color options for the brand tested on the proposed logo.

After much discussion, we decided to go with Hoefler & Co.’s Ringside rather than GT America. Along with Ringside, the ERLC suggested another Hoefler & Co. font for the logo, Mercury Display; which ended up working well. The final logo and “RM” mark is shown below in Figures 6 & 7.

Final brand mark: RM
Figure 6

Final mark.

Final logo
Figure 7

Final logo.


Typography

A number of font and color combinations were explored for titles, meta data, user interface text, etc. and ultimately six fonts were chosen for the website design. This balanced the desire for variety with the reality of bandwidth costs.1 Ringside ScreenSmart was the typeface family used for the web, with these specific fonts:

  • Condensed Bold
  • Narrow Medium
  • Regular Book
  • Regular Bold
  • Regular Black
  • Wide Medium

¹Cost as in the effect on user experience due to file size download, not the literal dollar amount for licensing fees.

WordPress

The site is powered by WordPress and Sage 8. I use the Sage theme as the base for all my WordPress projects (unless they’re using React as the front-end!). It’s well-supported, reliable and highly functional and efficient.

One aspect of note with this development setup is the CSS is run as a separate project. Sage 82 uses Gulp for building production-ready assets and while it’s fast it doesn’t have the instantaneous build times that you can get with other packages. So I setup a PostCSS environment to manage the CSS which allowed for faster build updates when writing CSS.

As a side note and testament to the efficiency of this type of setup, converting the design (Sketch files) to a fully functioning, production-ready website was completed in slightly less than a month. This was made possible via this CSS framework that decouples semantic classnames from style and strives for a near 1:1 relation between a style and its classname. See Basscss and Tachyons for more on this approach (I started from these frameworks).

If you’re interested, I’ve listed the plugins I use with PostCSS below. If you have never used PostCSS it’s worth checking out.

I use postcss-cli (Command line interface for PostCSS) so I can assign commands like `postcss -c postcss.config.js` to `npm run build`. And then here are the rest (in the order in which they’re called by PostCSS).

²Sage 9, currently in development, will use Webpack for asset management.


Southern Equip

Southern Equip is the main channel for publishing Southern Seminary’s original online-only content as well as the online clearinghouse for its print publications. The site is unique in that it houses a variety of designs rather than forcing everything into a standard template.

Testimonial

I’ve looked to David for numerous digital design solutions and he has always exceeded expectations. Most recently, he led the design and product development on a very complex project of high importance to our institution. He was easy to work with — communicating professionally throughout the planning, design and implementation of the project and also creating high-quality deliverables to help present to our leadership.

Steve WattersFormer VP of Communications, Southern Seminary