Screen capture of front page on the new websiteFight Back! is a grassroots newspaper that exists to build the people's struggle and “provides coverage and analysis of some of the key battles facing working and low-income people”. The newspaper was founded in 1999 by a core of activists who wanted an independent publication to help with their organizing efforts for social justice, peace, and equality. Ten years and nearly two thousand articles later, an all-volunteer staff and dozens of correspondents across the country report (in English and Spanish) from the front lines of the most important struggles facing working and oppressed peoples in the United States and internationally.

The new Fight Back! website, which launched on September 27, is built in Drupal 6.

The Challenge

The first Fight Back! website was built in 2001 in Dreamweaver. It received a small redesign in 2003, but remained a static HTML website. Updating the website was a tedious task, and changing any of the site organization was close to impossible.

The editors of the paper wanted the content put into a content management system. The new website had to look professional, allow quick access to information, and be usable by a broad range of users, especially those with lower-end technology and less experience using computers.

One of the most important new features would be to increase user interaction with website via a commenting system on articles. Finally, the user had to be able to easily switch from English to Spanish, as the newspaper has many Spanish-speaking readers.

Of all the content management systems we looked at, Drupal was the clear choice in moving forward.

Building the site

There are three major components to the front-end of the website: the front page, articles, and department lists.

Front Page

The front page is built entirely using Views, CCK and Nodequeue. The lead story, feature deck, and recent stories are linked to queues. After adding an article, all the editor has to do is click on the “Nodequeue” tab and assign the article to a queue; when the cache is refreshed, the article appears on the front page. The right sidebar holds blocks that display popular content (most commented and most read), along with a display of recent comments and the Fight Back! Twitter feed. The feature deck is also linked to a Nodequeue, which gives the editor further control over which articles/content to highlight on the front page.

Articles

Screen capture of an article pageNews stories are an “article” custom content type built with CCK. Each article has up to 17 fields, but typical stories with one photo only require about 12. It took about 15 minutes to add a story on the old website; on the Drupal-powered Fight Back site, it takes less than a minute. Adding stories with photos slows the process down, but is still significantly faster than the old site; and down the road, possibilities exist for easily creating photo galleries based off taxonomy terms associated with the images.

The photographs are processed via Imagefield/Imagecache. Each photo has a Title, ALT, and Description field. I used the Title field for the caption, the ALT text for its proper purpose (a description to assist those using screen readers), and the Description field for the photo credit. In retrospect, it would have been much better to create a CCK field for “photo credit” as there is far more flexibility with that route.

Comments are displayed at the bottom of the page. In the development version of the site, I had experimented with the excellent Talk module, but decided to go with the simpler display for the time being.

Towards the end of the development process, the editor requested a photo essay feature. Using the Galleria module and a custom .tpl file for theming, it was quite simple to do this, and in a manner that is accessible to those using older browsers and IE 6. Galleria is a pleasure to use: it took less than an hour to set up a fully functional photo essay feature:
Screen capture of a photo essay content type

Departments

In the planning stages of building this site, I intended to create complex Department pages with Panels and Views, to allow for a variety of content to be displayed for a given department. But while a more complex page layout would be nice for a larger newspaper with more staff and resources, a simple list with options to filter by date and keyword was all that was needed:

Screen capture of the Capitalism/Economy department page

This is one of the most important lessons I learned in this project: simpler is often better.

Translation for ¡Lucha y Resiste!

Screen capture of the Spanish version of the front page Drupal 6 has excellent multi-lingual capabilities, and Spanish translation was an important component of porting the old site’s content into Drupal. Using the Language Switch block, a user can click on “Español” and enter the Spanish interface for the site – without losing their place. For example, a user looking at Immigrants Rights department articles in English could click on the Español link and see the same listings in Spanish, without having to navigate back to where they were. If there is a Spanish version of an article, a link is placed at the bottom of the English page that says “Español”, and vice versa.

I cannot recommend highly enough the excellent Localization client. Do yourself a favor, save yourself hours of time and frustration, and use this module to quickly locate and translate strings.

Theming

I started out the project using a contributed theme, Newswire, because I didn’t have the first clue about how to write my own. As I worked on the project, I started looking through the code to see about hacking some regions into the front page (i.e. a feature deck), or adding different regions for blocks. After a few weeks of doing this, I decided to write my own. Zen was a big help in my theming education, but I ultimately ended up using Blueprint as the base theme.

A word to the wise: test in IE 6 as you build your theme, not when you finish. I learned this the hard way and had to redo a lot of my work.

Performance

I read every article on 2bits.com related to this subject. Then I read them again. 2bits is a fantastic resource for anyone trying to wrap their head around performance issues with Drupal. The development site was initially on shared hosting, then transferred to a virtual private server on VPS.net with 256MB of RAM. I spent two weeks trying to cut down on modules, fiddling with caching, and tinkering with the MySQL configuration and PHP settings until page generation times were under 1 second. Then I upgraded the VPS to 512MB of RAM and the site flies. Average page generation times on the live site are 230 milliseconds. And by caching all Views I was able to get the number of queries down to 120 or lower for the front page.

Next steps for the site

The website launched on September 27 and we are already receiving a lot of feedback about what users like (and dislike) about the new site. Usability testing is on the agenda, to better assess how people navigate through the website and locate information. And more features to personalize the users interaction with the website will be added over time. For now, however, the website marks a big step forward for Fight Back! and is much more accessible, usable, and enjoyable to navigate than what existed before.

Helpful people and groups

I started this project three months ago with a rudimentary understanding of Drupal. Whatever I learned came from reading handbook pages, discussions on Drupal groups, and at Drupal user group meet-ups. So, I’d like to give some shout-outs to people and groups that helped me along the way. Indeed, without these folks there’s no way this project would have succeeded.

  • TriDUG – The Triangle area Drupal user group hack nights each month are a fantastic learning resource. Special thanks to Sheena and Alan for their helpful guidance and encouragement.
  • Newspapers on Drupal – Active group with helpful people and tons of information and frequently asked questions that you will encounter if you’re building a newspaper website.
  • Drubuntu – Helpful for people who are new to Ubuntu server administration and how it relates to your Drupal installation.
  • High-Performance – A good place to learn about optimizing your site.
  • Drupal Performance Tuning and Optimization (2bits) – Read every article on this page, then read it again.

Helpful modules

Rather than write out a list of all the modules used in this project, I would recommend folks who are interested to build a newspaper website take a look at the list of modules on the Newspapers for Drupal group.

Conclusion

More than anything else, I think this project is a testament to the helpful nature of the Drupal community, which has so many thousands of people willing to help others out in building better websites. Thank you to the community for your support.

Comments

noussh’s picture

Thanks for the detailed case study. Good work!

If you are in a particular articles page (in English language mode) and try to switch to Español, it doesn't work. However if you are Español and switching to English, then it works. Is it designed in that way or an error?

Thanks, noussh.

kostajh’s picture

Hi Noussh, thanks for the compliment.

As for the language switching: there are far more English articles than Spanish; moreover, 99% of the Spanish articles have an English counter-part. So if you are looking at an English article and click on "Spanish", unless there is a translation entered, you will still see the English content with the Spanish interface.