August 20, 2024 - Read how optimizing enterprise websites for modern demands can increase your content visibility and click-through-rate.

Silicon Valley Infomedia

Table Of Contents

Introduction

Enterprise-level website development presents unique challenges beyond the typical hurdles small businesses face. When traditional build tools like Grunt and Sass are inaccessible due to enterprise security constraints, developers must get creative. This article explores how to modernize an enterprise site while meeting data, security, and user experience requirements. Drawing from a real-world example with Wells Fargo Advisors, we'll discuss practical strategies to tackle this task, even when access to familiar development tools is off the table.

Initial Challenges: Old Sites and Usability

When we first approached the Wells Fargo Advisors website, designing a solution usable for content publishers unfamiliar with advanced web languages was paramount. Our constraints precluded using Sass and Critical CSS beyond the initial build, necessitating a user-friendly codebase. The site had to be easy to maintain and capable of providing a swift, seamless user experience.

Overcoming Practical Challenges

Getting Comps in the Browser

One of our first tasks was translating nine desktop PSDs into a responsive site layout. Adobe Edge Reflow CC was instrumental in this process. Despite no longer being actively developed, Edge Reflow remained available in the 2014 and 2015 versions of Creative Cloud. By converting PSDs into structured HTML and CSS, Edge Reflow enabled us to quickly showcase a working prototype demonstrating responsive behavior in real-world settings. This avoided the need to outsource web development services, effectively leveraging internal resources temporarily.

Working Without Common Build Tools

In an ideal scenario, tools like Grunt and Gulp streamline development by automating Sass preprocessing, image optimization, and more. However, these open-source JavaScript tools were not viable options behind an enterprise firewall. To fill this gap, we turned to GUI tools like Prepros, which performed 85% of the tasks typically handled by command line tools. Prepros tackles Sass processing, image compression, browser syncing, and ES6 to ES5 transpilation. Its cross-platform compatibility at approximately $30 per license made it accessible to our Team, including those using Windows 7 and macOS.

Implementing Nested Media Queries with Sass