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.
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.
Various designs for the mobile view.
The final design is shown below in full in Figure 2.
Final design for the homepage mobile view.
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).
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.
Various “RM” marks
Color options for the brand tested on the proposed logo.
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.
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).
- postcss-importAllow local file imports via `@import`
- postcss-custom-propertiesAllow use of custom variables
- postcss-color-functionAdds functions for color management.
- postcss-unitsFunction to convert px units to rem or em.
- postcss-custom-mediaCSS custom @media query helper.
- postcss-calcResolves calc() to single property when able to.
- postcss-discard-commentsRemove comments `/* e.g. like this */` when compiling.
- postcss-remove-rootRemoves :root if present. This should be run after running postcss-custom-properties.
- autoprefixerAutomatically add browser prefixes based on caniuse.com information.
- postcss-cleanMinify the CSS.
²Sage 9, currently in development, will use Webpack for asset management.
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.
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.