belt and road responsive: drupal 8 website - … · 1.0 project overview p.4 section 1.1 thanks to...

Belt and Road Responsive: Drupal 8 Website

www.appnovation.com

Belt and Road Responsive: Drupal 8 Website

Contents

1.0 Project Overview P.3

2.0 Project Challenges & Highlights P.4

3.0 Project Results P.5

4.0 Technical Specifications P.6

P.31.0 Project Overview

The Hong Kong Trade Development Council

(HKTDC) is a statutory body established in

1966 as the international marketing arm for

Hong Kong-based manufacturers, traders

and service providers. They are the trade

and development council for the city-state of Hong Kong, with

more than 40 offices around the world, including 13 on the

Chinese mainland.

The HKTDC wanted to create an unparalleled, robust and highly

scalable Portal, that provides various resources on the Belt and

Road Initiative (also known as “One Belt One Road” or the “Silk

Road”) spearheaded by the Chinese.

1.0 Project Overview

Section 1.1 Hong Kong Trade Development Council(HKTDC)

P.41.0 Project Overview

Section 1.1 Thanks to a proven track record in Drupal, a wealth of

experienced developers, designers and architects, not to

mention a superior Drupal 8 expertise, Appnovation were

selected to deliver the project, using their Hong Kong and UK

based teams in a global collaboration.

As a company that helps fund, and makes regular contributions

to the Drupal community, this project further fortifies their

burgeoning Drupal 8 portfolio.

Appnovation’s D8 experts were tasked with delivering the full

reimplementation of HKTDC’s Belt and Road portal, including a

complete rebranding of their website with new functionalities,

and migration of content from different sources.

Belt and Road Homepage

P.52.0 Project Challenges & Highlights

2.0 Project Challenges & Highlights

Section 2.1 The Belt and Road initiative is a development strategy and

framework launched by the Chinese Government that aims to

foster growth and development between China and the rest of

Eurasia.

This initiative encompasses around 60 countries, and has

been contrasted with trading agreements like the Trans-Pacific

Partnership. HKTDC’s Belt and Road website is one of the

earliest websites providing official information and resources on

this large-scale initiative.

Appnovation’s D8 experts delivered the reimplementation of

HKTDC’s Belt and Road portal, including complete rebranding of

their legacy website with new functionalities, and migration of

content from different sources including external web sources.

• Implemented new website with emphasis on Drupal 8’s core

functionalities

• Clean and simple site architecture

• Content migration of 9,000+ pieces of content in multiple

languages (English, simplified Chinese, traditional Chinese)

• Hosted on Acquia Cloud, allowing our team to push code

quickly (less than 5 minutes) without disrupting the live

website’s functionality

• Initial implementation completed within 3 weeks for initial

soft launch

P.63.0 Project Results

Section 3.1

3.0 Project Results

Appnovation’s D8 experts delivered the reimplementation of HK-

TDC’s Belt and Road portal, including complete rebranding of their

legacy website with new functionalities, and migration of content

from different sources including external web sources.

With the newly revitalized website, HKTDC’s brand was given a

more modern and clean design. Content that was previously spread

across different websites was centralized, creating clear, simple and

easy to use navigation, providing a positive user experience.

Belt and Road for Mobile Devices

P.74.0 Technical Specifications

• Drupal 8.3

• Acquia Cloud

• Atlassian JIRA

• Amazon Web Services

• Symfony DomCrawler, Filesystem and Serializer

• Guzzle

• admin_toolbar

• admin_toolbar_tools

• module_filter

• config_split

• country

• double_field

• video

• page_manager

• page_manager_ui

• mailsystem

• smtp

• imce

• pathauto

• persistent_login

• rabbit_hole

• rh_node

• r4032login

• twig_tweak

• ultimate_cron

• panels

• panels_ipe

• queue_ui

• search_api_db

• facets

• search_api

• simple_sitemap

• sharethis

• captcha

• views_data_export

• default_content

• default_content_extra

• csv_serialization

• webform

• webform_ui

4.0 Technical Specifications

Section 4.1

Section 4.2

Utilized Technologies and Platforms

Modules/Themes/Distribution


Admin Toolbar, Module Filterhttps://www.drupal.org/project/module_filter https://www.drupal.org/project/admin_toolbar

The reason we used Bootstrap can be summed up as:- “Sleek,

intuitive, and powerful mobile first front-end framework for faster

and easier web development.”.

Config Splithttps://www.drupal.org/project/config_split

We used config split module to handle segmentation of “feature”

config during the development cycles of the project. We only have

3 weeks effectively to create and push to production so things

had to be kept in order to ensure fast paced development, feature

completion cycles.

Ultimate Cronhttps://www.drupal.org/project/ultimate_cron

We needed to employ ultimate cron to ensure that our custom

cron jobs could run at certain times of the day as they were

imported content from an existing central CMS.

Section 4.2 Bootstraphttps://www.drupal.org/project/bootstrap

The reason we used Bootstrap can be summed up as:- “Sleek,

intuitive, and powerful mobile first front-end framework for faster

and easier web development.”.


Section 4.2 Search API, Facets and Search API DBhttps://www.drupal.org/project/search_api https://www.drupal.org/project/facets

Limited budget and time required us to use Search API with DB

but at least bring to the table facets and possibility of in the

future of moving into Solr or alike.

D8 Search Functionality


Section 4.2

Webformhttps://www.drupal.org/project/webform https://www.drupal.org/project/webform_ui

Webform module was key to providing various forms for com-

munication with HKTDC backend office staff. The capabilities of

webform allowed us to take existing hardcoded forms and revamp

to “dynamic” managed forms very easily and in 3 languages in-

cluding English, Simple and Traditional Chinese. With is powerful

config management; and plugin architecture would could extend

were necessary for additional feature handling easily.

A great module which will feature heavily in forms for future projects

Views Data Export, CSV Serialization https://www.drupal.org/project/csv_serialization https://www.drupal.org/project/views_data_export

It was necessary on this project to provide a mechanism for

exporting users to import into a in-house email marketing tool

and this was achieved easily using the views data export module.

Along side this we were required to provide CSV exports of

data of projects for user consumption; this feature was enabled

through implementation of the CSV serialization module which is

used by views data export anyway, savings us time to implement

on this feature.


Page Managerhttps://www.drupal.org/project/page_manager

Default content module was instrumental to us for being able to

manage “static” content, which could be pre-loaded into a freshly

built site or transported to various environments intact.

IMCEhttps://www.drupal.org/project/imce

At time of building the website, the media module was not quite

stable enough so we opted to move forward with IMCE for media,

file management solution. Editors are able to upload, find and

attached images to WYSIWYG fields which has served the solution

well thus far.

Section 4.2Default Contenthttps://www.drupal.org/project/default_content https://www.drupal.org/project/default_content_extra

Default content module was instrumental to us for being able to

manage “static” content, which could be pre-loaded into a freshly

built site or transported to various environments intact.

D8 Sign Up Page

Open Digital Delivered.

belt and road responsive: drupal 8 website - … · 1.0 project overview p.4 section 1.1 thanks to...

Documents