If you have a goal to start a blog that’s going to be content dense, you have to put a lot of thought into the layout. The challenge with content dense sites is that it’s hard to make sure that all of your latest content and popular gets read. Instead of trying to solve this challenge on your own, take a look at these online website publications to study their magazine style layouts.
The Economist has a great layout that uses multiple layouts throughout the site. It starts with standard featured posts and transitions into a menu layout to help users browse through to the top stories in their current issue. Each section uses a good amount of white space to help draw the eye from one section to the next and delivers an excellent browsing experience.
The Wall Street Journal:
The Wall Street Journal uses a layout that looks exactly like a print newsletter. It also uses a classic times new roman font which works well with the theme of the web design. The layout also displays different forms of content which works to ensure that all of their content gets enough visibility.
The Boston Review uses a very simple and minimalist layout. It only highlights one featured post on the very top. The rest of the content is laid out in a three-column layout for around half of the page. You’re only given a different layout near the footer of the site where less popular content is shown to the users that are interested.
Instead of using a standard magazine style layout, Reader’s Digest uses the classic blog format for their site. The only thing that makes it different from a blog is that the side bar column has links to top stories, trending topics and different categories interspersed as you scroll down deeper into the site.
Relevant Magazine succeeds with a professional looking layout that makes it seem like you’re reading through a stylish magazine. The layout uses a two-column layout but has graphical cues and labels that separate different sections. This allows the reader to scan through the website and understand what section they’re currently on.
NY Mag is one of the most content dense layouts you’ll come across. It seems like the designers tried to use a horizontal version of the card based layout. However, if you look closer into the layout, you see a clear grid design. There isn’t a dominant pattern to the layout and it seems the idea is to get the user to click on the headline and images that draw the most attention and interest.
Vanity Fair uses an interesting three-column layout that resembles the cover of a glossy celebrity magazine. They have a very clean grid layout that makes it easy to distinguish the different content blocks. There are also many graphical cues like arrows, wavy lines and slash marks to indicate where one content ends and where another begins.
The New Yorker:
The New Yorker has a very content dense layout like other news and culture publications. However, they different in that they focus on selling the headline and the preview rather than using the layout and images to draw clicks. This results in a presentation that’s very laid back and focused on letting the reader’s interest drive clicks.
Wired is a popular tech magazine that uses a card-based design in their layout. Instead of letting the card based design get out of hand, they use a grid to keep it clean and use contained content boxes for each different section. This allows readers to keep track of what they’re looking at while the layout engages them.
This magazine uses a very image preview driven presentation for their layout. It uses a three-column setup with a sidebar that takes up a third of the horizontal space. This creates a look that feels like you’re browsing a thumbnail preview on the content section and a magazine table of contents on the sidebar. The really impressive part of this site is that it has an excellent responsive design that uses a drop down hamburger menu for the navigation.
Esquire uses a standard blog layout but mixes it up by integrating slideshow style links throughout the page. This allows the magazine to feature full width blog preview posts while still providing navigation to different articles throughout the browsing experience. This works well because they use a sticky top navigation menu that the user can always refer to.
This funky online publication uses a three-column card based design accompanied by a side bar. This unorganized layout works with the look and feel that the magazine is going for. The side bar stands out from the rest of the design due to the different background colors used for each widget. They also have set up infinite scrolling to remove pagination for a fluid experience.
Mental Floss starts out with a large hero image for their featured post. This helps create the look of a magazine cover. This transitions into two-column layout – one left hand sidebar and one content section. The content section uses a varied layout that is unpredictable but very engaging. For organization, visual cues and labeling is used to categorize the content.
Forbes Magazine starts out with a large featured story. Then, the website layout uses a varied thumbnail style that reminds you of photo collages. The thing that makes it works is the fact that they build a visual hierarchy to make sure you pay attention to the important stories. Important stories are bigger in size and are trailed by less important stories which have smaller image thumbnails.
If you’re looking to start a blog that’s content dense, these examples should give you some great ideas on how to set up your layout. While you want these examples to influence you, you should have some trepidation about copying them blindly. You need to find a layout that works for your audience, so it’s more about testing different layouts than just picking a look.