By CSG Pro on 6/3/2014

Have Questions?

Call us at 503-292-0859 or fill out our contact form. We'd love to talk with you.

Case Study

Schnitzer Steel Website Redesign

Company profile


Schnitzer Steel is a global leader in the metals recycling industry. Founded in 1906, the company collects, processes and recycles raw scrap metal and provides processed scrap metal to mills and foundries around the world.

In addition to metals recycling, Schnitzer operates a used auto parts business that provides low-cost quality parts to customers across the U.S. and Canada. The company’s steel manufacturing business transforms recycled scrap metal into quality finished steel products such as reinforcing bar, wire rod, coiled rebar, merchant bar and other specialty products.

The Challenge


Schnitzer’s website was designed and developed in 2007 and while it aligned with web design of the times and met the needs of users, significant changes in technology and content reorganization needs prompted Schnitzer to solicit the help of CSG Pro and Kelvin Design.

Designed for the lower resolution monitors prevalent in 2007, the old website’s pages used a left-aligned, fixed-width page layout that did not scale on larger monitors. In addition, the site did not have any mechanisms to specifically handle mobile devices, such as responsive design. Consequently, mobile devices and larger monitors displayed the Schnitzer site with white space as shown in figures 1-4 below. As a result, Schnitzer wanted to update their site’s design and technology to fit the computers and devices in use today.

Additionally, Schnitzer wanted to introduce a Spanish version of their website but keep it cost effective by streamlining the content and highly leveraging the new English site design and development work.

Another key catalyst for the website overhaul was a content reorganization being led by their Information Architect with a large focus on catering to the customers and suppliers of Schnitzer's Metals Recycling Business.

schnitzer_old_01.png Figure 1: 2007 site home page

schnitzer_old_02.png Figure 2: 2007 site internal page

schnitzer_old_03.png Figure 3: 2007 site internal page

schnitzer_old_04_mob.png

Figure 4: 2007 site as viewed on a mobile device

As a longtime partner, CSG Pro was intimately familiar with the Schnitzer brand and brought a fluency of applicable programming languages and a wealth of experience migrating and integrating old and new technologies for Schnitzer. CSG was perfectly positioned to provide solutions with a blended/collaborative approach that addressed each of the issues Schnitzer was looking to solve with creative, thoughtful and integrative solutions.

Technical situation

Schnitzer’s three original websites utilize a shared custom framework developed by CSG Pro using Microsoft’s ASP.NET web application framework. This custom framework provides key functionality for the websites including navigation controls (i.e., menus and breadcrumbs), security, data access and a set of controls for displaying key data-driven features such as an interactive location map, listings of surplus equipment for sale, and more.

This custom framework has been very effective for Schnitzer’s websites, providing rich, reliable functionality while being easy to maintain. Given that, it was a key requirement to keep the custom framework intact while updating the Schnitzer site. Some updates were required to the framework in order to support new functionality, so those updates had to be done in such a way as to not impact the other two websites.

Schnitzer’s old site provided users with a custom, interactive location map that was developed using Adobe Flash. Given that Flash is not supported on mobile platforms such as iOS, Schnitzer wanted to replace the map with a modern, HTML5 / JavaScript-based solution. Careful consideration had to be made in order to maintain the functionality from the Flash based solution.

The Solution


Working collaboratively with Schnitzer’s Information Architect and Kelvin Design, CSG proposed to rewrite the existing HTML markup in the CSS styles to match the new design but also to use responsive design techniques that would, depending on screen size, dynamically adapt the visual layout of the site contents. Using responsive design development techniques would dictate and enhance the implementation process and provide a core framework for the CSG proposed solution.

image 6.png
Figure 5: new site as viewed on a mobile device

Leaflet, an open source JavaScript library for creating mobile-friendly interactive maps, was used to implement the new location map. This solution replaced the custom Flash based location map with one that can be viewed on devices such as Apple's iPad.

image 7.png
Figure 6: mobile location map

image 8.png
Figure 7: desktop location map

Due to challenges that exist when translating site content from English to Spanish, developing a Spanish version of the website required some additional thought. CSG proposed a separate site that would highlight key elements thus providing the important content and minimizing any issues that could be lost in translation. Also, by developing a separate site, it allowed for the domain names to reflect the localization of the language.

image 9.png
Figure 8: new Spanish site, as viewed on a desktop

image 10.png
Figure 9: new Spanish site, as viewed on a mobile device

CSG played multiple roles in the iteration process when integrating responsive design. Using the original desktop designs as inspiration, CSG filled in design gaps as needed, thus expediting and streamlining the process for Schnitzer.

Ultimately, CSG was able to deliver solutions that met and exceeded Schnitzer requirements while effectively working with multiple vendors and ensuring all work was completed timely and within budget.

image 11.png Figure 10: new site, as viewed on a desktop

The Results and Benefits


The responsive design approach has ensured Schnitzer’s website maintains aesthetics, functionality and usability on desktops, laptops, tablets and smartphones. Updated page templates (including elements such as menus), content layout revisions and single touch localization capabilities now allow any Schnitzer site user to navigate successfully on their device of choice.

“The foundation CSG built for us in 2007 has been rock solid so we naturally called them when it was time to update our corporate site. CSG was very responsive, flexible and delivered a high quality website on time and on budget. Positive experiences like these are why we maintain an ongoing relationship with CSG as a trusted technology provider.”

Alexandra Deignan, VP of Investor Relations

Colin Kelly, Director of Public Affairs

Schnitzer Steel Industries, Inc.

##Customer profile Schnitzer Steel Industries, Inc
PO Box 10047
Portland, OR 97296
(503) 224-9900
http://www.schnitzersteel.com

Industry: Metals Recycling
Number of employees: 3,643 (fiscal 2013)
Annual revenue: $2.6 billion (fiscal 2013)

Products and Services Used by CSG Pro

  • LESS: CSS preprocessor (open source simplification tool)
  • CSS3
  • HTML5
  • JavaScript
  • Leaflet
  • ASP.NET
  • C#
  • .NET Framework
  • SQL Server
  • Visual Studio 2013

Services provided by other groups or companies