Designing while Traveling
When people see me using my 11" MacBook Air, they usually ask what happened to my real computer and how I could ever get anything done. In fact, the entire April Zero website was built solely using that tiny laptop.
But things weren’t always this way.
Many years ago, I was obsessed with displays. The more the better, and as huge as possible. I got a Mac Pro to be able to use more than 2 screens. When coding, I would turn them vertical to see really long files in one view. It was fun at the time, but I developed an unhealthy dependence on these tools and would spend the next few years slowly weaning off of big screens.
Between moving to San Francisco to the release of retina displays, over the next few years I ended up consolidating screens and switching to more and more compact and mobile workspaces.
- 2006: Mac Pro + 24" display
- 2007: Mac Pro + two 24" displays
- 2010: Mac Pro + two 24" displays + 21" Wacom Cintiq
- 2011: MacBook Air 13" + thunderbolt display
- 2012: MacBook Pro 15"
- 2014: MacBook Air 11"
2010 was the year of peak screen. I had three displays and was trying to figure out how to add a 4th. I was living in LA at the time, with a sweet 2,000 square-foot home office, so I had plenty of space. There were huge whiteboards in every room, and even a small one in the shower. I had multiple 8' conference tables with industrial-size rolls of paper for pretty much unlimited drawing space. I needed my big whiteboards and drawing pads and big monitors to really be firing on all cylinders. It was a design paradise. I could just never leave the house.
Then I moved to San Francisco, home of the most expensive real estate in the world. It was time to say goodbye to all of that.
As I moved and worked on simplifying my life, I was allured by the concept of the hacker in a coffee shop, or the world traveler that could work from an airplane or on a faraway island. Walking into a Four Barrel, I saw a sea of people working on their little MacBooks. It was an appealing idea, but also totally foreign to me. I couldn’t imagine getting anything done without my whole office.
I would later realize that the decrease in efficiency would be offset by the improved perspective and creativity of being more mobile.
Retina Displays
The release of the first retina MacBook Pro changed everything. Everything was so crisp and beautiful, it felt like I was seeing my designs for the first time. The minute I started using it, I realized I could no longer subject my eyes to the agony of low dpi. I quickly ditched the Thunderbolt display I had been using.
At around the same time, we got a bunch of new couches at the Quizlet office. They were custom ordered to match our blue and white color scheme, and quite comfortable. No longer tied to my desk, I started to spend more time working from these comfortable couches, or various beanbags.
How to deal with not having a mouse
One of the biggest changes when switching to only a laptop is that there is no mouse. Your hands are almost always on the keyboard, or less than a second away. The lack of mouse makes certain things harder, like dragging or clicking repeatedly, but other things are much more natural, like right-handed keyboard shortcuts or continuously typing. I found myself relying more on things like the arrow keys, selecting text via the arrow keys + <shift> instead of using the mouse.
Another change was my window management. In the old days with a huge display, I could spread everything around the screen and see everything at once. Now I could only see one or two things at a time, but everything was still easily accessible. It was a lot more like using iOS and being immersed in one app at a time, which is helpful when you want to focus on something.
I started relying more on Spotlight (and the similar Alfred) to open or switch apps. Instead of needing to find the little icon in the Dock or find it in a list from Alt+Tab, I could just press Command+Space and then type what I wanted. Since it autocompletes, the first few letters are usually enough.
Term… <enter> — Terminal opens.
Ch… <enter> — Switches back to Chrome.
Spo… <enter> — and we’re back in Spotify!
Thus, any app is less than 100 milliseconds away.
Another helpful change was implementing auto-reloading. Any change in CSS or Javascript would automatically update or reload the browser. I could edit files in Sublime and see the Chrome window in the background update without have to switch over and hit refresh. First we implemented Vogue and now I use a Mac app called LiveReload.
They may seems like a minor changes, but improvements to things you do hundreds of times a day quickly add up. Needing to drag around windows or click on dock icons suddenly felt so old fashioned and clunky.
Within a few months, I felt totally comfortable on just the laptop. The reduced screen space was offset by the ability to work from the more comfortable couches, the oddly shaped beanbag chair, or even down the street at South Park on a nice day.
Smaller is better
It was the beginning of a new year. I needed a new computer to start working on a redesign of my blog.
I was eyeing the new Mac Pro at the Apple Store. Hooked up to a massive 4K display, it seemed impressive. Yes, it looked a bit like a trash can — but it was also quite beautiful and shiny. It could be interesting to switch back to a big display and a really powerful machine. But I also wanted to be able to work out of a coffee shop in Paris, or at least the one down the street.
Gone were the days where I would spend months in Photoshop, working with huge PSD’s. I used to spend more time waiting than working, but now computers have gotten so fast that I am usually the bottleneck. My new dev workflow is less resource intensive, mostly just running a local server and loading pages in the browser.
I needed something light and compact to travel with. The things I now cared most about were battery life, footprint, and the feel of the keyboard.
I hadn’t wanted to sacrifice the retina display, but just getting a regular-sized laptop felt too safe and boring. I wanted something a bit more exciting, the computing equivalent of a motorcycle, not a sedan. The 11" Air was a risky option — it was much smaller than anything I had used before—but it fit better with my idea of traveling around the world. It was also about $1,000 cheaper, which was a nice extra.
A week later it arrived.
It was so tiny! But it was perfect. The keyboard felt amazing. I could balance it with just a finger. When I went out, I kept thinking I had forgotten it because my bag still felt empty.
I set up a basic Jekyll site for the new April Zero project I was starting. It felt nice to have the project self-contained in a local dev environment, independent from the internet and lasting for hours before needing a charge. The hardware and software were basically fused into one portable package that I could take anywhere.
As I traveled around the world, it was always by my side. Since it was so small and accessible, I had very little downtime. Since I didn’t always need an internet connection, I could work from almost anywhere.
Whether on a plane, in the back of a taxi, in a hot tub, or waiting in line for a few minutes, I was always thinking about my site and could just open up my laptop and solve a quick bug or start designing a new feature.
Even though I was traveling and didn’t always have an ideal workspace, I ended up getting a surprising amount of work done. I was slightly less effective, but being in interesting places gave me a changing perspective and kept me feeling more inspired to build new things.
As I explored new places, the things I saw inspired my designs — architecture, subway signs or even coasters at a tea party. For example, I was stuck on how to design the Explorer section for April Zero, until I got lost on the subway one day and looked at the well-designed schedule.
Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while. That’s because they were able to connect experiences they’ve had and synthesize new things. And the reason they were able to do that was that they’ve had more experiences or they have thought more about their experiences than other people.
A lot of people in our industry haven’t had very diverse experiences. So they don’t have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one’s understanding of the human experience, the better design we will have.
Steve Jobs, Wired, February 96
Living in the Cloud
Using a small screen helped me optimize for laptops, but I had been running into issues where the site would look strange when viewed maximized on a big screen or projector. There were also performance problems on retina displays which were hard to debug without having one myself.
At the end of last year, Apple released the new iMac. It was the first computer ever with a 5K display, with more pixels than anyone has ever seen on one screen. I had to get one. A retina iMac would solve both of those problems at the same time. Having both the largest computer and the smallest computer would help make sure every device in between was well supported.
Nowadays, I spend about half of my time on my laptop and half at the iMac on my desk.
With everything in the cloud it is pretty seamless to instantly pick up where I left off. Pretty much everything I do is using online services like Dropbox, Slack, GitHub, iMessage, GMail, Spotify, etc. Switching between my phone and multiple computers feels really natural now.
Typically, I prefer writing or building new features on my laptop, where I can focus on one thing at a time. For debugging or improving pages, I prefer the bigger iMac where I can see all the pieces at the same time and try out different browser sizes.
Every time I switch, I notice new issues that need to be improved. Font rendering, sharpness, animation performance, layout size, legibility — all of these are vastly different across devices. Something that looks great on retina might be too fuzzy or antialias strangely on a regular screen. An animation that performs great on my laptop might be too choppy when it runs at a higher resolution. Something that feels good on the computer might feel strange when viewed on mobile. Constantly using all of them helps avoid unpleasant surprises later.
There is rumored to be a new 12" retina laptop coming out soon. I’m very excited to try it, but afraid to leave behind my non-retina users. From a design perspective, regularly switching between different machines has improved my work immensely. Otherwise, I tend to only optimize for my own device and the other experiences are not as polished.
I think the specific tools don’t really matter much — you’ll get good with anything you use every regularly. The fact that I was able to do build my whole site using the smallest and cheapest computer that Apple makes should prove that.
Not being tied to a desk takes some getting used to, but the flexibility to work from anywhere is a really useful skill. Whether just a different room or from around the world, experiencing new things can be really liberating and a great source of inspiration.
What’s your favorite place to work?
