Building news sites: mastheads, comments, archives, search and type.
This blogpost is one of series exploring the design of news sites. The Newscoop Theme Contest gives designers and developers a chance to try their hand at redesigning news and win a trip to Sourcecamp 2011, where they'll meet and receive professional development from newsroom experts. Here we'll take you through the anatomy and unique features of a news site.
Masthead.
The header area is the part where the masthead and the main navigation are located. The masthead is your publication's logo or title. It should be the first thing your reader sees. It must be legible, tell people about your publication's intent and convey what they can expect. It's important to remember that while you may have looked at your own publication thousands of times, your readers may have not.
Archives.
Archive design must have a clear structure, so the reader can quickly identify the article they are looking for. Usually it is shown in reverse chronological order, grouped by years, months or weeks. Often, you will want to use a calendar to show a visual presentation of published articles in the archive. In Newscoop, for instance, we added a special function to provide a Calendar control, which will highlight all days that have articles (or issues) published. When a user clicks on a date, a link action fires up to open a defined URL with an additional parameter date. It could be used to address an archive template and sort articles according to the provided date.
Search.
A well-designed search results page can provide readers with a pleasant experience, so they won't be afraid to look for articles published in the past. Don't forget that your search results page should display not only the article's name, but also small pieces of supporting information about the articles (developers like to call this "metadata"), like the date it was published, the author's name and the topics assigned to the article.
Comments.
Comments are not only the feedback received for a news story, but also the conversation of the community behind your site. When you design a comments structure you should take into account that people are not only communicating their ideas about the article, but also communicating with each other. Threaded comments reflect this dialogue very well. Adding profile pictures so that each reader has his/her own picture shown next to the comment is also a good idea.
When designing comments and comment forms, you do not have to follow and modify existing HTML structures. Because of Newscoop's advanced templating system, comment submission forms can be designed and styled completely using HTML and CSS.
Typography.
Newscoop allows total control over font usage; you can even embed font faces using CSS3. Actually, one of the important parts of the design is not the choice of a single font, but all of the site's typography as a whole.
A principal part of typography is setting the line height. As mentioned before, line height is a good place to make use of the golden ratio. A value of 1.6 em should work just fine, but some kinds of content work better with 1.5 em. An example of good typography for web design is to set the font size to 13 pixels and the line height to 21 pixels. The ratio between line height and font size is very close to the golden ratio.
Using too many font faces might have major impact on the professionalism a publication conveys. Displaying fewer font faces might be less confusing for the reader. Consider using one font face for titles and a different one for article content.
Web fonts.
Many sites use web fonts for embedding new font faces in their design. There are several services that can provide this functionality; some are paid services like TypeKit, and some are available for free like Google Web Fonts. These services take care of providing the right font format for each browser. Some browsers are using standard font formats like OTF or WOFF (Web Open Font Format), while many mobile browsers use technologies like SVG for displaying font faces.
You can find out more about Newscoop's templates and themes in the Newscoop Cookbook, from which this post was adapted. Huge thanks to the original authors. The Newscoop Theme Contest is now open. Enter and win a trip to Sourcecamp Prague 2011.