Starting around 2010, I began publishing articles to blogs beyond my own. Sometimes for freelance, sometimes for my employer, I researched, wrote, illustrated, and sometimes animated useful technical information.
Tutorials and Documentation
TechLit Video Series
In 2019 I created Technical Literacy program to inform non-coding content authors about web techniques, including basic HTML, image optimization, metadata best practices, advanced search techniques, using a code editor in writing, responsive web design, and more. Each class had at least one video, a glossary of terms, and sometimes additional templates, articles, and other resources. Sample video available on request.
While publishing tutorials at UXPin, I came to realize that documentation was scarce. Tech support staff didn’t have time to write an overall guide; the design/development team wasn’t interested; management thought we had better things to do.
I disagreed. Over the course of two months I wrote, illustrated, and animated a comprehensive guide to the company’s product. Secretly backed by concerned parties, I added it to the company blog.
It was a hit with new customers, and certain members of tech support often referenced it when explaining both general concepts and how the app’s different features worked together.
As I write almost three years later, the docs are still in use.
In 2014–2016, I was part of a team that built a CMS called Grawlix, dedicated to publishing comics. In addition to development, my role included tech support and marketing. All three culminated in the system’s official docs, which I wrote and illustrated. The living documents were my largest library of tutorials and documentation to date.
The website is gone, but the guides remain.
Sometimes technical concepts need visual explanations. For this article on Foundation’s responsive grid system, I wrote text around illustrations instead of tacking on a few graphics after the fact.
Even people who understood the Foundation grid system appreciated the clarity of content beyond words. Such feedback after publication helped me realize the power of visuals, which eventually lead me to animation in tutorials.
At UXPin I used a video editor to build high-res animated GIFs. The ability to zoom in on a feature helped give both context (full-screen) and focus (up-close) when explaining where to find that one button required to enact a feature.
When our tech support team saw my tutorials, they also experimented with animations and infographics. A friendly rivalry sprang up to see who could craft easier-to-understand tutorials.
Who won the competition between marketing and tech support? The readers. See for yourself.
Writing technical tutorials demands seeing things from readers’ points of view. I took that literally with this experimental article whose subheads take on the readers’ voice.
Ironically, without comments I never got meaningful feedback on the article from readers. But it got the information across.
Working at design agencies, I was often surprised at how many visual designers shied away from basic programming concepts. Even HTML seemed to intimidate otherwise web-savvy UI folks.
This piece was one of several I published not just to teach, but to alleviate jitters about computing. It was also one of the most polished sets of videos I’d produced to date — a necessity when communicating to people concerned with visual details.
Managing information is more than sitemaps and SEO. In 2017 I wrote about a process for eliminating desktop clutter — and not just throwing items into a folder.
This article was unique in that the editors added graphics after I submitted it for final review. I appreciate their aesthetics, but they’re not informative. Non-informative images that clutter an article about reducing clutter. At least the article was well received at the time.
While other tutorials begin life as text organized into steps, this article started as a series of illustrations. The result was, as one reader told me, “the first time I really got it.”
I may have gone overboard with the informal writing style, but it was worth experimenting with a casual voice.
Easily my most popular freelance article, this dive into six-digit color codes began as a casual observation and ended with my interest in turning geek-speak into plain English.
It worked. As of late 2018, the colorful article still got occasional retweets.
As far back as 2012, I had this idea about upside-down website structure. Starting with the “lowest” pages — those with real content — and building up to the home page didn’t go over well with the company I worked for.
In hindsight, I can see their point. When your business model relies on streamlined processes, bucking convention is a risky move. But I still say user goals and business needs should determine template choices, and not vice versa.
One of my first stabs at content-first web design, this article took shape after a heated discussion about the virtue of crafting code around messaging rather than downloading a free WordPress template.
And I still maintain that static Photoshop comps do more harm than good.
A conversation with a friend in print design sparked this explanatory post about static vs. fluid designs. I wanted to help designers make the leap into web design, although looking back I had some misconceptions to overcome as well.
But maybe I was on to something. The last line in that post makes me wonder ….
My dual interests in design and education (plus the hit a weekly publishing cycle) lead me to interview two people on mentorships in UX.
I also wanted to break the UXPin blog out of its usual product-focused parade of articles. Bringing in outside voices gave the blog an air of community involvement.
Plus, and you can only write so many marketing articles on the practical application of an app’s selling points. And now for something completely different.
In the same week, I lost a hard drive, a job, and a tooth. To call late 2012 “eventful” is an exercise in understatement. But it lead to this half-month-long comparison of backup services. At the time, this was the longest period of research I’d conducted for a single article.
Seeking outside comments is easy when you get paid by the published word. This article began as a writing exercise to see if anyone would answer a series of questions cold-emailed to them. Three out of three people replied. With a little context, this article joined my theme of “web layout” in 2013.
This article also got a fair amount of attention. One of my readers emailed back to set up a job interview. A month later, I had a full-time job. So in this case, seeking outside comments paid well in the long run.
Back when the web world had many more frameworks, I downloaded and experimented with a dozen to help designers make informed choices.
Three stood out: Bootstrap, Foundation, and Skeleton. But I compared many more to explore innovative features and different approaches to the same problem of web design layout.