Christopher A. Johnson

Websites Built

Exquisite Sites from Concept to Launch
Information Architecture, User Experience
Content Strategy, Branding
Drupal Sites and Themes
UNIX Admin

Websites

I’ve been building websites since 1997, and over the years have learned that the most important factor in a site’s success is anticipating and meeting the needs of its users. The technology running the site is important and the design is quite important, but most of all the site needs to speak the users language and provide answers to the questions they have when they arrive.

People arrive at your site with a problem they want solved right now, and knowing what that problem is likely to be and helping them easily solve it is the key to success.

I primarily build sites in Drupal, the open source content management system, creating content types and a custom theme for each site. Drupal is great where a CMS is needed since it’s free, flexible, extensible, and quite secure.

For sites that don’t need to change much over time or are small in scope, the speed and simplicity of a hand-coded site is hard to beat.

Here are some sites I’ve built recently.

NYSEAN.org

  • News, Articles, Events, About for Academic Network
  • My roles: Site construction, design, custom theme, IA, UX, server admin
  • Drupal 7 on LAMP
  • For the Weatherhead East Asian Institute, Columbia University
  • Live 2016–present
  • More About This Site →

I worked with The New York Southeast Asian Network to create their website after the group was founded in 2015. The main goals were to provide a forum where students and professors could share information relating to their academic work. The main sections of the site allow for the sharing of events, essays, news articles, job postings, teaching plans, source documents and more.

EDU and OOM Blogs

  • Corporate Blogs
  • My roles: Site construction, custom responsive theme, IA, UX, server admin
  • Drupal 7 on LAMP
  • For Scholastic Inc.
  • Design: Jeremy Goodwin
  • Live 2018-present
  • More About This Site →

On Our Minds was launched in 2010 as an experiment in corporate communications via blogging. As it grew, accumulated cruft began to overshadow the content (and WordPress hijacks led to much downtime), so the editorial team asked for a new reader-oriented site that emphasized their writing which had become an important channel for not only communicating with customers, but corporate branding as well.

EDU, a new blog for Scholastic’s Education division borne of the content-to-commerce movement, was in development and was a great opportunity to develop a mobile Drupal 7 theme that dumped all the sidebar modules and gimmicks, and focused on typography and a magazine-like layout. Once EDU was live, the same theme was then applied to OOM.

Common Sense for Common Core

  • Corporate Positioning & Product Finder
  • My roles: Site construction, custom theme, IA, UX, server admin
  • Drupal 7 on LAMP
  • For Scholastic Inc.
  • Design: Gene Lee
  • Live 2013–2018
  • More About This Site →

The Common Core State Standards Initiative was a big topic in education in 2010-11. For the most part Scholastic’s products already followed this new teaching rubric but with hundreds of products across multiple businesses, it was hard for all the businesses to update their product websites help let customers understand how each product fit into the new model.

The goal of this site was to collect all of the company’s relevant products in one place, and help Scholastic’s education customers—teachers, parents and administrators—easily find what they needed based on the structure of the Standards.

Kids and Family Reading Report

  • Corporate Research Report
  • My roles: Site construction, IA, UX, writing
  • HTML & CSS on IIS⁄ASP
  • Scholastic Inc.
  • Live 2016-present
  • More About This Site →

KFRR is a biannual research project that surveys parents and children to better understand their attitudes and behaviors around reading for fun. Creating the website is a challenge because of the timing of the release, and the many charts that are included in the report.

About Scholastic

  • Corporate Communications
  • My roles: Site construction, IA, UX, editorial, writing
  • HTML & CSS on IIS⁄ASP
  • Scholastic Inc.
  • Live 2014–present
  • More About This Site →

A common problem when building a website is balancing the needs of the internal audience with the external audience. In the case of an “About Us” site for a large corporation, everyone inside the company wants to show off all products they make, awards they’ve won, depth of knowledge, decades of experience, and vital team members.

The user’s goal when visiting an “About Us” site for a large corporation is almost certainly much less elaborate: who are these people, what to they do, and how do I contact them?

The redesign of this site took it from approximately 40 pages totaling 30,000 words to about 10 pages with about 1,500 words. No one, inside or outside the company, missed the extra 28,500 words and I think it’s safe to say that visitors to the concise version spent much less time looking for the information they needed.

Kids Press Corps Blog

  • Blog for Kid Reporter Program
  • My roles: Site construction, design, custom theme, IA, UX, server admin
  • Drupal 7 on LAMP
  • For Scholastic Inc.
  • Live 2012–present
  • More About This Site →

A simple blogging CMS for articles and videos. The basic structure was put together over the course of a week, with the only requirements being a mobile-first layout, and ease of use for the blog’s editorial team. Each kid was set up with an account that the editor could assign as an article’s author. A custom content-type let video stored in an enterprise Brightcove system be added to a blog post using just the video’s ID.

Vendor Extranet

  • Corporate Operations Outreach
  • My roles: Site construction, design, IA, UX, writing
  • HTML & CSS on IIS⁄ASP
  • Scholastic Inc.
  • Live 2017-present
  • More About This Site →

One of those funny projects that is so simple, a corporate IT group cannot do it. After asking around for a few months to see which team might be able to put up a website with some embedded videos and linked PDFs—and getting no answer—I put this site together in a few days as a single html file with a linked css file.

Skills

Here are the skills I’ve developed up and in many cases mastered over 20 years of building websites

Building Websites

HTML5, CSS3, and JavaScript

An excellent understanding of the fundamentals, HTML and CSS, is key to building a site that is fast to load, easy to maintain, and future-proof. When in doubt, I read the specs at wc3.org to ensure that the markup I'm using is suitable to the content, the better to work in all browsers whether desktop, mobile, watch or whatever else. As for JS, I used it primarily for AJAXy UX and data validation. I don't use jquery or any of the other big frameworks: I'm a write-it-yourself fellow since that results in less code, faster load times, fewer dependencies, and a smaller surface area for security vulnerabilities.

Web Type and Typography

There are two sides to type on the web, technical and aesthetic. On the technical side, whether hosting fonts on your own server or using a vendor like fonts.com: grouping faces within a family so <bold>, <b>, <em>, and <i> all work properly; using <small> to enable true small caps, and making sure the fonts load before text begins rendering still require experience and expertise.

Once the font technology is working, it’s important to understand how people read, how the eyes follow text, and what factors are important to legibility. Having worked for years with a veteran hot-type man (with the burn scars on his hands to prove it) I have a great sense of how to “set” type clearly and elegantly.

Responsive and Intrinsic Web Design

In the olden days, a website had to look good on one type of screen: a desktop computer with a 13" monitor that was probably 1024 by 768. Once smartphones were able to display websites, suddenly your site needs to look good on hundreds or thousands of different screen sizes, from a 27" iMac, to a 28cm watch face. Responsive design makes this possible by including different formatting rules for different screen sizes.

While responsive works fairly well, it requires many rules to be written multiple times as screen sizes change, which gets complicated very fast, and so adding new types of content to a site or redesigning existing content becomes difficult without breaking things. While it’s still in the early stages, Intrinsic design aims to get around this complexity by building sites using the css grid system to allow one set of style rules to adapt to many different screen sizes.

Accessibility

Simply put, some of the people who use your website have accessibility issues, and your site should support them. It's not very difficult and only takes a little time: using semantic HTML, labeling fields in plain English, adding "alt descrptions" to images, etc. One of those things where, if you habitually add it as you build a site, the end result is accessibility without much headache and little added time.

Drupal Site Building

In a nutshell, Drupal is a free and open-source content management system built and maintained by volunteers with contributions from many corporate and government users. It's secure and updated frequently. It is extensible, with hundreds of modules available to provide almost any needed website functionality and, if a module can't be found, you can write your own using publicly-documented APIs. It also runs on an free and open source software stack (see LAMP below) so there are no upfront software licenses to buy or ongoing subscription fees.

Drupal is the number-two content management system on the web (after WordPress; I prefer Drupal for security and reliability). I've built sites in Drupal 5 through the current version, Drupal 8, most of which are still running today—including a Drupal 5 site that's been live for 12 years.

Backend

Apache

The Apache runs more websites than any other server technology. I'm well-versed in the arcane details of httpd.conf and Apache modules.

Unix Administration

I know the unix command line and can set up a server from scratch with the software needed to run the LAMP stack: Linux, Apache, mySQL and PHP. Well versed in log-spelunking for troubleshooting purposes.

DNS

Experieinced in setting up DNS and subdomains, using mod_rewrite when server names or path attributes need to change, secure DNS and nameservers.

Backup

This isn't traditionally thought of as a backed skill, but (knock-on-wood) servers die and hard drives fail. Every site I build is designed with redundant data backup from the start, so your content won't disappear. I'm proud to say that I've never lost any website or its data in 20 years (knock-on-wood again).

Editorial

Content Strategy

What makes content valuable? What makes it effective? How do you support it over its lifetime on your website? Content strategy answers these questions by considering context, clarity, concision, and editorial needs.

Information Architecture

Hierarchy, taxonomy, navigation and labels combine to structure site content intelligently so users can quickly find what they’re looking for.

User Experience

My primary skill in website development is an excellent understanding of the fundamentals: HTML, and especially CSS.

Curriculum Vitae

C.V. PDF

EMPLOYMENT

Scholastic Inc. Educational publisher

Senior Web Producer (2012–2018) for Corporate Communications: Full-stack Drupal administration; information architecture and content strategy for customer-facing websites promoting corporate initiatives; front-end development.

Intranet Producer (2000–2009) for Internal Communications: Supervise expansion and maintenance of newly-launched corporate Intranet including content strategy, information architecture, technical design; work with Scholastic.com team to mix internal and external content across publishing systems; deploy Drupal and other content management systems; keep code specs current with evolving html, css and mark-up standards; code pages.

Freelance consultant (1998–99) to Corporate Graphics Systems: Code templates and asp pages for intranet launch; buy, configure and maintain workstations for thirty prepress operators and other users; configure and maintain server hardware/software and client software for various network applications such as database, back-up, scheduling, workflow; design and manage print- to-html content conversion projects.

Technology Manager (1997) for Instructional Publishing Group: Supervise technical staff of five providing support for approximately 250 users; deploy and maintain email, file and print servers; plan and implement archiving procedures for finished project files and data.

Freelance consultant (1996): Tech support; dtp templating and troubleshooting; purchase and manage hardware and software.

IN THE NINETIES

Micropage Inc. Prepress and production

Production Manager: Design templates, art specs, workflow and tracking for large page creation projects (generally 1,000 to 5,000 one- to four-color pages per project); client liaison.
Color Room Manager: Supervise staff of eight involved in color film production, from scan to film and proof. Responsible for all aspects of accurate color reproduction.

Manhattan Color Graphics Commercial printer

Mac Department Manager: Schedule, track and bill in-house service bureau work; supervise operators and production techniques.
Mac Department Technology Manager: Configure and maintain workstations, server storage and back-up; production work.

Userfriendly NYC Inc. Desktop publishing

Production Manager: Estimate, track and produce desktop publishing jobs.
Store Manager:: Manage daily operations including customers, staff, registers and billing.

EDUCATION

Hampshire College Amherst, Mass.

Bachelor of Arts: Concentration in applied molecular genetics. Final lab project: A Comparison of Frankia and Rhizobium Nodulation Genes. Also studied bioethics, drums, Jung.

Reference

The goals when building a website haven’t changed much over time: present useful information in a way that the user can readily understand. But techniques and technologies involved change really fast and keeping up with the latest is a challenge for everyone who works online. Here’s how I stay current.

Newsletters

CSS-Tricks

CSS ain’t perfect and when it cannot do something that needs to be done, Chris Coyier and company find ways to make it work. The rest of the web often follows.

Nielson Norman Group Newsletter

Originally Alertbox by Jakob Nielson, now the best source for insight on data-driven UX design. They do the testing and we learn what works, what doesn’t, and (often) why.

CSS Layout News

Rachel Andrews of grid layout fame writes about it and other innovations in web layout systems.

Seth’s Blog

Anti-marketer Seth Godin writes about how (and why) brands should earn loyalty and goodwill: through honesty and empathy instead of the usual tricks and cheats.

Conscious Style Guide

“For anyone curious or serious about conscious language.” Our understanding, awareness and respect for difference is (thankfully) evolving rapidly these days. The language we use needs to evolve as well to ensure inclusivity.

New Thinking

“Digital transformation,” when successful, is organization-centric thinking giving way to customer-centric thinking. Gerry McGovern writes about how organizations will adapt or perish.

Hacker News

Ostensibly for “anything that gratifies one's intellectual curiosity” but mostly a good resource for flagging big news in the programming, coding and techbiz worlds.

Podcasts

The Big Web Show

Jeffrey Zeldman’s Designing With Web Standards championed semantic markup when all was chaos—which helped make the web a medium that works on any browser on any device—and helped turn web development into a profession rather than an arcane set of nerdy tricks.

The Web Ahead

Jen Simmons, an evangelist for sophisticated layouts using grid and flexbox, talks to people working on the next big things in front-end web technology.

Security Now

Malicious botnets based on hijacked home wifi routers can flood any web server with enough traffic to cause a denial-of-service to legitimate traffic. Steve Gibson, who coined the term “spyware” in 1995, keeps an eye on developments like this and helps listeners understand the security environment of the modern internet.

Books

Envisioning Information

Edward Tufte is one of a kind. I’m not sure whether I read this or The Visual Display of Quantitative Information first, but these were my first exposure to the idea that information can be presented well—or poorly—and there were established conventions for doing it right.

Don’t Make Me Think!

Steve Krug’s title just about says it all. Users are impatient and overloaded, with their cursors always hovering over the Back button. Good websites are intuitive and meet the user more than halfway. If not, they leave—quickly!

Designing With Web Standards

Building websites in the 90s was often a combination of hacking and guerilla art, and most html was copied from existing sites (css had not yet become popular). Zeldman’s DWS made a strong case that, for the medium to mature, it needed to standardize and professionalize, with “semantic markup” as its rallying cry.

A Book Apart

Short books by experts, designed to get practitioners up to speed. Vital for understanding and implementing new web technologies and practices as they emerge.

Contact

Thank you for checking out my work
If you’re looking to build a better website, I’d love to help

chris@ccaajj.net
(917) 680-6098