Mudstone

Mudstone is my portfolio site. You’ll see here a few examples of my work from nearly 8 years as a web designer and developer for Cengage Learning, a publisher of college textbooks and online products and services including textbook companion sites, instructor and student online resources, and electronic books.
I typically work on several concurrent projects, including building prototypes for dynamic pages as well as developing custom static pages. At times, I get involved in the design and layout phase as well. I make sure that any project I’m involved with is compatible across browsers/systems, are consistent with other Cengage products, and meet accessibility requirements. I hand code to modern web standards with HTML5 and CSS3 and JavaScript. I work closely with a variety of people (marketing, designers, back-end developers, etc.) and I often have to mediate to settle issues. I’ve enjoyed working on multiple projects in collaboration with a team, gaining experience in working on all phases of development.
You’ll also find here a bit about my art career prior to becoming a web developer as well as other my interest and pursuits.

Portfolio

The Catalog Pages

The Cengage Catalog is a huge project I’ve worked on for many years, alongside my other projects. My primary responsibility has been prototyping: taking specs from Photoshop PSD’s and figuring out how to generate modular, accessible, cross-platform, cross-browser HTML to give to the developers who are building the JavaServer Pages (JSP). I was also in charge of making sure the code functioned as expected and met our accessibility requirements.
As this project evolved, we made the leap from a straight JSP system to using the Endeca search application as an interface to JSP, reorganizing the entire functionality in the process. Using this system, I generated multiple templates with modular parts that could be utilized and manipulated on-the-fly by the marketing team.
This system is being applied to various products in the Cengage Learning family. The next application was the National Geographic Learning Catalog, which now has the same functionality as the Cengage Learning Catalog but a completely different look and feel.

Prototyping the Market Segment pages was kinda like cooking – I was making multiple modular parts for assembly into an HTML5 gourmet feast. The site was plated with Endeca, marinated in cross-browser and cross-system compatibility, then sprinkled liberally with 508 and WCAG level 2, AA conformance. Yum! I also worked with the sous chefs (developers, outside vendors, UI, and marketing) to ensure that the site met all guidelines and exceeded everyone's expectations.

Before we moved to using Endeca we were using a straight JSP and a static HTML setup for the discipline landing pages. This was my first real “head chef” gig. I was in charge of creating the prototypes, making sense out of the comps supplied by UX, building HTML prototypes, pulling in existing styles, updating the HTML and putting it all together to come up with a working, flexible and fluid system.
As usual, I applied my favorite seasonings: cross-browser and cross-system compatibility, 508, and WCAG 2.0.

For the discipline catalog pages, I was in charge of creating the comps, pulling in existing styles, then updating out-of-date code and pulling it all together to come up with a working, flexible and fluid system.
I continued to ensure cross-browser and cross-system compatibility, as well as adherence to the corporate style guide. Also, I cleaned up the vendor generated code so that it is clear and easy to maintain.

For the student and faculty catalog pages I worked the ground level of page construction, jQuery, and UI for the tabs which included a touch of ARIA tagging.
My set of contributions were: 1) technical, with lots of prototyping, jQuery, CSS3, cross browser/cross system and accessibility; 2) design consulting, for getting everything to fit; and 3) QA on the delivered product to ensure compliance to the style guide.

The Corporate Pages

I've been involved in building this set of pages through at least five iterations, starting back when Cengage Learning was Thomson Learning. Over time, these pages became more and more complex and so styles and designs were unified across multiple pages, utilizing the corporate style guide to give continuity to the site.
I was in charge of building out new designs, maintenance updates and last-minute, high-profile, time-sensitive finance updates regarding Cengage IPOs, investor news and other topics.

The corporate landing page served as a gateway to the various properties of Cengage Learning: School, Higher Ed, Gale, etc, as well as investor and corporate related information, such as press release videos.
I was responsible for building the HTML and CSS, leading the transition to HTML5 and CSS3. I made sure the page’s look and feel work with the existing designs on other Cengage products. This page went through a stringent accessibility review and was nearly 100% compliant with WCAG 2.0. AA.

Here I reworked the HTML on the Higher Ed landing page to adopt a Web 2.0 style and created extensive JavaScript code to replace or eliminate the use of Flash and increase usability. I also created the HTML and CSS templates which were then leveraged to create the landing pages for seven separate sub-brands. For those, ensured cross-browser and cross-system compatibility, as well as adherence to the style guide. I implemented Omniture tagging to ensure that proper user data was being captured.

I worked extensively with Marketing and the UI designer to bring a fresh Web 2.0 look to the School site, designing and reworking the tabs to better fit their needs. My role consisted of creating the HTML and CSS, redesigning the tabs and making sure that all was compliant with the Cengage style guide. I particularly like the candy coating of the interface.

Accessibility

I’ve played a pivotal role in making sure that we’re building products with accessibility in mind and that all the developers in our team had the resources, education and guidance they needed while building out our products.
It is my privilege and honor to serve on the corporate-wide Accessibility Council, whose mission is to provide guidance, best practices, outreach and education on topics related to accessibility and branding to vendors and customers (both internal and external). My role is to provide insight and updates on the accessibility status of current projects within our group, and to provide guidance to our group regarding accessibility issues.
While developing the corporate-wide Web Style Guide I included section 508 conformance and WCAG 2.0 Accessibility standards.

Corporate Style Guide and Templates

I worked closely with the head of UX in developing the corporate-wide Web Style Guide. As part of that effort, I developed compliant, site-wide CSS and HTML templates for corporate-wide deployment. I ensured that they were cross-browser and system compatible and used current best practices of Cengage. The resulting pages were applied as a guide to the pages of other business units.
I served on the Branding Council which was established to handle the transition from Thomson Learning to Cengage Learning. At the transition, standards were lax and so the Branding Council developed and enforced brand presentation consistency across all sites. The council’s mission was complete shortly after the Web Style Guide was completed and adopted.

While working for Cengage Learning I’ve accumulated a mass of experience in web design and development. I’ve developed a diverse skill set, and use it to create new and interesting solutions to problems. I’m happiest when I’m troubleshooting challenging issues, making pages dance with CSS, tweaking JavaScript and learning new skills while pushing the limits of my knowledge. Colleagues tell me I’m fun to work with and I’m always willing to go the extra mile. My background as an artist gives me a unique perspective on design issues and I thrive when presented with tough challenges.

Prior to starting my career in web design and development I was an independent studio artist, making and selling art pottery and sculpture. I taught classes, workshops, and private lessons on ceramics. I was the lead of a major community wood-fired kiln construction and firing project.

Technical Skills

HTML5, CSS3, JavaScript, jQuery, Drupal, WordPress, Firebug, JIRA, Linux, Sublime Text, Photoshop, Illustrator, GIMP, Inkscape, SQL, NVDA (screen reader), Chrome Developer Tools, SortSite, Endeca, Omniture, MS Word, Excel

Education & Professional Development

Web & Interactive Media Design Certificate, University of California, Santa Cruz Extension, 2002; 2-year program with numerous courses and large-scale final project

Training seminar on Omniture implementation and use, 2007

Knowability’s “John’s Slatin Access U” (A training intensive on online accessibility), 2008

Bachelor of Fine Arts, Auburn University, Auburn, AL

Shawn Johnson - Web Designer & Developer