Skip Main Navigation

Complex information made easy to understand and pleasant to use.

Site Technical Details

When working with clients on website redesign projects, I advocate approaches that create fast, economical, accessible, and scalable solutions. These invariably create better end-user experiences and better overall results for my clients. Naturally, I practice these techniques on my own site as well.

For those of you curious about how this site performs—and what steps I take to make that happen—this is where you'll find an in-the-weeds account of the approaches and techniques I've used.

Performance

I stress test page types and templates with Google Chrome's Lighthouse auditing tool. This helps ensure that that pages I've created work well across devices and conditions, taking into account things like slow connections and limited processor power. Tests discussed and shown here were conducted with the standard Lighthouse runtime settings, including default mobile device emulation, network throttling, and CPU throttling values.

Back End & Build Tools

  • Jekyll static site generator
  • Custom content types using Jekyll's Collections feature (articles, case-studies, and reviews)
  • Custom data types and taxonomies using Jekyll's Data feature (client list, talks, and article tags)
  • PHP for contact form
  • Gulp + Browsersync
  • SASS + CSS sourcemaps

Front End

  • Zurb Foundation front end framework, customized & optimized
  • Responsive images (using srcset), with WebP format support (in progress for some templates)
  • Lazysizes image lazyloader
  • Semantic HTML throughout
  • Custom SVG social media icons
  • Custom javascript for site header behavior

Infrastructure

Image of this website's homepage with Lighthouse tools open in the inspector sidebar, showing 100% scores for all values
Google Chrome "Lighthouse" scores for this site's home page. (The colored dots are the "confetti" that animates in when all scores are at 100%.)

Accessibility

Lighthouse auditing, like all automated audits, is a great place to start when checking for accessibility, but there are a lot of issues an automated test won't detect. To ensure this site is accessible to the widest possible range of abilities, I also perform manual tests with screen readers and the Accessibility Insights tool. Key accessibility features are included below, arranged by WCAG's four principles of accessibility.

Perceivability

  • Meaningful images have alt text that serves an equivalent purpose (in progress for header CSS background images)
  • Text contrast ratios are at WCAG 2.1 AA standards and above
  • Background and foreground contrast ratios are at WCAG 2.1 AA standards and above
  • Buttons have accessible names

Operablility

Understandability

Robustness

An Accessiblity Insights report page for this website's homepage showing 97% of tests passed, 3% failed.
Accessibility Insights score for this site's home page.

Progressive Web App

Progressive web applications (PWAs) bring to websites the kinds of features normally reserved for native applications. These include capabilities such as installability, state persistence, and offline functionality. While I don't imagine many folks will have a reason to "install" my site, everyone who uses it will benefit from the performance and security advantages that come from it being a PWA.

Offline Access and File Caching

  • Site responds with a custom "offline" page when network connectivity is not available
  • CSS, custom fonts, and header images are downloaded and cached locally during the first session, and are not downloaded again unless files are changed on the server

Mobile Device Optimizations

  • Standalone app behavior when opened from homescreen
  • Installable across devices (from phone to desktop and everything in between)
An inspector view of this site's App Manifest, showing definitions for cross-device PWA behavior.
An inspector view of this site's App Manifest, which defines cross-device PWA behavior.

Linked Data

Linked Data makes website content readable—and, even better, understandable—to algorithms, smart agents, and other data processing machines. This helps improve findability and SEO, and, more importantly, it makes content globally more accessible and usable to the humans I'm trying to communicate with. Linked data is built into this site from the ground up, from the way content types are structured, to the way that templates compile, express, and publish machine-readable data.

Infrastructure

  • Resource attribute metadata fields are built into content authoring templates, ensuring accurate data is captured at the time of content creation
  • Each resource is assigned a unique ID, which allows it to be unambiguously referenced in the default graph
  • Linked data fragments are assembled systematically through Jekyll's configuration file
  • A modular approach to linked data publishing means it can adapt and scale to changing requirements and contexts

Publishing

  • Data published as JSON-LD (as recommended by Google)
  • Data is combined into as a single graph object, with fragments related sematically via unique IDs
  • Data is primarily based on Schema.org, with types and attributes included from other vocabularies as needed
Machine readable data from this site's home page, as viewed with Google's Structured Data Testing tool.

Backlog

Deciding which features and functionality to prioritize is a balance between resources and user and business needs. Because of this, there is always something (or many things) left in the backlog. Here are a few of the performance and accessibility optimizations up next on my "to-do" list:

  • Tidy nesting in JSON-LD ✓
  • Create and publish new LD types ✓
  • Finesse awkward 960px breakpoint for articles
  • Fine tune image scaling at breakpoints
  • Normalize image sizes in CSS
  • integrate PurgeCSS
  • Compress images with imagemin
  • Rework problematic All Articles custom widget

Ready to tame your complex information environment to better meet business goals and user needs?

Let's Talk