How to Fit Your Heavy Content on a Concentrated Webpage
RyanDecember 13th, 20165 minute read
Ryan is Codal's Junior Technical Writer. On the marketing team, he contributes blogs and articles for trade publications, Codal's website and blog, and marketing materials. Outside of Codal, he is a basketball fanatic.
Quality content can often be the difference between a truly engaging user experience design, and a simple collection of bells and whistles. Indeed, content can even be assessed in terms of it's own overall usability. But quality is not the only thing you ought to concern yourself with.
Content is vital, but it can also be tragically difficult to read when implemented incorrectly. Your thoughtful, engaging content may be left by the wayside if you do nothing to optimize the reading experience.
When designed properly, a web page with dense, heavy content can contribute to a highly engaging user experience.
The key to designing a successful content-heavy web page is to avoid overwhelming the reader with walls of text, no matter how well-researched and thought out the text might be.
TheBlackSheepOnline, a satire news tabloid targeting college students, tasked Codal with designing their content-heavy website. As to be expected from a blog, one major design criteria was the ability to display a high quantity of articles on the homepage.
Rather than creating a static homepage, Codal created for TheBlacksheepOnline an image slider which rotates through different articles.
By increasing the amount of articles in the image carousel, TheBlacksheepOnline can make the most out of the limited space on the homepage.
If they desire, Blacksheep can keep adding more and more articles to the carousel, although that may slow down the scrolling animations.
Maximizing Space Available With Alignment
Often overlooked in the usability design process, effective alignment is a great way to maximize the area available on a page. Alignment also helps to ensure that your user remains focused on the content at hand.
If you aren't familiar with the grid system and how it applies to web design, here's a nice introduction written by Ed Wassermann of Tuts+.
There are two different venues for alignment: the placement of sections themselves, and the placement of text within those sections.
Placement of the main text section determines where your sidebar will be. The orientation of your main text section relative to the rest of the webpage will determine the amount of space you have available for sidebars and advertisements.
In order to have a site that looks relatively symmetrical, it is best to position your text section in the middle (horizontal median) of the page.
Text placement within the main section is more liberal. Aligning the text to the right isn't a great idea unless you're writing in a language read right-to-left. Center and left aligned text are both viable options.
The worst option for text alignment is justified text. Justified text works well in novels, but will often leave your website with unsightly gaps in the text where the background shines through. Here's an (ironic) example:
Budget for White Space
In general, whitespace can refer to the part of a website that remains unused by design. Good UX designers, however, can use whitespace to change the way that the user interacts with the site.
Although it can be used for many things, we most often see white space used to separate links from each other.
When you're working with heavy content, you have even less space to work with. However, the same rules still apply: use whitespace to separate different links and ideas from each other.
Check out this screen capture from Shopify via Yona Gidalevitz's Shopify article on whitespace.
In this example of a vertically aligned website, the white space doesn't immediately capture your attention but divides the website into different sections.
In order to understand how to properly architect your information, you first need to understand how humans think.
Writer Brandon Jones of how-to combine Tuts+ writes that "people aren't what you would call 'equal opportunity see-ers' because we subconsciously are trying to classify what we see into different groups".
What Jones means is that when a human is presented with a collection of similar objects, they will instinctively try to put the objects into different groups.
If you were to organize the above picture, you might group the objects by shape, size, location, or even color.
Understanding that users are looking to put your links in different categories gives you an advantage in usability and user experience design. In the image above, the square is the most obviously different object, so it sticks out to the viewer. You want your most important link to be unique in the same way.
Have a look at this screenshot from the Spectre Visual Newsreader.
Notice how pink article stands out the most. If you were to scroll through the display, you would see that the articles are organized, with some variability, by color.
Since users are going to be grouping the links and elements of your site anyway, why not present the elements in groupings that you can test with user experience research?
Conclusion: Heavy Content Web Design is Worth the Challenge
Heavy content web design is not for the faint of heart.
There is a lot of potential for error, and according to Allen Smith of UsabilityGeek, minimalist web designs are trending upwards.
Perhaps the reason that minimalist web designs are trending upwards is not because there are better, but because they are easier to develop. A content-heavy website design obviously requires a lot of strong and well-researched strategy. Low content web designs are like Tweets: you just need 140 characters and maybe a picture with some relevance.