An Event Apart, San Francisco 2015

I’m still feeling a little jetlagged, so apologies in advance if there are any obvious grammatical mistakes in this blog post.

This week, I had the pleasure of attending An Event Apart, the web design conference, and A Day Apart, the day-long workshop, organized by web legends Jeffrey Zeldman and Eric Meyer. It was a spectacular conference agenda with some really great speakers. I’d like to spend a little time today on three presentations that were interesting and relevant to the work we do in OIT Design.

Modern Layouts: Getting Out of Our Ruts, by Jen Simmons

Jen Simmons (among other things, host of the podcast The Web Ahead) has a challenge for designers and developers: Make more interesting websites.

The last decade of web design has seen some phenomenal advances in aesthetics, responsiveness, and creative content. But there’s also been a convergence toward a “standard” design for a website:

A typical website layout, featuring a header, navigation bar, column of primary content, sidebar of secondary content, and footer.
A typical website layout, featuring a header, navigation bar, column of primary content, sidebar of secondary content, and footer. Image by Jen Simmons.

It’s an easy design to build, and it’s an easy design to make work on a tablet or phone. You see it here, in the current design for the OIT Design blog. But it’s maybe a little too ubiquitous. Users are a little too used to it, and, as Simmons notes, the only reason anyone would ever put content in the sidebar of a website now is if they “never wanted anyone to look at it.”

Even when we’re a little more modern and a little more creative, like in the NC State homepage, we end up with something like this:

A website layout featuring distinct rows of content, organized into well-organized columns.
A website layout featuring distinct rows of content, organized into well-organized columns. Image by Jen Simmons.

Simmons challenges us to do better, and to take inspiration from the long tradition of graphic design in print media. And she demonstrates the tools that are available to make more visually engaging media, like this:

Text wrapped around an irregular shape by defining a polygon around that shape.
Text wrapped around an irregular shape by defining a polygon around that shape. Image by Jen Simmons.

Or this:

Text block bounded from above by a headline rotated by 45 degrees.
Text block bounded from above by a headline rotated by 45 degrees. Image by Jen Simmons.

Here at NC State, we’re also limited by the brand guidelines generated by the Web Communications group. NC State is “on the grid,” and prioritizes right angles and cleanly-defined rows and columns. That’s a good design aesthetic, and not one that I want to get rid of entirely.

But even within those guidelines, there’s room to do something a little more interesting from time to time. The occasional departure from the grid can be a powerful way of highlighting content that we’d like users to see.

Developers reading this might note that both of these examples use CSS rules that are not supported in all browsers. But, says Simmons, that’s okay. So long as you’re providing a good experience for users of older browsers, screen readers, and other more limited browsing experiences, it’s okay to progressively enhance the way content is presented for users of newer, more capable browsers.

Resilience: Building a Robust Web That Lasts, by Jeremy Keith

That philosophy of progressive enhancement was also at the heart of Jeremy Keith‘s presentation. Keith began by taking us back to the beginnings of information networks, and tracing a brief history through the transatlantic telegraph line, geostationary communications satellites, and the development of the internet and the World Wide Web.

On a personal note: When I was in school, I completed a major in Science in Human Culture—an interdisciplinary program in the history, philosophy, sociology, and ethics of science. The narrative Keith presented was a lot of fun for that kind of geekery.

One of the core concepts behind a resilient network, in Keith’s formulation, is a respect for both the past and the future. That means backwards compatibility to ensure that users of older technology can still interact with your content. And it means adhering to best practices with an eye toward future development.

In web design, those go hand-in-hand. HTML and CSS are declarative languages, which makes them resilient. If an older browser encounters an HTML tag it doesn’t recognize, it can ignore that tag and still display the content—maybe not with the enhancements that the modern tag offers, but the user isn’t punished for using limited technology. And adhering to good web practices makes your content predictable and understandable in the future. A browser 15 years from now or 50 years from now should be able to read and display your code today.

That’s a bold statement that often isn’t true for other kinds of content. Even Microsoft Word, the “everyone has it!” standard for word processing, has struggled with reading content across multiple generations of file types.

But that kind of resilience doesn’t just happen on its own. It takes deliberate decision-making by designers and developers to respect web standards, create well-coded HTML documents, and not misuse JavaScript and other fragile imperative languages.

That doesn’t mean you can’t use JavaScript. But it does mean you need to identify your core functionality and provide it to users using the simplest methods possible. Then you can enhance that experience using JavaScript or anything else that modern browsers might support. The goal is to reward users for using capable technology with a better user experience, and not punish users for using limited technology by withholding content or functionality.

This is not all that different of a problem than IT accessibility—finding ways to continue to provide a quality and functional experience for users regardless of whether they can take advantage of the full breadth of what a designer or developer can create. That requires awareness and empathy on our end.

Designing for Crisis, by Eric Meyer

Awareness and empathy for the user were central to Eric Meyer‘s presentation as well. Meyer’s presentation was deeply moving, and was structured around the tragic and incredibly frightening experience he and his family had when his daughter became very ill very quickly. Meyer discusses that experience in a heartbreaking interview with Jen Simmons on The Web Ahead.

As Meyer’s daughter was transported from from the family vacation in southern New Jersey to Philadelphia via Life Flight helicopter, Meyer and his wife found themselves driving in the middle of the night to try to reach her. As they drove, they realized that when they arrived at the hospital, they didn’t know where to go, what to do, or how to find their daughter.

Meyer attempted to find that information on his smartphone by visiting the hospital’s website. What he found instead was a website that was aimed at a very different audience: donors, administrators, and families of patients seeking non-emergency care. In a shattered emotional state, late at night, driving in an unfamiliar place, it was that much more difficult to navigate and process the information he was able to find.

The stakes of what we do in OIT Design are much lower, but Meyer’s message remains very applicable. Design for everyone, and that everyone has to include people who are in the middle of a crisis. Those users may not have the time, patience, or emotional capacity to navigate an information-dense website designed for a very different group of users.

I’m in the middle of redesigning the main website for the Office of Information Technology, and it’s easy to imagine the IT crises that our users might face: a student who needs to register for classes but can’t access MyPack Portal; a professor who was phished and has a suspended email account, but needs to communicate with collaborators on a soon-to-be-published paper; a departmental administrator whose website is down and needs help fixing it.

In the moment, each of these is an all-consuming, panic-inducing crisis. Our job as designers and developers is to help guide users to the right resource, help them submit the information our Help Desk needs to resolve their problem, and do it in as efficient and humane way possible.

That’s something that the OIT website isn’t very good at right now. I’m hoping to change that, and I’ll probably be writing more about that in a couple of months.

Coming home from San Francisco

These are just a sample of three days’ worth of presentations, all of which were well done and very interesting. Not mentioned here were presentations focusing on performance, user experience (especially for touch-enabled devices), and social behavior. It was an invigorating experience that left me wanting to be better at my job—more creative, more empathetic, more knowledgable, more efficient.

It’s nice to be home, back in the office, and back in the regular routine. Yesterday we launched a new website for the Office of Institutional Research and Planning, a months-long project that’s engaged most OIT Design staff (full-time and part-time) at some point.

But looking at the work we did for OIRP, the Hillsborough theme that many campus clients are now using, and the shortcodes plugin I’ve been working on, there’s a lot of room for improvement as I look ahead at the end of this year and 2016.