Skip to content

Pat Dryburgh

Responsive design turns 10 years old today! The originator of the concept, Ethan Marcotte, has written the story of how the concept of Responsive Design came to be and how it eventually led to one of the greatest sea changes in web design since the introduction of Cascading Style Sheets.

The original article on Responsive Design by Ethan came out the same month I quit my first design job in order to freelance full time. It was an exciting time in the industry with so much to learn and so many interesting challenges to tackle.

I took to Responsive Design immediately. Unlike designers who came from the world of print design, I considered myself a “native web designer”, which basically meant I could code anything I designed. Just a few months prior, Meagan Fisher had reintroduced the world to the idea of designing in the browser rather than starting in Photoshop, which was tailor-made for designing responsive websites.

I can’t at the moment count the number of responsive websites I’ve designed since Ethan first published that article, but I am forever grateful to him, Meagan, and everyone else in this community who have taught me everything I know.

Permalink for post published on May 25, 2020 at 10:18:58 AM

In times of despair, it is important for people to have the ability to communicate in order to avoid adding isolation to the mix. In modern times, one of our primary methods of communicating emotion is through the use of Emojis.

I wasn’t surprised to find that there is currently only one Emoji that includes a visible medical face mask. However, I was sad to see that the expression on the faces of every version of this Emoji looked rather gloomy.

No doubt when this Emoji was first introduced, face masks in Western society were primarily worn by professionals or those under medical care. However, we have since joined our brothers and sisters in places where medical face masks are worn by everyone and as some people have pointed out, this makes communicating emotions through facial expressions really tough.

Given this, I think we need more expressive face-mask Emojis. I think a suite of Emojis expressing alternate emotions through a face mask would allow us a small opportunity to show solidarity with one another as we brave this new world.

Below is my attempt at melding Apple’s current Face With Medical Mask Emoji (top left) with a few of their other Emojis to create my proposal for new face-mask Emojis. I’m sure a better artist could come up with more effective examples; I simply hope to illustrate the idea.

Original 'Face With Medical Mask' Emoji on the left, proposed 'Smiling Face with Medical Mask' on the right

I’m probably breaking some sort of copyright by doing this, but who cares? Come at me, Tim Apple.

Permalink for post published on May 20, 2020 at 8:00:00 AM

I guess by the end of the year I won’t be listening to The Joe Rogan Experience. As John Gruber reports, Joe Rogan has announced his decision to remove his podcast from the open web and baracade it behind a walled garden through an exclusive license with Spotify.

Of course we do not know the specifics of the deal, however I would assume that Spotify remain the exclusive licensee of any episode of The Joe Rogan Experience recorded under the deal in perpetuity, meaning it will now be impossible to share any content generated under this deal with people outside of Spotify’s distribution.

And for those of us who don’t want to install Spotify? Too bad. Even though Spotify will force targeted ads at me? Too bad. Even though, according to their privacy policy, they can hold my data indefinitely? Look, someone’s gotta fund the move to Texas.

It’s a strange decision because of the discrepency between Joe’s concerns about contact tracing (00:29:40) when you consider Spotify’s privacy practices. As Joe might put it:

Give up a little bit of your privacy, give up a little bit of your freedom, and I’ll give you a show.

I’ve been a fan of The Joe Rogan Experience for several years and I have learned a lot. I don’t agree with everything said on the show, but if I only listened to things I completely agreed with, my podcast feed would be empty. However, his unfiltered conversations with scientists, anthropologists, historians, astro physicists, athletes, coaches, entertainers, entrepreneurs, and even politicians have expanded the worldview of myself and countless others. Listening to the show has been educational, inspirational, and more often than not, fuckin’ hilarious.

And soon, it will be missed.

Permalink for post published on May 19, 2020 at 6:40:00 PM

Disclaimer: I purchased shares in Slack days after their IPO, when the price was at its highest. Currently, the stock is worth ~78% of what I paid. I feel like this blog post isn’t likely to cause any real change in the value of the 9 shares I own, but I am probably obligated to let you know this before I continue.

Slack recently updated their iPhone app and it looks really nice. Where before the menu for viewing your channels was always set to white text on a dark background regardless of your device’s Appearance settings, now every screen in the app matches the Appearance setting of Light or Dark. It’s a nice refinement that I think makes Slack feel more at home on the iPhone.

The update also introduces a new tab bar along the bottom of the screen that improves how you access your conversations. The tab bar includes:

  • Home, which lists all of your channels;
  • DMs, which shows just your direct messages with one or more people;
  • Mentions, which shows you all of the messages in which you were mentioned;
  • You, where you can update your Status and update other aspects of your Slack profile.

All of this feels really great, however I have one complaint that reveals the designers at Slack are not reading my blog:

Slack’s new first-run experience sucks.

I wish I had taken screenshots, but I couldn’t. Why? Because I opened the new version of Slack in an attempt to join a meeting with my client that was just about to begin. However instead of having the freedom to use the application, I was forced to quickly skim my way through a first-use tutorial instructing me to swipe from one screen to the next in order to appease their desire to show me their new-fangled navigation design.

Maybe there was a “Skip” button I missed. Regardless, just like Brent Simmons predicted, I don’t remember a goddamn thing Slack was trying to teach me.

As it turns out, I was unknowingly 5 minutes early to my meeting, which ultimately got rescheduled, so all my rushing about was for naught. But, do you see where the issue is? Instead of helping me, Slack impeded my ability to do what I needed to do in the moment I needed to do it.

As I look at the app now, there’s only one thing I see that I feel isn’t quite as discoverable as the rest: the menu for navigating between Slack organizations (it’s your organization’s icon in the top left of the screen). I don’t know the numbers on this, but my assumption would be that the majority of Slack users belong to a single organization, so making this less prominent than the other areas of the app is A-ok by me.

Other than that, I don’t quite get why Slack felt the need to include this first-run tutorial.

It’s easy to criticize from a distance, though I imagine it’s pretty clear that despite this complaint, I still love Slack. I think the people that work there are among the brightest and most compassionate in the industry.

My only intention for bringing this to light is because I think it is a perfect example of how easy it is to slap a first-run tutorial into an app without fully thinking through how it will impact its users. Far worse things have come out of tech companies in the last decade and this is no where near that level. But, as my friend Shawn once wrote, “delight is in the details.”

My work is decidedly not “essential” (a realization I had well before this pandemic, though its truth has certainly been deepened and reenforced), but I do believe it is important. I strive to design and develop systems that are respectful of the user and accessible to everyone. I don’t always meet my ideals and I’ve made my share of mistakes. We all do. The beauty of the Internet and in particular of independent personal blogs is that we can all learn from one another’s mistakes and together find a better path forward.

Permalink for post published on May 19, 2020 at 12:51:00 PM

Here’s me: when I download an app with a first-run tutorial, I try to find a way to short-circuit it and get to the actual app. If I can’t, I just race through it, knowing I wouldn’t have remembered any of it anyway.

Either I can figure out the app later or I can’t.

I’m with Brent. If a user interface requires a first-run tutorial to use, it’s broken. Good documentation can absolutely enhance a user’s knowledge and experience of an app, but the primary actions a user can take to achieve their desired outcome need to be discoverable and understandable without requiring additional written instruction.

A few times in my career, a product manager has put forward, during a review of my design work, the idea of using a tutorial to explain the interface I’ve designed. I think they were trying to do two things with this idea:

  1. Soften the blow to my ego (this tends to happen early in my relationship with a product manager, at which point I make sure that it’s clear I don’t take criticism of my design work personally), and
  2. Find a way to still meet a deadline by avoiding the time it would take to solve the design problems.

My response has been that if the design can’t be understood without a tutorial, then it needs to be redone. (That, and the wisdom an angel investor once told me, “deadlines aren’t promises.”) User testing is tremendously helpful in this regard. It’s an opportunity to hear out loud the questions your users are thinking when they first open your app and, most importantly, to then respond with changes to the interface before that’s the impression all future users have of your app’s design.

It’s like how a joke sucks if it’s only funny after you explain it. A good design allows a user to discover on their own the wonderful magic a great app can bring into their life.

Permalink for post published on May 9, 2020 at 12:51:03 PM

I wanted to get an understanding of what opening meant to businesses around Dallas. Were they opening? What precautions were they taking? Were employees in safe environments? And bigger picture, I wanted to know if these are places that I would feel safe taking my family to.

The numbers reported by Mark’s research are as fascinating as they are hair curling. Of the roughly 1,000 businesses surveyed, “only 36% of businesses chose to open on the opening weekend,” which I found encouraging. “Wow, Dallas really approached this responsibly and only a little over a third of businesses felt they could manage opening safely,” I thought. I continued reading.

Of those who chose to open “96% of businesses were non-compliant across all mandatory protocols and all locations.” Mark breaks this down further by explaining that only ~1/3 businesses were 50% compliant and of the protocols, “~60% of mandatory protocols were followed and ~54% of all suggested protocols were followed.”

I was encouraged when I read the first stat that only 36% of businesses opened as I assumed that meant only businesses who planned to comply with the mandatory protocols would be willing to risk opening and the remaining 64% were simply unable to open safely. However the stats pertaining to compliance suggest that when businesses in Canada open up, we cannot be assured that they are doing so because they are ready to implement protocols to protect their customers. It remains our individual responsibility to observe the appropriate protocols when participating in public commerce.

All of this said, I do not think Dallas or any other area was wrong to open. Businesses who failed to comply with protocols during opening weekend will surely improve now that we have the data. For the sake of employees and customers, I hope they are able to make those improvements quickly.

Permalink for post published on May 7, 2020 at 7:25:18 PM

Two new Carly Thomas songs are available to download on bandcamp today. I first heard Lions Gate when Carly crashed at my apartment when her cross-country tour-by-train made its way to British Columbia. Framed and hanging on my wall is a scrap piece of cardboard Carly used to refresh her memory of the song’s lyrics. I got to play this song with her on the BC leg of the tour which was a hoot and a half (ask me about the goat farm we played at).

Into the Rain was first released as a video for the CBC Searchlight competition. I love the muted trumpets in this one.

Permalink for post published on May 1, 2020 at 7:02:38 PM

I recorded a cover of Shapes by The Long Winters. I’m a big fan of the band’s singer and songwriter, John Roderick, who not only sings the coda to my favourite song of all time, Transatlanticism by Death Cab for Cutie, but also happens to be one half of my favourite podcast, Roderick on the Line.

Anyway, this acoustic rendition of Shapes I first heard on a bootleg recording of a show he played with Jonathan Coulton dubbed Live at the Double Door. In it, John takes a guitar lick from the original studio recording’s intro that requires picking, hammer-ons, and pull-offs to achieve and uses it as a melodic rhythm over which he sings. It took me 3 days of practice to finally nail signing over this intricate guitar pattern and I’m really proud of the outcome.

I’m planning to do some more of this. Follow me on Instagram to be notified of new recordings right away.

Permalink for post published on May 1, 2020 at 9:00:00 AM

I’ve pushed a few minor updates to my site this week.

  1. I played around with the inertia of the scrolling animation on the homepage to behave better on larger screens.
  2. I’ve worked out how to group posts by day and to sort posts within a day from oldest-to-newest (while days continue to be presented newest-to-oldest). The intention with this change is to make reading through a day’s posts feel more natural, as often on days when I do publish more than one post, they are often connected in some way. If there’s interest, I might write up a post about how I accomplished this.
  3. I’ve refined how I’m handling dark mode on the site. Instead of creating separate style sheets for each theme and swapping out the link rel="stylesheet" tag for each theme, I’m now using CSS Variables and setting a data-theme attribute on the HTML element. Switching between themes now feels instantaneous.
  4. I’ve removed the lazy loading for images. While lazy loading makes for faster loading speeds, it also means that people who don’t have JavaScript enabled can’t see any images. I decided the minor cost of speed is worth the improvement to accessibility.
  5. Less important to you than me, I cut the time it takes for this site to build by more than 50%. I did this by removing some unused code and reducing the number of include tags in the default.html template that is used to generate every single page of this site. What once took anywhere from 20–30 seconds to build is now taking 8–9 seconds which makes iterating and publishing new changes so much more enjoyable.

On an unrelated note, this post and the post from earlier today were both scheduled using Alex Johnson’s excellent Heroku Scheduler job for scheduling Jekyll posts. Unfortunately, I’m still using my multi-app setup for publishing posts from my phone though I do intend to dig into IndieKit by Paul Robert Loyd which I was introduced to by Boris as a way of setting up a Micropub endpoint on Heroku. Still have to work my way through some configuration before that’s ready to go.

Permalink for post published on Apr 10, 2020 at 2:56:42 PM

If you’re into fantasy and/or music and haven’t watched the visual experience for Mappe Of’s The Isle of Ailynn, I recommend you do so. Once you have, go watch this video of Tom, Edward, and Kristyn discussing the painstaking process and the technical limitations they faced during the creation and filming of the production. There are some technical difficulties at the beginning of this video, so the link should take you to where the action begins.

Permalink for post published on Apr 10, 2020 at 9:00:25 AM

I’m glad I deactivated my Twitter and Facebook accounts back in early March. According to the Hedometer which tracks emotional sentiment across Twitter, the COVID-19 pandemic has brought Twitter’s happiness to an all-time low. As Jason Kottke writes:

The day they identify as the unhappiest is March 12, 2020, which is the day after Americans finally took Covid-19 seriously. Within the space of a few hours on March 11, the NBA announced it was suspending its season, Tom Hanks revealed that he and his wife Rita Wilson had Covid-19, the WHO declared Covid-19 a pandemic, Donald Trump went on primetime TV to address the nation, and the DJIA closed down 1400 points (it would drop another 2350 points on Mar 12).

March 12 was a day or two after I deactivated my accounts, and yet I remained informed of all of this news through national, international, and local media sources via the Apple News app on my phone. I’ve kept in touch with my family and friends through various messaging apps. I’ve maintained my Instagram account and my Reddit account and am obviously still posting to my blog. For the most part, no one but me has noticed the change.

While I’m deeply concerned about how this virus affects the world, I am feeling less anxious than I expected when the words coronavirus and COVID-19 first entered public consciousness. I suspect this is because unlike the apps I continue to use, Twitter and Facebook are optimized to reward constant interaction and attention with all those tiny hits of dopamine, which in a time like this can open you up to repeated exposure to a steady stream of unfiltered negativity.

Not to say that I feel awesome. Just a little less anxious than I could be.

Permalink for post published on Apr 8, 2020 at 9:29:36 AM

When I read Manton Reece’s announcement that the Micro.blog apps would be swapping out Avenir for default system fonts, I wanted to see what a redesigned landing page designed with Apple’s San Francisco font would look like. This design was not solicited by nor has it been shown to anyone on the Micro.blog team.

The idea for the photo in the header would be to solicit photos of Micro.blog community members holding a device displaying their blog. The photo would change on each page refresh to promote the diversity that makes up the Micro.blog community.

The rest of the content has been left as-is or with minimal editing for clarity and effect.

Would love to hear what you think 😊

Unsolicited Homepage Design Exploration for Micro.blog
Unsolicited Homepage Design Exploration for Micro.blog
Permalink for post published on Mar 29, 2020 at 2:56:29 PM

Mappe Of is an avant-folk artist who last year released a concept album called The Isle of Ailynn. To explore the world that had been created, visual artist Kristyn Watterworth and filmmaker Edward Platero spent months painting and filming Ailynn in Virtual Reality. Every blade of grass, every leaf, and every creature on and around the island was drawn in VR using Google Tilt Brush.

The result of this undertaking is this album-long, forty-four minute music video that is the most breathtaking thing you will see today.

Permalink for post published on Mar 28, 2020 at 7:15:36 PM

Jon Fingas writing for Engadget:

[Github’s new mobile app] unsurprisingly won’t let you edit code…

I’m surprised. Very surprised, in fact. I’ve been using Working Copy—a git client for iOS—since 2017 to publish blog posts from my iPhone. It saves files, has a built-in code editor, and commits new code that then triggers a rebuild of this site on Github Pages.

When I first heard Github was releasing a mobile app, I was excited to see how it compared to Working Copy. Now that I know it doesn’t let you commit code, I see no reason to even download it.

Permalink for post published on Mar 17, 2020 at 1:36:30 PM