www.idt.com

Integrated Device Technology, Inc., (IDT®) (NASDAQ: IDTI), the Analog and Digital Company™ delivering essential mixed-signal semiconductor solutions, re-launched and expanded IDT.com using Drupal in January of 2012. Leveraging Apache Solr and advanced jQuery solutions, the site provides visitors an interface to easily search and explore the depths of the company's broad portfolio of products.

IDT, the market leader in timing, serial switching and interfaces, wanted a new web site without the hassle of maintaining the code of a homegrown Web Content Management System (CMS). IDT found it difficult and costly to keep its previous site's content current, as the staff struggled with the system's overall complexity and inflexibility. IDT approached Mediacurrent to help migrate the ColdFusion site to Drupal. The legacy site was starting to show signs of age, and IDT wanted to avoid being locked into yet another CMS that would fail to evolve.

IDT required a solution that would prove to be fast, have an extremely easy-to-use interface, scale to thousands of products and offer the flexibility to grow and change quickly to keep pace with the company's markets. Mediacurrent and IDT turned to Drupal to leverage its vast array of features that allow non-technical product managers to easily and quickly deploy product updates.

Mediacurrent delivered a solution that met IDT's requirements, and launched the site with more than 100 hours under the project budget.

"Like the innovative engineering developments at IDT, there are risks and unknowns in any complex web design project," said Andrew Luchsinger, Technical Marketing Manager at IDT. "Mediacurrent’s highly-skilled team was able to mitigate our risks with a detailed specification and then tackle the unknowns with creative solutions. These skills, coupled with a prowess in project management and clear communication, makes for a valuable service."

The project team from Mediacurrent would like to share some of what we've learned while bringing this new enterprise client into the Drupal community.

About the Customer

Integrated Device Technology, Inc., the Analog and Digital Company™, develops system-level solutions that optimize its customers' applications. IDT uses its market leadership in timing, serial switching and interfaces, and adds analog and system expertise to provide complete application-optimized, mixed-signal solutions for the communications, computing and consumer segments. Headquartered in San Jose, Calif., IDT has design, manufacturing and sales facilities throughout the world. IDT stock is traded on the NASDAQ Global Select Stock Market® under the symbol "IDTI."

Goals

• Improve page load times globally.
• Offer clients new tools on the website to better allow them to find what they need quickly (out of thousands of products).
• Provide more quality information to the end user and consolidate product attribute mapping.
• Seamlessly integrate video and images.
• Allow different navigational paths throughout the site for both the user who knows exactly what they want and users who are just browsing.
• Integrate with Microsoft Sharepoint as a centralized document control repository.
• Scale category pages to handle small and large numbers of products without changing the design.

Challenges and Solutions

IDT's existing website was a homegrown ColdFusion-based framework that could not keep up with the pace of the ever-developing web and the flood of new IDT products. This is a familiar scenario. When a site is built on a homegrown framework authored by one person, clients must choose between implementing new features, fixing bugs, or updating content. Conversely, when a site is built on an open-source framework like Drupal, bugs and security patches are maintained by the community so that time can be spent on customized solutions, and content can be managed by individuals who don’t have a technical background.

One of the largest technical hurdles that Mediacurrent faced was the limitations on JavaScript when rendered by older browsers. The primary issue is that some browsers have a maximum number of lines of code that can run before they display a "script timeout" error. Even though the Parametric Search script was running in just a few seconds the users would still see that error. Mediacurrent resolved the problem with a two-pronged approach. First, Mediacurrent moved pre-calculation into the related Drupal module and passed the pre-compiled HTML to the JavaScript via JSON. This allowed the JavaScript to be limited to handle basic input and output. Second, Mediacurrent implemented an Infinite Scroll to address the issue that a single Parametric Search might have hundreds of products that could still trip the "script timeout" error. The Infinite Scroll solved the overall problem by only displaying the first 50 products when the page is first loaded. When a user scrolled to a pre-set region towards the bottom of the page an AJAX request was queued to load 50 more products. This process would continue as the user scrolled down the page until the user stopped scrolling or all of the products were displayed. The combination of these two solutions allows the Parametric Search to easily scale while still loading in under a few seconds for older browsers.

Ease of Use

IDT has thousands of products that must be updated regularly by subject matter experts who don’t have time to use a complex web system. The legacy site allowed for updating of content, but most users avoided making updates because they found the system too complex when adding data. To encourage the product managers to engage and update the new site, Mediacurrent engineered the site to allow for entry/modification of products in only one screen, leveraging data from existing products to reduce redundant input.

Migrating/Merging Content

IDT.com contains information on users and tens of thousands of products and product-related documents. Mediacurrent leveraged the Migrate module to import all of the product-related data including node references. IDT can also utilize this module to import large batches of products at a later date. Additional Migrate scripts and plugins were written to allow data to be imported for content with custom field types, well beyond the standard field types.

Categories, Subcategories & Products

The IDT data structure mimics a pattern that many sites follow. The highest level is the Category, there can be SubCategories listed under a Category (as children) as well as under themselves. The lowest level is the Product, which can be attached to any level of Subcategories. (Category -> Subcategory {Up to 5 levels} -> Product) Normally this wouldn't pose much of a problem, but Drupal nodes are considered to be all on the same level. Mediacurrent addressed this issue by using node references for all three content types. This way, a Category would have links to all of its child Subcategories and all Subcategories would have links to its child Subcategories or Products. Mediacurrent designed the tree structure in this way so it would be possible for a "branch" of the tree to live in multiple locations at the same time as well as bringing along all of its children and grandchildren.

Mediacurrent created the Parametric Tree module to allow for tree traversal through recursion. The module starts at a starting point (the Category), finds the child node IDs and then repeats the process down the line for each child, child's child, etc. until it reaches the bottom of that branch. The module then returns back up the line and starts over with the next set of branches from the Category. Using recursion allows IDT the flexibility of adding as many nodes/branches to the tree as they need without having to hard code limitations such as "Each Category can only have a maximum of four Subcategories."

The following diagram is a demonstration of Subcategory B, as well as its child subcategories living under both Category A and Category B at the same time. This multi-homing could be done at any point in the tree but is done on the second level for simplicity in this example.

External Integration

The new site references data from multiple external vendors to provide crucial product-related information to IDT customers. Mediacurrent combined multiple APIs (SOAP and REST) with a tiered caching system to provide the most up-to-date data to users while intelligently managing server load.

During the implementation, IDT transitioned to a new document management system and wanted it to be the authoritative source on all documents. Mediacurrent worked with IDT to implement a custom Document Importer module to update documents in near real-time. The solution used both cron (a time-triggered action performed by the hosting server) and Drupal Queue to allow the site to update in a scalable manner.

Parametric Search

IDT has thousands of products grouped into various categories and subcategories. Each product needs to have its own set of fields, or attributes, that may or may not be similar to another product. Because any one product can have dozens of attributes, IDT needed an interactive way for users to be able to search these fields and easily narrow down which part would serve their purpose. Mediacurrent integrated a large amount of JavaScript code, an intermediary module and Apache Solr to create the dynamic system known as the Parametric Search. From an administrative perspective, IDT's product manager only needs to edit the node and select which columns should be displayed. The Parametric Search module takes care of the appropriate look-ups and display of the table.

To accomplish IDT's vision of the Parametric Search, Mediacurrent created two modules: the first to handle the loading of field-related data for JavaScript to consume on page display, and the second module to handle requests from the JavaScript. The custom JQuery-based JavaScript for the Parametric Search utilizes JQuery Address to allow for browser history preservation, as well as deep linking. The JavaScript also uses the JQuery UI library to display the sliders that are used for integer-, float- and range-based fields. When a user changes any of the dynamic inputs, the script requests updated data from the Parametric Search module which in turn queries Apache Solr for the relevant filtered information. The returned data is then cut into easy-to-consume chunks which enables the endless scroll to load additional data as the user nears the bottom of the page.

Contributed Modules

• Presentation: Views, Context
• Content: CCK, Conditional Fields, NodeQueue, Node Relationships
• Menus: Menu Block, Nice Menus
• Content Migration: Migrate, Backup and Migrate
• Search: Apache Solr
• Performance: CDN, JavaScript Aggregator, CSS GZip
• Other: Features, Smart Breadcrumb (With Smart Breadcrumb Mediacurrent had to address the long standing bug with Views arguments. A patch was submitted and is pending inclusion with the module.)

Custom Modules

• Business Groups: The Business Group module tied users together with one or more business groups so users would only see the applicable fields (out of 200 possible fields) when they add/edit a product. This module was used to tie in with the Conditional Fields module.
• Document Importer: The document importer module polls a local XML file generated by the Document Management System for updates to documents. If changes are detected, the operations are passed off to the Drupal Queue for the appropriate execution as well as moving the document to the correct location.
• Field Rollup: IDT offers a very diverse product lineup. It is possible for one product to have hundreds of deviations of that product. An example would be a "Clock Generator". If you go to product 5T929 you'll see that there are two orderable product options that range in Core Voltage, Input Frequency, Input Signal, Output Voltage, Output Frequency Range and Output type. All of these different options need to be rolled up into the "Product Specification". Mediacurrent created a CCK module that allowed staff members to choose which columns/fields they wanted to show in the table. The module then consolidates all of the information from the product options and displays it as an easy-to-read tables. It was important that Views was not used to ensure the staff would only have to go to one screen to create/edit products.
• Hot Topic: IDT wanted a way to easily add call outs, advertisements and additional information to any type of node. The Hot Topic module was created to provide a CCK field type that listed all of the Hot Topic nodequeues. The module then loaded the appropriate view on the node with the selected information. This module allowed the staff to easily add, change or hide the Hot Topic on any page without having to do any NodeQueue, View or Block configuration. Mediacurrent plans on releasing a modified version of this module on drupal.org.
• AJAX Webform: The AJAX Webform module was created to allow the selected hierarchy of categories and products to be properly selected on the Webform when a user clicked on "Get Technical Support" from anywhere in the site. The module parses the passed GET variable and then loads the appropriate select list values via AJAX.
• Presearch: It is common for sites to have a search box that allows users to do a generic search of the entire website for keywords. In IDT's case, they wanted to bring users directly to the correct product page if the user entered in a full part number, while still allowing the general site search to work in a standard manner if they did not. The Presearch module intercepts the search box POST, checks the database for an exact match and sends the user to the right product page. If for some reason it was only a partial match or something that wasn't a product number, users will be brought to the default search results page.
• Product Tree: IDT has a hierarchy of categories that can go up to five levels deep, as well as be multi-homed (per branch). Since the hierarchy was contained in node references and ease-of-use forbid the use of Views, Mediacurrent created a module that would add the Tree to the node when it was displayed. Behind the scenes, the module recursively traversed the tree, built the hierarchy, and added in the number of products in that branch. Since recursive functions with queries can be quite heavy, the Tree is cached for subsequent use.

Theming

In conjunction with the migration from the legacy platform, the IDT.com graphic design was also redesigned as part of the project. IDT's marketing team worked with designer Kevan Hollenback to create mockups and style guides. Mediacurrent then adapted the PSDs to use the grid-based AdaptiveTheme.

The project team chose the AdaptiveTheme because all layouts are content first, supporting information (sidebars) second. The enriched semantic markup is lightweight, which means quicker page load and rendering times. AdaptiveTheme also fully supports both RDFa and ARIA Roles, further improving semantics and content findability.

Mediacurrent worked closely with the IDT team to ensure cross-browser compatibility and a uniform user-experience. CSS3 and jQuery were used to implement features like rotating slideshow blocks and jQuery UI sliders.

Summary

Armed with cutting-edge Drupal tools such as the Migrate module and Apache Solr integration, the project team delivered on IDT's requirements and launched under budget. Employees in IDT offices around the globe report faster loading times compared to the old site, while product managers enjoy a system that is easier to keep current with the latest product information.

About Mediacurrent

Mediacurrent helps organizations architect custom websites by leveraging our proven processes and deep expertise in Drupal. We are home to an elite team of Drupal experts, who have a proven track record of building amazing websites. We strongly believe in open-source principles, collaboration, and sharing knowledge to strengthen the Drupal community. For more information regarding Mediacurrent's services and portfolio please visit http://www.mediacurrent.com. 

Project Team

Andrew Riley - Development, Lead Architect
Josh Estep - Development
Kendall Totten - Theme Development
Chris Hales - Development
Brent Ratliff - Development, Quality Assurance
Jeff Diecks - Project Management