Skip to content

Servants of the Lord and the Virgin of Matará

A Responsive, Multilingual, Global Reaching Website.

Responsive SSVM website - desktop, tablet, smartphone

The Servants of the Lord and the Virgin of Matará (SSVM) are a young, rapidly growing community of faithful women religious. This community was founded in Argentina in 1988 as the female branch of the Religious Family of the Incarnate Word. Today, the Servants of the Lord and the Virgin of Matará have 151 Convents in 80 Diocese, across 5 Continents and 35 Countries. The community's primary charism is the evangelization of the culture, which takes shape in the active work of the apostolic sisters but is fueled by the intense prayer life of the contemplative sisters. The sisters are readily recognized by their traditional habit, composed of a bright blue veil and scapular over a gray tunic. Please visit their website, servidorasdelsenor.org, to learn more.

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.

CDNTo 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

Translation interfaceLanguage 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.

To solve this, I used a dynamic JavaScript generated map that enables zooming by clicking on a continent, and then linking to content by clicking on either a country, or a location. All convent content was then categorized by location (a city vicinity), country, and continent. By doing so, I made the content navigable via the dropdown menu as well as the clickable map. Additionally, I provided popup displays of convent information on mouse rollover of country and location map markers.

SSVM World Map

Screen Shots

SSVM Website Design 1