During her talk at the EBI, Sue Keogh included a slide with a screen grab of the homepage from the Scientific American website, and told us that the content is well-presented, and is helped by good design.
But there are lots of links on that page… lots of options. Why does it work, when other similar pages fail? Here a few pointers…
Thanks to Mark Bingley for double-checking this review.
Scientific American homepage – the good bits
Branding and Navigation
Branding is prominent but not overwhelming.
Navigation menus are skillfully separated in to primary and secondary.
The menu items themselves are short, interesting and will make sense to a broad audience
Long drop-down menus are wrapped, so that they are not lost below the “fold” of the screen.
Across the site, the information architecture and sensible categorisation, means that, although there is a lot of content, it is easily navigable. Naming is logical and clear for the user, and there is no need to use a secondary navigation area on the right or the left of the content area.
This means that the whole content area can be used for… content!
Good use of typography – text is a good size (and easily resizable), and well spaced out. Headings are clear and easily distinguished from body text, and there is a clear hierarchy.
The use of a serif typeface gives it a lighter feel than we might expect for a site like this. They have used Georgia (a “web safe” typeface) throughout, except for in the footer, where it is Arial / Helvetica.
Plenty of contrast between foreground and background (e.g. white text on dark brown; black on white or pale green)
Lines are a sensible length, again thanks to the 960px width.
Lots of bite-size, distinguishable chunks of content, and a variety of ways to get to them.
60-second media bursts are custom made for the web user.
Search box is in a “standard”, predictable location on the page
Apart from the advertising, the right-hand sidebar contains only lists of links, an no thumbnail images or text excerpts. This allows the sidebar to be clearly defined as secondary content, so that it doesn’t compete, visually, with the main content on the left.
The main content is (dare I say it?!) very “web 2.0”, in that it is very dynamic and varied. This is a good thing!
Content is being drawn from different places, produced by different authors. There are blog posts, slideshows, news items, images, podcasts, videos, articles… all available on the homepage.
News items display their freshness, adding to the sense of dynamism
Good use of the footer, to pack in some more links to useful content.
It isn’t overpowering, though. Links have clearly been given less weight here than they have in the main content of the page.
The eye is quickly drawn to the featured content, placed in the top left
Content is centered, which will make a big difference on large / high res monitors
Grid layout – based on a 960px wide, roughly 16 column grid; the columns being 50px wide, and the gutters 10px.
This means that the main content takes up approximately 2/3 of the page, and the secondary content on the right takes up the remaining 1/3. This would equate to 10 columns and 6 columns in the grid, although it isn’t precise in this case.
Good separation of content into distinct “panels”.
Each panel is clearly labelled, with a meaningful, interesting title.
Images and Graphics
Good use of small, subtle monotone icons. Wisely, their colour matches that of normal hyperlinks.
Images used sparingly but effectively to help draw they eye to key content, add value to associated text, and convey something about the story.