Efficient Fertilizer Use Guide
In 2013, I was selected to build the electronic version of a 30 year old Crop Nutrition textbook. It contains 13 chapters, 80 sections, 25 data tables, 15 tabbed widgets, and 5 carousels.

Senior Frontend Developer

Approach
Semantically structure text content for indexing and accessibility best practices, using a modular layout system in LESS to support the numerous content designs.  Use Grunt to assemble pages from partial templates and live reload the browser for quick frontend production.

Used
jQuery, Waypoints, ScrollSpy, LESS, Grunt

Supported
IE8+, Modern Browsers

Development Specifics
To accomodate the vast amount of text content, a large base of styles were created to account for the various section layout options. Sections could contain up to 4 columns, with text, images or tables in any space. A SMACSS approach was used to organize the LESS files during production, which kept the layout styles separate from the modules, typography, and color theming.

There are over 25 tables full of data. Entering all this data in by hand was tedious and error prone. I used OCR software to convert the existing data table images into text, pasted into Google Sheets, downloaded as HTML markup, cleaned up, verified for accuracy, and entered into the content sections.

Using Waypoints and ScrollSpy, a fixed header follows as you scroll down the page, serving as a breadcrumb and as a quick-nav between chapters. A print stylesheet ensures that the content hidden inside tabbed widgets and carousels gets printed out properly. 

Outcome
The 30 year old Crop Nutrition textbook has been brought into the age of the internet with new graphics, a sleek and simple interface, and accessible content.