Designing with the Content-Out Methodology and Mindset

Designing with the Content-Out Methodology & Mindset

When the idea behind “mobile-first” came about, it helped emerge a new idea of how we view web design. Gone are the days where website design is only about making the web look ‘pretty.’ The web is a part of our daily function now, and far beyond mere entertainment and research as it was just a few short years ago. We need a new web that can match this expectation of daily use, from mobile to desktop, and to getting the information we want and need quickly.

Designing with a content-out methodology is about focusing on content, and only content (what the user needs) in the beginning of any design process. It is less about the visual design details and more about the end user more than ever today. People use the web differently today than they did years ago, and it’s time to start thinking of new ways of designing the web to accommodate this.

Designing with the Content-Out Methodology & Mindset
Image credit: Bigstockphoto

Designing with the Content-Out Methodology & Mindset

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.

Mobile First

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 for Mobile

Philip Meissner Design
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.


Think Typography

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.

Marco Barbosa
Marco Barbosa

Take a look at some inspiring showcases of websites surrounded by interesting typography, as well as websites with simple type yet sophisticated content layout.

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
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?


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.