Sites We Love: The Atlantic

Web design inspiration from one of the most popular news sites on the internet.

News magazines are one of the most popular website formats out there. There are many WordPress themes dedicated to the genre. And with all of the political stories that have been at the forefront of our lives in 2016, naturally we picked a news site to dissect for our “Sites We Love” feature.

This month, our targets are set on The Atlantic. It’s an absolute staple in the world of print journalism, having published its first issue in 1857. Online, it’s a top destination for politics, world news and culture.

We’ll review some of the best aspects of The Atlantic’s website and what makes it a favorite. Then, we’ll share some resources that you can use to implement similar design and functionality into your own WordPress-powered site.

Why we love it

The first thing you notice when visiting The Atlantic is that it’s all about news. There are no shameless design gimmicks nor is the home page overrun with ads. It’s all about showcasing the depth of the available content arranged in a simple, visually-appealing manner.

First up is a large newsworthy image that serves as the container for the featured story. Depending upon your screen size, you’ll then see an area with more big stories on the right or directly beneath the photo. Either way, the white headlines on a black background make for a nice contrast. What makes this top section work is that it’s very simple and not the least bit overbearing.

Below the “big story” section at the top, you’ll find categorized listings of articles arranged in a few variations of a grid layout. Sometimes it consists of four columns of featured images, with headlines and author information below. Others will sport two larger columns and still others will display as two columns of featured images/headlines with a vertical article listing in the right column.

This is a nice method of keeping things interesting. Your brain will stay a bit more engaged with what you’re looking at.

One of the more unique features of the homepage is the tiny, easy-to-miss navigation menu. Initially, it’s a hamburger-style menu that is tucked just underneath the logo. As you scroll down, a sticky top utility bar appears — but the menu is still in a hamburger.

Normally, this might be cause for concern and maybe a little bewilderment. In this case, however, it actually fits the aim of the site. The home page has so much news and is already broken down by category. In that way, the navigation almost becomes a secondary concern as users will most likely scroll down through the plethora of articles anyway. The navigation doesn’t scream out its presence. But the multi-column mega menu that displays once you interact with the button is very clear and easy to use. In all, it reinforces the news-first philosophy of the design.

Simplicity also carries through to individual articles. A large featured image is followed by some meta-data, social sharing and a single, narrow column of text. Ads are occasionally interspersed, and there is a small sidebar consisting of a video and author info towards the end of the article. Beyond that is a listing of popular stories with navigation to load further collections. This keeps with the theme of users continuing to scroll rather than use the navigation.

Project Assets

Now that we know a bit more about what makes The Atlantic’s website tick, let’s look at some WordPress themes, plugins and other digital assets that will help you build a website with similar goodies.

Themes

Cuckoo

Cuckoo’s top section featuring large, photo-based stories along with a text listing of additional headlines below provides a very similar vibe to The Atlantic. You’ll also notice that this theme uses a hamburger-style navigation and grid post listing. Functionally speaking, Cuckoo is built to mimic viral news sites such as BuzzFeed. But the look offers many aspects of what we love about our subject site.

Gridlove

If you’re looking for a categorized post listing similar to what The Atlantic features, Gridlove will help you achieve it. The theme allows you to build content areas via a drag-and-drop interface featuring groups of posts matching a specific criteria (all sports news, for example). From there, you can choose a grid layout that allows you to highlight specific posts (like an advertisement) and customize it all to match your needs. There is a lot of flexibility here to make different category listings unique. Individual posts can also be customized to match The Atlantic’s dead-simple look with related posts underneath.

Sophie

One of the cool aspects of selected categorized post listings in The Atlantic is a layout with individual featured posts on the left and a column with a vertical text listing of headlines to the right. Sophie implements its own version of this layout in quite an attractive way. It’s very useful for categories that have a lot of content. This type of layout cuts down on scrolling and again makes the category stand out from others on the home page. Providing users with information in an interesting way will help to hold their attention as they browse your site.

Plugins

WordPress Mega Menu

Mega menus are a great way to pack a lot of vital navigation into neatly arranged rows and columns. It’s something The Atlantic uses to great effect and something WordPress Mega Menu will bring to your own site. You can go beyond standard text links with the ability to add media like forms, video and maps to encourage user engagement.

Ajax Search Pro

A powerful, fast search engine is a must-have feature for any news site. With the number of articles The Atlantic has online, the search functionality is a lifeline to past archives. Ajax Search Pro is a plugin you can use to greatly improve upon the default WordPress search. The “live” search can provide results for your entire site — including custom post types.

LiveCom

During special events (like U.S. election night coverage), live blogging is used by The Atlantic to keep users updated on the very latest developments. Using LiveCom, you can broadcast your thoughts as events unfold. Embed images, video, tweets and set things up to autopost your content to your social media accounts.

Design Elements

As a news-oriented site, most of what you’ll see on The Atlantic are staff and wire service photographs from the people and events that shape our world. So, unless you’re subscribing to one of these services, you’re probably going to take things in a bit of a different direction.

A mix of your own photography and high-quality stock photos can be quite effective. Take, for example, some of the great images found on PhotoDune:

Eiffel Tower

United States Capitol

Downing Street Sign

Make It Your Own

Whether your focus is on a niche topic or a broad swath of subjects, there are some excellent lessons to be learned from The Atlantic’s website. For one, content is the reason people are coming to your site. It is of utmost importance to make sure that your content is front and center.

If your site has a multitude of categories and content types, clearly defined navigation is a must. And, don’t forget to make past archives easily accessible through search and other means.

Take these lessons and apply them as you see fit. You might just find that your audience will grow because of your great content and well-organized site structure.

See more from this series: Sites We Love: 99u

Originally published at envato.com on November 15, 2016.