Glömda Kriser Start page

Glömda Kriser (Forgotten Crises) is an initiative of Läkare Utan Gränser (the Swedish MSF) to raise awareness about humanitarian crises. By taking advantage of the public's creativity and commitment they hope to help the people of forgotten crises.

The site lets people log in with their Facebook account and contribute with their own project ideas. Each project has its own page where you can read about the project and see how it went. You can sort projects by popularity, ie how many people have liked them on Facebook, or see which projects have been supported or completed.

Why Drupal was chosen: 

Rabash has been building Drupal sites for more than four years, and it is usually our CMS of choice because of its stability, flexibility and many community modules.

We strive to make our sites as accessible and search engine optimized as possible, and Drupal 7 makes our work easier.

Describe the project (goals, requirements and outcome): 

Läkare Utan Gränser wanted a website based on crowdsourcing, where many people can solve a problem together and that is free for anyone to join. The visitors should be able to login with Facebook and create an idea. The idea has to be approved by an administrator before it's published. Once it is published it can be supported by Läkare Utan Gränser, and eventually marked as completed.

Requirements

  • Embedded YouTube videos
  • Facebook login
  • Facebook like, and sorting by likes
  • A FAQ page

Theming

We use a base theme that is based on Zen and Aurora. By using a base theme we don't have to start from scratch on every project.

Our base theme provides:

  • Valid and clean HTML5
  • Some basic styling to ensure that it is usable before we start working on the CSS
  • Basic regions that should work for most needs: header, navigation, featured (on top), highlighted (before content), help, content, after content, sidebar first, sidebar second and footer.

We use Modernizr to detect if the browser supports SVG, if it does all CSS images are displayed as SVG to ensure clarity on high pixel density screens. Otherwise a PNG will be displayed.
List.js was used to make the filtering and sorting of projects on the view page.

Sass and Compass

We write all our CSS in Sass to speed up the coding time. With Sass and Compass we can use predefined variables, mixins and functions so that we do not have to write the same code more than once.

Search Engine Optimization

Efficient SEO starts with clean code. We are using various modules to improve SEO such as Meta tags, Pathauto, Redirect, Global Redirect and Transliteration.

Accessibility and usability

We strive to make all our projects as accessible as possible with skip-links, link styling for keyboard navigation and more. We use WAVE toolbar plugin and Fangs Screen Reader Emulator for Firefox to identify accessibility issues.

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Custom pagers was used to create the pagers between project nodes, but also on the pagers between pages in the main menu.
Facebook OAuth for the Facebook login feature.
Media modules to be able to easily upload YouTube and Vimeo
Field permissions was used to have certain node fields only available for administrators.

Team members: