Achieve Internet
Case study collaboration and copyediting
Case study collaboration and copyediting
Drupal developer Achieve Internet makes enterprise websites for international companies such as their client, sprinkler manufacturer Hunter Industries. Achieve asked me to help tell the story of how they helped Hunter bring their website up to date with a complex management system for delivering information on their 1,900 products to an international audience in six different languages.
For this case study collaboration I interviewed the project contact at Hunter and integrated his customer quotes into the technical details written by the Achieve engineers. I also copyedited the final project to make it flow seamlessly. Achieve has an amazing team and I was happy to help them highlight their work on this project.
Case Study Hunter Industries – Drupal Isn’t All Wet
The Hunter management team knew that their biggest competition has a great website that really promotes their products, so to stay competitive, Hunter contracted with Achieve Internet to help build a brand-new marketing vehicle – a glitzy glamorous website that shows off their sprinklers, controllers, valves, and other products in their irrigation systems product line. The Hunter irrigation site, www.hunterindustries.com, launched on January 23, 2012.
As Hunter is a B2B company whose primary audience is contractors and outside installers, the Hunter site is not used for e-commerce, but instead gives B2B customers and end users all the information they could need when making a purchase decision at a retail store or commercial seller.
Making information easy to find, as well as backwards compatible with older browsers, was a priority with the new site design because of Hunter’s primary customers.
Choosing Drupal
When it came time to choose a developer, they were looking for someone who exhibited a strong knowledge of Drupal and data structure. “What we were looking for was someone who could understand the Drupal infrastructure and meet our needs with it, and Achieve absolutely stood out in that process.”
As they got into the project, its magnitude began to dawn on the Hunter team, particularly with regard to their support articles. Since the previous site was made with static pages, a lot of support articles weren’t updated to include newer products. After a major push from their tech support department to update all support material, the Drupal implementation now enables them to keep everything current. “Using taxonomy for all the materials that we put up is a great way to make sure that all our information is up to date,” said Falk.
Translation as a Competitive Advantage
With Hunter’s international markets a crucial part of their marketing plan, a critical part of the project was implementing translated sites. With the base site being the USA site, the translated sites include the English metric site, and the French, Spanish, Portuguese, Italian, and German sites.
Achieve realized that we needed to make the translation process as easy and automated as possible. We created the Media Translation module to allow Hunter to group together related media files into a “translation set,” and then automatically show the correct file for that language site – all without having to actually attach the media file to all translated nodes.
For example, Hunter creates a translation set, attaches the base media file to the base product node, and the correct translated media files automatically display on the correct sites.
Hunter expects to add translation of the base site into four more languages next year and twelve within the next two years. Find more information on the Media Translation module.
Complex Product Pages
Moving from product to product is easy with the menu system in the left sidebar.
Hunter also provides extensive installation and support information, including over 1,600 PDFs, CAD files, Word documents and PowerPoint slides, each with a thumbnail and meta tag information. “It’s a really nice display for people trying to find information,” said Falk.
Having all this available on the website helps irrigation installers and maintainers solve support and maintenance issues, giving them an easy access to information in the field, which also reduces Hunter’s support costs.
Media Files
Before the project started, Hunter explained that they routinely update their media files – for example, their frequently used image files, videos, installation guides, and the like. They wanted to be able to replace files instead of having to delete old files everywhere they are used, then add the updated files. Drupal 7 core does not have this functionality, so we built the Media Update module. See more about the Media Update module here.
Solr SearchWith the vast amount of media files on the Hunter site – PDF files, JPEGs, Microsoft Word documents, zip files, and the like, Achieve realized how important it is to include those files in the search results, to give visitors easy access to the information. While Solr doesn’t effectively index the actual file content – such as the content of the actual PDF file or Microsoft Word file – our new ApacheSolr Media module does index the fields within the media field entities, including titles, descriptions, and taxonomies, giving enough power to effectively surface any content on the site. Find more information on the ApacheSolr Media module.
“Achieve’s custom module elements … let any user, once they understand how our resource library and our support library and our case study library work, go into the system and look for what they want to find, by product type or customer type or location, and it’ll surface that information really easily for them. To us that is an absolute masterpiece of the site in managing so much content,” said Falk.
Hunter’s new website also has multiple landing pages, to make it easy to locate information in a similar set of information. There are landing pages for products and product lines, support documents, and “resources” such as marketing PDF files.
Landing pages have extensive filtering capability, so that visitors can easily find the exact information they are looking for. Landing pages also have a localized search that searches only the type of information on that landing page.
These landing pages are actually Solr search results pages, generally pre-filtered by content type. This same methodology is used to populate tabs within the product pages, with the results pre-filtered by the product.
Engineering Challenges
The first technical hurdle we faced was how to effectively implement the complex product pages, with their tabs and embedded charts. We evaluated several different solutions such as Panels, Contexts, and custom page templates. We decided to go with custom page templates since there wasn’t a need to have varying product page layouts.
Getting elements on the page to be placed correctly – such as the image gallery and the blocks on the right side of the page – without the content wrapping was a problem. Drupal blocks didn’t work, so we wrote custom renderers to insert the content in the correct places of the page template.
On the project page, the Features tab shows the content formatted into two bulleted lists. It took quite a bit of logic to balance the two columns correctly. This also allows the content creator to enter the content into a plain list in a text box, and it formats it into the bulleted lists at display time.
To get the tabs on the product pages to correctly display the pre-filtered Solr search results, we had to create a dummy placeholder field type to trigger a theme function off of. This renders the Solr search results as a tab.
An interesting problem to solve was how to format the resources on the product detail page’s Resource tab, and on the Resources landing page. Formatting includes the resource thumbnail image, custom titles, and the “flags” dropdown, which displays when the visitor hovers over the resource.This was accomplished via a combination of the Media Translation module and a number of custom theme functions which handle the grouping of related content and insertion of the language selection drop down.
For both the landing pages and the tabs in the product pages – all of which are Solr search results – figuring out how to get the results, then grouping them by category, was an interesting problem to solve. The solution involved two different sets of theme functions – one for the landing pages, and another for the tabs.
Hunter required the site to function in IE6, due to enough of their customer base being on older computers. “That is the prime guy that’s going to be on our website all day, telling contractors when they come in product information from our site,” said Falk. We all know how problematic older versions of Internet Explorer can be, but when it is important to the customer to have backwards compatibility, the design must accommodate it.
Much of Hunter’s critical content is in complex charts with interesting formatting. Charts appear throughout the site, including at the bottom of product pages, and in landing pages. Instead of creating each chart multiple times, they are a content type and are simply attached to product nodes as a node reference. For the landing pages, the charts are attached to the taxonomy term that the landing page filters on. The charts themselves are just nodes that the content authors enter the raw HTML to generate the content.
Product pages have a video block. The YouTube video plays within a popup, and there are links in the video block to download local videos of various formats. We had to find a way to group the videos together, then display them correctly in the video block. The content creators are allowed to attach as many videos as they want to the product node, with the requirement that the first video must be a YouTube video. Then we pick out the video types and display the videos as links in the video block.
The area we were the most apprehensive about when we started the project was the translation, as the i18n module, and the related translation modules, were still in the early stages of the Drupal 7 development cycle. We faced quite a few unknowns, and worked our way through the issues.
The area that delighted most was how easy it was to create the Solr search result landing pages. We give a lot of kudos to the maintainers of the Media module.
What We Learned
As for the process of working with Achieve, Hunter Industries’ Falk said, “I can’t say enough good about working with Achieve on how well they knew Drupal and structured the setup to get us to focus on content and get our content correct and letting Drupal really manage the layout and the updating and the display of our content.”
"Hunter Industries was a fantastic client to work with. They had a clear idea of what they wanted in a website and collaborated with us to find the best and most cost effective way to deliver a solution that everyone is proud of." – Shawn Smiley.
Our future plans including upgrading the media and translation modules we created so that they work with the Media module version 2.0.
Challenge
Hunter Industries is a leading manufacturer of irrigation systems for homeowners and commercial property owners such as golf courses and sports fields. They sell 1,900 products. Their previous site was developed with static pages, and contained a lot of mismatched information; old pages weren’t being updated as new products were introduced. “We had a lot of web pages, a lot of viewers, and a lot of out-of-date information,” said Jeff Falk, Sales and Marketing Director for Hunter Industries.
The Hunter management team knew that their biggest competition has a great website that really promotes their products, so to stay competitive, Hunter contracted with Achieve Internet to help build a brand-new marketing vehicle – a glitzy glamorous website that shows off their sprinklers, controllers, valves, and other products in their irrigation systems product line. The Hunter irrigation site, www.hunterindustries.com, launched on January 23, 2012.
As Hunter is a B2B company whose primary audience is contractors and outside installers, the Hunter site is not used for e-commerce, but instead gives B2B customers and end users all the information they could need when making a purchase decision at a retail store or commercial seller.
Making information easy to find, as well as backwards compatible with older browsers, was a priority with the new site design because of Hunter’s primary customers.
Choosing Drupal
Hunter evaluated three different CMSs and seven companies when starting the redesign process, ultimately choosing Drupal because of its reputation for managing large amounts of data, such as “the massive amount of product information and support information around our products,” said Falk.
When it came time to choose a developer, they were looking for someone who exhibited a strong knowledge of Drupal and data structure. “What we were looking for was someone who could understand the Drupal infrastructure and meet our needs with it, and Achieve absolutely stood out in that process.”
As they got into the project, its magnitude began to dawn on the Hunter team, particularly with regard to their support articles. Since the previous site was made with static pages, a lot of support articles weren’t updated to include newer products. After a major push from their tech support department to update all support material, the Drupal implementation now enables them to keep everything current. “Using taxonomy for all the materials that we put up is a great way to make sure that all our information is up to date,” said Falk.
Translation as a Competitive Advantage
Hunter Industries is a global company, with irrigation installations around the world. Examples include a forest in Saudi Arabia, golf courses in China, and grass fields between train tracks in France to reduce noise. They do business in 24 languages. “The international component of our business has grown from 5 percent to 40 percent over the last seven years,” said Falk. “Translation of our information has become so important. Getting that information on the web and translated is a huge competitive advantage for us in international markets.”
With Hunter’s international markets a crucial part of their marketing plan, a critical part of the project was implementing translated sites. With the base site being the USA site, the translated sites include the English metric site, and the French, Spanish, Portuguese, Italian, and German sites.
Achieve realized that we needed to make the translation process as easy and automated as possible. We created the Media Translation module to allow Hunter to group together related media files into a “translation set,” and then automatically show the correct file for that language site – all without having to actually attach the media file to all translated nodes.
For example, Hunter creates a translation set, attaches the base media file to the base product node, and the correct translated media files automatically display on the correct sites.
Hunter expects to add translation of the base site into four more languages next year and twelve within the next two years. Find more information on the Media Translation module.
Complex Product Pages
Each product in the irrigation product line has its own page on the new site, and the product image gallery and videos are eye-catching, showing the product in enough detail to entice visitors to purchase.
Each product page also has extensive information easily accessible in tabs toward the bottom of the product screen. Information includes installation guides, specification documents, and support and troubleshooting documents. Most product pages also have a chart toward the bottom that explains the benefits and specifications of related products.
Each product page also has extensive information easily accessible in tabs toward the bottom of the product screen. Information includes installation guides, specification documents, and support and troubleshooting documents. Most product pages also have a chart toward the bottom that explains the benefits and specifications of related products.
Moving from product to product is easy with the menu system in the left sidebar.
Hunter also provides extensive installation and support information, including over 1,600 PDFs, CAD files, Word documents and PowerPoint slides, each with a thumbnail and meta tag information. “It’s a really nice display for people trying to find information,” said Falk.
Having all this available on the website helps irrigation installers and maintainers solve support and maintenance issues, giving them an easy access to information in the field, which also reduces Hunter’s support costs.
Media Files
Achieve realized before the project started that a critical need is to make it easy for Hunter to locate and manage thousands of media files, including images, video, PDFs, and zip files – for a total of 41 file extensions. We created the Views Media Browser module, which uses the power of Drupal’s Views module to provide a completely customized browsing experience when searching for and selecting media files – for example, when editing media files or attaching them to nodes. See more information about the Views Media Browser module.
Before the project started, Hunter explained that they routinely update their media files – for example, their frequently used image files, videos, installation guides, and the like. They wanted to be able to replace files instead of having to delete old files everywhere they are used, then add the updated files. Drupal 7 core does not have this functionality, so we built the Media Update module. See more about the Media Update module here.
Solr SearchWith the vast amount of media files on the Hunter site – PDF files, JPEGs, Microsoft Word documents, zip files, and the like, Achieve realized how important it is to include those files in the search results, to give visitors easy access to the information. While Solr doesn’t effectively index the actual file content – such as the content of the actual PDF file or Microsoft Word file – our new ApacheSolr Media module does index the fields within the media field entities, including titles, descriptions, and taxonomies, giving enough power to effectively surface any content on the site. Find more information on the ApacheSolr Media module.
“Achieve’s custom module elements … let any user, once they understand how our resource library and our support library and our case study library work, go into the system and look for what they want to find, by product type or customer type or location, and it’ll surface that information really easily for them. To us that is an absolute masterpiece of the site in managing so much content,” said Falk.
Hunter’s new website also has multiple landing pages, to make it easy to locate information in a similar set of information. There are landing pages for products and product lines, support documents, and “resources” such as marketing PDF files.
Landing pages have extensive filtering capability, so that visitors can easily find the exact information they are looking for. Landing pages also have a localized search that searches only the type of information on that landing page.
These landing pages are actually Solr search results pages, generally pre-filtered by content type. This same methodology is used to populate tabs within the product pages, with the results pre-filtered by the product.
Engineering Challenges
We knew going into this project that it would be interesting and challenging. "Projects like this always provide an interesting challenge around how best to organize information internally and then how to allow the content creators to efficiently manage this information.", said Shawn Smiley, Lead Engineer for Achieve Internet.
The first technical hurdle we faced was how to effectively implement the complex product pages, with their tabs and embedded charts. We evaluated several different solutions such as Panels, Contexts, and custom page templates. We decided to go with custom page templates since there wasn’t a need to have varying product page layouts.
Getting elements on the page to be placed correctly – such as the image gallery and the blocks on the right side of the page – without the content wrapping was a problem. Drupal blocks didn’t work, so we wrote custom renderers to insert the content in the correct places of the page template.
On the project page, the Features tab shows the content formatted into two bulleted lists. It took quite a bit of logic to balance the two columns correctly. This also allows the content creator to enter the content into a plain list in a text box, and it formats it into the bulleted lists at display time.
To get the tabs on the product pages to correctly display the pre-filtered Solr search results, we had to create a dummy placeholder field type to trigger a theme function off of. This renders the Solr search results as a tab.
An interesting problem to solve was how to format the resources on the product detail page’s Resource tab, and on the Resources landing page. Formatting includes the resource thumbnail image, custom titles, and the “flags” dropdown, which displays when the visitor hovers over the resource.This was accomplished via a combination of the Media Translation module and a number of custom theme functions which handle the grouping of related content and insertion of the language selection drop down.
For both the landing pages and the tabs in the product pages – all of which are Solr search results – figuring out how to get the results, then grouping them by category, was an interesting problem to solve. The solution involved two different sets of theme functions – one for the landing pages, and another for the tabs.
Hunter required the site to function in IE6, due to enough of their customer base being on older computers. “That is the prime guy that’s going to be on our website all day, telling contractors when they come in product information from our site,” said Falk. We all know how problematic older versions of Internet Explorer can be, but when it is important to the customer to have backwards compatibility, the design must accommodate it.
Much of Hunter’s critical content is in complex charts with interesting formatting. Charts appear throughout the site, including at the bottom of product pages, and in landing pages. Instead of creating each chart multiple times, they are a content type and are simply attached to product nodes as a node reference. For the landing pages, the charts are attached to the taxonomy term that the landing page filters on. The charts themselves are just nodes that the content authors enter the raw HTML to generate the content.
Product pages have a video block. The YouTube video plays within a popup, and there are links in the video block to download local videos of various formats. We had to find a way to group the videos together, then display them correctly in the video block. The content creators are allowed to attach as many videos as they want to the product node, with the requirement that the first video must be a YouTube video. Then we pick out the video types and display the videos as links in the video block.
The area we were the most apprehensive about when we started the project was the translation, as the i18n module, and the related translation modules, were still in the early stages of the Drupal 7 development cycle. We faced quite a few unknowns, and worked our way through the issues.
The area that delighted most was how easy it was to create the Solr search result landing pages. We give a lot of kudos to the maintainers of the Media module.
What We Learned
Things we learned on this project that we will use elsewhere:
Future Plans
Future Plans
We are proud to say we implemented Hunter’s new websites, and we hope we get a chance to work together again soon.
As for the process of working with Achieve, Hunter Industries’ Falk said, “I can’t say enough good about working with Achieve on how well they knew Drupal and structured the setup to get us to focus on content and get our content correct and letting Drupal really manage the layout and the updating and the display of our content.”
"Hunter Industries was a fantastic client to work with. They had a clear idea of what they wanted in a website and collaborated with us to find the best and most cost effective way to deliver a solution that everyone is proud of." – Shawn Smiley.
Our future plans including upgrading the media and translation modules we created so that they work with the Media module version 2.0.
