Magazine-style layouts have become very popular in recent years in web design, and it is a popular request in the Headway forums for feedback, tips, and help designing this type of site.
Magazine-style websites aim to provide a lot of information in a small space (particularly the homepage), often with space for advertisements or featured content.
You’ll commonly see these features in magazine-style layouts:
- Primary content is contained in a featured content area, promoting the best of the latest content with large graphics, the article title and an excerpt of the content. This is the most prominent area. This can be a slider or carousel, or a small grouping of content blocks set apart by larger graphics and fonts.
- Secondary content is additional content, most often in a list or grid format, typically with a featured image, title, and possibly an excerpt.
- Secondary content is often grouped into categories in different areas on the screen. Different categories will sometimes have different sized featured images or a different layout of the excerpt/title/image.
- Secondary content areas feature bold, clear headings when content is grouped by category.
- Tertiary content is generally just a list of titles, often grouped by category, without excerpt or thumbnail.
- Some sites will include areas to feature content arranged by author vs. category.
- Bylines are not always included in post meta on the homepage; it depends on the importance of authors/editors to the site audience.
- Secondary or tertiary content is sometimes featured in content carousels or as a “ticker” style.
- Magazine-style layouts often contain space for advertisements of various sizes and placements.
Samples to Get Those Creative Ideas Flowing
Here are a few big magazine-style sites demonstrating a lot of the common features mentioned above (links open in a new window):
Work That Content Block!
Grid layout is going to be your starting point for any website, and fitting all those blocks and content in is going to be crucial for your magazine-style site. You’re going to need content blocks—maybe a lot of them!
Become familiar with the content block options and really leverage each option here! You’ll be using custom query mode to pull in different “slices” of content from your website. Remember that you can set different sizes and orientations for thumbnails, unique post meta (per post type, even!), as well as limit posts retrieved by category, post type, custom taxonomy, or author.
Block Titles as Section Headings
Use block titles to designate section headings. Block titles can be styled separate from any other titles or headings in Design Mode, so you can really set these apart easily.
Use Widget Areas
Content blocks aren’t the only way to get post summaries onto your homepage. There are a lot of great plugins out there in the WordPress ecosystem that give you control over what posts are displayed and how they are displayed with advanced customization options. Use widget areas with a block title set to the category of posts you’ll display paired with a great-looking widget, and you have more control over your layout and display than ever before.
Let Your Content Breathe
Don’t forget to work in a little white space and breathing room! Magazine layouts work best when images, headings, and “white space” or “negative space”—empty space—gives the eye a break from long blocks of text. Keep excerpts short and keep your layout flowing!
Test, Test, Test!
With a magazine-style website, you’re probably trying to engage a wide audience (or at least a large audience!) and possibly make a little dough on the side, too. Use Google Analytics, click heat maps, and any other data you can get your hands on to see what your visitors respond to most and which layouts work best.