As I write, the time approaches ten o’clock on the evening on November 14. I must complete and publish this article by midnight in order to meet my deadline. What happens if I don’t? Absolutely nothing. The deadline is self-imposed. It’s also completely arbitrary.
The fact of the matter is that I wouldn’t be writing at all if it wasn’t for the arbitrary deadline. I started with the goal to write about design and constructed constraints that would force me to do so. As the Writing page reads:
Thoughts on design, published on the 7th, 14th, 21st and 28th.
It’s the 14th, so I’ve got a deadline to meet.
Thus far, the great consequence has been that I have, indeed, written. I’ve written more than I ever have in my non-student, adult life – twenty-two articles to date. I’ve accomplished my goal, thanks to arbitrary deadlines.
There are downsides, however. A busy schedule, coupled with procrastination, has lead to stressful, last-minute writing sessions, all in an effort to meet the arbitrary deadline. This affects not only myself but my family – who sees less of me as a result. In particular, my wife has felt the burden of doing the things I’ve left undone because I’m writing.
The worst situation came while attempting to meet last week’s deadline – November 7. I underestimated the work of writing notes from Ampersand NYC, which necessitated four articles. Instead of meeting my deadline, I broke it. Publishing four articles in the same week also broke my one-per-week schedule.
For all my efforts, this technically wasn’t the first time a deadline was missed. Confession: I’ve taken small liberties with dates in order to maintain the facade of my weekly publishing schedule. Did anyone notice? No – no one is waiting for this article to be published. Does that remove the uneasy feeling that I’ve been dishonest? No it doesn’t.
Writing on the internet is a strange thing. Starting out, your reader is both no one and everyone at the same time. The fact that your words are “published” and accessible to anyone to read is motivating. Simply knowing that your words could be read promotes a higher standard of quality.
After all, motivation is the end goal. Arbitrary deadlines are a motivational tool, but at what point do they cease being helpful and become overly burdensome? When does positive stress (that forces action) become negative? If a deadline is compromised one time, it becomes easier to compromise a second. If there’s no positive pressure to meet a deadline, it’s no longer useful as a motivational tool.
Limitations and deadlines are necessary. To not have limitation is the illusion of freedom and the tyranny of infinite choice. To not have a deadline is to never finish. What must be remembered is that we are human beings and not rigid machines. We need deadlines, but we also need a degree of flexibility. Arbitrary deadlines are to help us, not control us.
This article is the fourth and final in a special series covering my notes from Ampersand NYC: The Web Typography Conference. See also: Part 1, Part 2 & Part 3
The final set of speakers at Ampersand NYC was comprised of front-end developer Jen Lukas and type designer Christian Schwartz. Lukas shared what she’s learned about implementing webfonts from a developer’s perspective. Afterwards, Schwartz closed out the conference with thoughts on type design, webfonts, and the future.
Jen Lukas: On Icon Fonts & Working with Designers
Jen Lukas, a front-end developer with Happy Cog, offered discussion points on how designers can best work with developers to implement type on the web. She used the quirky metaphor of a sandwich – an Ampersandwich that is – to structure her talk, with every topic relating to a sandwich ingredient. While I won’t attempt to reconstruct her metaphor, here are some highlights from her talk.
Setting General Styles
Lukas starts projects by creating general styles. This means setting a base style for every element, creating a foundation of styles that can then be further modified for special cases as needed. A benefit of this method is that it ensures no element will ever be displayed without a style (ie when a client starts using the cms). Additionally, Lukas pairs all heading tag styles with corresponding class names. For example, the primary heading style would be mapped to both the h1 element and a class name of “alpha.” That way, heading styles can easily be reused via the class names, independently of the specific heading tags.
Icon Fonts
Lukas also gave a good survey of the many methods and services available for implementing icon fonts. There are so many, it can be hard to know which one to choose. She cited working with one service that changed drastically, with no warning, during the middle of a project. Her recommendations based on the experience? Do your research. Learn the difference between services and remember to choose one with good customer support and a track record of stability. As an aside, I wrote a detailed tutorial on how to use IcoMoon, my current tool of choice for creating custom icon fonts.
Working Across Browsers
Regarding the implementation of webfonts, Lukas offered some helpful tips. For example, she recommends using -webkit-font-smoothing cautiously. While it can improve the rendering of text in some situations, it can harm it in others. Be sure to always test on actual devices. Additionally, should webfonts look exactly the same on every device? The answer is the same as an even broader question:
Another practical tip dealt with serving font assets. When designing experiences for different device classes, it can be advantageous to create multiple font kits. One font kit, small and basic, can be served to mobile devices where bandwidth limitations are a potential concern. Another kit, larger and fully-featured, can then be treated as progressive enhancement and served to desktop devices.
Christian Schwartz: Webfonts Are Just Fonts
The last presentation of the day was given by type designer Christian Schwartz, partner at Commercial Type. Included among his notable projects is work on GuardianEgyptian for The Guardian. In his talk, Schwartz surveyed a number of points regarding type design, webfonts, and the future of typography.
Good but Not the Same
Echoing a point made by Lukas, Schwartz noted that differences in operating systems render subtle difference in type on screen. Therefore:
Our goal should be to make everything look good but not the same. After all, a typeface looks different on coated and uncoated paper.
Variation in the way type renders is not a new issue, which is a good, grounding thought when working with webfonts.
Typefaces Aren’t Magic Bullets
While using the same typeface on screen as in print for a brand can be great, it’s not a magic bullet. In Schwartz’s words:
Identity also comes through the structure of the content.
He pointed to The Guardian’s website as an example. Even though it uses Georgia as the main text face, it still looks like The Guardian due to other design elements such as grid and color. It was an interesting perspective to hear coming from a type designer.
Two Types of Typefaces
Towards the end of his talk, Schwartz offered a great framework for thinking about typefaces. He stated that there are two kinds. The first kind are typefaces that will do whatever you want them to do. Helvetica is a good example. It can be shaped to do a lot of different things and can be found in a broad range of identities and contexts. The second kind of typeface is one that does most of the work for you. These are typefaces with much more inherent character and flavor. They do more out of the box, but are also less malleable. It’s harder to adapt them to different identities or contexts. Both kinds have their place, but it’s good to be aware of what you’re using.
In making this point, Schwartz noted that he would like to see more of the second kind of typeface on the web. He noted that Commercial Type’s two best-selling webfonts are Atlas and Graphik. Both typefaces are of the do-whatever-you-want-it-to-do variety that possess similarities with Helvetica and Arial. It will be interesting to see how the general character of type on the web evolves in the future.
Ampersand Elsewhere
Since the conference, I’ve run across a number of links from other people who attended the conference:
Attending Ampersand was a great experience. The mix of speakers struck a good balance between focus and diversity. Each talk was relevant to the topic of web typography, while covering it from a broad range of expert perspectives that kept things interesting. Knowing that there will be no Ampersand 2014, I feel especially fortunate to have attended this year’s event. As Nick Sherman stated in his talk, it is truly an amazing time to be working with type on the web. We’ve come a long way, and I’m optimistic for what the future holds.
This article is the third in a special series covering my notes from Ampersand NYC: The Web Typography Conference. See also: Part 1, Part 2 & Part 4
Trent Walton, a web designer, and Nick Sherman, a typographer, were the next speakers at Ampersand NYC. Walton discussed what is possible now with web type while Sherman discussed what he hopes will be possible in the future.
Trent Walton: Get Your Hands Dirty
Trent Walton, founder of Paravel, explored techniques for manipulating webfonts in the browser to create a range of effects for display type. If you’ve read his articles, you know they’re a showcaseforhismanyandvariedexperiments. He shared what he’s learned and gave a detailed overview of the css properties and JavaScript techniques available. He was kind enough to share both the slides and coded examples from his presentation.
Transform Toolbox
Walton’s talk was very practical and explored specific ways text can be transformed with css. The range of manipulations you can make in the browser is quite impressive. Masked textures can be applied to give type a distressed look. Text shadows can be used to apply sign-painter-like shade effects. Walton’s examples were beautiful and inspiring, making me want to do some experiments of my own. One quick tip I jotted down: the best way to control color and transparency with css is to set color values using rgba (red green blue alpha) and hula (hue saturation lightness alpha). The A in each stands for alpha – as in alpha channel – providing easy control over the opacity (transparency) of a color.
Targeting Type
In order to transform text, you must first be able to target it. There are some helpful selectors in css that provide a good measure of control. For example, you can target the first letter or first line of an element using the pseudo selectors ::first-letter and ::first-line. However, pseudo selectors can still be somewhat limiting. For example, there’s no way to target every even or odd letter within a word. Walton ran into this problem while working on Lost World’s Fairs, a beautiful showcase of typographic explorations sponsored by IE9. The designs are very complex, and a solution for better targeting was needed. As a result, lettering.js was born. In Trent’s words, it’s a “glorified span injector,” offering fine-grain control for targeting type.
More Tools
Walton’s talk covered a wide range of specific selectors, techniques and tools. While checking out his slides or demos is the best way to really dig in, here are three specific tools that stood out:
FitText – Designed for display typography in responsive layouts, FitText is a jQuery plugin (created by Paravel) that resizes headlines based on the parent element’s width.
CircleType.js – Built on lettering.js, CircleType is a jQuery plugin for setting type in a circle. I like the arcs – reminiscent of painted signs – that can be achieved with this.
OpenType sandbox – Created by Ampersand conference organizer Richard Rutter, this tool is a great way to explore css OpenType features within the browser. It’s definitely something I want to explore more fully.
Nick Sherman: The Future of Responsive Typography
Nick Sherman, of Font Bureau and Webtype, was up next. Being a Webtype user and having read his articles for A List Apart, I was excited to hear him speak. It was obvious from his presentation that he wants typography on the web to be better. To begin, he pointed out that “everything is amazing” and that we’re living in “one of the most exciting times in type history.” At the same time, there are some things that we can’t do today that just don’t make much sense. He explored the problems, what we can do to solve them, and ideas for the future.
Basic Typography Support
One problem with current web typography is that it still lacks basic typographic controls. We should be able to reliably use OpenType features such as small caps and ligatures on the web. The reality, however, is that browser support is still spotty. The solution? “If enough people make enough noise to the browser makers, we can make them work the way we want.”1
Guessing About Size
One frustrating problem of setting type on the web is knowing so little about the size at which it will ultimately be displayed. In Sherman’s words, “Decisions about size of type are largely guesses.” Although we can query the size of a the user’s viewport, we know very little about the screen’s pixel density and physical size, much less viewing distance. It’s possible to set units like inches and centimeters in css, but they don’t correspond to those measurements in practice. Along this line, Sherman (along with other presenters) demoed Marko Dugonjić’s experiment to use face detection to adjust the type size.
Size Calculator
Nick also demoed a project he created (in collaboration with Chris Lewis) called Size Calculator. It allows you to make calculations centered around the perceived size of type (or anything for that matter). It’s a fun tool that has practical applications. For example, if you wanted type on a billboard to be a certain perceived size, you could calculate font size, provided you knew the billboard size and viewing distance. To prove its efficacy, Sherman showed off the results of a test to render the letter A on multiple devices at the same perceived size. For more, check out Jefferey Zeldman’s post on Size Calculator written after the conference.
Dynamic Fonts
In thinking about fonts for the web, Nick proposed an interesting idea: dynamic fonts. The premise is that font families are usually designed as flexible systems – often with a large range of weights. However, these flexible systems are delivered statically on the web in the form of individual fonts. For each weight, a separate font has to be called. Instead, what if fonts were delivered in a format that could be dynamically adjusted based on a set of parameters? One font file could be served and then adjusted dynamically based on the context. This isn’t an entirely new idea. Sherman made mention of multiple master fonts, an antiquated font format that allowed you to dynamically interpolate between the “master” font styles. In talking with him after the conference, he told me that, surprisingly, multiple master fonts are still supported in InDesign.
Up Next
The last two speakers of the day were front-end developer Jen Lukas followed by type designer Christian Schwartz. Continue reading.
This article is the second in a special series covering my notes from Ampersand NYC: The Web Typography Conference. See also: Part 1, Part 3 & Part 4
The second pair of speakers at Ampersand NYC was comprised of two people who create typefaces and webfonts – Jonathan Hoefler and Luc(as) de Groot. Not being a type designer myself, it was interesting to hear their perspectives.
Jonathan Hoefler: Putting the Fonts into Webfonts
Jonathan Hoefler, founder of Hoefler & Frere-Jones, was the third speaker of the day. Using the metaphor of an early, rudimentary bicycle, he explained the difference between putting fonts on the web versus designing fonts for the web. It was a rich and well-articulated presentation that I wish I could watch again. Jeffrey Zeldman called it “the greatest presentation I’ve ever heard on fonts for the web.”
Hoefler Text
It was interesting to learn the origins of Hoefler Text early on in the talk. In comparison to hundreds of years of rich typographic expressiveness in print, fonts on the Mac in 1987 were very limited. The goal of Hoeffler Text was to bring that expressiveness to a digital font by including a wide range of features such as ligatures and small caps. Over twenty years later, Hoefler’s goal was to similarly bring rich typographic expressiveness to the web, where it is largely absent.
“You Make Things in One Way to Experience Them in Another”
Hoefler explained that in type design, it can be required to “deform the typeface to get the result you want.” For example, when designing an f for newsprint, the shape of the strokes is deformed where they intersect to create ink wells. When printed on highly absorbent newsprint, ink absorbs into the paper to fill these gaps. The end result is an f that looks normal.
H&FJ took the same approach to the creation of their webfonts. In order for their fonts to render well on screen – the way they would ultimately be experienced – they needed to “deform” their letters for better results. Their ScreenSmart fonts have been completely redrawn to display well on screen. It was quite striking to see an overlay of the standard and ScreenSmart versions of the same font. The divergence of letter shapes and spacing was quite profound. When viewed separately, however, they still looked like the same typeface.
Clarity at Small Sizes
Hoefler also explained that “typefaces are designed to solve problems.” On the web, lack of clarity is perhaps the biggest typographic problem to solve. Fonts are at their weakest when set at small sizes due to the limited resolution of computer screens. Unfortunately, small text sizes are also precisely where fonts are meant to be read the most.
In order to achieve clarity at small sizes, H&FJ redrew their fonts as described above. This led them to create their own set of in-browser tools, which allowed them to see live previews of their fonts in the browser while they worked. These tools helped enable them to achieve their goal of creating fonts that performed as good or better than standard system fonts. In Hoefler’s words:
If the font you might use isn’t as good as Helvetica, why use it?
Family Weight Problems
Translating multiple weights of a font family to the web can also pose problems. The range of weights in a font can become muddy when viewed on screen. Different weights look lighter or heavier than they should due to limited resolution and anti-aliasing. The result is indistinct visual steps between each weight. To solve this, H&FJ reevaluated each of their ScreenSmart font family in terms of weights. Instead of attempting to maintain the range of weights from the original family, they designed new ranges based on how it would render in a browser. This ensured distinct and clear steps between each weight. As a result, some ScreenSmart font families have more or less weights than the original.
Expressive Features
Hoefler’s love for rich typography expressiveness – especially small caps – was woven throughout his entire talk. To him, features such as small caps shouldn’t be optional in a webfont:
Small caps are essential and not progressive enhancement. If you want small caps, it should work on your mom’s browser.
To ensure they could deliver this kind of typographic expressiveness, H&FJ decided to build their own tools and interface to serve their webfonts. “We had to design the interface to give control over the features of the font.” From the looks of it, their user interface for setting font characters and features is unparalleled.
Luc(as) De Groot: Readability Per Square Centimeter
The next speaker was Dutch type designer Luc(as) De Groot, founder of LucasFonts. Among many notable projects, he designed Calibri, which is the new default typeface of Microsoft Word. One of the first type catalogs I ever acquired was from LucasFonts, so I was excited to hear him speak. In his talk, he surveyed the parameters of a font that can be manipulated to optimize the balance between efficiency and readability.
Adjusting for Readability
The main focus of De Groot’s talk was the idea of “readability per square centimeter.” Starting with a set amount of text and a fixed column size, how can a font be custom-tuned to work its hardest? The goal is to fit the most words in the same amount of space while maintaining maximum readability. Given De Groot’s history of work with various newspapers, you can tell this is a topic he’s thought about a lot.
He showed a plethora of his own explorations with the concept. These explorations ranged from adjusting parameters that a designer has control over (eg type size, line length, line spacing, tracking, word spacing, etc) and parameters a type designer can change (eg shortening ascenders and descenders, varying letter width, and adjusting the grade of the font). His conclusion was interesting:
When you optimize all these parameters, it doesn’t really matter what font you use. It takes a little effort. It’s not necessarily elegant or beautiful, but it is necessary to make these adjustments to fit a lot of information in a small space.
In other words, if you can take control of all these parameters, you can bend most any font to your will in order to achieve a high readability per square centimeter.
Condensed Doesn’t Mean Better Readability
To achieve a high readability per square centimeter, one’s first thought might be to use a condensed typeface. Through his examples, De Groot showed that while a condensed font might fit more words in a space, they are often less readable due to their condensed letterforms. The takeaway is to explore adjusting the parameters of a normal-width font first to see if it can be adjusted to make a good solution.
Fingerprint of a Language
One fascinating section of De Groot’s talk compared the relative efficiency of different languages. English, for example, is very efficient while German is less so. Arabic is perhaps the most efficient. Additionally, the prevalence of certain letter combinations is unique to each language. Viewing the space in-between letters reveals the unique “fingerprint of a language.”
Foam Letters
De Groot interjected some varied, often humorous, asides throughout his talk as well. One of the most interesting was a brief section on foam-cut letters. Using blocks of foam and a foam-cutting machine, he creates large, three-dimensional letters. Using the foam as a form, he also created a large, concrete ampersand (I want one!) that lives in his garden. In talking with him after the conference, he explained that he is continuing to explore new materials, as the foam letters are quite delicate and the concrete letters are (obviously) quite heavy.
Up Next
Web designer Trent Walton and typographer Nick Sherman were the speakers for the next two talks. Continue reading.
This article is the first in a special series covering my notes from Ampersand NYC: The Web Typography Conference. See also: Part 2, Part 3 & Part 4
Last Saturday I attended Ampersand NYC: The Web Typography Conference. Being a “one-day event for knowledgable web designers and type enthusiasts,” it felt like a conference designed just for me. I couldn’t have been more excited to attend (a big thanks to Scripps for sending me) and nerd out with fellow type geeks.
The conference was held at The TimesCenter, an upscale venue in the heart of the Times Square District. The lineup was comprised of eight speakers, all well-respected names in web and type design. Each speaker had a slot of forty-five minutes, bringing the day’s total lecture time to about six hours. The talks were diverse and interesting – full of helpful information and thought-provoking ideas. It was a lot to absorb in one day.
The purpose of this series of articles (of which this is the first) is to distill the conference into some key takeaway points. I’ll write about two speakers per article, following the order and structure of the conference. These notes are in no way comprehensive. Rather, I will briefly summarize each presentation and list several highlights that I found particularly relevant or interesting.
Michael Johnson: Type as Brand, Brand as Type
The first speaker of the day was Michael Johnson of johnson banks. Johnson’s talk served as an introduction to the day, exploring in broad strokes the relationship between type and brand, while showcasing examples of his own work. Be sure to check out the summary of his talk on Thought for the Week. His key point was that webfont technology now enables brand and type to live on the web as never before. To use his words: “The gate is now open…”
Verbal and Visual Brands
Johnson views brands as both verbal and visual. They are verbal – meaning tone of voice (i.e. the words that are used). They are visual – meaning how they look (i.e. typography, color, photography, etc.). Focusing on the words a brand uses to communicate (tone of voice) and the way those words visually appear (typography) shapes the brand at its core.
Linking Brand and Type
Historically, the typography of a logo often had little or no relation to a brand’s general typography. Johnson’s approach is to unify them. Linking them together “takes some of the heat off the logo to do everything.” It allows brands to speak consistently across today’s many channels. While the web used to limit this form of expression (as Verdana, Georgia, or Arial), webfonts now allow brand and type to be linked together online.
Do Your Best Now
Though brand and type can now be linked as never before, it doesn’t mean conditions are perfect. There are still limitations and areas where compromise must be made (such as kerning). To this, Johnson offered some sage advice: use what you’ve got to do your best now.
Mark Boulton: Typography in Responsive Design
The second speaker of the day was Mark Boulton, founder of Mark Boulton Design and co-founder of Five Simple Steps. In his talk, Boulton discussed his approach to selecting and using webfonts. He offered many practical insights on how to go about the process, citing his studio’s work for CERN as a primary example.
CMS’s and Typography
To begin, Boulton described how “responsive design has fundamentally changed our process.” Instead of creating pictures of websites (Photoshop comps), work centers around building prototypes in the actual environment (the browser). This directly impacts typographic decision making. In his words:
You can’t make good decisions about typography if you don’t understand where it’s coming from and how it’s structured … The CMS has quite a bit to do with typography.
Real content inevitably reveals problems with a design that lorem ipsum obscures. By focusing on real content earlier in the process, it “brings the worry forward,” revealing issues when they can still be quickly and easily addressed.
Pressure-Testing a Font
See how a font performs in real situations where you will need to use it. Boulton’s preference is to start with the paragraph element and move on from there. What is your most critical content? Where does your type need to work the hardest? Make sure your font works well there first.
Find the Sweet Spot
It’s also important to find the sweet spot of a font. Where does it really sing? For example, Verdana sings at small sizes for body copy (because that’s what it was designed for) but doesn’t look good as a large headline font.
Many vs Few Typefaces
One small point that Boulton made stood out to me. With the advent of webfonts, we now have infinitely more choice. When there were only a few choices, we became very familiar with those typefaces and learned to do a lot with a little. Now, with a plethora of typefaces at our disposal, will we lose this knowledge? My takeaway from this is to remember to impose limits. Choose a few high-quality webfonts and get to know them really well.
Up Next
The subsequent pair of presentations at the conference examined webfonts through the eyes of two type designers – namely, Jonathan Hoefler and Luc(as) de Groot. Continue reading.
I’m a believer, not a skeptic. At least that’s what I was told when I started paying for TeuxDeux last week. My free trial (of the neux version) was finally over, and I had two paid subscription options to choose from: skeptic ($3/month) or believer ($24/year).
Having used this “simple designy to-do app” for the past three years, the decisions was easy. I’m officially a TeuxDeux believer, making it an appropriate time to share why and how I use it.
Why I Use TeuxDeux
Before I dive in to the details of how I use TeuxDeux, allow me to share some of the reasons why I like it so much:
Just enough. TeuxDeux is simple enough to not get in the way. It’s just enough of an app to enhance my work and “compete with a piece of paper.”
Adaptable. Simplicity makes it flexible. It adapts to my methods of organization, not the other way around.
Easy on the eyes. It’s minimal and beautiful – characteristics I appreciate in something I look at all day.
Consistent. On its purpose page, TeuxDeux asks, “Can’t something on the Web be more or less finished?” This is a welcome philosophy for a product I use and depend on every day.
Bird’s Eye View. Seeing the whole week at one time allows my brain to comprehend to-dos in a unique way. Other apps show smaller amounts of information. Perhaps this is what makes TeuxDeux so brilliant.
Rollovers. Today’s unfinished to-dos automatically appear on tomorrow’s list. The only way to shorten the list is get something done and cross it off. Now that’s motivation.
How I Use TeuxDeux
The way I use TeuxDeux is an ever-evolving process. My current system is the result of years of use and will often look a bit different a few months from now. Here are some of the finer points of my method:
First Position
TeuxDeux is the first “pinned” tab in my web browser (Chrome). Though I used TeuxDeux as a Fluid app for a while, keeping it in the browser – where I see it more – helps me stay on task. 1
All To-dos are Action Steps
Every to-do must start with a verb (an idea borrowed from 99u’s Action Method). “Trash” is not actionable and, therefore, not an acceptable to-do. “Take out the trash” is more like it.
Weekly Planning Ritual
I begin every Monday morning by taking some time to plan and prioritize the week’s tasks. Prioritizing helps ensure that my time will be spent on the most important to-dos and not just the easiest or most appealing to-dos. Also, I find positive motivational pressure in feeling the weight of the many to-dos queued up for the week.
Small Chunks of Time
TeuxDeux is structured over the framework of a calendar. Each day has it’s own list of to-dos. Doing weekly planning, I discovered that it was helpful to break down each day into smaller, more comprehensible chunks. These smaller time segments allow me to get a better handle on what can be accomplished in a given day. If a segment is unavailable for to-do work, I fill it in with a note in brackets.
Inbox
I reserve the first column of the bottom row as an inbox for new to-dos. Instead of disrupting my flow of work to prioritize or schedule a new to-do that comes to mind, I simply add it to the inbox. Later, I can consider where it fits within my plan for the week.
Setting Priority
The remaining four visible columns of the bottom row are organized by priority (another idea from Action Method). From week to week, I move projects and to-dos between these columns, which helps me focus on what is most important. Working on to-dos from left to right keeps me accountable to working on what matters most.
Mission Critical Tasks
I sometimes copy and paste a star character before a task that is mission-critical for the day. This helps be focus in on the one thing that I really need to get done, even if nothing else gets crossed off the list.
Backburners
Backburners are action steps that are not yet actionable (yet another idea from Action Method). I store them in hidden columns on the bottom row. (You can add as many extra columns as you need.) As I used to keep backburner items in separate text files, this greatly reduces the complexity of my system. As a bonus, it doesn’t clutter the system, as they stay out of view in the hidden columns until needed.
Projects
Within the prioritized columns of the bottom row, to-dos are organized by project. Project names are bold with to-dos for each project listed directly below the project titles.
Quick Dividers
To tame unruly to-dos, I sometimes use a divider of spaced dashes as a quick and simple way to break up long lists.
Work + Life
I used to maintain two separate TeuxDeux accounts – work and personal – stemming from a pursuit of work-life balance. This proved cumbersome and unhelpful. Both work and personal to-dos are now unified in one account, which keeps things simple and helps me see the big picture. I use a line made of equal signs in each column of the bottom row to mark the separation between work and personal projects. All personal projects go above the line, all work projects go below it.
Line of Focus
Perhaps the silliest, but nonetheless helpful, way I use TeuxDeux is with a line of up carets. I use this line at the top of the current day column to denote the one to-do I’m currently working on. Before I start working on a to-do, I drag it above the line, which helps me unitask.
Setting Rewards
Another somewhat silly tactic I’ve tried with some success is adding explicit rewards or distractions to my to-do list in italics. When I’m feeling distractible, the reward “task” gets added to the list after the work I should be doing. This silly mind trick helps motivate me to stop procrastinating and get the work done quickly in order to reach the reward.
How Do You Use TeuxDeux?
As already stated, one of the things that makes TeuxDeux great is its flexibility. The way I use it is likely very different than how you use it. Hopefully, these details of my method will help spark ideas to refine your own workflow. Do you have any TeuxDeux tips you can’t live without? I’d love to hear them.
Tina Roth Eisenberg, TeuxDeux’s founder, described using it in a similar way when the original TeuxDeux app was released: “As I pretty much ‘live’ in the browser, I have it set to be my homepage, so, every time I open a browser window (which is every few minutes) I am being hit over the head with what I need to get done, which has proven to be very effective.”
↩
Consider the scenario of two tools. Each accomplishes the same task or job. The first tool, though it will complete the task, is frustrating to use and takes a longer time. The second tool, on the other hand, is easy – even fun – to use and accomplishes the task in less time. It is also more beautiful. Which tool is better designed? Which tool is used more? Which tool would you choose if given the choice?
No one would choose to use the first tool if they had the option to use the second. In the real world, however, choice is often dependent on means. Only an ascetic would choose to fly coach if there was no cost difference to fly first-class. Both seats in the airplane go to the same destination, but one is more enjoyable. Higher cost often equals a better experience (assuming that the option of air travel can be afforded in the first place).
Does it follow that good user experience is a luxury? Yes and no. The answer is partly dependent on the task or job at hand. Is that task or job a necessity or a luxury to complete? What constitutes a necessary task? In moments of true necessity – when need is present and options are scarce – user experience doesn’t matter. Anything that will meet the need will be used. As the Proverbs say: “to one who is hungry everything bitter is sweet.” 1
But what constitutes true necessity? Food, shelter and water are certainly the most basic of human needs. Beyond survival, is all else luxury? Perhaps the answer is yes in the strictest of senses. However, there is a difference between mere human survival and human flourishing. What does it take for a human being to flourish? Is it intrinsically human to need experiences of joy and beauty?
As designers in affluent western society, where does the responsibility of our design rest? Is it to design necessities or luxuries? We certainly have designed a lot of toys, but is this wrong? I’m uncertain of the answers. However, I do have a deep conviction that designing for the joy, beauty and good experience of our fellow human beings is a worthwhile endeavor. When the goal of our efforts is to see other people flourish – even if only in some small way – it’s effort well spent. It’s an effort of love.
