Southern Equip

The Southern Equip project unified Southern Seminary’s insitutional resources under a single brand — Southern Equip. The site publishes primary media through the Equip identity and also serves as a clearinghouse for all other publication channels that exist at the institution.

The primary look and feel of the home page is the Southern Equip brand, but as you navigate to other areas of the site the design integrates the look and feel of individual publications all while maintaining the overall Equip brand. This presented some unique responsive design challenges which I cover further down the page.

Note: The logo, type selection, and brand colors for the Southern Equip, Southern Magazine and Towers identity were developed by Southern’s in-house Communications team. I was responsible for the Southern Equip (and all its subsections) website design and development. (And I also hired someone to help me with development.)

Publications

There are five publications housed in Equip — three academic journals, a semi annual magazine and a monthly news publication. We made the decision to let the academic journals inherit the native Equip style rather than spending time, effort and (literal) bandwidth to give them a custom design. However we wanted the magazine and news publication to keep their distinctive look and feel.

You can get a good understanding of how this was implemented via the mobile views for each of the three different versions (see Figure 1 below).

Default single article view published under the primary Equip brand.Single article published under Towers sub-brand.Single article published under Southern Seminary Magazine sub-brand.
Figure 1

From left to right: Default Equip article style, style for Towers articles, and the style for magazine articles.

Below in Figure 2 is an example of the “desktop” view of an original article posted under the main Equip brand. The fonts and colors of Equip are an extension of the institutional brand that is used for viewbooks and other in-house material.

Example of the default article style shown at a typical desktop resolution.
Figure 2

Article example of the main Equip brand.

Below in Figure 3 is an example magazine article design. The magazine design was created during a separate project which at the time was a stand alone website. To bring it under the Equip brand we added the Southern Equip header and footer and moved the masthead to the end of the article; which makes that a bit of a misnomer now, but it still serves a similar purpose, just in a different spot.

All the fonts and look and feel of the existing magazine design were kept the same. The Southern Equip header and footer are neutral enough to where they do not distract from the overall design of the layout. And throughout the site we use the same typeface for the body copy which acts as a cohesive motif.

Example of the single article style for the Magazine, shown at a typical desktop resolution.
Figure 3

Example of the single article style for the Magazine.

The news publication is called Towers and like the magazine we wanted to give it a distinctive look on the site. We used the same code and markup framework as the original Equip articles, and then matched the fonts and styles to the print publication (see Figure 4 below). Like the Magazine, and for the same reasons, the body text is set with the same typeface as all of the other articles.

Example of the single article style for Towers, shown at a typical desktop resolution.
Figure 4

Example of the single article style for Towers.


Responsive
Design

As mentioned above, having two logos in the header (three, if you count the parent instutional branding on the far right) posed unique challenges as horizontal space narrowed.

To further complicate matters, both of these logos had primacy and it made sense for both to occupy the typical top left corner in some manner. (The look and feel of the dual-branded articles wouldn’t have been complete without displaying their respective identities.) We tried stacking headers, but that just looked like, well, stacked headers. We decided that the best approach was to just have the two logos side by side with the Equip logo faded out to emphasize the publication currently in view (and to have some impression of hierarchy).

However, with responsive design the mechanics of adding an extra logo proved a bit tricky. But using a combination of @media breakpoints, jQuery (for the search interface), and CSS animations a solution was found. You can view it live by sizing your browser window on the live site, or you view the images below as I step through the responsive layout at various breakpoints.

For each I will compare the default header with the dual-branded header. We’ll start at the widest screens and work our way down to a typical mobile screen.


The widest views (>1800px) shown in Figure 5 did not pose any problems. I just added the second logo in the extra space.

Regular header at 1800px viewport
Dual header at 1800px viewport
Figure 5

1800px view

Next, shown in Figure 6, was the 1408px–1800px range and in this span we begin to run out of space. The regular header was fine, the dual view was not. So for the dual view I hide the search input and display only the search icon. jQuery is used to active the search input and hide the navigation when the icon as clicked with of course a cancel link to reset the interface back to the initial state.

Regular header at 1550px viewport
Dual header at 1550px viewport
Figure 6

1550px view

Below 1408px, shown in Figure 7, space becomes even more constricted. For the dual view, I collapse the institutional branding on the far right earlier than the regular view (which doesn’t happen until sub-480px), and keep the search input hidden with the same function as described just above. This method of hiding the full search interface behind the icon is also applied to the regular view at this point.

Regular header at 1396px viewport
Dual header at 1396px viewport
Figure 7

1396px view

The margins of the navigation container and individual main navigation links adjust to accommodate the ever shrinking space as the viewport narrows towards 960px. The images shown in Figure 8 are how the header appears at 960px wide right before the main navigation and the rest disappear behind the standard hamburger menu pattern.

Regular header at 960px viewport
Dual header at 960px viewport
Figure 8

960px view

For the 768px–960px range, shown in Figure 9, the entire navigation and search is hidden by default — which frees up space to expand the institutional branding back to its normal view with still plenty of room for an extra logo.

Regular header at 820px viewport
Dual header at 820px viewport
Figure 9

820px view

It’s the same situation between 480px and 768px with the exception that we have to again compact the institutional branding for the dual header view. (See Figure 10.)

Regular header at 600px viewport
Dual header at 600px viewport
Figure 10

600px view

Finally, below the 480px breakpoint is your typical mobile view (see Figure 11). The navigation and search are of course still hidden behind icons as before, and the institutional branding is now compacted for both views; but there is no longer enough horizontal space for another logo. I did not want to miniaturize the logos, nor did I want to increase the vertical space. So I decided to use a bit of CSS to create an animation that swaps the logos out every 3.5 seconds. Wait for it below.

Regular header on mobile.
Dual header on mobile.
Figure 11

Mobile view


Content,
Logic &
Development

One of the most rewarding outcomes from this project was the structure and organization of the build files and backend admin setup for the content editors. The entire site is run off a single WordPress installation and the techniques and patterns that were applied were gleaned from Notes on the Synthesis of Form by Christopher Alexander which was first published in 1964!

First, how the files would naturally be broken out based on page render was diagrammed for all the different article types. Patterns were then identified and a second diagram called a program was created based off the first (see Figure 12 below). And this process was actually done for the Magazine portion of the site, which was a standalone project before the Equip project began.

But the beauty of the program was that when it came time to work on a project twice the size of the Magazine project, we already had the build pattern in place and all we had to do was graft in the new. In other words, the design problem was solved, it was just a matter of working out the details.

Tree diagram showing file organization and hierarchy
Figure 12

The program


red e app

I worked with Red e App to design the next generation of the web application counterpart to their core product (a mobile app). Customer feedback has been highly positive.

Testimonial

I AM SO EXCITED for this new admin console. I literally cannot WAIT to start demo-ing it for people. The upgrades to the design and UI are significant — it will be much easier for our customers to use the new console, and we expect that training will be more efficient as a result of the intuitive design. David did an excellent job of learning our product, providing innovative design solutions, and getting feedback from our team throughout the process.

Hannah BeasleyDirector of Customer Success, Red e App