Smashing Magazine - we smash you with the information that will make your life easier. really.
Newspaper Website Design: Trends And Examples
News websites can be intriguing to examine from a design perspective. Regardless of what type of news they cover, they all face the challenge of displaying a huge amount of content on the home page, which creates plenty of layout, usability and navigational challenges for the designer. The lessons that can be learned from examining how news websites address these challenges can be valuable for designers who work with other types of websites, including ones with blog theme designs.
Monetization is also a major factor for news websites, and it’s interesting to see how they integrate advertisements in the design. In some cases, the ads are somewhat intrusive or excessive, but most news websites are able to use ads without turning readers away, in part because of the content that’s available.
For the purposes of this article, the term “newspaper website” refers to any news-related website that has the editorial focus of an online periodical. Many of the websites mentioned here are the online versions of major newspapers, but others are standard news websites and some blur the line between news website and blog.
You may want to take a look at the following related posts:
- Award-Winning Newspaper Designs
This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.
[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
Common Trends of Newspaper Websites
1. Color Schemes
Most news websites use dark text on a white background. Obviously, these websites contain a huge volume of content, and readability is important. A few of the websites mentioned later in this article use darker colors for headers or for the body of the page outside the content.
A large percentage of news websites also use blue and red in addition to a dark gray or black for text. Blue is extremely common for headlines, article titles and links. Red is often used sparingly as an accent color. Some news websites also mix in more colors in other places, such as in the navigation.
The L.A. Times website demonstrates a common color scheme:
2. Header and Sidebar Banners
Of course, all of these websites need to produce revenue, and banner ads in headers are a key source of income. Some websites use banner ads on all pages, and others exclude banners on the home page but display them above the header on other pages.
While blogs commonly use 125 by 125 pixel banners in sidebars, news websites commonly use 300 by 250 banners or tall skyscrapers. Many of the websites mix in some AdSense or other text link ads.
The Telegraph uses a 730 by 90 pixel banner over its header.
3. Top Navigation
Although there are a few notable exceptions to this trend, most news websites put their primary navigation menu just below the header and above the content. The New York Times and MSNBC are two of the exceptions, as they both use the left sidebar for the main navigation.
The Times Online uses a two-level navigation menu.
4. Tabbed Content Areas
Many news websites use tabbed content areas that allow visitors to see popular articles, recent articles, most commented articles, etc. This is sometimes used in the sidebar, and other times in the main content area, such as on Wired. This allows for more control by users over what content and links they see, and it can save space in the design by making more content accessible in a specific area.
5. Grid-Based Layouts
Newspaper websites are commonly built with grid-based designs. The grid is a popular choice not only because of the sharp look it creates but because it’s one of the most effective ways to manage and organize a large amount of content. The New York Times has one of the more well-known grid-based layouts.
Notable Differences Between News Websites and Blogs
The line between a news website and a blog is a fine one, and the two types are difficult to distinguish sometimes. For the purpose of this article, “blog” refers more to a traditional blog than to a commercialized news blog by a team of writers. While there are certainly similarities between blogs and news websites, there are also some key differences.
Social Media Integration
Seeing widgets or voting buttons on blogs is extremely common; in fact, most blogs use them in one form or another. Most news websites, however, use them more subtly, if at all. It’s common to see a “Share” section on articles, such as the one shown below from ABC News, but voting buttons are not used in quite the same way as on blogs, where a standard “Digg This” button may appear at the top of every post. A growing number of news websites recognize the impact of social media, but they are still using such tools subtly in their designs.
A few websites shown in more detail below do make more use of social media than others. The Huffington Post has a section specifically to display stories that are new on Digg, and the website certainly makes plenty of front page appearances.
RSS Feeds
Subscriptions and RSS feeds are a huge part of blogging, and most blogs use large icons or FeedBurner counts to make it easy for visitors to subscribe. Most news websites, however, don’t push RSS feeds on readers like a blog would. Most news websites do offer feeds, often according to category of content, but they’re not a major part of the design or layout. In fact, most visitors probably don’t even notice the small icons or links to feeds. As RSS feeds become a part of the daily lives of average readers, this will probably change.
The Guardian promotes a link to its feed in the website’s header, but with much less attention drawn to it than most blog themes.
Comments
Reader comments and discussion are a critical element for most blogs, but they’re not as important to news websites. Many news websites allow readers to leave comments, but they’re usually an afterthought in the design and are rarely promoted the same way as they would be on a blog. For example, many blogs show excerpts of posts on the front page, and almost all will also show a comment count with the excerpt that links to the comment section. This is used on a few news websites, but it’s rare.
ABC News is one of the rare news websites that shows a comment count by the post excerpt on the home page.
A Look at 20 Leading Newspaper Websites
The Onion
Satirical news website The Onion features a grid-based design (it’s been called the funniest grid you ever saw) that makes excellent use of the screen space that’s available. There is a lot going on on the website, which can be both good and bad. The main navigation separates the content into video, radio, sports, election, etc.
The header includes an ad on each side, and the sidebar has some advertising as well, but nothing too intrusive. Some parts of the home page are used essentially as advertisements for features that are part of The Onion, such as The Onion Personals and The Onion Store.
New York Times
The website of the New York Times is another well-known grid. The majority of the website’s navigation is down the left side of the page, which is not as common as top navigation. The website does use a tabbed navigation bar at the top with links to such features as “Today’s paper,” “Video,” and “Most popular,” but all of the content category links, such as World, U.S., Politics, Business, etc., are down the side.
The website’s design includes a nice use of blue and black headers and links, with a touch of red added in a few places, such as the time of an article’s publication. Overall, the New York Times presents one of the better newspaper websites.
Chicago Tribune
Unlike many of the other websites featured here, the Chicago Tribune uses only one small banner in the header of its home page, although individual article pages use a 730 by 90 banner. Aside from the header, the rest of the home page is fairly ad-heavy, including text link ads.
The content on the Chicago Tribune website is spaced out a bit more than, for example, the New York Times’. Again, blue is used for headers and links, with a touch of red.
Washington Post
The Washington Post also uses the common colors of blue, black (or dark gray) and red on a white background. The header includes a small 290 by 45 banner, and the top of the sidebar includes a 300 by 250 banner. The rest of the home page contains only a few other small banner ads.
The layout of content on the home page is focused on providing categorized links to specific content. An image is included for the lead story, but other headlines above the fold do not have thumbnails. At the top right, there is a section for the most-viewed articles.
Los Angeles Times
The L.A. Times website takes a different approach with its header than some other news websites. There is relatively little going on there, with plenty of unused space that could be filled with ads, something that most other news sites are doing. The rest of the home page uses only two 300 by 250 banners and a few text link ads. Individual article pages use a 730 by 90 banner above the header.
The content of the L.A. Times home page is contained in a grid-based layout, with primary navigation on the left. Again, blue, black and red are the colors of choice for text, links and headlines.
Tennessean
The Tennessean isn’t one of the largest newspapers in the U.S., but its website is worth noting. The Tennessean breaks some of the norms of the other websites that have been examined so far, primarily in terms of color. A dark orange is used for headlines and links, instead of a more common choice, such as blue. Additionally, a green background color is used on the sidebar.
There is a 300 by 250 banner in the sidebar and a skyscraper in the left sidebar, with more ads at the very bottom of the page. Individual article pages include a 730 by 90 banner above the header.
Houston Chronicle
The Houston Chronicle packs a large number of headlines onto the home page, including in the top center of the layout. This means there are more links to content above the fold, but each of them stands out less than it would on a news website that uses more thumbnails.
The website has no ads in the header of the home page, but has a few banners in the right sidebar and some text link ads at the bottom of the page. Article pages have a 730 by 90 banner above the header.
USA Today
The USA Today uses more color than many other news websites, particularly in the navigation menu and with links throughout the website. Category links for feature articles, such as sports, markets, education and people, all use different colors, which help them stand out.
Unlike most news websites, the USA Today shows the number of comments on articles right by the headlines on the home page. Only a few smaller banners are located on the home page, aside from a 730 by 90 banner at the very bottom of the page. Individual article pages are much more ad-filled, and at times while navigating through the website you may encounter a full-page ad that you have to skip to get to the content.
Mail Online
British news website Mail Online uses a more colorful design than many other news websites. The headlines and links are a lighter blue than those on the New York Times or Chicago Tribune websites, and they turn red on hover. The right sidebar includes tons of thumbnails from recent posts and colorful headers and roll-overs.
The website includes AdSense ads in the header and various ads throughout the rest of the layout, including some in the middle column. The grid layout keeps the content organized and makes use of virtually the whole page, which is incredibly long.
Telegraph
Another leading UK news website, the Telegraph, uses a nice, clean grid-based layout. Above the header is a 730 by 90 banner, and the only other advertising on the home page is a 300 by 250 banner and a skyscraper, both in the right sidebar.
The home page design makes extensive use of thumbnails to go along with article headlines and brief descriptions. Blue and red are used for headlines and links. The main navigation is located at the top of the page.
Guardian
The Guardian uses a clean but colorful design. The main navigation at the top of the page consists of various colored links to different sections of news. The home page uses little advertising, but individual article pages include a 730 by 90 banner above the header of the page, and 300 by 250 ad at the top of the sidebar.
Headers on the Guardian website are a common blue, but colorful borders are used to add some visual appeal. Thumbnails are used in several spots on the home page, but most stories have only a headline and brief description or just a headline.
Times Online
The Times Online is one of the few news websites to use a bright color in its logo/branding area, but it does accomplish the goal of distinguishing the website. Above the header is a 730 by 90 banner.
The home page uses a two-level navigation menu above the content and a fairly typical blue color for headlines. Several article excerpts on the home page include thumbnails, but there are no large images for featured articles as there are on many news websites.
MSNBC
MSNBC stands out among other news websites due to its dark yet colorful header, a look that’s been imitated by many Photoshop users. The header includes no advertisements, and in fact there is only one ad visible above the fold. Text link ads are used in a few places throughout the home page. Individual article pages do include a 730 by 90 banner above the header at the very top of the page.
Overall MSNBC is a very well-designed website, with an attractive color scheme and a layout that’s well-structured but not overly cluttered. Like the New York Times, MSNBC uses the left sidebar for its primary navigation.
ABC News
ABC News features a dark header that helps distinguish the website from other news leaders. There is relatively little advertising on the home page. The right sidebar contains a 300 by 250 banner and the only other ads are at the very bottom of the page.
At the top right of the page there are three current videos, plus a link to more video content. While other news websites include video, most don’t place videos as high on the page as ABC News does.
Ars Technica
Tech news website Ars Technica has a vastly different design than mainstream general news websites, which should be expected. Unlike the image-heavy general news websites, Ars Technica does not use thumbnails on its home page. Additionally, the article pages have very few images in comparison to general news websites.
The website uses tabbed navigation at the top of the page to take visitors to different categories of news, such as Business, IT, Apple, Hardware, etc. The header includes a 730 by 90 banner, and the top of the right sidebar includes a 300 by 250 banner ad. Further down the sidebar is a skyscraper banner.
CNET News
Tech news website CNET News uses a fairly basic design with a dark header, a featured content area, and a long list of headlines with brief excerpts. Blue and red are used for headlines and links.
The header includes a small text link ad on the right side of the screen and a few 300 by 250 ads in the sidebar. No additional ads are used on individual articles.
TechRadar
UK technology news website TechRadar includes a few items that currently aren’t very common on other news websites. Just above the content of the page, there is a “TechRadar Update” section that scrolls through links to the most recent content. Additionally, there is a featured content area that rotates through the six leading stories. Below the featured content area is a grid of the latest news headlines with brief excerpts.
The website header includes a 730 x 90 banner, and the sidebar contains some other banners and text link ads. The navigation on TechRadar is a bit different as it uses tabs for news, reviews, blogs, and forums.
Wired
The design for Wired is rather unique. Most notably, thumbnails, headlines and excerpts of featured content reside above the main navigation menu. Thumbnails are used below for the most recent article in each of seven different categories.
The header includes no banners, just an internal advertisement for WiredBiz. The sidebar contains a few ads as well as additional monetization through a job board widget that links to recent job postings on the website’s job board.
The Huffington Post
The layout and design of individual pages on The Huffington Post is quite different than that of the home page. On individual pages you see a small logo/branding area at the top left, with a very long banner on the right that takes up most of the width of the page. Advertisements throughout the rest of the page are fairly minimal.
On the home page, most of the area above the fold is used for a headline and image from a featured article. The rest of the home page includes a lot of images and headlines, as well as post excerpts from a variety of writers in the left sidebar.
Sporting News
The Sporting News has one of the most outdated designs. The header is used primarily for displaying scores, but with less space efficiency than other major sports websites. Above the header is a 730 by 90 banner.
Much of the real estate of the sidebar is used for directing visitors to other sections of the website, such as Sporting News Radio, the Blog Network and community blogs.
Related posts
You may want to take a look at the following related posts:
- Award-Winning Newspaper Designs
This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.
(al)
Steven Snell has been designing websites for several years. He actively maintains a few blogs of his own, including DesignM.ag, which regularly provides articles and resources for web designers.
(4 votes, average: 4.75 out of 5)
Loading ...- 161 Comments
- 1
- 2
November 11th, 2008 1:43 pmAs usual nice collection and tons of great tricks and functionality to copy… ;)
- 3November 11th, 2008 1:55 pm
Very nice collection, great post. But, I expected to people read more about the golden ratio with newspaper design on this post. Ciao everybody.
- 4November 11th, 2008 2:19 pm
Would be nice to know if they have a plataform (cms) in common, because there are some similar layouts, don’t you think?
- 5November 11th, 2008 2:20 pm
What a great write-up. The sheer volume of sites and screenshots here is fantastic. One of the many obvious themes is that although print may be dying out as a medium, its design principles continue to be carried out to the web. Awesome job as always!
- 6November 11th, 2008 2:20 pm
A nice roundup, glad to see Ars made the list (I’ve always liked their layout). Surprised that we didn’t see Slashdot, seeing as it is an interesting mix of blog and news-style layouts (well, even the redesign is a bit old, but it’s a gooder).
One interesting thing to note is the progression of smaller community newspapers (the buzzword “Hyperlocal” comes to mind) in the online world. I work for one of said newspapers as a graphic artist/web dev/whatever else they need, and our parent company actually requires us to use provided templates for our websites. We get to choose a template, a predefined color scheme, and create a header. All of their papers’ use these for their main web front, integrated into a commercial CMS (Zope). We also receive recommendations to utilize the open-source CMS Drupal for any secondary web products.
Another interesting part I’d be interested in seeing covered is the online classifieds system; not just Craigslist et al, but also the local and metropolitan newspapers, once again.
- 7November 11th, 2008 2:24 pm
nczas.com < IMHO the best design of the newspaper’s websites.
- 8November 11th, 2008 2:31 pm
Great list, but one glaring omission is CNN.com. Easily the best in the biz..
- 9November 11th, 2008 2:54 pm
nice research, would be great to talk about it in the forums!
i´m already registered in forums, but i cant find the forums of smashing magazineee, are they closed?
- 10November 11th, 2008 3:00 pm
PD: its very interesting how the blogs had affected the layouts as we know today.
- 11November 11th, 2008 3:22 pm
Pretty good list, but what about the Wall Street Journal? They have a very nice, good-looking website.
- 12November 11th, 2008 4:12 pm
Very nice collection. But, it seems like most of these news sites follow the same kind of format. I’d love to see more clarity and less content visible on the homepages. Just seems like the sites give us too much information at one time.
- 13November 11th, 2008 4:22 pm
WFL,
Thanks for the insight into your experience. That’s pretty interesting. - 14November 11th, 2008 4:29 pm
Times online was great! THanks!
Jhay
- 15November 11th, 2008 5:01 pm
Lots of interesting news sites, still positionning on blog design or classic press-like layout. It is still very hard today for a news site to make its choice between this two trends.
I also would include CNN because it has been radically thinking the news design in other ways — the famous ‘quiet structure’ layout.
and look deeper into the Ney York Times layouts, which has been influenced by Khoi Vinh, a great designer IMHO.
Lots of French news sites are analysed in terms of grid and navigational system, I also would expect you to discuss about the so-called ’scandinavian design’ which looks quite terrible for me.
- 16November 11th, 2008 5:14 pm
No CNN.com? No Wall Street Journal? Those are two of the top 5 news(paper) design sites out there, and CNN is the best by far.
- 17November 11th, 2008 5:57 pm
I find it funny that DrudgeReport, one of the top news sites (even above NYTimes), isn’t listed.
- 18
- 19November 11th, 2008 6:50 pm
Colonthree! I agree with the posters that the “big” ones out there like CNN, BBC and WSJ should have been included.
- 20November 11th, 2008 7:03 pm
While you may not understand the content, Norwegian newspapers have shown that they know how to keep their users from leaving their site. Take a look at http://www.db.no and http://www.aftenposten.no. These designs are totally different to the sites you list, with long scrolling front pages, large images, that keeps the user longer than usual. Compared to the sites above, after a casual reader has read the main headlines, he will leave, but on these sites, he will read until he reaches the bottom. Keep in mind users usually read a story, click the back button to see if there is more to read. With scrolling content, there’s always more to read below, compared to most of these 1 to 1/2 page long sites.
- 21November 11th, 2008 7:12 pm
Some great observations in this post. Thanks for posting.
- 22November 11th, 2008 7:39 pm
I’m a bit surprised by the omission of CNN, WSJ and the BBC (particularly given they had a redesign this year). Another interesting comparison would be Newsvine – who are in the social/traditional crossover group.
- 23November 11th, 2008 7:50 pm
Great article but I’m stumped as to the reasons why you would have not included CNN and the new design at BBC. IMO the two best, most functional news sites to date.
Jambla.com
- 24November 11th, 2008 9:46 pm
I find it funny that DrudgeReport, one of the top news sites (even above NYTimes), isn’t listed.
Have you seen Drudge’s website before? It’s not exactly pretty.
In other news, great list, although I do think CNN should have been mentioned. And I heartily agree that TheOnion is the best designed newsish site out there, which really is kind of sad.
- 25November 11th, 2008 10:18 pm
Do you know what criteria they were using to choose the top 20 sites? Was it more distribution or design elements?
- 26November 11th, 2008 11:02 pm
Interesting selection of the online magazines. To be honest I did not hear for some of them before so this is vey informative for me.
Cheers
- 27November 11th, 2008 11:59 pm
I truly value the article(s) written here at Smashing Magazine. It keeps me informed and covers a lot of ground. I generally use your magazine as a top reference when researching web developments and in particular I found this one very useful. It has been of particular benefit in research I am conducting for the soon to be launched New Science Journalism magazine. Thank you.
- 28November 12th, 2008 12:37 am
Along with other readers I’m surprised the BBC weren’t in the list. Interestingly after reading the article I immediately noticed the black, blue and red theme common to most of the examples above.
- 29November 12th, 2008 12:57 am
The national gazette by Cameron Moll is one of my personal favorites
- 30November 12th, 2008 1:01 am
Oh, as an addition to my previous comment:
The paper is awfully empty at the moment. Here s screenshot of the original design: http://www.cameronmoll.com/projects/ng/home1b.html
- 31November 12th, 2008 1:23 am
Hello its nice post but is the different using the design parts between USA , European and Russia newspaper on the web.
- USA newspaper show more as print newspaper
nytimes.com, (this is great newspaper webdesign style usnews.com)
- European show as web portal newspaper
Pravda.sk, guardian.co.uk
- Russia show as web portal with 100% width and worse graphics
pravda.ru, gazeta.ru/english
I have talk about this problematics on webexpo in Prague (middle europe) and here is my presentation in PDF 1.5 MB (Slovak language), if you will this presentation in EN write on my email. - 32November 12th, 2008 1:38 am
The Financial Times web site has undergone a redesign the same day that this summary was published.
* Grid based
* Adverts in the header and sidebar
* Pink background in-line with it’s printed paper - 33November 12th, 2008 2:02 am
Great list, but please please do not use the term ‘rather unique’ (or any variant) – something is either unique or it isn’t!! :) (Sorry, just a pet hate;))
Some great examples of design here, though.
- 34November 12th, 2008 2:19 am
Great post good examples
- 35November 12th, 2008 2:25 am
Martin. 27
Your links are inactive.
- 36
- 37November 12th, 2008 2:39 am
zydrius 31. yes , but my updat commnet is stopped
“Your comment is awaiting moderation.” - 38November 12th, 2008 2:56 am
TechRadar is built upon its own bespoke CMS platform, which we use for most of our other big websites. As design lead on TechRadar and an avid reader of Smashing Magazine it is great to see my work featured. Although the design isn’t anything revolutionary it fits the bill for the context of the site, ultimately to get the latest information and features across as easily as possible. However I am currently improving the user experience, which at present is pretty non existent other than the ability to post comments and talk in the forums.
It would be worth mentioning 2 of our other sites as well, recently released Total Film and BikeRadar which were designed by my colleague Ben and possibly show a better use of editorially weighted content. I won’t provide link due to not wanting to advertise.
- 39November 12th, 2008 3:09 am
An excellent selection of sites but I’m surprised there’s no mention of BBC News, which you can customize.
- 40November 12th, 2008 3:10 am
This is an interesting article. Compared to regular newspapers online equivalents often pale into comparison; using formulaic grid-based layouts on their front page to overwhelm the reader with every current headline available. Articles are then generally watered down with little real substance. It would be refreshing to see online newspaper sites break out of this tired mould. The likes of Jakob Nielsen have, in my opion, misguided developers and web producers by supporting the notion that users only digest tiny amounts of information by scanning pages. This ‘bitesizing’ has set the current trend for a lot of web design, and it has inadvertantly led to more confusing sites.
- 41November 12th, 2008 4:08 am
Nice observation. But I must say, I’m perplexed on why you left out CNN and BBC..these are news sites that managed to reduce the clutter. News portal always involve in information overload, but those 2 sites managed them very well..
- 42November 12th, 2008 4:54 am
Very interesting! Thank you.
- 43November 12th, 2008 4:56 am
I like the “Ars Technica” most.. nice collection
- 44November 12th, 2008 5:43 am
Great roundup — but one of the biggest trends in successful (i.e., revenue-positive) newspaper site design is the move away from the monolithic, portal-like web site. Increasingly, newspapers are focusing on “jobs that need to be done” in the community and building sites around those defensible, niche plays. These may exist alongside the main news portal but, increasingly, they are completely disconnected and don’t even share a domain name.
Those interested in the topic should check out the American Press Institute’s “Newspaper Next” project (http://www.americanpressinstitute.org/) — they’ve got great case studies, methodologies, etc.
- 45November 12th, 2008 5:49 am
not have = Time and CNN
msnbc it’s cool. - 46November 12th, 2008 6:25 am
Am I the one person who sees that the world is running out of blue? There was a time when blue indicated a link in the internet and there was a time when blue was the color of television news (deep blue, not fade-out blue). I’d never read an article in the Guardian. I’m simply not interested in a website that fades out just before my eye. A nightmare of possible ways to go, everything is blue. There is no highlighting. If I can’t decide I’ll choose none. At Huffpost there is no deciding. Who ever visits this homepage he/she will click on the huge ugly headline. That’s good layout.
- 47November 12th, 2008 6:53 am
I can not believe they missed commercialappeal.com
- 48November 12th, 2008 7:44 am
Nice info. Thanks!
- 49November 12th, 2008 8:34 am
Great article, but this site takes forever to load even on a T3 connection!
From YSlow:
This page has 29 external JavaScript files.
This page has 8 external StyleSheets.
This page has 17 CSS background images.Damn!
- 50November 12th, 2008 9:02 am
As a designer/developer for a newspaper, its very interesting to read this article and the associated comments.
A lot of newspaper websites do use a common CMS, usually dictated by the parent corporation. I can’t speak for all, but our paper uses a corporate dictated CMS, with a specific hosting company, this doesn’t restrict us in the layout we use in any way. The CMS we use is more of a true CMS than many out there in that it helps us manage the content while staying out of the way, for the most part, of the design and layout.
While comments on stories may or may not be important for the national and international news sites, they are extremely important for many local papers, as our niche is the community. To this end many local papers have even begun integrating social networking into their own sites, allowing readers to contribute stories, pictures, events, blogs, etc.
- 51November 12th, 2008 9:21 am
Great round up of news site trends. It’s amazing how much newspaper websites tend to follow the norm and are very conservative in the way they display their content.
I’d like to see more newspapers get creative with their approach to displaying information. In addition to offering a traditional blog style website, why don’t they embrace new technology and get creative like Daily Courier Pages which offers an interactive page flip style reader that has a more realistic style and feel to their online version.
New technology is becoming more and more available and affordable with software solutions such as 3D issue 3D issue for example, who allow newspapers the look and feel of a real newspaper but the convenience of an online platform.
Why are newspapers so afraid of breaking out of the norm and doing something fresh and exciting?
- 52November 12th, 2008 10:01 am
Its really very interesting and great observations in this post. Thanks
- 53November 12th, 2008 10:50 am
@R.G Here at U.S.News we use a custom built CMS which relies on the Zope web application framework. We have no parent company dictating how we should layout our pages. We did seek an outside company to handle our re-design though.
- 54November 12th, 2008 2:34 pm
Bjorn,
Thanks for the links to the Norwegian sites, that’s not something I would normally come across.Rafferty,
There wasn’t any particular criteria for choosing these 20 and they weren’t intended to be the top 20. Just meant to be some examples to see what’s out there. Obviously many commenters have pointed out other sites that would have been nice to have included. - 55November 12th, 2008 3:37 pm
If you don’t just browse the home page of the New York Times you will see that they rely on a top horizontal navigation on the rest of the site. Seems like you didn’t spent that much time examining what you talk about.
- 56November 12th, 2008 7:25 pm
helo SM, is there any way you can make your links open up to a new window? instead of itself? .. it’s so inconvenient going back gain n again …just checking your samples.m doing a benchmark on online newspaper site..coz i got one project here ;).and this one is good post exactly what i’m looking for. Thanks! keep it up!
- 57November 13th, 2008 2:37 am
I think you should also take a look at some russian news sites. for ex: lenta.ru
- 58November 13th, 2008 8:23 am
bz00: Tabbed browsing would do you good ;) Use firefox or a newer iteration of IE, and ctrl+click/command+click/middle-click on the links
- 59November 13th, 2008 9:03 am
Hmm… I think this summary generalizes a little too much. You said twice that the NYTimes site is unusual for having a left-side navigation, but that’s not true. The *homepage*, one page out of the site, has a left-side navigation, but the rest of the site is across the top. Did you not click into any other page?
When you say that news sites don’t “push RSS feeds” on users and that this may change in the future, you’re editorializing. No site “pushes” RSS feeds onto users. They’re just as subtle on blogs as they are on news sites. One or two small links. Some blogs don’t even include the link because the non-feed-reader-using blogger thinks they’re not important.
And the fact that news sites provide share buttons that let you share with more than just Digg to me seems like they’re using social media tools *less* subtly than a blog that just focuses on Digg. Letting a giant Digg box take over the top of your post doesn’t mean that you take social media more seriously (but maybe it does mean that you take design less seriously…).
- 60November 13th, 2008 3:09 pm
Haven’t even read this post, but Steven my man keep up the good work!
Can you produce any more output then STeven I mean really you are a publishing machine!! - 61November 14th, 2008 9:16 am
yeah cnn is about 2 years ahead of all of those examples. pretty sad no mention considering all of these sites are playing catch up desperately
- 62November 14th, 2008 3:23 pm
What cms would anyone recommend to manage a national newspaper site – I’m building one starting in Jan have come up with either ExpressinEngine or Drupal.
Any suggestions?
Best wishes
Lee - 63November 14th, 2008 10:30 pm
The reason Scandinavian websites use a highly scrolling vertical design is that they want their sites to be mobile-friendly. This was shared with me by the chief of aftenposten…
I think you should also look at some Indian sites – Sakaal Times or Livemint.com – these new websites feature very contemporary look with nice color schemes.
- 64November 15th, 2008 12:23 am
There’s a flaw here: newspapers all feel the need to place as much content on the home page as possible, because they don’t trust readers to click through to stories. This huge amount of content not only makes scanning difficult, it makes emphasising certain stories a problem. Constructing a clever grid doesn’t solve it, removing content and rethinking site structure would.
The Guardian’s header is a design disaster: it has not one but two navbars, random use of colour and drop down boxes that lead to over 70 links (!) I’ve written about this.
The other problem is that they try and look like their print versions, which results in this multi-column, hard to scan on a screen design.
- 65November 15th, 2008 1:07 am
its great to see so many layout in one place. I have changed mines several times now. I spotted a few that may work better for me than what I currently have. :)
- 66November 16th, 2008 1:14 am
great article. from the sites presented, I think that if you want to providean elegant look, cnet news does the best work. lots of tips – thanks!
my comments at http://www.commentino.com/orim
- 67November 16th, 2008 9:30 am
Nice…check our newspaper online pls…
We keep it very very simple and basic
http://www.punto.com.ph - 68November 17th, 2008 7:54 am
I agree with Bjorn, that it would truly be interesting to see a comparison of different news-design-philosophies. Even across the Atlantic.
Most Scandinavian news sites are very long, look confusing, but are extremely successful, both in terms of number of users and revenue. Take a look at Vg.no and Expressen.se.
These sites compete in a market with a very high level of Internet access that is fairly comparable to the US. Still – the sites are on some counts very different.
- 69November 17th, 2008 11:50 am
That’s a really great collection of designs.
Designing layouts like that for Wordpress would make an awesome collection of themes. Maybe I should spend the holidays doing that ;-)
- 70November 17th, 2008 5:34 pm
Thank you for the comprehensive compilation.
News and content-type portals in a way have a slight advantage of using the offline reading media format just simply because everyone’s so used to it. So even if they face a huge challenge of massive content they can also get by using the good ‘ol newspaper layout format. Of course this is easier said, than done. :-) Cheers.
- 71November 24th, 2008 4:03 am
ABC.net.au and smh.com.au hae pleasant/workable designs that appeal.
- 72December 16th, 2008 5:52 pm
knick-knacks,gadget
- 73January 18th, 2009 1:19 pm
Hi, I give another example of a good newspaper design for an italian magazine: http://www.tafter.it/ which was built with wordpress
- 74May 8th, 2009 12:54 am
heyy people,
i think that this is a really good round up. It hepled me very much, thank you so much guys, love you lots x - 75May 8th, 2009 12:56 am
heyy people,
i love this magazine :)x x x - 76May 8th, 2009 2:28 am
why are you wasteing your time you sad sad people go and get a life you really are verry sad ainbt ya this website is a load of rubbish we are ,made to do this you want to so verry sad lol get a life you freaks yes it ias a verry nice round i agree adios llove shamim…………….
- 77May 8th, 2009 2:30 am
the message above was me btw sozz
- 78July 6th, 2009 12:00 am
fuckin marvellous. thank you!
- 79October 31st, 2009 11:30 pm
Awesome post!
I’m looking for this one news website, its got a short funny domain name and i think its a .jp or .it domain.
It’s a really nice flash-based news website that displays recent news items on a grid, with each news story having its own color-coded block, the more popular the story, the bigger the block.
I forgot the website, please let me know what it is!
Thanks.
- 80November 25th, 2009 10:15 am
Just wanted to point out that the 730×90 banner doesn’t exist…I think you meant to say 728×90 (leaderboard) and the 300×250 isn’t a banner, it’s a posterboard.
- 81December 11th, 2009 6:10 am
Why does your layout change on every single computer????!!!!
- 82December 11th, 2009 6:12 am
i agree with leigh, and why do i only have steven snell on my stupid screen
- 83December 11th, 2009 6:13 am
I agree with Leigh and Marie. Nobody can read the comments and the layout is incinsistant!
- 84December 11th, 2009 6:14 am
i can’t believe that you spelt inconsistant wrong,
The site is RUINED - 85December 11th, 2009 6:17 am
You’ve runied it by pointing that out, MARIE!!!! Please be more considerate! But seriously, the layout needs to be sorted. I HATE YOU, MARIE! HATE YOU!!!
- 86December 11th, 2009 6:18 am
What?? Stop pointing out stupid flaws, poor Steven Snell has worked very hard to make this site and you are slagging it off!!! For shame!!!
- 87December 11th, 2009 6:18 am
Martha that is email abuse.
I am OUTRAGED
Your hate is not justified
You are wrong - 88December 11th, 2009 6:19 am
-.- you’re the one that pointing this out Leigh.
And, Marie, I can’t be wrong. That’s my opinion. Stop belittling me. THAT is site abuse - 89December 11th, 2009 6:20 am
F**k off bitch
- 90December 11th, 2009 6:20 am
GRAMMAR CHECK!!!!!
Stop misspelling words!!!
PROOF THINGS…….
*mutters* Idiots - 91December 11th, 2009 6:22 am
Leigh why did you say idiots, i have not spelt anything wrong and my grammar is perfectly fine.
- 92December 11th, 2009 6:22 am
>.> SWEAR.
EVERYBODY LOOK QUICK, SHE SWORE
The great Snell will murder you in your bed tonight Marie!!!! - 93December 11th, 2009 6:23 am
Unlike you, Leigh, I’m not so sad I have to sit there reading through things.
And why don’t you make me, Marie?
Will both of you please stop putting such irrelevant comments. It’s site abuse. - 94December 11th, 2009 6:24 am
Yes that may be so Martha, but it’s hillarious abuse!!
But that language is uncalled for Marie.
Hang your head in shame!!! - 95December 11th, 2009 6:24 am
Steven snell will not mind i am sure.
Martha what exactly am i supposed to make you do. - 96December 11th, 2009 6:25 am
no leigh
- 97December 11th, 2009 6:25 am
Ah… can’t argue with that Leigh
- 98December 11th, 2009 6:25 am
>.>
*shakes head*YES!
- 99December 11th, 2009 6:26 am
Shhh marie
- 100December 11th, 2009 6:26 am
100
- 101December 11th, 2009 6:26 am
so unfair >.> I wanted the 100th post
- 102December 11th, 2009 6:27 am
STUPID SITE, YOU CAN’T BLOCK ME….
FOR I AM
ARLENE PHILIPS!!!!!! - 103December 11th, 2009 6:28 am
Wel said arlene phillips
- 104December 11th, 2009 6:28 am
EVERYBODY LOOK
spelling mistake, AHAHAHAHAHAHAHHAHA
- 105December 11th, 2009 6:28 am
shit i can’t spell now
thanks martha - 106December 11th, 2009 6:29 am
and for once it wasn’t made that did it! hahahahahahaha
- 107December 11th, 2009 6:29 am
Martha’s contagious!!!
Teeheee
- 108December 11th, 2009 6:29 am
Leigh i just read what you said
how very dare you i can spell it just slipped under my radar - 109December 11th, 2009 6:30 am
That’s exactly what happens to b#me too…. >.> <.<
- 110December 11th, 2009 6:32 am
*tumbleweed*
- 111December 11th, 2009 6:32 am
leigh you taunter
- 112December 11th, 2009 6:33 am
AHAHAHAHAHAHAHAHAHAHAHAHAHA
Have you seen those people on the logo????!!!!
They look wickid man, yeah i’m done with the kids!!! - 113December 11th, 2009 6:34 am
nearly made a boo boo there
- 114December 11th, 2009 6:35 am
So NOW you’re insulting the logo? NOT COOL
- 115December 11th, 2009 6:35 am
i have never used the term boo boo before
and i NEVER will again - 116December 11th, 2009 6:35 am
wow I feel special for witnessing that, Marie
- 117December 11th, 2009 6:36 am
damn it!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- 118December 11th, 2009 6:36 am
Yeah so maybe we got distracted from the original point but what we were trying to say before is-
Yer’ layout is shit man!!!
(and stop saying i’m posting too quickly, it’s annoying as hell!!!)
- 119December 11th, 2009 6:37 am
Leigh swore
For Shame!!!!!!!!
like you said to me bitch - 120December 11th, 2009 6:37 am
OMM! You can’t say that!!!!!
- 121December 11th, 2009 6:38 am
My last post was directed at Leigh btw
- 122December 11th, 2009 6:38 am
I STILL CAN’T SEE THE COMMENT PAGE!!!!!
WHAT IS UP WITH THIS SITE?
- 123December 11th, 2009 6:39 am
NEITHER CAN I AND IT IS PISSING ME OFF
I LIKE THIS WEBSITE BUT GOD I HATE IT!!!!!!!!!!!!!!!!!!!! - 124December 11th, 2009 6:39 am
……… we like your banner though
- 125December 11th, 2009 6:40 am
na na :P I can see the comments
- 126December 11th, 2009 6:40 am
¬.¬
Smug git!
- 127December 11th, 2009 6:41 am
no come back either, i rule!!!!
- 128December 11th, 2009 6:41 am
Are you still there Marie????
- 129December 11th, 2009 6:42 am
Hush you. You have no opinion cause you can’t read the comments :P
- 130December 11th, 2009 6:42 am
YES why do want to know if i am still there
ARE YOU A STALKER LEIGH? - 131December 11th, 2009 6:42 am
*laughs hysterically*
HAHAHAHAHAHA MARTHA!!! Stop posting too fast, Steven Snell will murder you as well.
Do you think he’s Santa?
- 132December 11th, 2009 6:43 am
no you retard
- 133December 11th, 2009 6:43 am
Nah, Santa’s too busy with all the presents to make a website. LEIGHS A STALKER!!!!!!!!!!!!!
- 134December 11th, 2009 6:43 am
….. that is a serious and hurtful comment Marie!!!!!
AND NO I AM NOT A STALKER YOU STRANGE KID!!!!
- 135December 11th, 2009 6:44 am
shouldnt ask those sort of questions then
it was a easy mistaka to maka - 136December 11th, 2009 6:44 am
*sighs in exasperation*
Should’ve been a doctor………
- 137December 11th, 2009 6:45 am
mistaka to maka…..?
- 138December 11th, 2009 6:48 am
yes martha i said that
it was italien can’t spell that either
its all good
shame we forgot to do IT
but what are you gonna do - 139December 11th, 2009 6:48 am
oh i am terribly sorry Mister Snell, i never rated your site…..
I give it…………………………….. *drumroll*
4 STARS
If i could actually see the bloody comments it would be a grand five but sadly i can’t rate due to the same malfunction that doesn’t enable me to see comments, sooooo………..
TOUGH TITS!!
- 140December 11th, 2009 6:49 am
i concur
- 141December 11th, 2009 6:49 am
E E E E E E E E E E E E E E E EEEEEEEEEEEEEEEEE
YOU FORGOT THE E!!!!
- 142December 11th, 2009 6:50 am
no i nivver
proper scouse there - 143December 11th, 2009 6:50 am
Bella voice!!!!!
- 144December 11th, 2009 6:50 am
I don’t even have the voting button on my computer >.<
*gets out tiny violin* - 145December 11th, 2009 6:51 am
F**k you bitch, i am going to KILL you
- 146December 11th, 2009 6:51 am
*runs away!!!!!!!!*
…… Meh. I had a good run!!!
- 147December 11th, 2009 6:52 am
*gets out popcorn and watches*
- 148December 11th, 2009 6:52 am
wait till you are asleep!!!!!!!!!!!!!!!
- 149December 11th, 2009 6:52 am
EDWARD!!!!!!!!!!!!!!!
YOU WATCH ME WHEN I SLEEP????!!!!
What an Edward Cullen, freak
- 150December 11th, 2009 6:53 am
i am not an edward, edward would never kill bella
i am going to kill you - 151December 11th, 2009 6:54 am
O.O
Harsh?
Calling someone Edward is practically abuse - 152December 11th, 2009 6:54 am
i agree
- 153December 11th, 2009 6:55 am
>.>
Calling someone Edward is harsher than killing them?????
Weirdo’s!!
- 154December 11th, 2009 6:55 am
Yes. Finally you understand. You got there eventually…
- 155December 11th, 2009 6:56 am
*hugs site*
I know you’ll miss us
byeeeeee!!!! - 156December 11th, 2009 6:56 am
this is probably my last comment
love the site but sort out the comments page so that everyone can enjoy them
this is me departing
auf wiedersehen!!!!!!!!!!!!! - 157December 11th, 2009 6:56 am
Hurray!!!
I concur with Marie, apparantly it doesn’t have an ‘E’ on the end….. WHO KNEW?????????
Tschus
- 158December 11th, 2009 6:58 am
Hurray!!!!
I concur with Marie, yes it’s spellt with no ‘E’ on the end…. WHO KNEW??!!!!!
Tschus
*hugs site*
- 159December 30th, 2009 8:41 am
Received mine a few hours after leaving a comment here yesterday, haha! :) So glad it finally arrived! Thanks.
- 160January 18th, 2010 7:50 am
this website is damn helpful…helped me a big deal in my assignment…:)
- 161February 6th, 2010 8:32 pm
Sometimes they look cluttered and really hard to look at, or maybe it’s just me. LOL
Carl
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- lovely-css: a grid-based CSS framework - http://bit.ly/ayA0wb
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c
- jQuery 1.4 API Cheat Sheet - http://bit.ly/5zYYnE
Wow.. another great round up..! :)