In This Article:

It Depends ...

When you have existing content and it’s time for a web redesign, a content-first strategy is just a fact. When redesigning websites for a great mobile experience, it’s best to use progressive enhancement and a responsive design, based on the optimized content for your users’ needs. In bigger companies, however, divisions of work may mean that designing layouts begins before the sizes of the actual information elements are known — possibly because the text hasn’t been written yet, or the content audit is happening in parallel.

Unfortunately, when container and content come together, unintended results can lead to awkward workarounds, expensive rework, or cutting all content to fit. To avoid these common problems it’s best to design the layout and the content toward each other.

CNN homepage layout
CNN uses an unforgiving grid. Although it looks nice, for most websites it may be too much trouble to cut all content to fit the grid boxes.

Things that Go Wrong with the Container-First Approach

Empty Placeholders

A template or CMS may contain placeholders for things that don't exist on every page or that don't make sense for the organization. Filling these with fake content during design can lead to empty, unneeded spaces later. “Lorem ipsum” must die.

Consistency for Its Own Sake

Lock-step consistency can lead to unusable pages with redundant or irrelevant content. For example, if a template has 3 layers of headings and the content has 2, you shouldn’t repeat one of the headings just because the space for it exists, yet it would probably look awkward to leave it blank. As Tog says, “the most important consistency is consistency with user expectations.”

dialog box with placeholder text
When placeholder or redundancy problems occur, vary the template if possible. Maybe that heading could collapse if it’s empty. If altering templates doesn’t make sense, perhaps consider using a template with 2 layers of headings with the option of creating another level of heading in the content.

Avoid the tyranny of placeholders, especially when working with off-the-shelf platforms. Customize as needed.

Scaling Issues

Scaling issues appear when the content size does not match the space that it needs to go into. Common problems include:

  • Layout elements don't grow gracefully when navigation scales up or is localized. The number of navigation elements eventually breaks the page layout, or new items are stuffed into the Quicklinks or a Resources menu.
  • Content is too big or too small for its allotted space, causing visual glitches.
  • Images break out of framing elements or have to be shown at too small a size for good legibility or optimal enjoyment.

Many of the major web redesigns we have worked on were required because of scaling issues. Scaling workarounds tend to evolve in unhelpful ways just like the junk drawer in your kitchen.

NZ Herald
The NZ Herald has a vertically flexible layout in which the columns are independent of each other. This newspaper-age layout convention accommodates varying amounts of text for each article synopsis and photo caption.

Unintended Constraints

Sometimes placeholder content is made to fit the proposed layout templates, so some of those early assumptions about how things will look eventually become arbitrary constraints.

Examples of baked-in layout limitations:

  • All image captions must be 2 lines long.
  • All summaries must be one paragraph having 5 lines.
  • Adding a sentence sometimes forces another page.
  • Absent content types cause empty pages that people must click through.
  • Menu items or headings can be one or two words long, but not three.
  • Column widths can't be changed without disturbing other page elements.
  • Changing browser font size causes the entire page to look broken.

Problems With Ads

Ads move all over the place and change sizes. Once upon a time, all ads were horizontal banner rectangles of a certain size. Later they were a different size, then they became almost square. At one point they swam across the page. Later they occupied interstitial pages. Designers who need their designs to last for many years shouldn’t design layouts around advertising sizes.

Ads pretend to be content. Sometimes they lurk near the scrollbars to grab stray clicks and taps. (Don't try to fool people into clicking on ads. That's a great way to lose visitors.)

Ads are not the most important content. Some templates look ridiculous when the ads are invisible, which is a good indication that they’ll look even worse with all the ads showing. If you are designing layouts primarily for advertising, you've probably stopped focusing on the things your website visitors show up for: the content.

Ads have conditioned people to subconsciously ignore them. Banner blindness can make anything near an advertisement (or anything that looks like it could be an advertisement), practically invisible to your audience.

You can’t test for these kinds of advertising problems until you have real content in your layouts.

What To Do

  • Create flexible layouts. That should go without saying, these days, but we still see so many rigid designs. The myriad screen sizes today require responsive web designs. Adaptive and responsive designs accommodate content more gracefully in general, but they won't save you from a lack of testing with actual content.
  • In order to be successful, your layouts, navigation, and text containers must be flexible both during the design process and long after deployment.
  • Use progressive enhancement principles to design for accessibility and cross-platform compatibility.
  • Design with existing content. If you're redesigning and you have content (even obsolete content), you could use that to begin with. In any case, if you’re designing a system of substantial size, you’ll need to fit the design to content as well as the content to design, because the website design and content must grow together.
  • If you have no content yet, borrow some similar media from other sources and assemble it inside wireframes, prototypes, and other mockups. You can also print out, cut it up, and rearrange content items on a table to imagine how your page layouts should handle it. This exercise can also help you better understand the types of content you'll need to address in order to make the website competitive and comparable in your industry.
  • Use placeholders only if you have to, and then only in the first stages of low-fi wireframe design communication.
  • Plan to embrace any predictable future developments. Your designs may accidentally survive for decades longer than you imagine now. Ask yourself, what will this organization want to publish when bandwidth is much better? When both giant whiteboard-size displays and tiny smart watches are more common? When digital assistants are reading to people? What will your mobile-first website need? What will your Chinese-language B2B website need? Maybe you need more templates now to avoid an expensive redesign later.
  • Consider future content types and display sizes, along with useful ways of repurposing content. All those fixed-width table layouts of yesteryear must be replaced or worked around. Orbital Content, an article from A List Apart, points out that website content is being pulled into a variety of other containers. For example, people and apps often use browser plugins to reformat pages in order to avoid bad layouts and text treatments, so they can more easily read articles. Similarly, websites might include chunks of other documents by embedding content in various ways. Plan for embeddability and sharing.
  • Plan to scale up. Try not to constrain the length of text or number of items any more than you must. Plan to accommodate larger font sizes than your own preferred size. Plan for more of everything, especially navigation.
  • Document your design decisions. Make design assumptions and tradeoffs clear, so stakeholders can make smart choices to either constrain the content or allow the time to make layouts more versatile. Consider whether any of these constraints and their design outcomes need to be mentioned in the style guide or pattern library for your templates.
  • Test early and often. Start with a proposed layout and test with real content, revising designs as you go.
  • Watch out for likely problems in content size and placement:
  • Make sure you know what happens with your layouts when:
    • Navigation items increase in number or length
    • Pages are read aloud by screen-reader software
    • Pages are viewed cross-platform, including on mobile devices
    • Content types (ads, videos, text) change size or shape
    • JavaScript, Flash, and webfonts are turned off
    • Forms, receipts and other key items are printed
  • Test the edge cases. Create layouts that look good with the outliers too: smallest, biggest, longest, busiest, most images, all text, charts and graphs, infographics, long headings that wrap, indented lists, paragraph lists, pull quotes, help, procedures, any advertising types, forms, and so on.
  • Test your layouts on as many platforms and display sizes as possible. You can't always get away with one-design-fits-all, but you might avoid making 3 versions of the website if you think through the trickiest content before you start building.
Android Fragmentation - screen size variety
As this grim reminder of variety in Android screen sizes in a report from Open Signal shows, content-design flexibility is the only way to go.
  • Translate draft layouts to see what breaks. Use realistic text and translate it into German and languages with different character sets, just to see what happens. This exercise helps test for fit extremes. It can also help you examine how well your layouts communicate what people should do and how the pages flow visually.
Google Translate - NNG in Greek
Many people use translation engines to read web pages. Use Google Translate or something similar to see how well the proposed layouts work for your worldwide audience.

Bottom Line

It’s not possible to accommodate every possible content type or size in every layout, of course. By thinking through future uses and the way people enjoy and repurpose your content, however, you should arrive at usable and useful layouts that will work for years to come. Debugging layouts during design will save a lot of copyfitting time and redesign money later.

Scaling User Interfaces