At 10am on August 24^th, I walked out of my favourite camera store with the new R6, the RF 24 – 70 f2.8, the RF 70 – 200 f2.8, and the RF 15 – 35 f2.8. It was a complete swap: I sold all my equivalent Sony gear, including my GM lenses, and moved over to Canon wholesale.

I had been using Sony’s critically-lauded A7iii since its release, and had migrated to Sony from Nikon (which I had shot with for almost a decade). At the time, moving to Sony made sense: Nikon’s mirrorless offerings were not impressive, and Sony made their best sensors. I figured it would be a pretty easy maneuver.

And it was! The switch felt natural and easy. Once I set it up to my liking, the Sony system felt pretty easy to use. Some of their lenses are truly fantastic (although not all — more on that in a bit), and once you learn their menus, it all becomes second nature pretty quickly.

I shot many thousands of images with my Sony gear — somewhere over 100,000 shots in just a couple years. It’s good. The dynamic range is excellent, the batteries last a long time (in their newer cameras), and the surrounding community of Sony shooters is filled with knowledgable and helpful people. For all I know, Sony’s cameras might be right up your alley.

With that all being said, I’d like to tell you why I sold all my Sony gear.

Ergonomics and usability

First of all: Sony gear is not fun to use. I don’t know what it is. It might be the build materials. It could be the ergonomics. It might be that the body is a feather, but the lenses weigh a ton. (That being said, even a small, lightweight lens didn’t make the Sony more fun to shoot with for me.)

Somehow, shooting with the camera became a chore. I never felt like using it outside of work. I didn’t like the way the buttons felt (for some reason, the AF-ON butt was so hard to hold down). I could never get a good grip on it. The whole thing was too small; my pinky finger never knew where to go.

I ended up buying Sony’s battery grip — not because I needed the extra battery power, but because adding the extra weight and bulk gave it some much-needed mass. I could at least rest my pinky on it. The battery grip also doubled my battery life. The battery life on the Sony is insane, by the way. With two batteries, I could shoot for three days.

I couldn’t use the Sony camera without a strap, because the grip wasn’t big enough for my fingers to wrap all the way around it. And if my fingers did wrap all the way around it, the shutter release button was right beneath my middle fingertip.

That brings me to changing lenses: it’s painful. Sony’s markers on their lenses are hard to see, impossible to feel, and not in line with any of the lens’ switches or buttons. After years of swapping lenses, I never got the hang of it.

To make matters worse: Sony doesn’t close the shutter when the camera is off, so when you’re changing lenses, the sensor is exposed the entire time. Switching lenses is cumbersome and always takes longer than I expect, so dust gets on the sensor. Even if you can change lenses quickly, this is unavoidable. I had to clean my Sony’s sensor all the time. All the time: every month at least, sometimes every week. Guess how many times I ever had to clean my old Nikon’s sensor.

Editing Sony files

A lot has been said about whether Sony’s colour science is accurate or inaccurate. Honestly, I don’t care. I shoot RAW and I edit my colours in post. But on the Sony, that’s not easy. Adobe’s profiles in Lightroom are terrible for Sony’s cameras. The oranges are much too close to red, and there’s something wrong with the blue curve. I spent years fighting this.

Eventually, I moved to Capture One. Capture One is known for its colour editing prowess. Even with Capture One, I could never get the colours to look right: oranges still looked weird, and the blue curve was still way off.

One should not judge their camera by their editing software, but honestly, if you have to move mountains to edit your camera’s files, something is wrong. 

Something else is off about the files. Even on my iMac Pro, which is a beast of a computer, the files were difficult to work with. It didn’t matter what editing app I used; somehow, my iMac would also demonstrate lag while editing. Brushes in Lightroom, Photoshop, and Capture One were particularly painful. Eventually, I just came to the conclusion that the .ARW files Sony compresses their RAW data into are probably difficult to work with. I can’t think of any other reason I’d have issues like this.

Shooting quirks

Sony also expects you to slightly underexpose all your images if you want to get the most dynamic range possible out of your images. Why? Because if you underexpose, you’ll save your highlight data, and they’re very confident about their cameras’a ability to preserve shadow detail. You can get a lot of shadow detail out of Sony’s cameras without adding any additional colour noise, which is great, but it has some obvious downsides.

First, it makes the exposure preview in the viewfinder a little difficult to use at times, particularly if you’re shooting indoors. That being said, you can quickly disable that in the menu if you need to. It’s also one extra thing you need to adjust every time you edit an image.

The latter is what’s most bothersome for me: it’s another thing to edit. I want to spend less time editing, and more time shooting.

I nearly forgot to tell you about the software bugs I had too. Here’s a brief list of the rare, recurring bugs that derailed my client shoots:

• The camera didn’t recognize its battery and threw an error. Fixed with reboots. This happened all the time.
• The camera didn’t recognize the on-brand battery grip. This bug manifested itself by making all my photos green. Fixed by taking the grip off and screwing it back on. 
• Without displaying an error, the camera would silently fail to save images to either SD card. This is maybe the worst bug I could ever imagine. To fix it, I would remove both SD cards from their slots and — I kid you not — blow in the slots like it was an N64. This happened twice in two years, and this bug was the final straw before I decided to switch. 
• The shutter doesn’t close when you turn the camera off. I know I mentioned this already, and I know it’s intentional design, but it’s such a poor design that it’s basically a bug — so I’m treating it as one. Sony’s solution is to sell you an A9 II, apparently. 

There are other quirks when you’re shooting, too. For example: if I held the AF-ON button or the pressed the shutter halfway to focus, I wouldn’t be able to adjust any of my exposure settings without releasing the focus button. So sometimes I would remove my finger from the shutter, make my changes, and miss the shot. That’s one example of a minor usability issue, but things like this are important! It’s what separates trusted and reliable gear from broken refrigerators.

Also, while I’m being being picky: I appreciated the tilting screen, but longed for the flexibility of a flip out screen every time I was getting low for portraits or landscapes. Plus, the touch screen on my A7 III was so bad as to be useless. I turned it off two days into ownership and never looked back. 

Some notes on lenses

I also wanted to quickly mention the lenses I shot with. Out of all of them, my far-and-away favourite were Sony’s wide angles. Their 16 – 35mm f2.8 GM lens was, at the time, the best lens I’d ever owned.

That being said, Sony’s lenses were less impressive in the telephoto ranges. I didn’t buy their 24 – 70GM because, after trying both, I thought Tamron’s 28 – 75 outshone it. Even the Tamron’s images left something to be desired; they never sparked any creative muscles in me.

I used Sony’s 70 – 200mm f2.8 GM extensively as well; it was probably my most used lens. It was very good up until 135mm, where it started to get soft. By 200mm, it was essentially smeared with vaseline — especially indoors. This was not limited to my copy of the lens. I rented seven different copies of this lens and can confirm they all display the same issues.

As far as lens recommendations for the Sony system, I can heartily recommend the 24mm GM prime, the 55mm prime, the 135mm GM, and the aforementioned 16 – 35 f2.8 GM.

Issues like a painfully small grip, or trouble swapping lenses, or even difficult editing workflows are not easy to discover on day one. Issues like this are death by a thousand paper cuts: these are small things that, cumulatively, become big over time. By the time Canon announced the new R5 and R6, I was eager to make a move.

The atomic units at the heart of every block of text are the letter shapes – the forms they take. They have the single largest impact on the overall vibe of a design. To the annoyance of some of my clients, I am obsessive about this at the beginning of any project. Selecting a typeface has a larger long-term impact than almost any other design decision.

The typefaces, or fonts, or whatever you want to call them – it doesn’t really matter – impact the ​“voice” people read your words in. They can determine whether your website feels editorial, authoritative, strong, modern, friendly, casual, or cold.

This makes typeface selection a fickle thing. Sometimes, it’s just about the tone of the text. Letterforms can be deceiving; context is necessary to understand how type looks. You have to see it rendered in paragraphs.

We have been lucky in the design community to have some great writing on this recently. If you have no idea what I’m talking about, Frank Chimero wrote a great primer as part of his redesign series. It’s a great introduction to picking typefaces.

Let me share my favourite part with you. At one point, Frank demonstrates the differences between Basis Grotesque and Avenir by examining the detail in their letterforms. He concludes that a reasonable person would presume, based on the letterforms alone, that Avenir is less quirky than Basis Grotesque. But then he shows them each in paragraphs. It’s the opposite of what a reasonable person would expect.

Here’s Frank:

My bet is that most people would identify Avenir as the more ​“flavorful” typeface in a paragraph context. An unexpected inversion has happened. The typeface with traditional letter shapes (Avenir) reads more distinctively than the typeface with quirks in its design (Basis). Basis’s oddities become less noticeable when typeset smaller, and the proportions of Avenir (it’s roundness, it’s size contrast between upper- and lowercase letters) go further in establishing the typeface’s fingerprint and impacting the text’s atmosphere.

In short: typography often lies to us. Paying attention to the shape of individual letters without paying attention to how the font works in the whole of the design work is sort of like picking a partner based on their eye colour and BMI. You’re missing the forest for the trees, and you come away with the wrong impression entirely.

Frank isn’t the only person writing about this. The super-smart folks at Hoefler, who have designed some of the finest typefaces available in the market, recently shared how basic pangrams (like ​“the quick brown fox jumps over the lazy dog”) have failed them during the design process of their typefaces.

Jonathan Hoefler writes:

In years past, our proofs were full of pangrammatic foxes and lynxes and the rest, which made for some very merry reading. But invariably, I’d find myself staring down a lowercase J — and if I questioned the amount of space assigned to its left side, I’d set off in search of some confirmation in the proof. Each time, I’d be reminded that while pangrams delivered all kinds of jocks and japes and jutes and judges, even our prodigious list featured not a single word with a J in the middle.

Hoefler has gone on to open-source their own pagrams (on Github), which I happen to really like, so I’ll use them throughout the rest of this post as examples.

Here’s what I find interesting about Hoefler’s post: most pangrams are a single sentence long. Hoefler’s new pangrams feature long-running sentences. Side by side, the words don’t make sense, but one can get a feel for how a typeface reads.

Picking a genre of type

I say all that to say two things: first, selecting typefaces is hard because, no matter what we mock up, our impressions of the type might change once we see it in properly rendered text.

Second, picking typefaces requires knowing a little bit about your long-term plans for the project. That’s why I wrote my post about what I’d like to do with this website first.

Let’s recap what’s on the website now, and what could eventually be on the website:

1. Blog posts like this one. Sometimes long, essay-like mini-novellas. Sometimes short status updates.
2. Photo sets, eventually.
3. Perhaps brief film reviews and other assorted items of personal interest.
4. I may start logging books I read here as well.

I said in my last post that I would like the site to add ​“an air of quiet elegance” to my writing. That makes a serif the obvious choice for extensive writing, like blog posts.

Most of the other text on the site is metadata: image captions, brief film reviews (if that comes to pass at all), dates, tags, and the like. A sans-serif is a great choice for that.

Of course, a sans-serif is also a great choice for a heading.

The ​“obvious” choice is one sans-serif and one serif. It may be worth exploring another option, though: one sans-serif for headings, and one sans-serif for metadata.

That would give me three typefaces:

1. An editorial font for reading.
2. A heading font.
3. A ​“micro” font – a typeface for small text. Something like 13px or smaller.

This is a good place to start.

Now that we’ve narrowed down our ideas, let’s select a couple typefaces I might use for the initial mockups.

Everything I said earlier still applies. It’s hard to pick type. I might change my mind. The goal today isn’t to pick one font. The goal is to narrow down the choices to just a couple in each category.

How to analyze typefaces

If you’re new to this, or if you’re a budding designer looking for tips, let me share how I analyze typefaces.

I primarily consider three aspects of each face:

1. Character. What does the font look like? Most people have a pretty natural understanding of this; after all, we intrinsically know it’s better to write a report in Times New Roman than Comic Sans. Times New Roman _​looks_​scholarly and intelligent; Comic Sans does not. This can become very nuanced, though: is a typeface playful or warm? How does that change the way the text reads? These are all questions I consider as I look at a font.
2. Contrast. When we talk about contrast in type, we’re talking about the difference in thickness between their horizontal and vertical strokes. A high-contrast typeface is great for headlines, but won’t read as well at small sizes. A great example of an extreme high-contrast typeface is Didot from Hoefler & Co. (Because I plan on using the serif for text, I want to avoid something this high-contrast.)
3. X‑height. In plain english, the x‑height of a font is the height of the lowercase ​“x” – or any other letter without ascenders (like in the letter ​“d”) or descenders (like in the letter ​“q”). If the x‑height is tall, that means that ​“x” is nearly as tall as ​“d”. And if it’s short, it’s the opposite. Typefaces designed for body text typically have tall x‑heights.

Picking a serif typeface

The serif typeface makes up the bulk of the body of text on this website. In my mind, it is absolutely critical to select the right one.

I already have a general idea of what I’m looking for. I’d like to incorporate an editorial serif: these are the typefaces used in (or inspired by) newspapers. Think Times New Roman. (Don’t worry; I won’t use Times New Roman.) I like the air of elegant authority these faces provide.

We give some credence to what we read in newspapers, and using a typeface akin to a newspaper font seems like an easy way to add gravitas to almost any text.

There are a few options in this category that are worth immediate consideration: Mercury from Hoefler, Tiempos Textfrom Klim, Freight Text from Joshua Darden, and Miller from Matthew Carter.

Before I make any comparisons here, it’s important to state that there aren’t any wrong answers here. Finding the right type is about creating the right feeling. It’s jazz, not classical.

Keep that in mind as we go through the rest of this. Without further ado: Let’s see how each of these look with the pangram that Hoefler and Co. have created.

First up: Miller. I’m starting with Miller because it’s designed by Matthew Carter. If you’re reading this on the un-designed version of the site, you’re reading Georgia, which is also designed by Matthew Carter. I often think of Miller as Georgia’s more refined brother.

Look back at Miller. How does its contrast and x‑height influence the way you read the font? Does it make it easier or harder to read?

This is Tiempos Text. (I labelled it ​“Test” because I’m using the test version of the font on my computer; I haven’t purchased it yet.) Tiempos Text is perhaps the most unusual typeface in this collection of serifs. Kris Sowersby, its designer, meant it to be an update of Plantin and Times for more modern use.

(It’s worth mentioning that Kris keeps meticulous notes and has a highly detailed blog for type nerds like me. If you’re into that, you should read his design notes about Tiempos.)

The proportions of this typeface make it extremely easy to read. It’s also a very high contrast typeface. In a long paragraph like this, a font like Tiempos Text can feel overwhelming. But over the course of many paragraphs and hundreds of words, a font like Tiempos can feel like a warm, intelligent hug.

Mercury is the opposite end of this spectrum. It’s a newspaper-bound serif, through and through. Optically, you might notice that it appears smaller than Tiempos, even though they’re set at the same size. This is because the x‑height is shorter. It substantially changes the effect of the text.

Truthfully, Mercury is one of my favourite faces. It renders well at even the smallest of sizes, and can handle all sorts of abuse by printers too. As a print designer, I love how easy it is to set and work with. As a web designer, I love how old-school it feels on screen. It communicates text efficiently, but also feels different from most other serifs. (I would set it a little larger on the website, I think.)

Finally, we have Freight. Freight Text is a beautiful typeface that’s part of a larger type family. It comes with a sans-serif accompaniment called Freight Sans, a version for micro-sized text called Freight Micro (that’s really more of a slab serif), and various different display sizes of the typeface.

I’ve used Freight before, and I think it’s a tremendous font. But looking at it here, I’m not sure it’s what I want to convey. You’ll note this is a higher contrast font than our other choices, which makes it harder to read on the dark background. While that doesn’t make it a bad font, it does make it appear ​“daintier” and ​“lighter” than my other choices.

To my eyes, Freight Text is almost too scholarly for my needs. It looks like it belongs in a paperback, not a newspaper. (If you’re a fellow designer and you’re offended by this; I’m sorry. While you’re here, I’m also not a huge fan of Gotham.)

To start with: I think I’ll stick to Mercury and Tiempos Text for now. I’ll play with each of them during the mockup phase and see what sticks. But at least this is enough to get me started.

Picking sans-serifs

When I think about ​“obvious” and ​“elegant” sans-serifs, I think about sans-serifs whose designs are obvious. For lack of better words, they look how one would expect letters should look. Of course, I’m referring to Helvetica and all its Swiss contemporaries (and the typefaces it inspired). Immediately, I think of typefaces like Söhne, Neue Haas Unica W1G, Neue Haas Grotesk, Acumin, Aktiv Grotesk, and so many others.

This category is much harder to distinguish. What makes Helvetica different from Helvetica Neue? Type nerds know they’re are differences, but in a blindfold test, I’m not sure we would actually notice them in a side-by-side comparison – not at text sizes.

For the sake of this illustration, we’re going to look at them at text sizes anyway.

Take Neue Haas Grotesk, for example. It’s clearly inspired by Helvetica. Unlike many Helvetica descendants, Neue Haas Grotesk doesn’t attempt to ​“correct” any of Helvetica’s so-called flaws. Instead, it attempts to capture the spirit of the original Helvetica – before decades of small tweaks caused many of its details to become lost to time.

Neue Haas Grotesk also has a display version for large headlines. It’s substantially more compressed than the text face, and has fewer ink traps. It’s really lovely. If you’re looking for a headline sans-serif inspired by Helvetica, I think it’s among the best.

Neue Haas Grotesk is a high contender for me.

But the difference between Neue Haas Grotesk and Söhne, pictured above, are much more subtle. (Again, I’m using a test version because I haven’t purchased the font.)

Söhne is actually a brand new, playful merge of Helvetica and Akzidenz-Grotesk (you can read about it in detail if you’re so inclined). It’s a little more compressed than Neue Haas Grotesk, but to the untrained eye, these faces would look identical.

But they’re not. In real world use, they communicate entirely different things. Söhne has a touch more character than Neue Haas Grotesk, but it’s also not strictly a Helvetica descendant.

Neue Haas Unica is so close to Neue Haas Text, at least to my eye, that I could almost use them interchangeably and call them a day. (Apart from the lowercase ​“a”.) But again, they render quite differently in actual text. Unica is more compressed as a text face, which makes it less readable, but as a headline, it’s less compressed than Grotesk’s display variation. At 16pt size, they appear incredibly similar, but as we talked about before, type can lie to us. At large sizes, Neue Haas Unica and Neue Haas Grotesk are different animals. (Demonstration below.)

Acumin, which is one of my favourite sans-serifs in recent years thanks to its unbridled utility, takes a whole different approach to this genre. Its letterforms are different, and it doesn’t strictly adhere to Helvetica’s style.

Acumin was, according to Adobe, designed to stray from Helvetica’s adherence to signage (read their design story). It’s available in a myriad of widths and weights that make it extremely comprehensive, with slightly angled terminals, single-stroke commas, and promotional numerals.

I like Acumin a lot, and I’ve used it on a couple projects, but I’m not sure it’s right for this site. The things that make it a better text face – its angled terminals and lowercase letters that ascend above the cap height – make it worse for headlines and wayfinding. If I were looking for a single sans-serif typeface that could serve for both headings and body text, I would carefully consider it.

In bigger detail

Still, it is worth comparing these four typefaces at a larger size as well, in an effort to see more of their character (no pun intended).

At a larger size, the differences between these typefaces are much less subtle. Acumin is clearly best used at text sizes; it lacks subtlety as a headline.

Söhne is clearly the most unique in the pack: compressed, but still readable thanks to the unique details of the ​“a” and the angled bowl of the ​“e”. Look at the capital ​“Q”! What a letter. Despite its geometric appearance, Söhne feels rounder and softer – without losing its neutrality.

Neue Haas Unica appears more compressed than the Neue Haas Grotesk, but that’s only because that image still uses the Grotesk’s text variant. Watch what happens when I use Grotesk’s display variant, which is more appropriate for large text like this.

Now, the tables have turned. Neue Haas Grotesk is much more compressed. Its weights are much chunkier. It feels like a signage poster. It also has a unique (and optional) lowercase ​“a” that looks not dissimilar to Söhne’s playful characters.

These options makes Neue Haas Grotesk incredibly flexible.

Since I already have easy access to Neue Haas Grotesk through my Creative Cloud subscription, it’s the easy choice to make right now. It’s got the sort of character (no pun intended) that I’m looking for.

A third typeface?

Finally, a sans-serif for metadata: This could be any of the typefaces I just listed, in fairness, but in the spirit of trying out a few things before locking myself in to a single face, I can think of a few humanistic typefaces that could render well here. Whitney and Ideal Sans could be ideal contenders. Frutiger and FF Meta could work as well.

Let’s talk, briefly, about why I might use a humanist face here. Humanist sans-serifs add warmth when they’re paired with geometric or Neo-grotesque typefaces, like the ones we just considered. In this case, they might help avoid situations where my website might feel cold or bland.

I own Whitney (from Hoefler & Co.) already, which I purchased years ago for use with Unsung Sundays, so that’s easy to test. Similarly, Freight Sans (Joshua Darden) might work well here. I’d like to try Ideal Sans (Hoefler & Co.), which renders very well at microscopic sizes, but I don’t own it. I’ll test it later.

For now, let’s start with Whitney and Freight Sans.

For this comparison, I grabbed a sample paragraph from a previous blog post to get a feeling of how they read.

My first note is that Whitney feels easier to read. My second thought is that Freight Sans is a wildly different approach to constructing a typeface like this. Consider the lowercase ​“g” – these faces almost feel like they come from entirely different genres. In fact, nearly every letter looks totally different. It amounts to a very different reading experience.

All that being said, neither of these typefaces work well with the others I’ve selected. Unless I work with Mercury as my serif typeface, I think these faces are going to clash. I’m going to shelf this idea temporarily, but Whitney would be my choice if I had to make one.

Wrapping up

After 3,000 words, I have started to limit and narrow down my options. To make the final choice, I’ll have to start playing with them in real designs – and maybe even in code.

This is not unusual. In fact, it’s a good place to start with any design project. The blank page is intimidating because it has no limits. By selecting a handful of typefaces to trial, I’ve already begun creating constraints.

With Mercury, Neue Haas Grotesk, and Tiempos Text in mind, it’s time to start playing with layouts and type sizes.

The future plans for a website dictate its design. The past gives it context and boundaries. 

There is a significant difference between designing a website and designing a printed object, like a magazine. Printed materials do not have to account for the technical debt of their pasts. The first issue of a magazine might look completely different from its twentieth issue. They are, for the most part, independent from one another. 

Websites are different. Old content is easy to find on the web, and the oldest content on a website will always share the new content’s design. A website’s design needs to account for what’s come before.

This means that your typical website re-design has a lot of work to do. 

Over time, this work can result in a degree of digital detritus that requires a wholesale overhaul of design and content. Even when that’s not the case, the work the design needs to accomplish increases exponentially with each additional type of content.

All this is a fancy way of saying: if your website has a ton of content types, the design itself increases exponentially to scale. A rising level of complexity lifts all boats. If you want to manage and maintain a unified, cohesive design for all your blog posts, pages, photos, and more, that’s a lot of content to design. 

What was, what is, and what will come to pass

This website has always been one thing: a series of blog posts, organized in index and archive pages in reverse chronological order. 

Most personal websites are just that: a collection of documents, ordered from the most recent to the oldest. This is what we’ve all accepted to be the norm on a weblog. There are no magazine-style landing pages, content isn’t being fetched from (or distributed to) multiple places, and it can load fast because it is typically bereft of the high-resolution imagery and javascript that slows down most websites.

In the future, I’d like to add more stuff to my website. I’d like it to feel less like a collection of loosely arranged documents, and more like my personal home on the web. I’d like to share links to the most recent case studies from my portfolio. I’d like to fetch what movies I’m watching from my Letterboxd profile. I might share the books I read¹. I’d love to share status updates — like tweets, but on a platform I own instead of Twitter. Finally, I’d like to start sharing photos here too². I’m not sure if I’ll share those photos in some sort of a grid, or if I plan on writing photo stories, or both.

All this new content means the design of this site will naturally increase in complexity. If I’m not careful, I worry that the site’s increased complexity and feature list will begin to resemble urban sprawl: poorly planned, boring to look at, and stripped of personality.

Typically, when I start seeing a long list of content needs and desires, I start worrying about website performance — particularly with my client work. How much javascript, CSS, and business logic do I need to animate all these different dinguses (dingi?), organize and re-organize content at different viewpoints, and display 200 images without forcing the reader to download a gigabyte of data from their cellular provider?³

As a front-end web design and developer, I’m well aware of the difficulties in making complexity both simple and performant. But it’s worth stating here: I expect this site to be fast, easy to use, and not destroy your smartphone bill.

Of course, some of that may be at odds with my other stated goal: to learn a component-based javascript framework like React or Vue. I do not believe the goal of performance is at odds with javascript. This site loads in 1/​3rd of a second. I think I can make it faster still.

In his redesign series, Frank Chimero stayed where he thought the design of his website was going to go before he started work on it. I like this. It’s interesting to see how a project mutates as it goes along. I’m inspired by this, so I thought I’d do something similar. I suspect that, since my website will be more complex than Frank’s, our end result will be very different. But I’m surprised at how aligned our initial goals are. Here’s what I’d like this website to be:

1. Obvious: Just enough design to make the site feel like its design was inevitable. How else could it look?
2. Performant: I mentioned this above, but to be clear, there is a large collection of people I respect in this industry who seem to think javascript and javascript-based frameworks, like React or Vue, make websites slower and less accessible. I’d like to prove them wrong. Even if I can’t, then this website will be an easy way to learn valuable lessons I can bring into my client work⁴.
3. Timeless: I’d like the website to be simple and clear. I don’t want to add design that gets in the way. I don’t think my work will ever be comparable to Vignelli’s or Ram’s, but I’d like to take inspiration from their methodologies. I’d like the website to be useful, understandable, clear, and unobtrusive — and maybe have an air of quiet elegance.

With my long-term goals stated, and my thesis laid out, it’s time to begin considering the fundamentals. Because this website is going to be text-heavy, it’s about time we discussed type.

Before I redesign this site, I want it to look as default as possible, so its previous design won’t influence the look and feel of its next iteration.

This isn’t a ​“normal” part of redesigning a website, but for the sake of this exercise, I thought it might be helpful.

When I begin any sort of redesign, I like to — at the very least — pretend the previous design doesn’t exist. If a redesign is called for, the previous design doesn’t solve the problem. First, we need to identify the problem we’re going to solve.

This is a rare case where I can actually wipe the slate clean. I can literally un-design my blog — so that’s what I’ve done.

As of today (June 2020), this site uses Georgia and your device’s default sans-serif, and the whole thing has a max width set up for easy reading. That’s it. 

Headers and paragraphs share consistent line heights and font sizes. This is not necessarily good design (although it certainly can be); it’s simply efficient. 

It is my hope that the current version of this site doesn’t look designed at all. 

Most of the site’s CSS just looks something like this:

p, h1, h2, h3, h4, h5, h6, li {
	font-size:1em;
	line-height:1.5em;
	margin:1.5em auto 0 auto;
	max-width:42rem;
	padding:0 1rem;
}

Apart from hacking away at the email sign up below, it doesn’t get much more complex than that. It’s only a couple hundred lines of CSS. (In all honesty, I wrote it very quickly, and it’s not well-written. It could be much shorter. But it’s functional, and it took me less than one afternoon.)

The point of doing something like this is to avoid re-using and regurgitating ideas I’ve had in before. Like every other designer, I’m guilty of recycling my ideas. But every problem is unique — even if this is the eight hundredth blog I’ve designed.

A reset removes the previous problems and allows me to focus on the problem at hand — so I can start thinking about the future.

I have been thinking for weeks about how I, as a white person, can help move the needle forward on equality in society.

I am still listening, but I wanted to share some of what I’ve learned so far.

First, continue to listen and continue to learn. Read some books. Here are a few that I have seen recommended many times:

• So You Want to Talk About Race by Ijeoma Oluo
• Waking Up White, and Finding Myself in the Story of Race by Debby Irving
• White Fragility: Why It’s So Hard for White People to Talk About Racism by Robin DiAngelo
• Between the World and Me by Ta-Nehisi Coates
• How to Be an Antiracist by Ibram X. Kendi

I am sure there are many others.

The second thing that we need to do is confront the racist people in our lives. I think we could place these people in one of two categories:

1. People we know, who are either unaware of their racism or are hateful bigots.
2. People we do not know who are in political or financial positions of power.

When it comes to people we know, it’s time to tell them they are racist. Don’t sugarcoat it. Don’t call them ​“micro aggressive.” Say what it is. Give their racism a name, whether they intend it or not. If they are hurt, remember their words hurt more than their feelings at that moment. 

If you are uncomfortable with this, you’re going to have to suck it up. Change does not happen without discomfort.

When it comes to people in political or financial positions of power, you must vote with your dollar. If you can, vote them out of power. (If you are an American, that carrot you call a president is not a stupid idiot doing a bad job. He’s a cunning fascist who is hellbent on destroying your country and taking away your freedom. Vote accordingly.)

If the racist person is in a financial position of power, don’t spend money on their products. I know there are absolutely times when you have no choice. If I found that out that the CEO of Dole was a mega-racist, I would have to stop buying fruit from all the supermarkets in my neighbourhood. But I need fruit. I understand this has limits. But be aware that every time you spend money, you are implicitly supporting the people at the top of that organization.

If it is possible, spend more money on businesses owned by minorities. If you are in Toronto, I can make this easy for you: here is a list of 135 Black-owned businesses in the city you can support right now. And here’s another 100.

We need to move the needle forward on this. Until we live in a society that truly offers equality for all of us, there isn’t equality for any of us.

I do not want to speak out of turn or say the wrong thing. I do not want to hurt or harm. 

But to be silent is to be complicit. I will be silent no more. 

Black lives matter. It needs to be repeated until we all agree. This is not about George Floyd, Michael Brown, Trayvon Martin, Eric Garner, Tamir Rice, Walter Scott, Freddie Gray, or so many others. This is about the systemic oppression and abuse that Black people have suffered for hundreds of years at the hands of white people. 

I am aware of my incredible privilege as a white man. Even if I am not intentionally complicit in this system, I am in it. I did not choose this role, but neither did those the colour of my skin has oppressed. The first step towards reconciliation is acknowledging my part in this system, and listening. 

It is also the time to acknowledge the grief of the Black community. It is time to enter into that grief with them. There are so many men, women, and children that have been taken from us. Imagine if it was your brother, father, son, uncle, partner, or daughter. 

As a Canadian, I admit I am weary of being told Canada doesn’t have a racism problem. We do. We’re simply polite about it. We are not immune to police brutality, racist police forces, and cold-blooded murder. The racism in this country is insidious, hidden behind closed doors and off-the-record legal settlements. Our police forces disproportionately target Black and Indigenous people. It keeps me up at night. 

These protests, and the police-instigated violence and cruelty, have also kept me up at night. The videos I have seen are disturbing, but no longer shocking. In the past ten years, I have seen many real videos of white cops murdering unarmed black men. It is insane to me that I have seen even one. 

It is not unreasonable to expect that police officers should uphold the law and protect people, rather than abuse it and kill people. If they are unable to fulfill their basic duties, they should be disbanded. (And once we’re done with that, let’s tackle prison reform.) 

Black people built America for free. They are owed much more than equality and justice. 

I do not know all the right steps to take. I am listening and learning. I am sure I will make mistakes, though I do not want to. I am aware of the ACLU, and the Equal Justice Initiative. Are there organizations in Canada that need support? I would love to hear about Canadian organizations focused on these issues that I can support. If you have suggestions, send me a message on Twitter. 

For now, I am listening. To my Black friends, and to the Black people in my community: I see you. Your life matters.

A couple weeks ago, I opened my website and realized one of my blog posts was broken. Why? I don’t know. Wordpress, probably. I debated whether or not I just fix the issue, and continue to deal with Wordpress, or if I follow my heart.

I’m following my heart.

Inspired by a couple of my personal heroes, Jonnie Hallman and Frank Chimero, I am re-designing my website in the open.

What does that mean?

Frank Chimero explained it well, so I’ll quote him here:

Here’s the idea: I’m going to be redesigning my site, and I will document the thoughts, process, and decisions here. (This is largely inspired by my friend Jonnie’s redesign blog.) By writing about it, it may help both of us. I can further develop my methods by navigating the friction of explaining them. I’ve been looking for a way to clarify and share my thoughts about typography and layout on screens, and this seems like a good chance to do so. And you? Well, perhaps the site can offer a clearly explained way of working that’s worth considering. That seems to be a rare thing on the web these days.

I don’t think that my blog will be as useful to anybody as Frank or Jonnie’s undoubtedly was, but I do think it is helpful to write one’s thoughts down in a place they can be easily referenced. 

It is also helpful to our craft to discuss our work in more detail. Khoi Vinh was so perturbed by the lack of detailed design commentary available that he started a podcast with Adobe to address the need.

My hope is that, by documenting the design process, I might help those who are starting out in this field.

In addition to documenting the design process, I plan on documenting and open-sourcing my code as well. For a variety of reasons (I’ll save them for a future article), I plan on learning Vue or React and creating a static website, rather than a PHP-style blog.

But both React and Vue can be hard to learn. In the past, it was much easier to learn how to make a website. You right-clicked anywhere on the page and selected ​“Inspect Element” from the contextual menu. That was how I taught myself basic HTML and CSS years ago: I inspected what other people had made. 

Unfortunately, there is no way to inspect somebody’s modern web app and see how the sausage was made. Inspect Element is basically useless. You can’t tell if you’re looking at components, or layouts, or pages, or routes. You don’t know if they built the whole thing with NPM, React, Vue, Gatsby, Gridsome, or — honestly — Squarespace.

I don’t know what tech stack I’ll use yet — apart from a headless stack of some variety — but I will document what I’m learning, and share open source the site once I’m done. I hope, by documenting what I’m learning, as well as open-sourcing my code, I can make a positive contribution to people who are just learning this craft.

About a week ago, I realized my 2017 15” MacBook Pro’s speakers are blown. I rarely use the laptop without headphones, so I’m not sure when it happened. Now the laptop is unusable as a shared screen for Zoom calls, because we can’t hear the audio when we call our friends. Or rather, we can, but everybody sounds like they’re hanging out with Aquaman underwater. It’d be a cool sound effect, if it wasn’t unintelligible. 

If we were living in the Before Time, I would have simply taken the laptop to the Apple Store to have them assess the damage. Once the After Time comes around, I might still do that.

But I really don’t like this laptop. I hate the keyboard . It feels like typing on cracker wafers, and a single speck of dust can take out the whole keyboard — which is a design failure beyond understanding. I don’t like the obnoxious space grey finish. Silver is the right colour for a MacBook, turns out. I don’t like how large it is (more on this later). And now, the speakers are unusable.

All this got me wondering: if I were to buy a new portable machine from Apple today, what would I buy?

I say ​“portable machine” because I don’t want to discount the iPad from this list. My 10.5” iPad Pro is a great little machine, and it is very good at certain tasks.

I am in the fortunate position of using an iMac Pro as my primary computing device. I don’t need to necessarily have the same power on the go as I do at my desk. When I’m mobile, I want a small, lightweight device that lets me easily get my essential work done — and it better have a good keyboard.

My laptop fails to meet some of those metrics. The large size of the 15” MacBook Pro seems absurd. It’s too large to comfortably sit on a lap, and every extra pound of weight matters a lot when I’m travelling (not that I’m doing much of that right now). Plus, the keyboard is a failure waiting to happen.

I would love to use the iPad Pro. It’s lightweight and ultraportable, and the Magic Keyboard looks like a dream. But for many reasons, the iPad Pro isn’t for me. The Verge offered some sage advice recently: ​“Never buy hardware today based on a promise of software tomorrow.”

Which brings me back to the laptop lineup.

Apple’s laptop lineup, in all honesty, hasn’t looked this good in almost a decade. Now that they’ve replaced the butterfly keyboard with the Magic Keyboard, it’s easy to recommend almost any of their laptops. The 16” MacBook Pro is a wonderful machine, even if it’s too big for my liking (I trialled one in November). The 13” MacBook Pro looks very good.

If I had to buy one today, I think I’d buy the MacBook Air. It’s the lightest and most svelte option. I like the taper. It doesn’t have a Touch Bar (for me, that’s a perk). I don’t need power on the go often enough to justify the extra weight or cost of a MacBook Pro. Most of the time, I’m either pushing rectangles around in Figma or writing PHP or Javascript in Visual Studio Code or Sublime. These apps don’t need a lot of CPU power to be useful.

That being said, if the rumours are true, the Mac lineup is about to get very interesting. If Apple makes its transition to ARM chips next year, their laptop lineup should become stronger. ARM chips are what makes iPads as powerful and battery efficient as they are. If a MacBook Air got one, all-day battery life is a possibility — and the laptop would be much more powerful. The most recent iPads are so much faster than the current-generation MacBook Airs, it’s not even funny.

Hopefully, Apple will share more information about the plans for its chip transition in a month or so at their annual developer conference. But they’re a secretive company. They may not share that information with developers before next year, assuming the rumours are true. (And, of course, they might share information this year about getting development work done on an iPad too — which would change the equation for me again.)

All of this puts me in a peculiar situation. I’d love a smaller, lighter laptop. I’d love to get rid of the butterfly keyboard and Touch Bar, both of which make me more prone to errors and less efficient. But if I get this year’s model, I’m potentially getting the last laptop Apple makes before a once-in-a-generation leap.

One should never make purchasing decisions based on the rumours of future gear, but this aphorism is still true: there is never a good time to upgrade your kit.

Every year around this time, just before Apple unveils the latest versions of their operating systems at their annual developer conference, I like to re-evaluate whether or not I can use my iPad to get work done.

The iPad Pro is really a perfect portable machine. It’s small, insanely light, and easy to use in almost any situation — even tight plane seats. You can even get a cellular-equipped iPad if you want consistent and reliable internet when you’re away from a wifi connection. (And the new Magic Keyboard is a wonder.)

I really like using my iPad, and I always wish I could use it to get more work done. And every year, I ask the same question: can I use it as a laptop yet? Can it be my only portable device?

There are a lot of people I know, follow, and admire who use the iPad as their only machine, or as their dedicated portable device. I trust each of these people; they each represent a different class of person who is well-suited by the iPad’s strengths. They are writers, photographers, and entrepreneurs. The iPad is great for those people.

Writers are blessed with the iPad. There are more writing apps for the iPad than I could count. It is the best writing device I have ever used.

Photographers can almost complete their whole workflow on an iPad. With apps like Affinity Photo, Photoshop, and Lightroom on the iPad (and the USB‑C connection on the latest iPad Pros), it’s never been easier to use the iPad for photography[^1].

And for entrepreneurs, it’s easier than ever to use the iPad as your only computer. It’s great for project management and email, and the cellular model makes it easy to manage your business anywhere.

For many people, the iPad is all they’ll ever need. But I am a designer, photographer, and writer who codes websites. This adds several wrinkles to this setup.

Somehow, the iPad is ten years old, and there still isn’t a great web design app available. Sketch and Figma are noticeably absent from the App Store, and Adobe seems uninterested in porting XD to the iPad.

On that note, we don’t have any great print design apps either. InDesign does not exist for the iPad. (I use InDesign on my Macs all the time.) Its competition, as limited as it is, isn’t on the iPad either. Publication design and professional page layout on the iPad is a non-starter. 

Even if InDesign or its competition arrived on the iPad, those apps require so many other simultaneous computing contexts that I’m not sure an iPad experience would ever be great. (I often have Photoshop, Finder, Illustrator, and InDesign open at the same time, all working on the same publication.)

Speaking of Photoshop: while you can edit photos with an iPad, I’m not sure anybody should manage them with it. The only DAM available for photography on the iPad is Lightroom. If you use Capture One, DxO, or any other alternatives, you can’t manage your photo library on the iPad. I’m currently a Lightroom user, but I don’t want to be bound to Adobe because of my hardware. (I’ve been considering Capture One for some time now.)

This isn’t necessarily about avoiding Adobe’s subscription fees. I am happy to pay for the tools I use to make a living. But as a working professional, I don’t want one option from one company. Competition breeds creativity and makes all the tools better. Philosophically, I don’t want Adobe to ever be the only option.

Finally, it’s also difficult to get web development done on an iPad. It’s not impossible, but without a desktop-class web inspector, and without local virtual machines or code compilers, the job becomes an arduous series of gotchas. (And the ​“desktop-class Safari” on iPad works until it doesn’t. Without hover states or anything else we take for granted on a PC, the internet is a lot harder to use.)

Most people do not have jobs with requirements like mine. I’m sure many people can use an iPad every day for all their computing needs. And I’m sure there are some people in my situation who choose an iPad, and jump through its hurdles to use what is admittedly a more tactile device. 

But I just want to get work done. 

The real problems are edge cases. Many small tasks take much more effort on an iPad than they do a Mac. 

The other day, I made some quick edits to a Markdown document for a client. I needed to export the document as rich text and attach it to an email. This takes two clicks on my Mac; on an iPad, I had to fumble around for a few minutes until I got it done. 

My sister is a teacher. If she needs a new machine, she could very well use an iPad. However, if the website she uses to track student attendance and report grades doesn’t work on Safari in iPadOS, then it’s moot. She won’t install iCab to get the job done. She’ll be rightly frustrated, return the iPad, and get a Mac instead. 

I love my iPad. I genuinely like using it. I wrote this post as a way to talk myself into using the iPad more, but it slowly morphed. Here’s my basic problem, in a nutshell: if it’s faster to accomplish basic tasks with my laptop, I’d rather use that. I remain impressed by folks who use the iPad for their work every day, but for people like me, the iPad makes enough tradeoffs that I don’t think I could make the switch.

You can throw all the Magic Keyboards and Apple Pencils you want at this thing; it doesn’t make it any better at running the tools I need to get my job done.

[^1]: Because Lightroom CC relies on cloud storage, I’m not sure most professional photographers could rely on the iPad as their only computing device, but it can certainly be the mobile solution.

Hildegard and I have been practicing social distancing for just over a month now. It’s been a long, unusual trip, and I suspect we’re just getting started.

Most days feel exactly the same. Wake up, shower, eat breakfast, meditate, get to work. Work until lunch. Eat lunch. Work until it feels reasonable to stop working, but hopefully not much later than 5. Sometimes 8 though.

It feels more pertinent than ever to share some of what we’ve been doing for fun. Somebody else might need a way to pass the time.

Games

We’ve been playing more video games than usual. Animal Crossing has proven to be joyful escapism. I’m also enjoying Outer Worlds (highly recommended for fans of Fallout 3 and Fallout: New Vegas) and Paper Mario on the Gamecube (which we still have in our house).

On that note, if you have a PS4, Sony has made Uncharted: The Nathan Drake Collection and Journey free for the next few weeks. Get both if you haven’t already.

If getting stressed out from playing a difficult video game will help you unwind and forget about real-world stresses (as it does for me), Sekiro is currently on sale in the PlayStation store. Dark Souls and Bloodborne are obviously great choices too.

Movies and TV

This is a great time to start watching or re-watch Parks and Rec or The Office.

We are watching a lot of movies. 90s Disney classics have gone down well. We’ve also enjoyed Burning, Onward, and Darkest Hour.

If you are interested in documentaries, some of Gary Hustwit’s work — the man behind Helvetica and Rams — is available for free right now. Every week, a different film of his is available to stream for free on Vimeo. This week, it’s Workspace.

Exercise

Indoor workouts have been very important to our health and sanity. Hildegard is following along with virtual exercise/​dance classes, and my uncle kindly sent me some prison workouts. Not quite the same as the gym, but it’s something to get you moving.

I have discovered the best time to walk, at least in our part of the city, is at 8 in the morning. Nobody walks to work anymore, and the foot traffic is almost entirely construction. Similarly, the best time to get groceries is 10:30 in the morning — after the morning grocery rush, before the lunch break.

Separating work from home

This has been very difficult, even for me — and I’ve been working from home for nearly a decade! Without leaving the house to go for a walk at the end of the day, or to get groceries, my routine feels disjointed.

Most days, when the workday is done, I have a beer. It’s helped me acknowledge the working day is over, and it’s also been a great reliever of COVID-induced anxiety.

I was a little concerned about this for a while. I typically have one or two beers every week — not one or two a day. But then I recalled CJ Chilver’s blog post on this very topic:

This worked so well on my anxiety and made my family so much happier to be around me, that it started to get me worried: what if I made a habit of this and became dependent on this small vacation every day of my life? I went on to overthink it and talk for 10 minutes about the worst possible outcomes. [My therapist] stopped me. ​“Does it help your anxiety?” Yes. ​“Then have a drink.”

For some people, this is not a great solution. Obviously, don’t do this if alcohol is a problem area for you. But for me, a beer or two a day has worked wonders on my mental and emotional health.

You need to find a way to separate work and home, as best as you can. If you can’t (or don’t want to) have alcohol, try putting on shoes at 9 and taking them off at 5. Or work at a standing desk during the day — put your laptop on your iron board, if nothing else will do. Or do your indoor prison workout.

Or maybe just stare out the window for an hour, watch the sunset, and spend an extended period of time taking deep breaths.

After all, we’ve all got the time.

Note: This is only relevant if you are using a MacBook with a discrete graphics card. This includes modern 15” and 16” MacBook Pros. This will not work on any MacBook Air.

Now that I’m used to the consistently excellent performance of my iMac Pro, using my MacBook Pro is an exercise in frustration. It’s not just the terrible keyboard (although that’s a big part of it), it’s also the consistent feeling of lag I experience whenever I’m using the device.

Many people who read this will likely already know, but 15” and 16” MacBook Pros have two graphics cards. One is the integrated card, which is part of your machine’s regular CPU. The other is the discrete graphics card. The discrete graphics card is the machine’s isolated GPU; it runs separately from the onboard CPU. It’s much faster, runs hotter, and uses way more power.

After some googling, I figured out that my lag problem is related to the laptop’s integrated graphics card. You may experience similar issues with your machine; it’s not uncommon. The solution is to use the machine’s discrete graphics card instead.

Because the discrete GPU uses more energy, I don’t want to use it when I’m on battery power. It would quickly drain the battery. When I’m on the go, I want to optimize for long-lasting battery above almost all else.

But when I’m plugged in and charging the laptop, I always want to use the discrete graphics card. It makes the machine run much more smoothly, and removes any scrolling or keyboard or lag I experience in regular use.

That being said, there is no setting to change this in System Preferences. If you want better laptop performance while plugged in, and your laptop has a discrete GPU (i.e. a 15” or 16” MacBook Pro), then you need to use the command line.

Here’s what you want to type in the command line (in the Terminal app):

sudo pmset -c gpuswitch 1

You’ll be asked for your password (sudo tells the machine you’re the administrator), and then you’re done.

For people who are new to the command line, here’s an explainer of how this works.

This command adjusts the power management settings for the laptop’s chipset using something called pmset. You can adjust the power management settings while you’re on battery (pmset b), while you’re charging (pmset c), and all at once (pmset a).

The above command began with pmset c, which tells the machine you want to adjust power management settings for situations when you’re charging. Then, it tells the computer to always use the discrete GPU while charging (that’s what gpuswitch 1 does).

To reset this, you just need to type the following:

sudo pmset -c gpuswitch 2

gpuswitch 2 tells the machine to automatically switch between discrete and integrated graphics.

You can also run sudo pmset -c gpuswitch 0 if you want to always use the integrated graphics card while you’re plugged in.

You can modify any of these settings for different battery status situations. If you want to make these changes for situations when you’re running on battery power, any of the following will work (note we’ve just swapped pmset -c with pmset -b):

# Always use the integrated graphics card while running on battery power
sudo pmset -b gpuswitch 0

# Always use the discrete graphics card while running on battery power
sudo pmset -b gpuswitch 1

# Switch between discrete and integrated graphics cards automatically while running on battery power
sudo pmset -b gpuswitch 2

And if you want to control this setting globally, whether your laptop is plugged in or not, you just need to change pmset -b to pmset -c.

# Always use the integrated graphics card
sudo pmset -a gpuswitch 0

# Always use the discrete graphics card
sudo pmset -a gpuswitch 1

# Automatically switch between discrete and integrated graphics card (this is your laptop's default setting)
sudo pmset -a gpuswitch 2

And now you have finer control over your laptop’s power settings! If you want to make sure this is working, you can open Activity Monitor and view the Energy pane. The Graphics Card setting near the bottom of the window will tell you which card is operating.

(And thanks to Reddit user Freneboom, who gave me just enough information in this Reddit thread to figure all this out.)

In an effort to talk about anything other than the novel Coronavirus, I thought I’d write about other things that happened in the past week or so that interest me. 

First: Animal Crossing: New Horizons is our for Nintendo Switch. It’s very good. I haven’t played one since the GameCube, but this has a loop which feels more interesting. It’s also, obviously, a perfectly timed escapist video game. Stuck inside all day? Go escape to a deserted island, make some animal friends, and slowly build your own village. Delightful. 

Secondly, Apple released a couple new products this week. This might be a bad time to announce luxury computing devices, but nevertheless, it’s a great time to be an Apple fan. 

The new MacBook Air looks fantastic. It has the new keyboard from the 16” MacBook Pro, which is a very good thing, because that keyboard is great. And now you can get a quad-core MacBook Air! That’s a nice upgrade. Plus, the price dropped by hundreds of dollars. That’s not a typo. Literally hundreds. If you need a new laptop for some reason (maybe you’re working remotely for the first time), this new MacBook Air is a safe and easy recommendation. 

Apple also announced a new iPad Pro. It’s got a faster processor, two cameras, and LiDAR support for… some reason. But none of that matters, because you can buy a keyboard for it that suspends the iPad Pro in mid air. This lets you angle the iPad whichever direction you like and raises it closer to eye level. 

I mean, look at this picture. Is this not the coolest thing you’ve ever seen? The keyboard is $350 USD, so this picture might be the closest I ever get to owning one, but it’s undoubtedly an impressive engineering feat.

Also, the iPad will have mouse and trackpad support in an update coming out to everyone sometime in the next week or two. Once iOS 13.4 drops, set up any wireless trackpad or mouse you have around the house with the iPad and give it a go. It could bring the iPad one step closer to replacing your laptop. 

Thirdly, and this news is a little older than a week old, but it’s been a ​“slow” news week: Bill Gates stepped down from the board of directors at Microsoft. He hasn’t been CEO for a long time, but the man is a titan. This is the end of a pretty good run. He’s left to focus all his energies on humanitarian efforts. Good for him.

Finally, movie studios are releasing films that were currently in theatres digitally. This is obviously way ahead of their typical release plans, but the studios need to make money, and we all need something to watch. I’m looking forward to catching Pixar’s Onward, which will be available digitally in Canada on March 23^rd.

For many people, this is their first week of working from home. Hi! Welcome to the club. We eat cookies whenever we want, because we’re always taking breaks in our kitchen.

I’ve worked from home since 2012, so I’ve socially isolated myself for my whole career. This can be a tough adjustment, so I’ve written some tips and tricks. Hopefully these are helpful for you! And if you have any other tips I should add, or any questions, hit me up on Twitter.

1. Start the day with a standup call. If your team is used to hanging out in the office ever day, make a routine out of beginning the day with a quick 15-minute video call to catch up, say hi, and share what you’re all working on. Bonus points if you can avoid talking about the news, but since it weighs heavily on us all, don’t beat yourself up if it comes up.
2. This might be a good time to try Slack or Microsoft Teams, if you haven’t already. But if you do use them, establish some rules. Let people log off once in a while to get real work done. We can’t be productive if we’re staring at a chat window all day.
3. Start making lists. Small, approachable lists you can check off throughout the day will empower you and give you a sense of control and productivity. Trust me, this is helpful whether there’s a global crisis or not. We all need to feel like we’re accomplishing something.
4. Don’t check the news or your email first thing in the morning, if you can avoid it. That includes Twitter. These things are poison to your happiness, and your productivity.
5. You need to wear pants. Most of us are used to going to the work place and leaving work behind at the end of the day. That’s no longer the case. Now, you have to get into the work mode. So put on some pants. You can take them off when you’re done working. (I know some freelancers who wear shoes during the workday. If that helps you, don’t hesitate.)
6. You need a routine. Workplaces thrive off routine. Your work mode needs one. I have a breakfast routine, lunch routine, daily gym routine, and even a caffeine routine. It keeps me stable (although my gym routine is definitely in flux right now, and I’m feeling it).
7. Don’t take breaks at your laptop. You’ll stop associating your laptop with work, and then you’ll be on it all the time. 
8. Music! Try and listen to some music. Shawn Blanc wrote about this a few days ago with some recommendations for instrumental music that keeps you in the zone. I’ll add some to the list: every Trent Reznor & Atticus Ross soundtrack (especially The Social Network, The Vietnam War, and Before the Flood), 65daysofstatic, Jon Hopkins, Ludovici Einaudi, Ólafur Arnalds, Nils Frahm, and Miles Davis. I could go on for a while, but you’ll figure out what you like pretty quick. The music (or a white noise app) will help you concentrate and get in the zone. If you need them, this is a decent time to invest in a pair of noise-cancelling headphones. Here are some picks from The Wirecutter. (I bought the Anker headphones they recommend as their budget pick, and they’re okay, but not great. This is a category where you get what you pay for.)
9. Ergonomics are important for productivity — so get comfortable! I don’t necessarily think people should buy desks or chairs or anything — they can get wildly expensive. (But if you want a new chair or desk, I have so many thoughts!) If you need a bigger screen to be more productive, get a cheap monitor. If your laptop is too low on your table, get an external keyboard and pointing device and put your laptop on a stack of books. Don’t be afraid to budget a little bit of money to save yourself a lot of pain.
10. Don’t forget to stretch at the end of the day!

Good luck with your new workspace. If you have questions, let me know on Twitter. If I’m following my own instructions, you won’t hear back from me before the afternoon.

Over the past year, I have completely replaced my desk. At some point last summer, I realized that my entire office was designed based on assumptions I made ten years ago about the way I work — when I was still a university student. 

This is what my workspace looked like in 2014:

After my wife and I got married a year later, everything about the setup changed. This is what the desk looked like by 2018:

Apart from the desk itself (and its enormous size), the core philosophy of this setup hadn’t changed much. I plugged a laptop into the nicest monitor I could afford, on a second-hand desk gifted to me by my parents or my wife.

This was a workspace I designed when I was in university. Back then, I had to go to classes, or visit clients, every day of the week. Portability was of the utmost concern. The workspace itself was an afterthought.

This is my workspace today:

Obviously, a few things have changed.

The desk

The centrepiece of every workspace is the desk. I’ve wanted a sit/​stand desk for nearly five years now (I even mentioned it when I shared my setup with The Sweet Setup in 2018). After years of research, I settled on a Husky sit/​stand worktable from Home Depot¹. It’s supposed to be a carpentry workbench, but it’s exactly what I wanted for my work. 

This desk can hold up to 300 pounds. It’s remarkably stable at max height, and its maximum height is a good standing height for me. The manual crank is smooth and solid, and after several months, shows no signs of giving out. We added a half-decent cable management system to the desk, so you don’t have to see all the different pieces of the setup. Finally, I added a custom keyboard tray with parts from Amazon and this IKEA shelf². What more could you ask for?

You could ask for casters. Putting wheels on a desk probably sounds ridiculous, but I’ve quickly come to depend on this. A couple times every month, I end up doing small product shoots in my apartment. It’s very useful to be roll the desk out of the way and make more space in my office³.

I was particularly inspired by Jeff Sheldon’s post about his desktop stand, so I built something similar. It’s a lovely accent piece, and it stands 2” above the desk, which is just high enough to stow some notebooks, archive and backup drives, and my iPad Pro.

As a creative professional, your workspace should be no different from a master carpenter’s workshop. It should put everything you need within arm’s reach. It should be easy to use, but specifically customized to your liking. It should be as big as it needs to be, but not too big, lest it gets unwieldy. 

But mostly, a creative workspace should be reliable. No matter what situation the creative professional finds herself in, she should be able to rely on her workspace to get her through it.

That’s what this desk has become for me. It’s a place of solace — a place where, no matter how hard the work gets, I can be comfortable and productive. The desk lets me work how and where I want to work, and when it’s time to get down to business, it gets out of my way.

The computer

The same is true of the computer. Some time in the last year, I realized I had the wrong computer setup for me. I was tired of hearing my laptop fans spin up anytime I compiled any intensive code, opened Lightroom, or started adding a lot of layers in Photoshop.

After experimenting with the 16” MacBook Pro, I finally gave in. I returned the laptop and ordered a base spec iMac Pro with 2tb of storage.

I love this machine. It’s whisper quiet (I have no idea what the fans sound like), it never fails, and the keyboard always works. (In fact, as time goes on, the keyboard is getting more broken in, and becoming even nicer to type on.)

There’s not much to say about the iMac Pro that hasn’t already been said by smarter and more cogent people. It’s the best Mac for people who need power, but don’t require the amount of power the Mac Pro provides. That’s certainly been true in my usage.

To put it simply, the computer is a lot like the desk: it’s reliable, powerful, and does everything I need it to do. 

The best kind of technology is the kind you don’t really think about — the sort of technology that just works. More or less, that’s been the iMac Pro for me.

I like tools that are unobtrusive. I like tools that get out of the way and let me work without restrictions on my creativity. If you put me at this desk with a cup of coffee, I’m a pretty happy guy.

First things first: there’s a new project in my portfolio. The client is Wycliffe College, a seminary on the University of Toronto campus who hired me to be their official photographer for the 2019 – 2020 school year. 

The case study is a photo-heavy page with a fresh, magazine-inspired gallery design and loads of animations. When I say it’s photo-heavy, I’m not joking: there are 36 images in the main body of the page, and nearly 40 images if you include the ​“Related Projects” footer, website logo, and favicons.

Here’s a sped-up, low-res .gif of what it looked like before the design update. As you can see, the images are static, perfectly centred, and mildly boring to scroll.

And here’s what it looks like today (again, as a low-resolution and sped-up .gif). This design is more fun to look at and more fun to scroll — although images are larger, and scrolling takes longer as a result.

(To check it out in its high-resolution glory, simply visit the case study on the biggest screen you have.)

I’m really pleased with how this case study has turned out.

Of course, you can’t just throw three dozen high-resolution images on a website and call it a day. That was the first thing I tried, and it was immediately obvious that my new portfolio was ill-suited for displaying photos. I wanted photo grids, and instead I got a plain, vertical list of photo after photo.

I figured I had to make three things happen before I could share this in front of the world:

1. A fresh design, especially on large screens. Scrolling through a long list of photos that perfectly line up with each other is kind of boring. 
2. Animations. Scrolling through a list of static images felt lifeless immediately. The obvious answer is to animate them, to keep them interesting. 
3. Finally, it takes a lot of bandwidth to quickly load that many images. So you need a way to cache them, and a way to load them only when they’re needed — just before they’re visible on screen. My website already does this, but there was obvious room for improvement. 

I thought it fun to share how I solved all these problems. 

A fresh design

The fresh design was the last thing to come together, even though it’s the first thing on the list. I started by adding different image sizes and galleries, but, when I started testing the case study, it became clear that wouldn’t be enough.

Eventually, the problem became clear to me. On large screens (like, 13” laptops and beyond), there was a lot of space to the left of the images. It felt like the margins were too large, and I’d missed an opportunity.

Fixing that was easy. I added a ​“left-aligned” CSS class to images and galleries that I wanted to hang to the left. (I added this to the backend of the site, so I could do it on the fly. This was easy in Craft, and would still be relatively simple in many other CMSes. But you could very easily just do it in raw HTML.)

The left-aligned code is pretty simple. Here’s my SCSS code, if you’re interested:

.image-grids.wide.left-aligned, figure.wide.left-aligned {
	@media screen and (min-width:1400px){
		margin-right:calc((100vw - 1200px) / 2);
		// This is the inverse of the margin-left calc applies for regular .image-grids and wide right-aligned figures
		margin-left:0;
	}

	@media screen and (min-width:2000px){
		margin-left:calc(((100vw - 1200px) / 2) - 367px);
		// line up the images on the grid. This looks messy, but it calculates math based on the padding of image grids with three images in them.
	}
}

It just tells the browser to push some images further left than others. (Also, I use ​“calc” a lot, because CSS is basically just math. I’m sure there’s room for improvement here.)

This layout should be obvious if you’re on any laptop or desktop that is more than 1400px wide (For content: 13” MacBook Pros and MacBook Airs have defaulted to a higher resolution than this for years, but most iPads are still not this high-resolution.)

Animating images and elements

The new design doesn’t solve everything on its own. Even though this is just a long list of static images, it needed some sort of motion to come to life. So it was time to animate the images.

I know a few people who say you should make all your own CSS animations. I think you should know how to write key frames, but for the most part, a decent animation library will get you there. 

I really like Animate on Scroll (AOS). AOS is clever: it uses vanilla Javascript instead of jQuery (which I love), you have an enormous amount of control, and you can easily code your own animations if you need to. It’s also pretty lightweight. Oh, and the animations trigger only once the animated element appears in the browser viewport.

Adding AOS to your site is as easy as you’d expect: add the script, init the library in the <footer> of your document, and add the CSS to your working files. But you can really optimize it for performance. 

I load the library and initiate the script only on the pages that require it. I’ve also adjusted the script initiation, so animations only begin after my images have loaded (and not on page load). If you’re curious, here’s what my configuration looks like:

AOS.init({
	  // Global settings:
	  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
	  startEvent: 'lazybeforeunveil', // name of the event dispatched on the document, that AOS should initialize on
	  initClassName: 'aos-init', // class applied after initialization
	  animatedClassName: 'aos-animate', // class applied on animation
	  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
	  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
	  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
	  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
	  
	  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
	  offset: 120, // offset (in px) from the original trigger point
	  delay: 0, // values from 0 to 3000, with step 50ms
	  duration: 1000, // values from 0 to 3000, with step 50ms
	  easing: 'ease', // default easing for AOS animations
	  once: false, // whether animation should happen only once - while scrolling down
	  mirror: false, // whether elements should animate out while scrolling past them
	  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});

Most of these settings are default, but the key change I made was to the startEvent. Typically, the start event is DOMContentLoaded, which loads animations as soon as the page is done loading. That was too soon for me. lazybeforeunveil is the event that my lazy loading plugin declares just before loading images into the viewport. Not only did this speed up page load times, but using lazybeforeunveil instead of DOMContentLoaded made scrolling feel much more responsive.

I’ve added animations to most of the images on my portfolio. You can see them in action in the new case study. AOS is such a nice library that I plan to use it on every project that calls for animations in the future.

Optimizing and lazy loading images

My website has optimized images with <scrset> for years, but I ran into a bug with my particular setup. For whatever reason, browsers would load images before they should. (I verified this by using the Network tool in Chrome, Safari, and Firefox, so it wasn’t just a browser bug.) At page load, instead of loading just the hero image, small versions of every image would get loaded before the DOM was visible. I had to fix this bug before putting up a photographic case study.

My portfolio was the first site I built with Craft. One of the things I love about Craft is the way it handles images: you can declare a focal point, resize and crop images on the fly, and create vastly different looking templates based on media queries and <picture> tags.

To make all this happen, I use a plugin called Imager by André Elvan. Imager generally makes this easy to use and accessible within your Craft templates. If you’re like me, and you need to follow a guide to get started, Andrew Welch wrote one that I found incredibly handy.

Andrew guides you (no pun intended) through the basics, and also teaches you how to set up basic lazy loading (with lazysizes, which I’ve quite liked). The problem is that, as of late 2019/​early 2020, the image source tag in that demo doesn’t work properly out of the box.

Here’s the sample code from Andrew Welch:

<img class="scale-with-grid lazyload"
     src="{{ craft.imager.base64Pixel(2,1) }}"
     data-sizes="100vw"
     data-srcset="{{ craft.imager.srcset(transformedImages) }}"
     alt="{{ image.title }}">

Here’s are the things unique to my setup in this code:

1. The lazyload class initiates lazysizes.js.
2. craft.imageer.srcset(transformedImages) fetches an array of images I had transformed with Imager. This just means I can automate asset creation in Craft, which is handy for dynamic image sizes.
3. craft.imager.base64Pixel(2,1) is creating an SVG that’s 2 pixels wide and 1 pixel tall. 

Here was my problem: craft.imager.bas64Pixel(2,1) wasn’t creating an SVG. Which is why the browsers were (helpfully) grabbing images from srcset on page load.

After a lot of trial and error, I carefully read through the README file on Github for Imager.¹ It turns out that base64(width,height) is deprecated. There was a new function that I needed to use in its place: placeholder(width,height). (Width and height can be whatever values you want, but as you’ll see, you can get clever with it.)

Using the same example variables as above, the new code looks something like this:

<img class="lazyload"
	src="{{ craft.imager.placeholder({ 
		width: transformedImages[1].width, 
		height: transformedImages[1].height 
	}) }}"
	data-sizes="100vw"
	data-srcset="{{ craft.imager.srcset(transformedImages) }}" />

That placeholder line is actually doing some very cool stuff. The transparent SVG it generates is the same height and width as the image it’s lazy loading. This prevents any scroll jankiness that might occur as the reader scrolls up and down, since image placeholders are the same size as the images themselves.

This, combined with the caching I have set up on Craft, makes the website blazingly fast — even faster than it already was (and it was pretty quick). The new case study, which has over 10mb of images on it, loads in less than a second.²

(As an aside: this new code helped me optimize the website and remove three other template files for galleries and images. I love this. There’s nothing better than deleting files.)

If any of this piqued your interest, I’d love it if you checked out the photos or visited my portfolio.