Flanders Law
Flanders, Elsberg, Herber & Dunn is a law firm based in Longmont, CO. The attorneys who founded and nurtured the law firm were men of vision, industry and diverse interests. They brought irrigation and electrification to the state. Besides being capable lawyers, they were scholars and educators, cattlemen and bankers, legislators, elected officials, judges, civic volunteers and philanthropists. They were soldiers and officers from the Civil War to Normandy and Okinawa. Flanders, Elsberg, Herber & Dunn, LLC has survived since 1871 for many good reasons, not the least of which are excellent legal representation and exemplary client communication and service.
01. Approach
This project had a logo already created so that wasn't a stumbling block. I worked with the office manager Edward and he wanted something fresh because the old site was built on Wordpress with poor image resolution and poor site optimization so it wasn't performing that well. The firm has been in business since 1871 so we wanted to celebrate that longevity as the oldest law firm west of the Mississippi river. We wanted to make sure that we highlighted the excellent attorneys employed by the firm as well. So we were trying to go after a modern site that paid homage to the historical roots of the firm. One of the issues is the firm didn't have much in the way of photo assets to use so we relied heavily on stock photos but tried to make sure the site verbiage is what took center stage.
02. Design
Edward really didn't want anything too bright so the choice was to use more earth tones and black colors. We also used a transparent texture to give the open white space the look of parchment paper. The font choice was unique as we went with GFS Didot for the headings which is an traditional serif font choice. The heading font choice was offset by using Raleway which is a modern sans-serif font. Animations were created on scroll down to draw attention to different elements of the website without being overly distracting. We also utilized a couple of different sliders that gave the user the ability to interact with the site and learn more about the firms history and it's attorneys. The website had been ranking fairly well so we wanted to make sure that the site changes didn't impact rankings. We also included schema.org and JSON-LD markup along with HTML5 to help the site signals to Google and other search engines.
#e09f1f
#7c796c
#7c796c
Ralway
GFS Didot
03. Technology
The Flanders, Elsberg, Herber & Dunn project is a totally responsive design based on CSS Grid Layout with a Flexbox fallback. That means the project is not reliant on an outside library of code to be fully responsive. The starting point was HTML5 Boilerplate to make sure the project was utilizing current best practices and most browser based styling was reset using Reset.css. We don't utilize templates so all coding was done by hand using the Brackets code editor. The Flanders, Elsberg, Herber & Dunn team is also able to add blog articles, maintain the verbiage and images on the site by utlizing Perch as the content management system. Every page in the project was validated and confirmed to be W3C compliant (with the exception being images are lazy loaded and scripts are optimized which dramatically improve page speed but cause issues with W3C validation). All css files are modular in nature so Gulp was used to combine and condense all CSS files in the final project build in order to make the page load speed better. The final page load speed is smokin' fast at approximately 1.5 seconds per page. CSS and javascript animation was created by using the following libraries Animate.css, Hover.css & T-Scroll. Other code and libraries used include Modernizr, jQuery, Akismet Flickety, Vanilla Lazy Load (Verlock) and Google Analytics. Software utilized to create this project included Brackets, Photoshop, Perch CMS, VectorMagic.com and CompressPNG.com.
The coding and software skills used by Colorado SEO Design to make this project take off included:
- Photoshop
- PHP
- HTML5
- CSS3
- Javascript
- JSON
- Schema.org markup
