What is Content-Out Web Design?
The “content-out” methodology to creating web layouts is one that uses the content itself — copy, headlines, images, and media included, to be the sole deciding factor in creating a web layout. We usually see design crammed into a pre-designated layout, or for responsive design, pre-designated breaking-points, or three to four ‘sub-layouts’ within one website.
Mark Boulton made a reference in 2011 as to how too many of us are still thinking “canvas-in” in a newly responsive world. That is, we create the canvas of our web, and throw content inside, whether it best suits the content or not.
Content-out design is more concerned not of which breakpoints to use, or what layout is best, but rather, about letting the content itself create the layout that best suits it.
When designing around content, perhaps the best thing we can do first is weed out the best content, and strategically place it with the most importance. This is often a feature in mobile-first design as well. Since we don’t want to display a full-service website to a mobile user who’s on a smaller screen and using lesser bandwidth, we need to find the most important and most useful content and display only that. Then, if more content is possible, display it next.
Philip Meissner Design for Mobile
Philip Meissner Design
From a design perspective, mobile-first is essentially equivalent to content-out methodology. We want to focus on the content and readability/usability of that content above all else, including fancy design features. In mobile, design is meant to compliment copy, while when we design for desktop, we often get caught up in the design above all else.
Try designing for mobile and then upwards to really help focus on designing around content. Many of the same techniques apply: focusing on readability, content placement, simple yet effective navigation, and less on design layout and more on effective layout of content. Lay out the mobile version first, and place in content as step one.
Then, place essential elements — such as branding and navigation — appropriately so that it makes the most sense with the content. Aesthetic details can be a part of a content-focused design, but put them lower on the priority list.
Use Graphics to Enhance Content, Not Hinder It
When useless graphics are used to make a design “pretty,” it doesn’t really serve much of a purpose. Why not create graphics that improve the quality of content? Break apart from the simple web design with static images shoved into content, rather, find visual queues that are truly useful to the content, such as icons, infograhics, or minor design details that highlight headlines, blockquotes, or important sections.
Use relevant imagery, and think of creative ways to highlight the piece of copy it’s referencing. One way of thinking about it is to design your content as if it were a magazine article, or otherwise print-inspired.
One of the biggest problems with content-out methodology is that some designers feel that far too much emphasis is put on the type, leaving the rest of the website lacking. This can surely be true. It’s important to find a balance of both design and type, with type leading the way — type doesn’t have to completely take over though. In order to have a typography and content-focused design, you do not need to have only typography and content on the page. Content-out methodology is all about letting the content guide you in the design process, nothing more. The details are up to you.
Nonetheless, focusing on typography design is important. It is part of the design after all, and what the user will be most focused on.
Take a look at some inspiring showcases of websites surrounded by interesting typography, as well as websites with simple type yet sophisticated content layout.
- Get Inspired: 40+ Websites with Beautiful Typography
- 45 Creative Examples of Large Typography in Web Design
- Type Inspire
- 19 Bold Examples of Typography in Web Design For Your Inspiration
- Web Typography – 21 Beautiful Examples of Typography in Web Design
- Importance of Great Web Typography & Excellent Examples
Use Proven Analytics
What content on your website is currently most popular? What is most useful? What is most needed? Let statistics show you the way; don’t just assume. Now, how can you portray content based on that information in the best way?
If you can see that certain types of content are most useful to your visitors, then play that up. If content with a lot of statistics and numbers is most relevant, discover new methods to play that up, instead of hindering it with other distracting content. If story-line content seems to work best and is most engaging, use surrounding visuals to help tell the story.
Content-out methodology is about displaying your content in the most useful way possible, and that includes figuring out what the best content to display is, and in what type of layout. Perhaps you noticed particular pages or posts to be more popular, so why not put them in the most noticeable spot in your layout? Why not use design to put extra focus on that content specifically?
Cut the Distractions
Remove all distractions, and then only add back what is necessary. This includes popular post widgets, comments, images, header graphics, banners, and more. Has your content been hidden behind all this nonsense? Where do your eyes go when its added all back? Consider new placement of your content, and a new way of displaying it. Decide whether your design elements take away from the content, or help bring your focus onto the content as it should. Use details and sideline items with purpose, meant to enhance your content instead of taking away from it.
Ryan Clark Merrill
For the most part, content-out methodology can be considered an extension of “mobile-first” web design, as the core principles are the same. It is really an expansion though of not only being able to intelligently put more focus on mobile, but to really put more focus on how to design for the web on all platforms, and for all users. Web designers have always preached the importance that Content is King, and design comes second, but it does often get overlooked. Designing for content, rather than around content helps to bring that realization more to life.
Different designers may have different processes, and perhaps even different definitions for content-out design. What are your thoughts on the process and and how to accomplish a more content-focused web?