Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/revoltpuppy/revoltpuppy.com/textpattern/lib/constants.php on line 136
Revolt Puppy Design & Rebellion by Justin McDowell tag:revoltpuppy.com,2005:9fae61151c311cd9202b988ee453d127 Textpattern 2019-05-07T05:01:02Z Justin McDowell ragdoll@revoltpuppy.com http://revoltpuppy.com/ Justin McDowell 2019-04-09T02:31:03Z 2019-05-07T04:52:54Z The Evergreen State College (2012–Present) tag:revoltpuppy.com,2019-04-08:9fae61151c311cd9202b988ee453d127/e8925cc30758f4d6f540ea9bbe358dc2

The Evergreen State College is located in Olympia, Washington and has a student body of ~4000. Located on the shores of the Puget Sound in an old growth forest, it has championed alternative education models, social justice, and personal expression since its establishment in 1967.

I’ve been the web designer for the college from 2012 until present. I currently lead the visual design and front-end development of the school’s primary website, as well as a separate user experience team that works on internal web applications for current students, faculty, and staff.

Role: Web Designer, 2012–present
Duties:
  • responsive design
  • HTML
  • CSS
  • JS
  • usability studies
  • user research
  • analysis
  • branding
  • content management
  • presenting
Director: Susan Bustetter
Developer: Elaine Nelson
Photographer: Shauna Bittle
Screenshot of Evergreen’s homepage that I designed.

Design

The Problem

New student enrollment was down several years in a row and the school was looking to market to prospective students in better ways. The primary website was past-due for a design that could take advantage of new technology, and a separate admissions website forced prospective students to navigate between two disparate designs with similar, duplicated content and different navigation menus.

The Process

In redesigning the website, I wanted to achieve the following goals:

  • Improve prospective student engagement and understanding in measurable ways.
  • Unite the marketing under a single, cohesive design.
  • Address the growing mobile market.

Early sketches for the mobile version of the website, chronologically from right to left.

A mobile version of the site.

Mobile First

I decided to solve the mobile problem first. If the site could work on a tiny, limited mobile device, the content would, at the bare minimum, be readable on a big desktop machine.

To focus our content, I removed every significant chunk of content that didn’t relate to prospective students. Those secondary audiences, like current students or faculty, are captive audiences that can be trained where to find help and resources. By contrast, prospective students need to understand the site without any coaching at all. Therefore, everything on the homepage needed to be relevant to their needs.

My research was a combination of live usability studies, surveys of prospective students, card sorting, and analytics.

A Single Site Design

Creating a single site from the two original designs wasn’t just a matter of dumping all the pages into one template. In the old version of the site, all of the effective marketing was funneled away from prospective students. In fact, many students weren’t seeing the content that was meant for them until after they were ready to commit to applying, because it was buried in unlikely places.

Before

Disparate designs and navigations for different sections made using the site frustrating. Note the headers and footers, in particular.

To address this issue, I moved all of the valuable marketing information to the homepage and to other pages linked from the primary navigation. Even so, after a content strategy audit, we rewrote most of the existing content to be more clear and focused. What remained was simplified and reorganized.

A More Useful Experience

Determining how to make the site better for students required understanding what they expect out of their schooling. I sussed out this information in interviews with students and in discussions with teams throughout the college, including the Admissions and Advising departments. I learned that this audience wants a quality education, an understanding of the costs, a good location, and opportunities for fun outside of class.

Creating a strong primary navigation was a big challenge, and one of my personal goals was to avoid using a “hamburger” menu, which, research shows, obfuscates wayfinding.

To address these needs, I streamlined the information architecture of the header and main navigation, added a call-to-action with a new tagline to get students interested in Evergreen’s unique academics, increased visibility of the visit request form, and gathered together and wrote new content to form a new section called Campus Life.

I looked at the analytics and set benchmarks to determine how successful I was in reaching our goals.

After

Disparate designs and navigations for different sections made using the site frustrating. Note the headers and footers, in particular.

The Outcome

This long process provided many new challenges, but since going live with the updates, the school has experienced success with the new site.

  • Mobile usage has climbed steadily month-over-month, starting at 4% and now averaging over 30% and reaching as high as 50% on key days like graduation and new student orientation.

  • Five streamlined primary navigation links transport students around to information they need. Regular usability studies continue to validate their usefulness. I also successfully avoided the hamburger menu.

  • Likewise, the singular design has noticeably decreased confusion for prospective students, as observed during live usability studies.

  • Finally, the rate of decline in enrollment fell, and the school attracted 100 more incoming freshmen the following year. In addition, the number of applicants has grown year-over-year.

Development

The Problem

The front-end code was falling behind the times and the site was failing to take advantage of new technology. The style had been developed in a single, disorganized CSS file. It was difficult to know where certain styles were kept, what properties were being used, what selectors had been deprecated, and what patterns were intended in the markup.

The Process

When working on the front-end, I continue to stay up to date on trends and innovations in development. New technology and changes in best practices have helped me provide more flexible layouts, better organized code, and clear documentation of my solutions.

Innovation

The most visible part of modernizing our codebase was to incorporate new and previously unused web specifications into the design. One of the best examples is the flexbox specification. As it neared maturity, I began to incorporate it into the existing design while still providing fallbacks for older browsers—your basic progressive enhancement.

When support for the flexbox specification became widely available, we had everything already in place. Our visitors who were using the latest technology automatically saw improvements in our design that were previously not possible without flexbox.

A sample section of my Sass, showing a table of contents, deprecated styles, context hints, and property sorting. Zoom in.

Organization

At the same time, I began layering on Sass for richer development possibilities, and optimized workflow tasks with Grunt.

I used Sass to break down our monolithic CSS file into smaller chunks, which I then organized into a logical folder structure, guided by SMACSS principles.

Furthermore, I’ve organized the CSS properties themselves in related groups, such as layout, typography, decoration, and behavior. This organization is enforced with a linting task that runs when the Sass is compiled. The result is that anyone can add new CSS with flawless consistency.

I use Grunt to further process the Sass and compile it into different formats, including an expanded version for debugging, and a minified version for sending to the end user in as few bytes as possible.

Documentation

The last thing I did was document how to use this conglomeration of tools and their resulting output. I have incorporated a table of contents into the beginning of the Sass code file, a pattern that I continued to repeat through every partial. When necessary, old CSS selectors are marked as deprecated with a comment, so that they will continue to be supported until we’re confident they’re not needed any more. I note the hacks and workarounds and which browser requires them, so that when we stop supporting that browser, we know which properties can be safely excised.

In some cases, I’ve even used ASCII art to illustrate exactly how a layout pattern is supposed to work.

ASCII art depicts generally how a pattern will render on the screen.

The Outcome

Ultimately, this has had a number of positive effects.

  • By incorporating new technology with progressive enhancement in mind, I have kept the site up to date with the latest tools and best practices without leaving behind older browsers.

  • A streamlined workflow now provides a gradually more granular system of organization, speeding development and aiding collaboration:

    • It’s easier to intuitively know where a selector might be tucked away according to the SMACSS-based file structure.

    • A comprehensive table of contents guides developers further to the correct place in each individual partial.

    • A developer-friendly version of the compiled stylesheet and consistently organized properties make debugging a breeze.

  • Thorough documentation has allowed other developers to collaborate more easily and helps keep the whole project future-proof and ready to hand off to the next designer, should my time on this project come to an end.

Marketing

The Problem

Evergreen delivers an exceptional academic experience, and does so in a way that encourages exploration and drawing connections between disparate subjects. This unique selling point was, however, missing entirely from the school’s homepage. There was a nice selection of hero images at the top of the page, but there was no call-to-action, nor was the key imagery even clickable at all. This resulted in a lot of dead space taking up valuable real estate that wasn’t living up to its potential. Additionally, there was a distinct lack of personality and school spirit present within the pages.

The Process

My main goals in selling the college to prospective students were twofold:

  • Find the hook, those things that make it attractive. From there, we could begin to show how an Evergreen education benefits students in a way that other colleges can’t.
  • Authentically represent and celebrate Evergreen’s unique culture by drawing on its undeniably offbeat heritage.

Working with the marketing team, including the school’s photographer, I worked to increase visibility of key marketing hooks on the website to complement other marketing materials.

Lettering exploration featuring a shortened take on the slogan.

A Compelling Call to Action

Instead of simply showing photos, I dedicated the hero image area to a singular call to action: learn more about Evergreen’s unique academics. I figured if we could get people interested in the school’s academics, we could get them to visit, and after that, to apply. This meant devising a compelling statement to entice prospective students to click through. We ran a split test with four contributed statements built around my initial idea of “going beyond majors, classes, and grades.” My own contribution ultimately won, and surveys of new students further backed up their excitement about the messaging:

Go beyond majors, classes, and grades, and experience your education the way you imagine.

Geo-what?

Living up to its unique selling points, Evergreen also chose a unique mascot: the geoduck. The bizarre-looking mollusk, called Speedy, was so under-represented at the school that I didn’t even realize Evergreen had a mascot until after I had started on the job. When I went searching for more information there was only a dull page that briefly covered a few of the facts about the shellfish, but nothing about Speedy, nor Evergreen’s history with the mascot.

The lack of information about our peculiar mascot was a missed opportunity, by not shedding some light on a funny creature that’s uniquely representative of the school’s spirit, and important to the Pacific Northwest’s ecosystem.

In my down time between other tasks I worked on a new page for the geoduck that included interesting facts, the origin of the mascot, and videos and photos of mascot costumes through the decades.

The humble geoduck. Photo by Shauna Bittle.
The new Speedy the Geoduck page, featuring humorous facts about Evergreen’s unconventional mascot.

The Outcome

The new marketing efforts rejuvenated Evergreen’s message to prospective students.

  • The compelling call-to-action I wrote outperformed other proposed solutions by 40 to 60%.

  • Visit request form conversion rate, a key metric, went up 18%. Total form completions increased by 60 registrations per month.

  • The new Campus Life page has become one of the top ten most-visited pages on the site, showing prospective students what life is like out side of class.

  • The Geoduck page, has proven itself to be an enduring curiosity, regularly drawing in significant spikes of traffic whenever the mascot enters the public consciousness. Sometimes this is when Geoduck athletics play on television and sometimes it’s when alumni talk about the school on Reddit or other online communities.

]]>
Justin McDowell 2019-04-09T02:21:54Z 2019-05-07T04:53:20Z The Arbor Day Foundation (2005–2012) tag:revoltpuppy.com,2019-04-08:9fae61151c311cd9202b988ee453d127/2129ca35315422e3929a6addf827182d

The Arbor Day Foundation is a national non-profit that inspires people to plant, nurture, and celebrate trees. The foundation stakes its mission in yards, communities, and around the world. It has grown to approximately one million members since its founding in 1972.

I was the web designer for the foundation from 2005–2012. I designed the main website, as well as spinoff sites for many of their programs, such as the child-focused Nature Explore Club, Lied Lodge & Conference Center, Arbor Day Farm, and the training site Tree Board University.

Role: Web Designer, 2005–12
Duties:
  • visual design
  • HTML
  • CSS
  • JS
  • responsive design
  • content management
  • Flash animation
  • ActionScript
Manager: Michael Jaquez
Developers:
  • Dan Shullaw
  • Matt Olson

Sometimes my work for The Arbor Day Foundation feels barely relevant. Sometimes I just want to excise it from my portfolio. Today it’s less a showcase of my talents and more of a time capsule; like looking back at your high school yearbook portrait and shaking your head at your dopey haircut. But there’s something worth gleaning from that history.

I began working for the non-profit by animating Flash cartoons for a Kid’s Club. After that, I redesigned the website, and then settled into the in-house role of maintaining the user experience and making improvements as new technology developed. Technical skills that I had learned in college gelled for me on real world projects, and I learned more about programming than I had managed to pick up on the many theoretical projects given to me in school.

It was a wild time. We worked mostly on gut instinct, followed trends, and experimented live. We released fast and loose, and without version control. As a young professional at a small company, it was fun having considerable reign over the user experience. I helped the different departments of the organization best present their content and I rarely received a lot of pushback from clients. Most of the time, they were happy to have me give input on better user interactions, and we didn’t sit in endless meetings refining copy word-by-word.

When I started working there, it was one of the craziest, most tumultuous times in the industry and it defined my values today. Web standards were taking over as the de facto way of developing a website. Having grown up slicing websites into fragile tables, this turnaround energized me. It was like I was learning a new language out of words I already knew.

In fact, I was also learning a whole other language: CSS. I had dabbled in the styling language a bit when it was new and not very well supported, but here, I adopted the mantra of separating style from the document structure. I learned how to master the cascade. I traded finicky tables for finicky-in-a-better-way floats (which were as good as it got in those pre-flexbox times).

I found idols. I was no longer hacking-and-slashing my way through website designs by copying and pasting from the source codes of random websites. I was reading blogs by smart designers, people I looked up to. I was learning not just how things worked, but also why. I was researching, solving problems… and annoying the hell out of my boss.

“Tables just work!” he’d shout from his office.

“Tables are for tabular data, not layout!” I’d retort.

The Arbor Day Foundation was where I learned web standards and mastered CSS. I learned a lot of other things, too, thanks to the developers I worked with—back-end code (Adobe ColdFusion), databases (MySQL), and analytics (Urchin before it became Google Analytics)—but well-crafted, purposeful HTML and CSS became my banner to fly.

With these tools, I can make anything look like anything. Layout, color, typography, graphics, and gestalt, not to mention the interconnectivity of documents and applications through hypertext. I was there, at the Arbor Day Foundation, when it all came together, when it cemented, when it killed Flash, when it became mobile-friendly. And I got to do it all.

I ripped out layout tables. I supported Internet Explorer 6 on Windows for six and a half agonizing years. I supported IE 5.5 for the Mac for six blissfully short months! I built pages by hand, and the CSS from scratch, including writing out every vendor prefix known. I made mobile sites with three different methodologies to figure out which one was the best (responsive, FYI). I even figured out how to make Flash responsive!

Today, my site no longer exists in its original state. Yes, The Arbor Day Foundation is still here, still doing good work, but they’ve since redesigned, updated, modernized. Such is the way on the web. I am left with tragically few artifacts from it. You can see some more of it in the Wayback Machine: https://web.archive.org/web/20080115175718/http://www.arborday.org:80/

I get down on this site when I look at the screenshots because it’s so old, and technology has changed as much as the trends have. Yet when I look at the work I do today, my work at The Evergreen State College and elsewhere, it’s actually not a whole lot different. I’m still working on projects that benefit from semantic markup. I’m still writing CSS. Some of it is enhanced with additional layers of abstraction—the HTML gets diced up into a CMS, the CSS gets processed out of Sass, the user experience gets borne out in research and testing—but the basis that I learned at the Arbor Day Foundation is all still there, all put into practice on a daily basis.

It’s difficult to hold this site up as a portfolio piece, as an aesthetic masterpiece, a pinnacle of usability. But it’s still an important part, not because of how I shaped these artifacts over the seven years I was there, but because of how it shaped me into the designer that I am today.

]]>
Justin McDowell 2018-03-20T04:11:23Z 2018-04-20T06:05:24Z OpposeThis Invisible Carry-on Review tag:revoltpuppy.com,2018-03-19:9fae61151c311cd9202b988ee453d127/cc600d28d88924a731d4a34a2593c26b Three years ago, I decided to review PX’s first entry into the backpack space, the Invisible Backpack. Today, PX is called OpposeThis, and the Invisible Backpack is called the Invisible Backpack One, because they’ve since added two additional backpacks, plus a minified version of the One.

The model leans on a grafittied wall behind a bus terminal

The model. (It’s me.)

While I normally write about web-related topics, people seemed to enjoy the review, and I enjoyed having a little photoshoot, so I decided to write a review of one of their newest offerings, the Invisible Carry-on.

The Invisible line is so-called, because the designers wanted a backpack that looks good, but also blends in with the surroundings. Sleek, city-ready design, with no gaudy logos or flashy features to hamper the aesthetic. That said, their packs have plenty to talk about.

The new carry-on is particularly unique in that OpposeThis reached out to their fans to help them design the product as part of a kind of experimental workshop to see what they could create. With no goal for production at all, the team challenged themselves to create a workable carry-on prototype from scratch in just three months. Only after it was finished did they make the judgement on whether it was feasible to actually put this thing on the market. Inevitably, they created a kickstarter and, less than a year after the initial announcement, I’ve got one in my hands. Was it all just a stunt? Perhaps, but having participated with the team from the beginning of the process through to the end, it was pretty cool to experience.

Before I get started, it’s worth noting that for this photoshoot and review I’ve packed for a 4-day trip to a neighboring country. My review fits within the parameters of the bag’s intended use.

A collection of items laid out on a floor, ready to pack

Cat not included.

Why a Carry-on at All

Starting out, I wasn’t terribly sure why I would need a specialized carry-on bag versus a traditional style backpack, but it became clear to me when I saw it opened up. The main benefit is that it’s significantly easier to pack and unpack versus a top-loader, where you have to plan the order of your packing. You don’t want your most useful items to end up at the bottom, and you definitely don’t want to have to be unpacking and repacking your bag in an airport or taxi.

The Invisible Backpack One

A top-loading backpack.


The Invisible Carry-on opened wide

A carry-on backpack.

With that out of the way, there are numerous other features that make the Invisible Carry-on a great travel bag.

The model sips a macchiato

Design

Okay, look at this thing. It’s gorgeous. Since my last backpack was all-black, this time I opted for blue, which was the right choice. None of the photos really do the color justice. In most environments it’s a deep navy that has kind of an iridescent shimmer when it catches the light.

The model as tourist in Olympia’s state capitol building

The bag maxes out at 33 liters, which puts you well within the current standard limits of a carry-on, but not so big that it becomes a giant suitcase on your back. And unlike a blocky suitcase, the bag is vaguely droplet shaped, so it has a more humanist appearance. Design-wise, the bag’s signature is surely the wings that wrap around the side to kind of give it a hug. Beyond just aesthetics, you’ll read more about how these these flaps function in a bit.

It’s crammed with pockets. Main compartment pockets, quick access pockets, a back pocket with a dedicated laptop or tablet pocket, and a front pocket filled with several little pockets inside it. In the “final” version of the bag, before their Kickstarter launch, you can see dedicated pen pockets but they got iterated out in the “final-final” version in order to make the other pockets bigger. Not a huge deal, but as I mentioned in my review of the One, I like having these narrow pockets available for a number of uses: pens, pencils, pocket knives, and the like… though I suppose a pocket knife in a carry-on would be counterproductive, after all.

A demonstration of the expansion zone in the middle of the backpack

The area that has expanded to afford more room inside the main compartment

It’s Expandable and Compressible

These days, I’m all about compression. Even packing as light as I typically do, if I can save some extra room to bring home a souvenir or two without paying to check or ship them, all the better. One of the coolest features, then, is that the main compartment actually expands an additional nine liters for when you need room to cram in that stylish jacket you picked up. A couple compression straps inside the main compartment help to squeeze your clothing down to the smallest possible size and keep everything from shifting too much in transit. Finally, the side wings that wrap around the bag don’t just lend a pert appearance, they also crank down and help to keep everything nice and streamlined.

Zippers tucked underneath the backpack’s side wing

Now you see them…


The side wing tied down, obscuring the zippers

Now you don’t.

Security Features

Being as this bag is intended for travel to distant lands, I want to talk about some of the security features. One of the side wings also doubles as a hiding place for the main compartment zippers. Once the wing is cranked down, it’s extremely difficult to access what’s inside. It’s a nice perk, but it only protects the main compartment. It would have been nice if it could obfuscate more zippers, such as the ones that access the laptop compartment, but the paracord zipper pulls themselves are flexible and can be twisted together. One more way to deter breaches.

A demonstration of the top quick-access pocket

Shh! There’s a hidden zipper at the bottom of this pocket.

This next feature is truly great. At the bottom of the top quick access pocket is a zipper to yet another pocket. Stash your passport and wallet inside this hidden pocket and no pickpocket will ever leave you stranded. I was able to snugly fit both my passport wallet and a regular wallet at the same time.

Then there’s security theater—the pointless bullshit the TSA puts you through. The Invisible Carry-on is prepared for that, too. Two quick access pockets, one on the top and one on the front, are great for quickly stashing your keys, coins, belt, and whatever other items you need to avail yourself of while shambling through the airport line. And, of course, the dedicated, woolen laptop compartment makes it a breeze to remove and place in a separate bin.

The model carries the backpack down some stone steps

Made to carry nearly any way you like.

Hardware and Construction

The bag wears comfortably. The straps are fine, thicker and more padded than the One that I have, but not as sturdy at you might get out of a backpacking pack. I will say, though, that I barely noticed I had it on for the half day I was wandering and taking photos, so I think that speaks to its comfort. There’s also a chest-strap, which seems shockingly short in length. I am a slender man, and it only just reached across my clavicles.

The backpack’s back.

Carry straps on the top and side help with your overhead bin-slinging needs. The paracord zipper pulls are real nice, and the clips and construction are all sturdy, whether plastic or metal, as on the side wings.

The bag is made of the same rainproof construction as the One, though the top-facing zippers have not been rubberized. Having used the One in the rainiest region in the United States, I can confirm that the bag’s carapace has kept everything within dry as a bone.

The model organizes his bag at the Olympia capitol

That’s one way to organize at the capitol.

Overall, I’m really impressed with this bag and I can’t wait to use it on a real trip soon. The quality of the construction is top notch. Key functionality, like the expandable main compartment and the hidden drop pocket, are worth noting. Dedicated quick-access pockets make it a bag that’s ready to travel with you. And on top of all that, it’s stylish as hell.

Packing up the Invisible Carry-on (00:23).

Have I sold you on it? I’ve got some bad news for you. Unfortunately, if you missed the kickstarter, you’re currently out of luck. However, it looks like they’re gearing up for a new spring 2018 run, so give them your email address and be prepared to pounce when you get the announcement. In the meantime, they’ve just announced a newly redesigned One, so go ahead and read my review, and put your name down for that one, too!

Many thanks to Katie Wolt for taking all the photos of me. She’s a doll.

The model sits on a seat at a bus terminal
]]>
Justin McDowell 2017-10-24T05:04:41Z 2017-10-24T05:07:34Z Nobody Will Read Your Welcome Letter tag:revoltpuppy.com,2017-10-23:9fae61151c311cd9202b988ee453d127/a1bc123f354ccd9639ee74664192e4e6 This was originally written for The Interconnected, and previously published there on October 13, 2016.

I have to put a welcome letter on a website. I have to do this because the welcome letter is in the printed program, and if it’s in the printed program, it also has to be on the website. There, it either takes up valuable space for useful content, or it appears as a PDF that no one wants to download, especially to read a welcome letter.

A welcome letter is a terrible thing for a website. There is no audience that wishes to read a welcome letter. They are fiction. They do not exist. People are on your website because they want information, not to read the welcoming platitudes delivered from a CEO, or president, or artist. This kind of content gets in the way of the useful content.

People might read your welcome letter in print. Oh yes, at least a few of them will. But make no mistake, they’re not reading it because they want to read it. They will because they’re currently sitting in your welcome lecture and they’re bored. They will because it’s socially acceptable to read the provided program while tuning out the welcome speaker. They will because it’s not acceptable to read anything on your phone while listening to the speaker. Even if they’re reading the welcome letter you put on the website—which of course they’re not, because the internet is full of much more useful things to read.

I put the welcome letter on the website because I had to, but I put it where nobody is likely to read it, because nobody will read it, no matter where I put it. I’m not just being smug. I know this because of the regular user testing my team has done. In these sessions, we watch real people skip vast swaths of content, many times scrolling straight down to the bottom with wild disregard for The Fold.

It was a political move, I admit, burying the link. It can be hard to convince people who write welcome letters that nobody wants to read them, in part because the writers put time into them and do provide them with the best intentions. Sometimes it’s best to pick your battles when you’re working with a client. Sometimes there’s not enough time or energy to spare for a discussion or argument over idealistic details. But sometimes your political concession doesn’t matter. Nobody asked me where the welcome letter was ultimately posted, because even when the clients use the website themselves, they have no interest in its welcome content.

]]>
I have to put a welcome letter on a website. I have to do this because the welcome letter is in the printed program, and if it’s in the printed program, it also has to be on the website. There, it either takes up valuable space for useful content, or it appears as a PDF that no one wants to download, especially to read a welcome letter.

]]>
Justin McDowell 2017-10-19T04:30:28Z 2017-10-20T04:31:10Z Bauhaus in the Browser at Empire Conference tag:revoltpuppy.com,2017-10-18:9fae61151c311cd9202b988ee453d127/b4669dc649ec22c578e143d6390ff150 I had the great pleasure of speaking at Empire Conference in New York City this year. And I don’t say that lightly. Empire Conference was one of the smoothest, chillest conferences I’ve ever attended, which is pretty good considering the cliches about the East Coast.

I gave a version of my talk “Bauhaus in the Browser”, which I first gave last year at Cascadia Fest and expanded for CSS Conference. The talk originally featured four new or underappreciated CSS standards that I applied to recreating works by artists of the avant-garde. The second time I gave it, I expanded it to five, because I had some extra time.

Portrait by Emily Griffin

My portrait was given to me as a thank you gift. Illustration by Emily Griffin (@emilywithcurls).

For Empire Conference, I had the tricky task of once again compressing my talk down to 25 minutes, but still covering all five topics. This process was yet another feel-good horror show. It was challenging because there were a number of areas where I felt the content was too good to cut, but I recognized I was going to have to make sacrifices.

There was also important content that I wanted to add in. In particular, I wanted to share jumping off points to the places where I did my research and the people doing the hard work upon which I was planting my flag. And I also just wanted to share some cool works by others whom I had discovered since initially creating my talk.

After all of my changes, and even speaking at a seemingly break-neck rate, during practice, I still seemed to come in around 25:30. Not bad, but not quite the goal. Nevertheless, I felt like the content I had was too valuable or interesting, and decided to focus on giving a good show.

The talk I gave was as smooth as it ever had been, probably due to a year of sitting with the talk and practicing. People laughed at the jokes, and the response I got was extremely warm, which I thought was pretty good for a CSS talk at a JavaScript conference.

This morning Justin gave the best CSS talk I’ve ever seen: Bauhaus in the Browser. So glad I came!

nydame (@nydame)

That’s some high praise to live up to! And, I even came in right at the 25-minute mark. I don’t know how I did it, but I did it.

But That’s Enough About Me

The rest of Empire Conference was great. They had a slightly different format than most conferences. Often a single day is reserved for an optional workshop. Here, talks were given during the first half of the day and workshops were done during the second.

I liked this way because I feel like generally conference talks are moving away from nuts-and-bolts how-to style talks, and moving more toward demos, theory, and inspiration. My favorite talks are more about what we should be doing as designers and developers and less about how we should be doing the work. Additionally, these talks tend to live longer in your consciousness and are less subject to the whims of technological fads and fashion.

Meanwhile, workshops dedicate a longer period of time to digging into a problem and actually doing the hands-on work to solve it. This is where you can get a how-to takeaway that isn't just taking a photo of someone's code slides.

A (very) rough layout I was able to put together for Trillian, a project that’s presenting data collected by satellites and telescopes around the world. View more on Dribbble.

For my workshops, I did two Code for Good Sessions. They were both successful in their own ways, and I may have more thoughts to write down about them in the future.

And, of course, every good conference has to have a good party. There was a fantastic 1940s jazz cruise that closed out the whole event, but I have to say my heart lies with the “Computer Science 2000” live-skewering of Hackers as my favorite event. But then, I’m a sucker for free glowsticks and popcorn.

]]>
I had the great pleasure of speaking at Empire Conference in New York City this year. And I don’t say that lightly. Empire Conference was one of the smoothest, chillest conferences I’ve ever attended, which is pretty good considering the cliches about the East Coast.

]]>
Justin McDowell 2016-12-14T05:55:12Z 2016-12-14T06:06:01Z Picky Style: Illustration Borders tag:revoltpuppy.com,2016-02-15:9fae61151c311cd9202b988ee453d127/6b33e1d3eaa78f93ee11e1fe883343f5 Picky Style is my series of short articles about the rationale behind the little decisions I have to make to put a design together and provide a good user experience.

In this article, I’m going to talk a bit about my thoughts with images. For images like photos and illustrations that are more-or-less formatted as a box (i.e. most editorial and illustrative graphics on the web), I feel like there should be just a small bit of processing. It’s a little something to give the elements a sense of intention in the layout. I think of it like when you graduate from hanging posters on your walls to framing actual pieces of art. One of the easiest ways to create this kind of intention is with a border or drop shadow. To me, images without borders look like chaperons at a teen dance, floating in and out of the main action, but always feeling a bit out of place.

Graphics with no style applied

Graphics with no style applied can look detached from the page and from the brand. (Zoom in.)

I gave the photos on Evergreen’s website a one-pixel border, as well as a very light drop shadow. The border is noticeable, while the drop shadow is almost imperceptible. I didn’t want the shadow to appear heavily rendered (which, among other reasons, is just out of fashion at the moment), nor did I want the photos to look like they were hovering above the page, another common mistake. I wanted it to look as if the photos were actually laying on a real surface, which wouldn’t cast a long, dark shadow.

I also wanted the photos to look like Evergreen, and unlike any other school out there. Evergreen has a reputation for being a weird college. While I wanted to present a reasonable face for the school, I also wanted to embrace that Greener culture, so I made a couple specific choices to bring that out.

  1. I blunted the edges of the photos.
  2. I angle them just a bit.

Today, I’m going to talk about that first point. Next time, I’ll talk about the latter one.

Graphics with my styles applied

The final look of the graphics. (Zoom in.)

One thing that I’ve noticed about a well-loved photo, the kind you keep in your wallet for years, is that they’ve all, lost their sharp edges. The corners are rounded, sometimes by quite a lot, but always at least a little bit. I decided early on that I wanted to give a nostalgic aesthetic to the boxes in my design, to make it feel more worn-in and comfortable and give prospective students a feeling that these could be a part of their own memories. I ended up applying a very small border radius to many of the boxes, including most of the photos. At two pixels, this is the smallest border radius I’ve ever used on a website, but it’s just enough to give the appearance of being a little weathered and aged without looking like it’s been mechanically rounded off, like the corner of a playing card.

Graphics with a 5px border radius

A border radius of 5px is already starting to look too smooth to be naturally rounded. (Zoom in.)

The total effect doesn’t call attention to itself, and indeed, nobody has ever commented on it. This kind of detail works on a more subtle, perhaps subliminal level. But that’s the name of the game when you’re being picky about style. It’s a totally different story, however, when it comes to the other thing I did: angling them just a bit. But that’s a story I’m saving for next time. Stay tuned.

]]>
For images like photos and illustrations that are more-or-less formatted as a box (i.e. most editorial and illustrative graphics on the web), I feel like there should be just a small bit of processing. It’s a little something to give the elements a sense of intention in the layout. I think of it like when you graduate from hanging posters on your walls to framing actual pieces of art. One of the easiest ways to create this kind of intention is with a border or drop shadow. To me, images without borders look like chaperons at a teen dance, floating in and out of the main action, but always feeling a bit out of place.

]]>
Justin McDowell 2016-11-02T03:17:05Z 2016-11-02T03:25:50Z Passing Away In Pixels tag:revoltpuppy.com,2016-11-01:9fae61151c311cd9202b988ee453d127/5bed2781e8355bac691e4a85d3922e82 This was originally written for The Interconnected, and previously published there on August 24, 2016.

I got suspicious when Lauren’s chat bubbles turned green. She used an iPhone, so when we kept in touch over text, it was via iMessage, which uses blue chat bubbles. When one of those bubbles turns green, that means it was sent over SMS, old school. There are a number of reasons this could happen, but seeing those green bubbles, coupled with a complete lack of response, and a noticeable absence spanning several months, I got suspicious.

I had hoped it wasn’t true, but sure enough, the top search result for her name was her obituary.

It took me a little while to piece it all together. The article said she died back in February—five months before I found out—but it didn’t feel like I had last talked to her that long ago. I scrolled back through the unanswered green bubbles and discovered that we last conversed just three days before an irresponsible driver crashed into her boyfriend’s car on the highway. That I last spoke with her so close to her death is the one bit of fortune I’ve felt about the whole tragedy.

Lauren was a friend whom I had known primarily on the internet. We first met way back when LiveJournal was a thing that people legitimately used. It was kind of a weird time when personal blogging was still underground (they didn’t even call it blogging yet). It was a time when your life could be public-yet-private; it wasn’t the big personal-brand–self-promotion machine that we often find with social networks today. It was easy to get personal, and to learn the intimate workings of another person’s mind. It was through these weird little daily journal entries and comment sections that Lauren and I kindled a friendship. As time progressed, the communication channels changed, but we stayed connected through it all. Not just following one another from service to service, but following up, checking in, doling out advice, providing comfort, and celebrating wins.

Lauren was a close and enduring friend of mine. We had known each other for more than a decade. That’s longer than I’ve had my dog. Longer, in fact, than I’ve known most of my closest IRL friends. She was a welcome, if nearly invisible, presence in my life. So, when I found out about her passing five months after the fact, and only through cleverness on my part, I have to admit that it stung fiercely. But I get it. Just as she flew under the radar among my family and friends, I was just positive her loved ones would have no idea who I was. (I did write her parents a letter expressing my sadness and condolences and, thankfully, they shared it with her best friend, who reached out and said that she did know about me. It was a big relief.)

Living on the internet has certainly felt surreal at times, and perhaps nothing is more surreal than when someone you mostly know through pixels passes away. There’s just not a standard cultural protocol to expect. I think it’s worth considering how the friends your friends don’t know about can get news of your passing.

In the past, I’ve talked casually with my brother about how I want him to tell my online friends when I die, but having been affected by just such an event so recently, it spurred me to actually put how that should work into writing. With that in mind, here are some ideas I have if you’d like to do the same thing.

Get a Password Manager

A password manager is not only a great idea for your personal security (and sanity), it can also provide the keys to your online identity after your death. It can sometimes be harder to gain access to a deceased person’s gaming account than it can be to get the title to their home! I use a password manager called 1Password. It stores websites and their corresponding usernames and passwords behind a secure master password. It also has browser plug-ins that automatically log in for you. And that’s just the tip of the iceberg. You’ll hear more about what you can do with a password manager to manage your online identity postmortem later on in this article.

If you don’t want to buy a password manager, you can use Apple’s Keychain to keep track of your logins. I’ve just never found it to be quite as intuitive to fit into my workflow.

Your password manager is protected by a master password, that way your passwords can't be accessed by just anybody. But there’s the issue of getting the master password to the people who need it. You won’t exactly be in a position to let them know what it is yourself, after all.

It’s never a good idea to share your passwords with anybody else, but I’m fortunate enough to have someone whom I can trust with it implicitly. He has my passwords written down—in a secure note in his password manager, of course! (You’ll learn more about secure notes later on in this article.) But this only works as long as one of us survives the other. If (heaven forbid) we happen to go at the same time, I realistically need a better back-up plan.

Get a Safe Deposit Box

I think a safe deposit box is ideal. These are incredibly secure lock boxes that are stored inside a bank’s vault, and they’re pretty inexpensive to rent. The last one I had cost about $6 per year. I stored other important things in there, too, like my car title and passport.

And you’ll feel super-cool anytime you get to go into the vault, turn the two keys simultaneously, and go into the little private room to rummage through your box.

Some people have a personal safe, which can work, too, but then you’ll need to somehow pass on the combination for that, too. Like in a safe deposit box!

Create a Secure Note

As I said before, you can do a lot more with 1Password than just keep track of passwords. In particular, you can create secure notes. These are simple text documents like you’d write in any plaintext editor, but they’re stored securely behind your master password. I’ve written up a secure note that has all the instructions necessary to take care of my digital affairs.

I’ve covered a number of things, and I intend to keep adding more as I think of them, or as my life continues to change and evolve. After all, who knows if I’ll outlive Facebook or if Facebook will outlive me. Here are a few things you may want to think about when you write yours:

  • Who should manage, clean up, organize, and back-up your computer?
  • What should happen to your website? Do you want a memorial posted somewhere on it? Additionally, somebody’s gotta keep paying the domain and web hosting fees. Are you setting aside some money to keep this going, or would you prefer it be shut down and archived privately?
  • Who should know about this explicitly? This could be specific people that you’re emotionally close to, or a general social network. I’ve personally written up three tweets to go out to my Twitter followers. That way my family will post exactly the information I’d like my followers to know. Should your Facebook friend list, YouTube subscribers, or your Snapchat followers also know? Write down in your note how you want that to play out.
  • Additionally, Facebook can memorialize your account. You can explicitly choose a friend who has the power to make that happen. After an account has been memorialized, it can’t be edited ever again. This is another good reason to make your password available through a password manager. Your family can then go in and remove any embarrassing status updates they don’t want forever associated with your name before they memorialize your account. I’ve even told my family to change my photo to something “non-cheesy” where I “look kinda cool”, just so I can look my best after my final rest.

There are probably other things you can do that I haven’t thought about yet, but this is going to be a personal process, no matter what. You might find certain things to be way more important than other things, and your needs may change and evolve over time. It’s up to you to make sure your note is current with your wishes.

Talk to Your Lawyer

All this said, it’s a good idea to talk to a real, live lawyer, too. I haven’t done this yet. Despite this article, I haven’t actually put a lot of consideration into my physical assets at this time. But if you’ve already got a will drawn up, or you’re planning one now, you’re going to want to make sure it has all the information about your digital life included in it, too.

I feel better knowing that all of my friends will know when I’ve died, including the ones I’ve never met IRL. My virtual friends are just as important to me, but it doesn’t help if nobody knows who to tell, or what to say. Taking some time to reflect on which sites and services are important to you will give peace of mind to yourself, as well as those who survive you.

]]>
I got suspicious when Lauren’s chat bubbles turned green. She used an iPhone, so when we kept in touch over text, it was via iMessage, which uses blue chat bubbles. When one of those bubbles turns green, that means it was sent over SMS, old school. There are a number of reasons this could happen, but seeing those green bubbles, coupled with a complete lack of response, and a noticeable absence spanning several months, I got suspicious.

]]>
Justin McDowell 2016-08-16T04:57:14Z 2019-05-07T04:45:48Z Breakin’ At The Well tag:revoltpuppy.com,2016-08-15:9fae61151c311cd9202b988ee453d127/21283a6595bb9046ac4754ff0352f9fd The Artesian Commons is this kind of sketchy “park” in downtown Olympia that occasionally is the host of some interesting events. In this case, there was a b-boy battle going on, so I decided to check it out.

]]>
The Artesian Commons is this kind of sketchy “park” in downtown Olympia that occasionally is the host of some interesting events. In this case, there was a b-boy battle going on, so I decided to check it out.

]]>
Justin McDowell 2016-08-02T06:17:59Z 2016-08-02T16:11:41Z Using Ch, An Underappreciated CSS Length tag:revoltpuppy.com,2016-07-11:9fae61151c311cd9202b988ee453d127/70c607d9ef762757bde7b371b4a6fec7 I’ve been experimenting with new units of measurement when I design web pages and components. Tomorrow, I'll be giving a talk that covers viewport units like vh and vw. In doing my research, I stumbled upon a number of other measurements that have the support, but just not the popularity of the old-timer units.

For a bit of context, when I design, I find that horizontal measurements are typically based on grid column widths, so I end up using percentages to ensure they all fit nicely into a grid-esque layout. Vertically, on the other hand, I'm concerned about the cadence of the typography, so I usually set those measurements in ems and rems. I've also used ems for component padding and margins, because I think it's nice to relate the spacing of a component to the size of the type.

Lately, though, I've been finding good uses for a new unit called ch. Like em, ch is a relative unit. But while em is a vertical measure, based on the height of the typeface. ch, on the other hand, is based on a horizontal measurement: the width of the typeface’s zero character. (Ch stands for character.) I’ve found ch to be especially useful in matters pertaining to inline, text-based elements.

Here are some examples of places I’ve used ch units.

Checkboxes and Labels

Usually, you’ll have the checkbox floated to the left and the label floated next to it. You need some space in between the two elements so that they don't crash into one another awkwardly. In the past, I've used maybe 1em, or 0.5em. But now I find 1ch to be a much more natural unit that seems to add just the right amount of space, because it's related to the natural horizontal texture of the typeface.

input[type="checkbox"]{
  margin-right: 1ch;
  float: left;
}

Specialized Form Field Lengths

Another good place I found ch to be of use is again related to forms. I think forms are a natural fit for ch, because they’re an element that's often need of sizing, but it's hard to know exactly how wide to make the inputs except on a case-by-case basis. Not anymore with ch.

Date Fields

Take for example, year fields. We know that standard years are going to be four numbers. There are probably exceptions, but we can usually assume the zero character of a typeface is going to be at least as wide as the widest number, and therefore a reasonably representative digit. So, we can set the year input width accordingly.

.year{
  width: 4ch;  // Fits four numbers
}

But wait, there are a couple extra considerations. We’re reasonable people, and we set our box-sizing to border-box. We’re going to need to account for the padding, too. Our input padding is one of those horizontal measures, so we could actually set that using ch, too! We'll use calc() to account for the border width.

.year{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(6ch + 2px);  // Fits four numbers, plus padding and border
}

Try it out, it works pretty well! There’s just one more thing I’d like to do to make it just a touch more comfortable. When the input is active and there's a blinking cursor in it, that cursor is taking up a little bit of space. Most people probably wouldn’t notice, but it’s enough to annoy me. So I’m gonna fudge just a little bit more width onto the input to account for it.

.year{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(6.1ch + 2px);  // Fits four numbers, plus padding, border, and blinking cursor
}

Pretty nice! Of course, you can also do this for other fields where there are known character limits, like month and day fields.

.month,
.day{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(4.1ch + 2px);  // Fits two numbers, plus padding, border, and blinking cursor
}

Email Address Fields

Another good time to use them in form fields is where you know the average character count of an answer. According to Nielsen Norman Group, “text fields should be about the same size as the expected input since it’s extremely error prone when users can’t see their full entry.” For example, I recently learned that 95% of email addresses are 31 characters or less. Conveniently, email is an HTML input type, so I can use CSS to style any input[type="email"] to be 31ch wide.

input[type="email"]{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(33ch + 2px);  // Fits average email address length
}

Realistically, this is perhaps a bit too long, but at least it gets us in the ballpark.

Indentation

On to non-form related uses, if you look at any paragraph following a paragraph on this site, you’ll notice that it’s indented a bit at the beginning of the first line. At the time of this writing, the indentation is 1em, but now that we have ch, why not use that instead? That way it’s relative to the horizontal proportions of the text instead of the vertical proportions.


p + p{
  text-indent: 2ch;
}

Inline Spacing

One last, place I've used ch is in a social media lineup. This is one of those strings of little squares at the end of an article or web page. Once again, I need to decide how much space to put between them and, once again, 1ch feels like an appropriate measurement.

.social-media-list{
  display: flex;
}

.social-media-list > .icon{
  margin-right: 1ch;
}

My conclusion is that percentages and viewport units are good for grids, ems and rems are good for vertical cadence, and ch is good for horizontal cadence.

Browser Support

It’s pretty good! According to MDN, it works in Firefox, Chrome, IE 9, Safari 7, and Opera 20. It does not have support in Android’s stock browser, though, but you could pretty easily use an em-based fallback instead. It feels like 1ch is often (but not always) around the width of half an em (but I’m just eyeballing it).

.class{
  margin: 0.5em;  // Android browser
  margin: 1ch;  // All other modern browsers
}

One Of Many CSS Lengths

I talked about ch at a recent Codepen meetup at Refresh Portland and everybody who talked to me about it said they had never heard of ch before. It turns out, there are actually a lot of units of measure that don’t get used all that often, including ex (the size of a typeface’s x-height), pc (picas), and even in (inches). It seems most designers still like to think in the basic kinds of measurements, but we’re living in a post-pixel world now. Try it out! If you’ve found a good use for an underappreciated CSS length, I’d love to hear about it.

]]>
Lately, I've been finding good uses for a new unit called ch. Like em, ch is a relative unit. But while em is a vertical measure, based on the height of the typeface. ch, on the other hand, is based on a horizontal measurement: the width of the typeface’s zero character. (Ch stands for character.) I’ve found ch to be especially useful in matters pertaining to inline, text-based elements. Here are some examples of places I’ve used this new unit.

]]>
Justin McDowell 2016-07-26T04:42:47Z 2019-04-12T02:39:16Z I’m Giving a New Talk at CascadiaFest and CSS Conference tag:revoltpuppy.com,2016-07-25:9fae61151c311cd9202b988ee453d127/597865b4fcd4ff1b33b65ab9d0d801a0 I’ve got a new talk that’s been accepted to two conferences this year!

With my public speaking side-projects, I’m partly trying to follow in the footsteps of a few of my idols, and partly I’m addressing a desire to be the one on stage. Last year, I got to speak at Devsigner in Portland, among a few other engagements. It was a great conference, and the weekend well-worth the very reasonable ticket price.

That said, one can’t help but think of the things that could have been. I submitted my last talk, “Painting The Perfect Sunset”, to a couple other conferences that turned it down. A Sass-fueled talk just wasn’t quite the right fit for CSS conferences, and the technique didn’t generate quite enough buzz to get people excited. After filming this talk at the Portland Sass Meetup (not to mention adapting it into a couple A List Apart articles), I decided it had seen enough exposure and I retired it.

Fast forward to this year: I tried a little design experiment at work, using slightly rotated text, with the goal of adding visual interest to the page. It was a tough sell and I realized I was going to have my work cut out for me defending it. I pulled out all the stops, including pleading to simply “give it a chance,” referencing architect Zaha Hadid, and comparing it to the design ideas of the Bauhaus school in Germany.

In the end, I had to agree that it was the wrong solution for the design. However, my defense left a spark behind, in the back of my head. That spark quickly began to smoke, and soon it turned into a flame. Before I knew it, I was submitting “Bauhaus In The Browser” to CascadiaFest. As it was the final day to submit my talk, I hadn’t even started on it. It was only an idea. But much to my surprise, they accepted it! I had to get to work.

I’m going to be talking about new and experimental features in CSS, and I’m filtering them through designs of the early 20th century avant-garde, of which Bauhaus was a large part. Bauhaus was an influential school that took advantage of new tools, science, psychology, and means of production to revolutionize the way art was taught, and the way products were designed and manufactured. I think there are parallels between then and now in that we have new tools and technology today (hello internet) that are also changing the way the world ticks. (I’ve noted other parallels to the Bauhaus school in the past, as well.) I also think it’s strange that we’re only just now able to replicate for the web some of the things print designers have been doing since the early 20th century!

I spent many, many hours over three months putting together demos and a presentation that, at this time, is nearly 100 slides long—I do love lots and lots of visuals. I hoped that the time spent would be worthwhile, because, while I’m very happy to be giving this talk at all, spending that much time for a 25-minute time slot is a lot of work.

Thankfully, someone else took notice, too! This week, CSSConf announced that “Bauhaus In The Browser” will be coming to Boston in late September! There may be one other engagement in the works at this time, as well, but it’s still too early to say for sure.

I’m just thrilled to be speaking at both CascadiaFest and CSSConf. I think it works out especially well because they’re on opposite coasts, which helps spread the word in a couple different areas, and for a couple different audiences. I’m looking forward to rubbing elbows with a few old friends I haven’t seen in person in years, not to mention a few of those aforementioned idols! Come check me out and say hi!

  • CascadiaFest is August 3–5 at Semiahmoo resort in Blaine, Washington.
  • CSSconf is September 26–27 in Boston, Massachusetts.
]]>
This year, I tried a little design experiment at work. In the end, I had to agree that it was the wrong solution for the design. However, my defense left a spark behind, in the back of my head. That spark quickly began to smoke, and soon it turned into a flame. Before I knew it, I was submitting “Bauhaus In The Browser” to some conferences. Much to my surprise, they accepted it! I had to get to work.

]]>