Sector(s)
Project Team
Keerthivasan
Revathi B
Lavanya
Santhosh Kumar
Karthik S
Karthikeyan
Krithika
Vani S
Jayaprada
Karthik Selva
Prasanna
Anand
About the Organization
Multek is a subsidiary of Flex, and Sheldahl is a Multek-owned brand.
Multek was founded in 1978 in US and is one of the top global suppliers of rigid and flexible printed circuits. With 40 years of printed circuit board manufacturing experience, Multek offers industry-leading interconnect solutions, including Rigid, Flexible and Rigid-Flex printed circuit boards for a broad range of applications.
Sheldahl Inc. was acquired by Multek in 2004. Multek develops, manufactures and sells Sheldahl® branded materials.
About the Project
As part of digital marketing initiatives, Multek wanted to re-create and build a modern web presence for both its www.multek.com and www.sheldahl.com sites.
About the project
The goals of the website revamp, were to ensure:
1. User friendly & trendy UI/UX - a common unified UI for both the properties
2. Mobile first approach - to extend the utility and reach of their internet presence on mobile devices
3. Search Engine Optimization
4. Improved website performance - a mandatory requirement for improved UX & SEO
5. Content publishing enhancements with simple & easy to use publishing interfaces
6. Facilitate quicker turnaround of content updates to the Marketing team
7. Facilitate multilingual content creation and presentation
8. A unified code base and UI for better maintainability of both the websites
Project Features
To meet the business goals, the key project features implemented included:
1. User Experience Design
2. Responsive Design
3. Search Engine Optimization
4. Performance Optimization
5. Content Authoring Capabilities
6. Content Dashboard
7. Multilingual Support (English & Chinese)
8. Uniform Code Base
Responsive Design
Drupal’s Theming layer helped abstract the presentation from the code.
The key stakeholders are B2B customers/manufacturers. Increasingly these stakeholders are looking for information or viewing the marketing portal on different devices. The earlier website was not responsive to the device from which the content was consumed.
The new website design was built responsive. All the elements of a page, menus, blocks, images and content were built to respond to the device in which the page was viewed.
The experience of building the sites
For Unimity it was enriching to work with Multek and Sheldahl teams and each and every one on the team right from the key stakeholders had shown interest to every detail and were very involved through all the stages of the project.
Testimonial from the client
We are very pleased with the results of our website refresh for our multi-lingual Multek.com and Sheldahl.com sites. Drupal enabled us to attain excellent mobile-responsiveness and other functionalities, while also modernizing our look and feel. Our team was very impressed with the depth of knowledge, professionalism, and customer-first demeanour demonstrated by our Drupal engagement managers at Unimity.
Peter Yu
Head of Strategy, Marketing & Pricing
Multek
Why Drupal was chosen
They chose Drupal because of the Enterprise ready capabilities that Drupal 8 brought with it. Key capabilities included the state of the art CMS capabilities, multilingual capabilities and user-friendly editorial interface.
They were looking for a cost effective implementation of their web presence, moving away from their earlier licensed option. They chose Drupal not only because it was open source, but also because it brought with it state of the art CMS capabilities, Devops capabilities, Cloud compatibility, Performance & Security Features. In addition, their parent company’s website flex.com was built on Drupal so the platform was already well-accepted within parts of the organization.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Some key modules used are listed below
To Enhance the UI
A. Responsive Share Buttons - CSS/jQuery responsive share buttons placed in blocks
B. Masonry modules: Provides an API for integrating the jQuery Masonry plugin with Drupal Views.
C. Slick Slider Modules : Slick carousel and integration with Views.
D. Form Block - Enabled the presentation of node creation forms as blocks. This is particularly useful for including forms on panels.
E. Block Class & Menu link Attributes Modules - Allows assigning classes to Blocks/Menu and manage the styles for the different blocks from within the admin interface.
F. Tab rendering of upcoming and past events were enabled using a single view & using ‘page attachment behavior’ in jquery.
Search Engine Optimizations
Search Engine Optimization was one of the key goals of the project. Multek & Shedahl has tried to implement many best practices in terms of URL structure and metadata even in their earlier website. The differentiator on the new website is the optimized pages for faster rendering as this has a direct impact on the SEO. New features introduced were also optimized for SEO.
The SEO modules used include:
A. Path Auto - Provide a mechanism for modules to automatically generate aliases for the content they manage. Helps configure default patterns based on content types & their node titles.
B. Redirect - Allows users to redirect from old URLs to new URLs. In this project this was specifically used to redirect URLs from their old site to the newly created URLs and help retain the search engine ranking.
C. Meta Tag SEO - Manage meta tags for all entities.
D. Easy Breadcrumb - Provides configurable path based breadcrumbs, to create meaningful breadcrumbs.
Additionally, vertical tabs were ajax optimized for SEO - argument based views were used to build this interface. Jquery was used to toggle url in ajax to optimize the interface for SEO.
Performance Optimizations
The Page speed of the earlier site was 10 seconds . The current Page load time is 3.746 seconds for Multek Site and 3.112 seconds for Sheldahl Site.
The HTML structure & best practices were used to ensure optimized front end pages. Additional modules and techniques to enhance performance include:
A. Blazy - Provides basic Blazy integration for lazy loading and multi-serving images
B. CSS & JS aggregators were enabled and Drupal Page Cache configured for 1 day
C. As the site is a visitor only site, Varnish was configured at the infrastructure level further enhance the speed of the site.
Content Authoring Capabilities
In Previous Site there was no Content Approval stage, since CMS was not used.
Drupal’s Core content creation pages with WYSIWYG Editor and media management capabilities helped enhance the authoring experience. The module used:
A. Media management module:
a. Crop API - Provides storage and API for image crops.
b. Image Widget Crop - Provides an interface for using the features of the Crop API
Content Dashboard
In earlier Site, there was no CMS, Marketing team was able to create pages but with specific functionality, team was relying on IT for some technical changes like Menu changes or banner updates.
To facilitate faster publishing the admin interface provided for an organized dashboard with links to view content, create content and manage structure. All content in the site was made available through this dashboard. The Marketing team had minimal dependency on the technical team to manage content, taxonomy terms, meta tags or the assets. Additionally an Admin Toolbar helped provide quick access to the views/dashboards and content creation interfaces.
Multilingual Support
There was no Multilingual Support on previous version of the site, IT had created the other site for Chinese language and Marketing team added the content in it but at the end there were two sites: English and Chinese.
Modules used to provide multilingual support include: Core Language module configurations and Content interface translation.
Other tips & modules used include:
A) Language switcher dropdown modules
B) Enabling multilingual breadcrumb:
a) Drupal default breadcrumbs works based on the url alias (arg1 is parent and arg 2 is child). Providing multilingual URL alias help generate multilingual breadcrumbs.
b) By-default views have only a single URL. Views aliases need to be configured using the URL alias module, after which the aliases can be translated.
C) Languages support for emails extended using PATCH at: https://www.drupal.org/project/smtp/issues/2826189)
Unified Code Base
Both sites were built using Drupal 8 and identical set of modules.
Other Interesting module used
Contact storage Module/Contact storage export - used to generate reports of Contact information.
