It pains me to admit it, but I wasn’t too keen on responsive web design right out of the box. Weeks after Ethan’s ALA article, I even briefly entertained the idea of writing a post haranguing the practice, nit-picking concerns on how using media queries to relocate elements on a page could disorient users, but I knew deep down I was full of it. My short-lived adverse reaction wasn’t rooted in any specific limitation of the responsive approach itself, but in my inclination to cling to the way I had always perceived (and built for) the web.

That perception had solidified over 10 years of making websites in a particular way. Pages were wire-framed, then fleshed out in Photoshop, which was where, for the most part, design ended. HTML & CSS were merely used to execute the prescribed layout. I took comfort in that approach, particularly in the control I had with a rigid grid and a perfectly pressed pixel-based structure. What you saw in the comp was what you got on the web. Bada Bing.

To think about the web responsively is to think in proportions, not pixels.

That approach, however, only works for a single view, a concept quickly becoming a thing of the past. Mobile browsing has exploded, and tablets (along with a slew of other devices of varying size) have confirmed the web’s status as a moving target. The choice was before me: retain the control in my original approach but accept that I’d be designing three or five or ten layouts, or redefine the way I think about the web. I found that to think about the web responsively is to think in proportions, not pixels. I traded the control I had in Photoshop for a new kind of control—using flexible grids, fluid images, and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey a message. Web pages (not that the term ever fit perfectly) aren’t really what we’re building anymore.

***

Did I forsake Photoshop? No. Reagan and I still start designing with a wide, desktop-sized view, but it means something very different to our process. It’s a starting place, and once we’re going, Photoshop is ultimately used for asset building (textures, photos, etc.). The largest and most exciting part of the design process now happens in the browser.

Did I dismiss hierarchy? No, but “squishy” was the unflattering term I initially used to describe responsive sites.  For me, websites take on an increasingly familiar skeletal form as I mentally map content in proportion to specific areas. When working with clients that’s how we address content. Elements are sized & placed purposefully to create order. I was worried that fluid content would have no visual impact and spinelessly reflow, breaking the established hierarchy. However, I soon found that didn’t have to be the case. While working on our first few responsive projects at Paravel, we used fluid-width images, videos, and even text headlines when appropriate, along with proper planning (content choreography) to maintain strong visual presence. The hierarchy, and thus the message, can be preserved at any view.

***

In the process I discovered, to my great relief, that I didn’t have to throw away my design sensibilities to ‘go responsive’; instead, I could develop techniques to incorporate design elements I gravitate towards (like interesting typographic arrangements or full-width images) in a responsive way. My stubborn unwillingness to abandon those sensibilities has made these initial steps into responsive web design worthwhile. It’s gratifying to use the things that might have kept me from adopting a responsive approach as inspiration to innovate. 

If there’s anything I’ve had to learn the hard way through all of this, it’s that responsive web design isn’t bolt-on. Whereas progressive enhancements (like border-radius), or web fonts can easily be added and removed from a site, responsive (for me at least) has required a complete redefinition of how I approach my craft down to the pixel. The more I learn & adapt, the more certain I am that this is the best way to build for the web. The process of adopting a responsive approach has made me better at my job, and I’m thankful for that.

Months ago, I wrote about improving the working environment inside my desktop, and with the move I sought to extend that process to my physical workspace. The plan was to fashion a space that makes my work more active—not simply in regard to my physical well-being, but to lend substance and action to my often intangible work.

Workshops appeal to me. The tools you use aren’t lined up neatly in a dock. Bandsaws, welding stations and workbenches all have their own spaces and  environments conducive to the work at hand. The workbench, with its fairly comfortable stools and extra space, is for tinkering. It says, “Hang out here. Take your time. Do the work right and enjoy it.” The bandsaw across the room is plastered with warning labels, and the loud hum proclaims, “Hey! I’m a f#©kin’ saw, I’m dangerous as hell! Don’t get comfortable with me. Focus.”

I like the idea of defining certain spaces or postures for specific activities. The sit and click posture taxes my cognitive and creative faculties after too long. It’s hard for my brain to move from reading to writing, designing, troubleshooting, etc., when my body remains stationary. I need to move. Breaking up the workday by visiting different spaces in the office at different times not only keeps me fresh, it allows me to establish habit fields around certain types of activities. Here are some of the stations I’m working with now:

Sitting at the Desk

I’m most used to this, and it works well for tinkering tasks like coding or designing. Ideally, I’ve already got an idea in my head or a job to do so that I feel I’m gaining on something. If I start to feel a lull or a roadblock coming on, I’ll hop up and go somewhere else--usually just to a standing position.

Standing at the Desk

I’m still getting used to my new adjustable-height desk (more on that later). When emails pile up or when I’ve got troubles to shoot, I try to be in a standing position. The same goes for when I’m in during the mornings or right after lunch. I’m trying to treat the busy-work side of my job like that bandsaw. Get in, do what you need to do, and get out.

The Thinking Chair

I’ve got a chair and an ottoman 8ft from my desk. I can see the screen from it, but I’m not close enough to touch anything. This is where I go to write and sketch. It’s also a nice spot to retreat when I’ve run out of answers. I’ve found it gets me to solutions quicker than browsing animated gifs. Not that there’s anything wrong with animated gifs. If you don’t have room for a thinking chair, you might try going for a walk or finding a park bench.

Music

I recently confiscated my Dad’s old record collection (Bobby Bland, Jackson Browne, Dave Bruebeck, etc.) so I put a record player across the room. I happily get most of my music from Rdio, but I enjoy the forced breaks required to flip to side B. You’d be surprised what you can get done in 20 minutes. As an added bonus, the album covers smell like the cabinets where they were kept in my childhood home. It fills the air with this lovely combination of old wood, candles, and books.

Lounging

I’ve also got this small day bed by the door. I’m in a home office, so I get to pretend it’s a necessary addition for when we have extra house guests. Really, it’s for reading and tantrums, rare as they may be.

I’m lucky to have a decent amount of space here now, but I’ve spent my share of time in cubicles too. I used to migrate to empty conference rooms or walk a lap around the office to clear my head. The trick is to work with what you have. Okay. Stations aside, here’s a quick rundown of the fun things I’ve acquired to make my workspace better.

My Computer Situation

I’ve got two machines, a 27” iMac and a 13” Macbook Air. Thanks to Dropbox, they talk to each other so I don’t have to worry about syncing files. I backup the 27” locally as well as with Backblaze, you know, in the cloud. I don’t have all the same files and apps on my Air, and I like it that way. It’s for writing and  experimental after-hours design or code sessions, not busy work. My office is above my garage and the only way to it is through an external door, so that helps me keep my work and play separate.

The Sit/Stand Desk

Last year I hurt my back. Sciatic nerve pain is the worst. Sitting upright became so painful that I had to relocate my iMac to the floor underneath my desk, and work while lying on my stomach, neck craned up so I could see the monitor, flopping from side to side as I got tired. It was a sad, pitiful existence. I realized that I need to take better care of myself at work and did some research. Turns out, bad things happen when you sit all day and a standing desk isn’t a silver bullet either. All we need is variety. To gain that I researched and found an adjustable desk I liked from Conset. What I didn’t like was the boring tabletop it came with, so I just bought the base. I found Scott Kestel from Brand Mojo Interiors while looking at some coffee tables on Etsy and asked him to build me a desktop for the adjustable base. He said yes, did a fantastic job, and is now highly recommended by me.

The Rest

• Herman Miller Embody Chair: I’ve had this chair for over 2 years. It’s comfortable and I like it fine, but I don’t think it has magical back ailment curing properties. If you’ve got back problems from sitting for extended periods of time, stand up.
• Pro-ject Debut Iii Turntable: I don’t know much about turntables, but this has been great. I just picked it off a list of potentials I got from Reagan Ray.
• Mobee Magic Charger: An inductive charger for my Magic Mouse because the only thing I hate worse than cables is buying batteries.
• Yeti: For podcastin’ and skypin’
• Rickshaw Sleeve: To carry around my Macbook Air

This counts for my office as well as my home—my wife and I put up artwork from people we know (in real life or industry pals). It’s nice to be surrounded by your friends’ work. It makes me think of them, and we get to support their talent. Here are some recents:

• Aaron Scamihorn’s Lebowski print and Cake gig poster
• Phineas Jones’s Western Tentacled Jay
• Neighborhood Studio’s Bull poster
• Do Lectures’s Say Yes More Than No poster
• Ligature, Loop & Stem’s Lesson Plan print (sold out)
• Mark Weaver’s Bison screen print (sold out)

So that’s the new setup. If you’ve got any tips or favorite gadgets I’ve not mentioned please do let me know.

I have a big monitor that sits on a big desk, which is littered with stacks of paper the same way my iMac is littered with stacks of apps. I see corners of windows everywhere, peeking out and siphoning shreds of attention away from the task at hand. This need to navigate from one app to the next has facilitated my evolution into a multitasking machine. Not since the arcade edition of Street Fighter II have I mastered so many gestures and key commands. Utilities like Mission Control, Alfred App, and Better Touch Tool, summoned by various combos of taps and swipes, have become key to the way I work. Emails get answered while to-do lists are created while graphics are exported while sites get updated. Notifications pop-up, and I suppress them. I am master of my desktop environment, and it’s wearing me out.

I noticed something interesting the day I was confined to just 13” of screen space. Even though I couldn’t see everything I needed to operate and reference at once, I became more focused. Only seeing one window at a time enabled me to mentally hunker down on the task at hand. My actions felt purposeful; my decisions, deliberate. Surprisingly, my productivity didn’t suffer. I did slow down, but also experienced a calm efficiency—similar to that which is required when fastening the innumerable rows of snaps on a screaming baby’s pajamas. If you rush, you’re going to mess up; if you miss snaps, it’s going to take longer. And rushing makes you sweat. Never let the baby see you sweat.

Then it dawned on me. All this multitasking I do shouldn’t be classified as a talent, especially as it relates to a computer desktop environment. To say that I’m good at multitasking is like saying I’m good at shuffling papers around on my desk. It’s more distracting that it is helpful.

Stop. Pull everything together into a single stack, take a breath, and enjoy the work. We’re not tarring roofs in 100° heat. We get to build for the web, and life is wonderful.

It’s like driving.

Dashboards in old cars aren’t like the ones we’re used to today. Sit in a 1965 Mustang and the only things you see in front of you are directly related to the task of driving an automobile. You’ve got gauges for speed, oil pressure, water temperature, and fuel level. You’ve got one foot on the clutch and one on the gas; you’ve got one hand on the wheel and the other on the gearshift. You’re completely engaged in the act of driving. You’re focused.

Today, our cars have all that stuff, as well as a slew of extras that have nothing to do with operating a motor vehicle. Dashboards ask us what song we want to hear, where we’d like to get directions to, and even what temperature we’d like our asses to be. Our steering wheels have buttons in them to help us answer those questions without taking our eyes off the road. But does any of this make us better drivers? Of course not. We’re shitty drivers with too many questions to answer and tasks to manage to be bothered with making it from point A to B.

The wagon: stay on or get off?

As soon as the Time Machine backup safely made its way to my 27” iMac I was right back to my old multitasking tricks. Honestly, I think the only reason I need a screen that size is for design. To really get my hands dirty, I’ve gotta have room to view the full canvas as well as zoom in to 3200%. But just because I need the space for a few apps doesn’t mean all other computing tasks (and my work life) should suffer. So, how to mitigate this? I’m a strong-willed person, but rather than relying solely on gumption I set out to retool the way I work at large screens from my desktop view out.

The first thing I did was to hide or remove all the unnecessary notifications that I could. I disabled new message sounds in mail and growl alerts for most apps. Then I removed anything that blinked or lit up (Twitter, RSS, etc.) from my menu bar except for Dropbox. I set my dock at maximum magnification so it would appear tiny until hover. I already use (and love) Alfred App to launch most anything, so my dock was already fairly tidy.

Then I took a Sunday afternoon to take things further with a few apps that minimize visual clutter and maximize productivity without getting in my way. Here’s what I kept after testing a handful:

Menu Eclipse: I started with a quick cosmetic change. This app fades your menu bar out of sight when left inactive after a specified amount of time and can be set to reappear when you hover. It’s a small detail, but not having all those stats and bits of data in your peripheral goes a long way.

Isolator: This app covers your desktop and all of its icons as well as other windows with a single layer. You can even choose the color and set blur and opacity for items being hidden. This has been the secret to my unitasking success thus far.

Divvy: I’ve had Divvy a while, but use it differently now to deal with the windows themselves. Unless that task at hand calls for windows to be side by side, I set a keyboard shortcut (configured to a Better Touch Tool gesture) to make each window the exact same size, no corners peeking out, all apps perfectly stacked.

I’ve also got plans to try an app called Concentrate that lets you customize actions such as launching, closing, and hiding apps to assist particular tasks like writing, design, or coding. And if you really need to unplug, check out Freedom. This app locks you out of the internet for a specified amount of time.

That’s my current solution for clutter within the desktop environment, but what about my actual, physical surroundings? I’ll be moving offices in a few weeks, so I have a golden opportunity to make some changes. I’ve been researching standing desks and thinking about how time out of my chair and away from the screen could make me a happier web worker. I’ve had this fantastic A List Apart article on Habit Fields by Jack Cheng bookmarked for a while, and dig what he’s saying about how objects and surroundings influence our focus and demeanor. For my next trick, I will attempt to go zen-master all over my workplace.

Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.

As I step into my 3rd responsive project with Paravel, I’ve made a habit out of picking apart media-queried sites I happen across, noting how things get rearranged at various widths. At times, it seems as though all of the site architecture & planning goes out the window as content reflows. I’ve also found that what might work very well for one type of content or site might not work so well for another.

Content Stacking

This is unavoidable. Take a 4 column site at full width: as the view narrows, 4 will become 3, then 2, and 1. The most common solution is to stack them on top of each other in chunks (fig. a). Simple enough, but what happens if the first column is really tall? Is the content in column 2 less important than all of the content in 1? It probably is for something like a full-length article, but I can’t help but think that in some cases, this method throws off the hierarchy.

Another approach could be to interdigitate content by folding elements into each other as the view narrows (fig. b). In real terms, what happens if a main column is a tall grid full of product thumbnails, and the sidebar features a coupon or promotion? When those columns are combined, it might be nice to slide the promo in between two product rows instead of shuffling that important piece to the bottom of the main column.

The Content Change-up

Another thing I’ve noticed is that media queries are being used to significantly redesign pages. I’ve seen background colors change and top-level elements move from left to right. If critical thought is applied here those choices may be spot on. But what happens if a user visits at full-width one afternoon and revisits your site in the evening on a tablet, and everything looks completely different? It’s annoying—like someone rearranging the groceries in your pantry every time you closed the door. The power of media queries can be intoxicating, but just because you can doesn’t mean you should.

De-compartmentalize the Workflow

The production model of passing a site down the assembly line from design to development to launch seems to be an inefficient approach for responsive & adaptive site design. I think the Paravel method of gathering around a table & slugging every decision out until launch lends itself to the level of reiteration necessary for these projects. We’ve found that the best way forward is to pull all members of a team together to design, build, test and then evaluate in multiple quick rounds.

Of course, the alternative would be to create designs for every media query you plan to include, but that kind of thinking seems inefficient and fails to take advantage of the device-agnostic approach that responsive web design offers. In my mind, it’s best to build something that works on any possible width or device instead of something that works on all current widths and devices.

Balancing all of these new facets of the web designer’s role may seem overwhelming, but that’s the nature of the profession and one of the reasons why I love it. Honing the craft of content choreography will help us to orchestrate the best experience possible at any screen size or resolution. In time, I believe knowing what works best will become second-nature to us—just like designing progressively enhanced CSSed pages without tables or superfluous markup is now. The best thing for us to do? Practice!

Any apprehension I may have had about whether or not a responsive approach would harmonize with my design sensibilities and Paravel’s workflow was erased while working on the redesign of The Do Lectures website. We didn’t have to overhaul our process, were able to stay on budget, and ensured that the site hierarchy remained intact all the way from desktop down to mobile device views. I had such a positive experience on the project that I decided to take what I learned and the opinions I formed to this site for an update.

It’s been almost a year since Ethan Marcotte’s watershed A List Apart article on Responsive Web Design, and the horizontal scrollbar that showed when my site was viewed on my wife’s laptop has pained me ever since. My love for responsive centers around the idea that my website will meet you wherever you are—from mobile to full-blown desktop and anywhere in between. To say that people don’t view sites at half-width would have been a cop out. They don’t because we’re not offering it to them. While I’d prefer users to visit at full-width, I can’t deny that being able to compare two posts at once, or reference a web page alongside a text editing window would be handy.

Structural Integrity

If I previously had any hangups, they weren’t about responsive design itself, but centered around some implementations I’d seen. In most cases, I’d say that the drastic reshuffling of page elements on resize sucks can be disorienting to users. Granted, something’s gotta give when 3 columns are blended into 1, but a site’s structure & hierarchy must be preserved. If users visit once at full-width and again in a narrower window or mobile device they should should recognize the site and easily find their way around. I suppose this could be seen as another component of UX design.

We spend so much time focused on the rhyme & reason for the placement of every element on a page, why let all that consideration fall apart when a window narrows? Responsive web design isn’t about fitting content (like repacking a moving van), but about tailoring that content to fit the user (like arranging furniture). As device widths change, content and layout need to scale gracefully.

Introducing FitText

I love taking granular control over web typography and responsive, but I was worried those two things couldn’t coexist. How can the fine-tuned positioning of letters, words, or lines be made scalable? What happens when you want to preserve the lockup between a large format headline and the paragraph or imagery below without the h1 wrapping 2 or 3 times? Even for this site, there are quite a few places where layout depends on text displaying full-width regardless of window size. I realized Lettering.js needed a companion plugin, so I returned to my Paravel cohort, Dave Rupert, with the idea. The next day he introduced me to FitText!

I really wanted to challenge myself with adapting my old posts to my new responsive layout. Each post posed a unique set of problems to solve, and any that remained were solved by FitText. This jQuery plugin inflates web type to fill its parent element. No matter what size window, you’ve got full width text. FitText works perfectly with Lettering.js, or any CSS3 property you throw at it—see the title of this post as an example. It goes without saying that you’d never ever use this on paragraph text (I hope), but in the right place, FitText makes responsive web design even more exciting.

My Go-To Properties

Now that this site is responsive, I’m going to use it as a training grounds of sorts—continually improving how I plan and design for content. Transitioning into thinking about the web responsively isn’t automatic, and there’s some exciting work ahead in figuring out what works best. Since all of my articles have small, unique stylesheets of their own, I was able to learn a lot about how to make them look good at any width. Here are a few properties that truly kept this site update afloat:

• Background-size as a percentage helped me intuitively and seamlessly scale textures, illustrations and text-as-images from older posts.
• Declaring vertical padding or margins instead of height made preserving the aspect ratios of my headline banners a cinch.
• Column-count still isn’t perfectly reliable, but it simplifies transitioning from 4 to 3 to 2 columns on my tags section via media queries. When this and flex-box are ready for the prime time, code-out is going to be insanely efficient.

Ok, that’s enough outta me for now. I’ll post more about responsive web design & FitText soon. In the meantime, click around the blog or build something of your own with FitText. Thanks for reading & I hope you enjoy the site update!

My barber’s name was Randall Ashby. I loved being there, sitting on my booster seat and listening to stories while Randall feigned interest in my own. In a place where such humdrum work happened day-in, day-out, it wasn’t the haircuts that made Trophy Barbershop magical, but the people in it.

I’ve always found recursive jobs like that to be charming; hair will always need to be cut, oil changed, and crops tended. Because the end product isn’t permanent, one tends to delight more in the experience itself and the people involved. Part of me has always seen building for the web in a similar light. That isn’t to say that epic stuff doesn’t happen online, just that floating a div sure as shit ain’t it. Technology will eventually render my creation obsolete, and when it does I’ll build something better. For me, what matters most isn’t the code or pixels, it’s the users, clients, and friends who share it with me.

I suppose there are lots of places prone to the numbingly mundane, but the web excels at that because the medium makes it so easy for us to disengage. It’s not hard to forget that behind all the stats, conversion rates, and avatars are actual people with families, feelings, goals, and problems. Trophy Barbershop could have just been Acme Barbershop, where hair was cut and nothing more. In the same way, the web can just be a place for websites, email, status updates, and nothing more if we fail to see the opportunities behind those interactions.

I want my online community to be a Trophy Barbershop. For that to happen, I’ve got to make the most of my interactions by making them as personal as I possibly can.

Email

Use email for purposes other than unloading tasks. Taking time to go out on a limb and say something kind can go far. Just the other day, Kyle Meyer sent me an email just to say hello & that he enjoyed meeting me at SXSW. I beamed.

Likes & Favorites

Places like Facebook, Twitter, Flickr, Instagram, and Dribbble are peppered with star, heart, and thumbs-up icons. I often use these mechanisms for different reasons, like a digital ‘high-five’, or a non-intrusive way to say, “I’m there with you, man.” This may sound silly, but when I found myself at a dinner table with Yaron and Josh, having not seen them since October, it paid off. We were able to spend all our time talking about what’s going on now as opposed to catching up on the past 6 months of our lives.

Invest in your friends and colleagues.

Buy their stuff and support their projects. I like my Meditate T-shirt, Cake poster, and Colosseo letterpress, but I love them because Kyle, Aaron, and Cameron made them. Also, I bought 8Faces and supported The Manual, and The Shape of Design on Kickstarter because I believe in Elliot, Andy, and Frank. While the products are, and will be, excellent in and of themselves, I was thrilled to simply support what they’re doing.

Show Gratitude

There are a lot of free or almost-free resources online. I’m not keeping score, but I estimate that I owe Chris Coyier close to $1000 for all the time he’s saved me by regularly blogging about his CSS adventures. If you gain from what someone publishes or shares, why not do something nice in return. I preemptively sent Chris an Amazon gift card in hopes that he won’t now send me an invoice for $1k.

Cut People Slack

We’re going to argue, get things wrong, and step on toes. Road rage happens because drivers aren’t face to face. The same happens online when all we see are avatars. Nonverbal cues, no matter how subtle, can carry a lot of weight—a lot more than emoticons can :)

It’s easy to forget that underneath this fragile layer of markup, HTTP requests, IMAP, and avatars are people, and it’s those people that make my workplace, the web, fantastic.

I recently had a nice sum up the year chat with Frank Chimero. We talked about important things like tacos, paying bills, and how what we work on affects not only our bank accounts, but our careers and lives in general. I like to think about projects the same way I think about calories—they’re good for you unless you have too many, or they come in unhealthy packages, so you better make them count.

So what constitutes a healthy, well-rounded project? For me at least, it’s a few things. Rarely does every project max out every category. Hell, I’ve even been in positions where I’ve decided to take projects that fit only one.  Nevertheless, I always hope incoming work fits into many, if not all, of the following:

Less Like Rules, More Like Guidelines

Even with my needs/wants in order, I can still find good reasons to work on projects that only fit a few criteria. Passion & belief in a cause is easily a sufficiently motivating factor, as are bills that need to be paid. The way I see it—if you’re into it, do it. Just be sure the next gig offsets the previous one’s deficiencies. Do 10 consecutive jobs solely for the paycheck, and you very well may find yourself out of whack. After all, if you eat nothing but carrots, you’ll have amazing vision, but you’ll probably turn orange and feel like shit.

Considering Long-Term Effects

Eat one meal, then another, and over time that stuff becomes who we are. It’s used to heal skinned knees, grow fingernails, and rebuild tired muscles. I find that thinking of work in a similar fashion can be used to one’s advantage. When a job is done, we’re left with experience, new skills, and a sharpened perception. Do work that you enjoy so you can be good at what you love. Frank summed that up nicely by saying:

“Daft Punk got to record the Tron soundtrack because they’d already recorded the Tron soundtrack.”

If I want to get hired to do something, I should already be doing it. People can’t always see potential energy. Instead of allowing a current job description to stand in the way, turn off the Scrubs re-runs and start a side-project. Draw a picture, code a site, or write something and share it with the internet.

28,616 Breakfasts

Based on the estimated life expectancy, that’s how many morning meals the average US citizen has to look forward to. Initially, that sounded like a lot to me, but the more I think about it the more I’m inclined to make those meals great. How many projects do we have to look forward to? Can a well-balanced work life add to that number? I hope so, but even if it doesn’t, why not do everything you can to make that work count.

Just as we’ve moved beyond Helvetica and Times New Roman, we’ve begun to think about web type in finer detail than <h1> or <span> tags currently (semantically) allow. For example, when Dave Rupert and I prepared to markup the 3 sites for the Lost World’s Fairs project, we saw elements in each design that would require an excessive number of <span> tags to target words, even letters, at a time.

Ideally, CSS selector pseudo classes or elements would work, but even with options like :nth-child and ::first-letter we wouldn’t be able to target all that we needed.  As eager as we were to dive into building these beautifully designed pages, we couldn’t help but realize two things:

1. We needed more control over letters, words, and lines than CSS currently provided for.
2. The markup was going to be extremely difficult to manage because wrapping individual letters in <span> tags would get messy quick.

An hour later Dave came back with the best solution we could think of: a simple jQuery plugin that injected <span> tags around letters, words, or lines within any declared element. Lettering.js let us build out & revise the pages, saving heaps of code as well as grunt work. It was such a lifesaver that we decided to share it with the web community, launching letteringjs.com late fall 2010.

Lettering.js was well-received, though there are a few valid criticisms that I’d like to briefly address:

If you buy good fonts, they don’t need to be kerned.
That may be, but some fonts do, and the thinking behind Lettering.js goes beyond kerning into overall control. What if web designers want to use italics, font-size, or even change font-family within an element?

Lettering.js isn’t the only way.
True, and it isn’t the ultimate solution either. Let’s consider our options from most problematic to least:

1. Embed an image
2. Use CSS image replacement
3. Wrap letters or words in <span> tags
4. Use JS to inject <span> tags after the markup as we have with Lettering.js

Even though the <span> tags aren’t in the markup, there’s still bloat.
This is true. While Lettering.js keeps the source HTML clean, it doesn’t do the DOM any favors and inserts quite a bit of code.

Load times are increased. Javascript libraries are loaded just to target a few words or letters.
Again, consider the alternatives.  An image could easily outweigh javascript code.  On the other hand, yes, it’d be ideal to do this independently from JS.

Can we replace Lettering.js with CSS?

I hope so. Lettering.js is a solution, but perhaps it’s not the ultimate solution. As I mentioned earlier, CSS Selectors come close. What if the CSS spec was adapted to fill in the gaps? After scouring the internet, here’s a brief timeline recounting what’s already been discussed.

The W3C proposed Cascading Style Sheets, level 1 (CSS1) featuring the ::first-letter and ::first-line pseudo selectors.

Anne Van Kesteren explored the idea of expanding selectors to cover ::nth-line(n) and ::nth-letter(n).

Safari 1.3 was released as the first browser to fully support both the ::first-letter and ::first-line pseudo selectors. It’s worth mentioning that prior to this, IE5.5+ (July 2000 ) and Firefox 1 (November 9, 2004 )  had partial/buggy support for these selectors.

An extensive (50+ message) CSSWG thread on Proposed ::last-line and ::last-letter selectors was started by Andrés Delfino. The feasibility was discussed at length, and rejected due to narrow user base and high cost / complexity.

At the time, this thread had trouble coming up with good use cases. With the expansion of pseudo selectors & available web fonts, good use cases are now everywhere. The discussion focused heavily on ::last-line & ::last-letter which may not be particularly useful.

Dave Rupert built Lettering.js as a workaround.  Version 0.6.1 has been downloaded 1500 times, with 550 watchers on Github, indicating that alongside the growth of web fonts, the ‘narrow user base’ is widening rapidly.

From CSS1, we’ve been able to use pseudo-elements to target ::first-letter.  What if you extended that idea to targeting letters, or even words, within an element similar to the CSS3 ::nth-child(n) selector, resulting in something like this:

h1:nth-letter(4); or h1:nth-char(4);
targeting the 4th letter within an <h1> tag.

h1:nth-word(3);
targeting the third word within an <h1> tag.

I think this would be the ideal solution from a web designer’s perspective. No javascript would be required, and 100% of the styling would be handled right where it should be- in the CSS. On the other hand, I have no idea what goes into implementing these additions for a browser, which is why the idea has been proposed as a blog post with comments. Please, feel free to share your own thoughts about how we can gain more typographic control on the web.

It’s taken some hard work to build the team as well as the company, but I wouldn’t trade all the psds, lines of code and fisticuffs for anything. With that in mind, I thought a brief, selective glance over the past few years might be of interest. Sure, we’ve faced our share of challenges and still do, but we’re genuinely pleased as punch to be doing what we’re doing with no plans to stop any time soon.

How We Got Together (Short Version)

Paravel started with an $85 check I wrote to Dave Rupert in December of 2002. Having recently graduated college and moved to Austin, I needed to learn how to build a website for work. Dave generously set aside a full Saturday to show me iframes, ahrefs and tables just days before moving to Japan to teach English for 3 years. Without iChat that probably would have been the end of it, but once he settled in overseas, we continued to build and update sites together. When waking hours would overlap, we’d do occasional design & code show-and-tell sessions that typically resulted in my continued education, a testament to Dave’s patience and teaching abilities.

Fast forward through countless blogs, forums, Flash sites to 2006... After moving back to the US, Dave eventually wound up in Phoenix working with our friend Reagan Ray for a real estate developer. I was living in Houston, juggling a number of gigs and envious of the quality of their collaborative efforts. We all continued to pool knowledge and share ideas- I think this was when I got serious about the idea of us teaming up. I finished out my work in Houston roughly the same time they finished in Phoenix and knew we had a unique opportunity to take a risk as well as take control of our own professional destinies. I grew up watching my Dad build a company with 2 business partners, and hearing about his decision to leave a stable work environment at US Steel to work with a startup industrial contractor 30+ years ago has always inspired me. My plan of attack would be modeled after his: do good work, be consistent and the rest will take care of itself.

Taking Paravel Full Time

The best professional decision I’ve ever made was to recruit Dave Rupert and Reagan Ray- taking Paravel from a freelance set-up to a full-time (albeit small) web shop. Sure these guys were friends of mine, but this wasn’t a marriage of convenience. Reagan is the most face-meltingly good designer I know. Dave is the vigilant defender of the internet and a king of e-solutions. To build the sites we wanted to build, I knew we needed each other. The work hadn’t been sold yet, and it was terrifying to commit to striking out on our own, but in 2007 with the future in mind, we began operating as Paravel full time.

Roles, Boundaries, and Shut the Hell Up

The first 8-12 months were filled with us scrambling to find work, pay bills and develop a workflow. Despite being friends for 15 years, we had to figure each other out in a collaborative work capacity. It would have probably been easier for us to retreat into our own roles, passing a project on down the Paravel assembly line without much overlap, but we didn’t want to work that way. To us, websites built by divisions that consider the content, UX, design and development separately lack a sense of purpose and common thread. We wanted to throw all the stuff necessary to make a website great out on the table, gather round, and slug it out. Great websites aren’t what happens when a series of switches are flipped from bad to awesome; they’re the result of the balance achieved through critical thinking, toe stomping, head butting and lots of improv. We gradually established a brutal, sloppy democracy where both our work and the process got easier each go around.

Try that, now this.

As time passed, we were able to move from constant scramble mode through stay afloat mode to future planning mode. It wasn’t that we were re-evaluating whether or not we wanted to build for the web, but we needed to get a handle on what that meant. Technologies and conventions change, so to make Paravel a long-term gig we had to be willing to experiment. That realization facilitated sites like The Many Faces Of, The ATX Web Show, DesignSwap, Austin Town Hall, and our own blogs. We decided that it was important to pursue what interested us collectively and individually, both during the work-week and after hours, knowing that we’d continue to improve and maybe even get hired for some interesting jobs. I believe this priority has paid off, and if we hope to stay in business, it’s one we’ll have to keep at the top of the list. After all, we want to be operating at the top of our game when we enter into client work.

Tightly Wound Knit

Throughout these adventures we’ve developed all sorts of intangibles that contribute to the go-team environment we love so well. We’ve always respected each other as people, but we’ve grown to respect each team member’s talent as well. We believe any project that involves each of us will turn out better than anything we could throw together by ourselves. Knowing things are enhanced by, not limited to, your own vision and ideas makes work exciting. It’s also nice just to have some people in your corner- people happy to be sounding boards or a fresh set of eyes, who are unafraid to have your back or let you know if you’re acting like a jackass. Above all, I couldn’t imagine working with a team I didn’t trust completely. The work we do as Paravel impacts our families as well as our careers, and that isn’t something anyone takes lightly. So here’s to my cohorts and to Paravel. Here’s to taking your destiny into your own hands and to building something even cooler than a website- a team.

A while back, Jason Santa Maria called to see if I’d be interested in joining him on a team with Frank Chimero & Naz Hamid.  After confirming my participation, as well as the fact that this wasn’t a practical joke, I learned that our mission was to create 3 web poster sites that showcase WOFF and how well IE9 supports it.  After a couple of team Skype meetings we decided to follow a Lost World’s Fairs theme, which was an appropriate match for the adventurous nature of the project as well as the team.  My primary role being CSS & HTML code-out, I knew I had to start by doing two things: bring Dave Rupert in for additional dev support, and learn all I could about IE9.

IE9 Preview

Building for an unreleased browser with a subject-to-change property support list was equal parts daunting and exciting. I knew the stakes were high.  I’ve built plenty of websites where the layout depended on one or two properties to really sing, so I had to be 100% sure I was giving the team accurate information.  I began experimenting by coding a series of sandbox pages where I’d test IE9’s support for CSS properties listed in the developer guide.  I was glad to see support for many of the properties I hoped we could lean on heavily during the design & code-out:

Not only were many of the CSS3 staples supported, but when compared to Webkit & Mozilla engines, IE9 actually out-performed in a few cases.  For example, a border-radius & box-shadow combo actually looks better in IE9.  Eventually, I’d like to one day see text-shadow, CSS transforms and maybe even animations supported to the same high standard as the modules for backgrounds, borders, color and fonts.

Lettering.JS

Early on we realized that because these poster-style layouts were going to be tuned to the letter, we’d need to find a way to match that attention to detail while keeping the markup manageable & agile. This problem of avoiding <span> heavy markup facilitated Dave’s creation of Lettering.js.  Dave has provided an introductory write-up & GitHub download here.  On projects like this, where large-format type is front and center, this jQuery plugin saved the day.

Tandem Dev via Dropbox

Dave and I were able to code-out different aspects of the site by setting up our own localhosts & working from the same folder we share via Dropbox.  He’d position elements on the page in a structural CSS file while I’d finesse the lettering in a type CSS file until each page was pixel perfect.  It took steady communication, but once we ironed out the kinks we were able to have the initial code finished for each of the 3 poster sites in 3 days.

El Dorado

The Hatch Show Print take on a 1924 fair in El Dorado by Naz was fueled by his interest in experimenting with rgba/hsla color and opacity.  Because tweaking hue, saturation & lightness is so intuitive with hsla, we were able to adjust the tones for each individual letter, blending them into the textures and colors underneath.  We used CSS-pseudo elements to double up on lettering, giving the poster an authentic, rough-around-the-edges look.  During an impromptu screen-sharing design session, Naz and I used Jon Raasch’s Scrolling Parallax jQuery plugin to finish the page by floating Zeppelins across the skyline.

Atlantis

Frank’s 18,123 pixel (or 20,000 league) journey into Atlantis is the reason multi-touch / smooth scrolling was invented.  Above water, the horizontal, percentage-based background tracking shifts the ocean-scape as you resize your browser window. Below water, you’ve got a fixed-positioned sea elevator and a depth tracker (built with javascript by Dave) that accompanies you as you scroll through various layers of aquatic life.  The 10 year old me loved building this page.  If there were a Journey to Atlantis lunchbox, I would buy it and carry my iPhone around in it.

The Moon

Jason created a look ahead to 2040 with a Worlds’ Fair that considers the possibility of humans settling on the Earth’s Moon.  The celestial interplay of the Earth and Moon on the page was achieved through percentage-based fixed positioning.  The same was done for the poor unfortunate spaceman (if your browser window is wide enough to find him). The Worlds’ Fair logo was done with 100% CSS, using border radius to create both the containing circle and the top-right orbital sphere.

The Landing Page

My design contribution to the Lost World’s Fairs was the landing page.  I thought a colorful, travel poster inspired approach would serve as a great introduction for each fair.  My type lineup consists of League Gothic for all the heading fonts, FF Market Web for the script and my favorite serif, FF Meta Serif Web Pro for the body text.  It was extremely humbling to be trusted to take on this leg of the project, and I had a great time doing it.

Operation Condor: Complete

Praise be to Nishant Kothary and the MIX Online team at Microsoft for giving us complete freedom to create and for getting behind the vision. Congratulations on the new browser and the huge leap forward.

The only downside to our project (dubbed internally as Operation Condor) is that we’re finished. Being able to team up with such talented people as Jason, Frank, Naz and Dave, has been an honor and a privilege to say the least.  I felt like Louis Tully, suiting up as a Ghostbuster and running around the streets of New York for the first time. “Stay fit. Keep sharp. Make good decisions.”  It’s good to be a Friend Of Mighty.