The Website Project
The SSVM sisters challenged Upper Room Media to create a contemporary, enterprise scale, multilingual website that could perform well in delivering rich media content around the globe. The site had to be responsive, since in so many of their locations mobile devices are the primary means by which people access the internet. Additionally, having a navigable map of their convent locations was a high priority.
A Diverse Global Audience
SSVM has three important website audience segments, each spread out around the world: 1) all Catholics who are interested in learning about the religious sisters; 2) prospective vocations to women's religious life; and 3) current SSVM sisters, family and friends. Additionally, each of the three audience segments are further subdivided by language, internet accessibility, and browsing device.
To satisfy the varying needs of these audiences, I took a mobile-first, content-first design approach. First, the vast amount of static content was consolidated and reorganized under just three main menu links - essentially addressing who, what, and where. For easy access to all of that, I developed a a touch-friendly three-level drop-down menu. Dynamic content (news and multimedia) was given separate single-level main menu links. This significantly reduced the number of page loads for users. Second, the site had to be light-weight in order to perform well anywhere on the planet, and keep mobile data usage to a minimum for users. This was achieved by off-loading video serving to YouTube and Vimeo, employing and advanced image caching system, and distributing site content via CloudFlare, a global CDN (Content Delivery Network). Finally, the website had to look good on small mobile phone screens, as well as on large desktop monitors. To achieve this I designed and developed a custom theme, using the Twitter Bootstrap front-end framework. Using a series of CSS3 media queries, the size and placement of various components could be optimized for the screen size of the particular browsing device being used.
Multiple Languages Made Simple
Language is complex. Just writing this content in my first language makes this point abundantly clear me. So how can websites owners expect machines to accurately interpret and translate their content? Drupal has a solution. It's not the easiest solution, as it requires work, but it is an elegantly simple solution. It's called localization. What it does is provide a place where you can store the translated version of the content (in as many languages as you need) and a system that will choose which content to display where. By organizing all this content into translation sets, Drupal knows which content is the same, and the language in which it is written. For example, you may write an About Us page in English, and then use the content translation interface to translate that content into Italian, Spanish, and Polish. This results in being able to navigate to the About Us page in the default English language, and then switch languages to see the same content in each of the other three languages.
Responsive Mapping with Clickable Location Links
SSVM has 151 Convents in 80 Diocese, across 5 Continents and 35 Countries, and each convent has its own images and information. Many of these convents are located in clusters around large urban areas. So the challenge was to represent this global presence on a map without overwhelming the user with too many highly concentrated map markers. This is especially important for users of small touch screen devices.