This Blog covers the highlights of how Drupal could be used effectively to build a multi domain, multilingual site for a large Multi National Company. The site is also built to be responsive and the site optimizes to the device on which it is viewed.
Project Background
The previous corporate website of the MNC was built in Drupal 6 and delivered customized content for different countries in different languages. The key challenges for the site were maintenance and creation of new domains for new Countries as and when added. Some of the other challenges included sharing the content across countries and managing the translation of the content. The banners were also cropped for smaller devices.
The project was to help in removing these shortcomings and challenges and in redesigning a new responsive Drupal 7 site with architectural enhancements.
Key functionalities & the Drupal implementation
Key Design Features
The new site has a Contemporary and Responsive Design. The site is optimized automatically for viewing on mobile phones and tablets.
How this was achieved?
A responsive theme was built keeping in mind four breakpoints - 1920x 1080, Normal PC, 10 and 7 inches devices with both Landscape and Portrait view . Zen was used as the base theme as it helped to inherit all its HTML markup, CSS, and PHP code from this parent theme. A sub-theme was applied to customize certain sections of the parent theme as required.
For each banner used across the site, an additional banner was used for the devices with smaller aspect ratios and image caches loaded them based on the width of the device.
In order to enhance the performance of the site, Sass Module was used. The Module is highly compatible with all versions of CSS and is rich in terms of the available features and functionalities. This module helped to reduce the CSS file size and thus helping in enhancing the performance of the site.
The Font Awesome was used to replace icons with fonts , hence helping to further improve the performance of the site.
For the Animations used across the site, CSS3 was used in place of JS. A Mosaic view was also created as an option for the home banners. This was created by UniMity theming team without the help of any plugin support. The key considerations during the theme development was the performance of the site and compatibility across devices and across browsers.
For the Domain switcher, jQuery Plugin called malihu was used for a diffent look and feel.
Challenges faced & resolution:
Use of Browscap Module caused randomness in image loading as the tablet breakpoint was not detected. The Browscap Module was unable to detect the device and as result the correct panel was not select that resulted in Mobile banners being shown in Desktop and tablet view. So the code was customized in order to detect tablet and the desktop and it was used to load the desktop panel for both these devices. This solved the problem faced.
There were issues with the random switching of Images in latest version of iOS 5.0.1 similar to the report at http://tech.vg.no/2011/12/14/safari-on-ios-5-randomly-switches-images/ . This was resolved using Lazyloader Module by reducing the number of images loaded on first load.
Multi Domain site managed from a single instance
Key shortcoming of the old site that was to facilitate launching on new subdomain for a new added geography with minimal time and effort. The MNC had dedicated websites for each geography / country and some geographies had multiple sub sites under them based on the language. Adding a new geography was cumbersome due to architectural limitation. This issue was addressed to ensure that the administrator would be able to launch a new website in less than a day.
How this was achieved?
This was achieved using Domain Access Module that helps to manage multiple domains from a single code base. Other features that Domain Access provides are it allows sharing content, users, permissions and other Drupal configurations across the different affiliated sites. It also facilitates managing the sites using a centralized interface. The modules used are
Domain Access
The Domain Access project is a suite of modules that helped to have multiple domain functionality from one Drupal installation and a single shared database.
Domain Blocks
Domain Blocks is an additional to Domain Access modules that enables domain specific visibility settings for blocks.
Multi Lingual site
Easy Management of Content: Translation the MNC’s current website didn’t provide options for adding new sections and menus for each website / sub-sites.This made the translation process cumbersome as each page needed to be updated separately.
How this was achieved?
The MNC is a Multilingual site where certain domains had unique languages. The functionalities were achieved using the following modules.
Multilingual Content
The Multilingual Content Module, part of the Internationalization (i18n) package, provides a set of languages that can be enabled for the site. The editor can enable any of these languages as and when required for the site for a particular domain. While translating a content, it provides an option of languages in which the content can be translated.
Multilingual Select
The Multilingual Select Module, part of the Internationalization (i18n) package, provides a select box to make selection of language to which the content should belong to.
String Translation
The String Translation Module, part of the Internationalization (i18n) package, helps to translate the language of the blocks titles used across the site.
Block Languages
The Block Languages Module, part of the Internationalization (i18n) package, allows you to configure for which languages each block should be visible.
Menu Translation
The Menu Translation Module, part of the Internationalization (i18n) package, allows users to select a translation mode for each menu items.
Social Media sharing
This is a new functionality added to the new site where each of the resource item could be shared in Social media
How this was achieved?
The Sharethis Module was used to bring in the Social Media functionalities. This module has the flexibility to customise the share this icon by overriding the option Custom Buttons via CSS for social media icons.
Introduction of New Sections and Content Strategy
The new site would have new sections that contains several types of resources:
-
Video
-
Case Studies
-
Blogs
-
In the News
-
Press Releases
The existing sections would be reviewed for content architecture best practices.
Editorial Interface
The default Dashboard module was used to access all the defined functionalities for the editor from a single UI rather than going to different pages using the menu.
Additionally a separate menu was built for the editor using Admin Role Menu module.
It also grouped the functionalities into two groups
Manage Content - This helped in editing any content/ information related to a particular domain and had links to the Manage Content interface.
Manage Site - This is much more generic and using this category changes can be made across domains or for multiple pages in a domain
Geo Redirect
When a user accesses the Homepage, by default the he is presented his Country's homepage based on his IP. He is provided with a drop down to navigate to other domains.
How this was achieved?
The Module used to achieve GeoRedirect is ip2country and it helped to detect the visitor's IP address to identify the geographical location (country) of the visitor and accordingly the domain for that country is loaded
Search
The search option was customized to search all the content across the domain. It excluded searching of images. Another key component to the search option was that it won’t list contents from other domains. Custom Search module helped to customize the default search options for the site.
Please note all banner content we not indexed in search using Custom Search module
SEO
Search Engine friendly architecture: The current website was not search engine optimized. The new website would implement SEO best practices to make the site Search Engine friendly.(Sample Pattern - http:// <cc>.<domain>.com/<lang>)
Performance
With several High- definition images and various CSS functionalities and functionalities like Subdomains, the performance of the site was having an impact. This was a key challenge as anonymous users usually avoid slow-loading sites.
How this was achieved?
Achieving Multidomain multi-lingual site affected the performance of the site. In order to tune the performance so that it is fast, several models were used :
-
Boost Module - It ensured that for certain static pages, Caching was used. Every Time there was a visitor, it would load from the Caches.
-
Boost Crawler - For high traffic pages and media rich pages in the MNC ‘s website, Boost Crawler helped to create the cache page every time the first visitor visits the page. The cache is then preserved for the next visitors for that page. The cache continues to remain unless some content in edited or the cron is run. Hence the performance was really increased due to the use of Boost Crawler.
-
Image Lazyloader - Previously for the Home Banners in the MNC, all the banners images were parallelly loaded. Heche it had an impacted the loading time for the Home Banners. Image Lazyloader sequenced the loading of the banners and hence loading speed of the Home page was minimised considerably.
Sitemap XML
The Sitemap XML module was used to create the domain-wise sitemap. Hence on posting a content, the URL will be updated in the sitemap without any human intervention. (URL Pattern : http:// <domain url>/sitemap.xml)
Additional Features
New functionalities were brought in the in the interface
Clear Cache- The editor can clear the cache immediately rather than waiting for the Cron to run so that the changes he made is immediately reflected in the site
File Browser- This helped to re-use the images that has been used in the site. Hence it prevented the upload of same image multiple times.
The new website also brought in additional features link Related Content. The website had features that would allow the administrator to link content to a section / page from other sections. For example, the page on “Software Solutions” can be linked to blogs and case studies related to the service. This would be done by introducing a “Related Content” block on the page.
