Sector(s)

Team Members

mohammed j. razem, josebc, ahmad abbad, abu-zakham, alaa abbad, mqanneh

Visit the site

Visit the site

Organizations Involved

Community contributions

Several patches were contributed to several modules during the course of this project.

King Abdullah Bin Abdulaziz International Centre for Interreligious and Intercultural Dialogue (KAICIID) is an intergovernmental organization that seeks to prevent and resolve conflict and enhance understanding and cooperation by encouraging dialogue among followers of different religions and cultures around the world. Although the center is located in Vienna, Austria, it operates as an autonomous, international organization, which requires it to have a website that can reach a wide variety of target audiences from all corners of the globe.

KAICIID and Vardot joined forces to redesign and redevelop the organization’s website—last redeveloped in 2012—because its existing content management system didn’t possess the capacity to scale and grow with the organization, and didn’t have the range of capabilities necessary to adequately meet KAICIID’s multilingual needs. KAICIID needed a platform that could facilitate dialogue among its diverse pool of users, which includes Arabic, English, German, and Spanish speakers.

About the project

The main goal of the website was to build a platform that could reach and satisfy the needs of KAICIID’s diverse target audiences, a list that includes: NGOs, religious leaders, youth, media organizations, governments, partner organizations, direct beneficiaries, academia, opinion leaders, and the general public. These target audiences rely on KAICIID’s website as a communication hub and as a landing page for news and resources.

KAICIID’s web redesign with Vardot needed to meet a range of other goals to satisfy the needs of these target audiences. First and foremost, the new website had to clearly illustrate KAICIID’s mission as well as information about the organization's existing partners/governments and about interreligious and intercultural dialogue in general. It needed to reinvigorate KAICIID’s online branding to clearly display information regarding the organization and clear guidance to direct the various audiences to the content relevant to them. As a dynamic organization with simultaneous goals, KAICIID’s new website structure had to facilitate research and improve beneficiary engagement and interaction through fellowship programs and organized content such as research resources, event listings, emergency information, and KAICIID statements.

Aside from serving as an informational source, the new KAICIID website had to serve as an interactive resource with innovative integrations that improve the user experience. This included:

  • Integrating social media to increase distribution of articles and content
  • A system for showcasing training events information
  • A channel to communicate with interreligious and intercultural experts
  • A multimedia page including all videos and other media content searchable by tags, with thumbnails automatically generated by the CMS
  • A system for facilitating donations or attracting partnerships by selling initiatives as "products"

In addition to achieving these goals, KAICIID’s redesigned and redeveloped website required these deliverables:

1) Improved Multilingual Support:

As an international organization, the new KAICIID website required enhanced multilingual support with the capacity to consistently reach and serve the needs of users speaking several languages. To achieve this, the website’s user interface needed to be able to switch seamlessly between right-to-left and left-to-right languages without sacrificing navigation features and general functionality. Additionally, the new website needed the ability to provide flexible translation and SEO tools to optimize content in English, Arabic, Spanish, German, and other languages.

2) Streamlined SEO Optimization and Branding:

KAICIID’s new website needed the ability to generate traffic and streamline content creation and distribution in order to expand the organization's digital presence and reach a wider audience. This required the organization’s social media channels to be cohesively integrated with the website, as well as the integration of tools for analytics reporting. All of this while presenting the organization's brand as open, transparent, universally inclusive, accessible, proactive, and consistent with KAICIIDs branding guidelines through the website interface.

3) Optimization for Mobile:

KAICIID’s legacy website suffered from both inadequate mobile optimization and insufficient responsive design. Thus, harnessing the power of Bootstrap and various Drupal modules, Vardot promised to deliver a website with a user-friendly design and an intuitive interface that was equally accessible across all browsers and mobile devices. Vardot was able to achieve this while also vastly improving load times and mobile optimized elements able to work with all potential screens and devices that KAICIID’s website can potentially be viewed on.

4) Scalability:

As a growing organization with a widespread global audience, KAICIID anticipated needing a system able to expand and scale alongside the organization. This required Vardot to deliver a website with increased caching efficiency and an easily configurable database, all housed within a simple but sturdy architecture able to sustain speed and performance as KAICIID’s digital reach expanded and demanded more of the platform.

5) Improved Content Creation and Workflow

KAICIID required a website with a simple interface able to provide content creators with an intuitive and efficient content creation process.

Outcomes:

In February 2015, Vardot delivered KAICIID its new website. It was built upon Drupal 7 and utilized Bootstrap to make it fully responsive and mobile optimized; it also included significant SEO enhancements, featured enhanced multilingual support thanks to the integration of Drupal’s Internationalization and Entity Translation modules, and was furnished with upgraded content creation and navigation features.

By June of 2015, KAICIID’s new website had experienced immediate returns thanks to its improved SEO rankings, navigation paths, and content accessibility. KAICIID’s bounce rate decreased from 69% to 20%, it’s pageviews per visit per day rose by 6% to 3 per day, and the average daily time spent on the website rose to 3:53 minutes. [Source: Alexa.org]

Additionally, a testament to KAICIID’s quality content and its improved SEO infrastructure, the platform is now receiving inbound links from high-traffic websites such as Wikipedia.org, CNN.com, Huffingtonpost.com, and many others.

Contact Vardot

Back to top

Why Drupal was chosen

When KAICIID launched the process of overhauling its web presence, it sought a redesigned and redeveloped website running on a content management system with the capacity to improve site performance in multiple areas—and Drupal provided the required functionality to accomplish KAICIID’s online goals.

Specifically, Drupal was the perfect choice for KAICIID’s digital needs because it’s an open source CMS with the ability to handle large numbers of pages, content types, and permission levels, while simultaneously affording flexibility and ease of use for users and editors alike. Additional factors included the nonexistence of a license fee and an extensive reservoir of dynamic modules that are both built and maintained by the Drupal community and by Vardot.

Technical Specifications

Drupal version:

Why these modules/theme/distribution were chosen

The main distribution used to enhance the usability of the administration experience is Varbase: Drupal Bundled with Necessities. Which also comes prepackaged with a lot of enhancements and best practices modules and features.

A few highlights are:

Navigation & Paths Management:

  • Menu Block: To dynamically create menu blocks from menu hierarchy.
  • Menu Position: The site consisted of many content types, and each was assigned in a specific section. This module managed the breadcrumbs trail for each content type.
  • Path Breadcrumbs: Building breadcrumbs based on paths.

Mobile & Responsive Tools:

  • Breakpoints: To build a responsive front end.
  • Responsive Theme Preview: To allow editors to preview how the site looks instantly from the front-end for a number of preset device screen sizes.
  • Responsive Menus: To generate mobile-friendly menu, given the large amount of menu links and hierarchy.

Usable Management & Administration:

  • Pathologic, Image Resize Filter, Linkit: A trio of input filters were used to correct paths in links and images in the content if the URL of the site changes or the content is moved to a different server.
  • Drag & Drop Upload: Provides a drag & drop upload element and widgets for a file and an image field.
  • Workbench: Improves editorial workflow by simplifying the interface for users who only have to work with content; allows user permission control based on organization-structure not website structure.
  • Fieldable Panels Panes: Generates an entity that may be used in panel panes to create field-able entity panes using the Panels UI or a separate administrative UI.

Layout Management:

  • Panelizer: Allows administrator to attach panels to any node in the system using multiple entity types, and choose which content and layouts are allowed.
  • Display Suite: Drag and drop interface that smoothly controls how your content is displayed; for example, arranging your nodes, views, comments, user data etc.

Multilingual:

Other key modules:

  • Entityform: Enables you to create front-end forms like custom surveys, petitions, and personalized contact forms, and various other customized forms.
  • Features: To provide standard best-practice management of configuration and site's features.
  • Apache Solr Search: Search portal that allows for the organized retrieval of structured and unstructured data within an organization.
  • Feeds: Allows users to import or aggregate data as nodes, users, taxonomy terms or simple database records.

Performance:

  • Memcache: A memory caching system that speeds up dynamic database-driven websites by caching data and objects in RAM.