You’ve probably seen it a million times. You find the exact search result on Google that you’re looking for and then you hit the page and, BAM! Content Here! Content There! Even some content hidden behind more content!, and look there’s some content flying across the page! You have no idea where to look or what to focus on. This problem is all too common and inherent in almost every website out there. How this problem is tackled determines whether your website will separate itself from the rest. This can be both a design and a development problem, so I’ll tackle that from both sides.
First and foremost, content should be distilled down to it’s core message as much as possible. This may mean rounds of revisions, but this is the single most important step. What this does not mean is that every article is 500 words or less and every headline is a single line. It means that there should be no redundancy, no over-explanations for people who don’t even need to be reading your content(knowing your audience really helps here), and no content just to fill a page. If you’re trying to fill space with content, you don’t need that page. The entire point of a website is to display content that you are willing to share with the world. There is already enough content on the Internet to read through without having duplicate or fluffed content(This also really helps with SEO, but that’s not my specialty). Also part of this step is to determine whether you need more content to accurately convey your message, but this is not often the case.
Designed to Fit
Once your content has been reduced to a golden nugget of information, it’s time to figure out what design will best display your content. Text-heavy? Make sure the typeface you choose is very legible, ensure your font size is large enough, give a generous line height, and keep your line lengths to around 45-80 characters. It is very hard to read multiple lines of text outside of that line length. A useful tool for keeping type consistent on your website is Flowtype.js. This scales the font-size to the width of a particular element on the webpage. Flowtype easily prevents text from having an unwieldy line length. Multiple columns should also be considered, but often one column is better especially for any lengthy amount of text. Also consider keeping the area around text heavy sections clean and minimal. Overly crowded sidebars or even fixed navigation bars can be distracting.
Handle content that runs on the image heavy side differently but with some of the same principles in mind. Images should be responsive as often as possible, meaning that they grow and shrink in size depending on the width of the container. Reduce image file size to keep load times low. Most importantly, display images at their full dimensions if possible keeping your design in concert with your image sizes. For example, if you have lots of large images, use them as large backgrounds or hero images to really engage your audience and show off your content. Otherwise multiple smaller images might best be displayed in a gallery style or dispersed between breaks in your text. Handle pages that have mixed content with care, being sure not to overshadow your core message.
Priority and Pitfalls
Content on the page should be given a numbered priority. In countries that read left-to-right, your most important content should lie as close to the top left as possible while the rest of your content flows left-to-right, top-to-bottom by priority. Keep this in mind as the design for your website unfolds and make sure your what’s really being focused falls closer to the top left. A major pitfall that occurs with many websites is that people feel they have so many important things that they all should be at the top. What ends up happening is everything is placed in a slideshow or carousel, and no one ever sees the content in the slider which ruins their original intentions. In most cases, a carousel isn’t needed. Another major pitfall is long navigation bars. Main navigation rarely needs to be longer than 5 items. Anything more dilutes your visitors focus and the importance of your links, similar to the carousel.
Keeping your content focused and presentable is mostly a design problem, but it can also be ruined by internal relationships and fights for importance, bad development decisions, or a diluted message. Spend a good amount of time really boiling down your content to it’s core as well as really finding a design that flaunts your content. Give things room to breathe and don’t let your design distract the reader. What’s the reason you have a website anyway?