event notes, events, technology & web

Notes From An Event Apart Austin: Lara Hogan

And now more notes from An Event Apart Austin… Lara Hogan, Senior Engineering Manager of Performance at Etsy (my fav!), presented “Designing for Performance,” and she’s just plain great. (I mean, she celebrates career achievements with donuts.)

She got big laughs for her “four and horse stars” story of the time Etsy accidentally replaced their half-star with little horse head emojis (because it wasn’t document properly) and users starting writing in to ask what was going on. (As someone who works in support, I can very easily imagine how ridiculous/hilarious this would be.)

On designing for performance:

“Perception of how fast your page loads is more important than how fast it actually loads.” Twitter Bird Icon 16x16

“Make performance part of everyone’s workflow.” Twitter Bird Icon 16x16

Don’t have performance cops or janitors. Make performance a part of everyone’s job throughout the project. Twitter Bird Icon 16x16

“Performance is everyone’s job, or you’ll be fighting an endless, uphill battle. You need to create a performance culture.” Twitter Bird Icon 16x16

Tips on designing for performance:

  • Consider image edits to improve performance: Blurring background a bit & cropping out busy areas in a jpeg reduces size. Twitter Bird Icon 16x16
    • An audience member tested out in-camera bokeh to make an image smaller and confirmed that it worked. Twitter Bird Icon 16x16
  • gfycat – optimizes gifs for web use.
  • WebP – introduced by google in 2011; image format that provides lossless and lossy compression for images on the web.
  • ImageOptim — app that makes images take up less disk space and load faster, without sacrificing quality.
  • Use srcset — give the browser a choice of which image to load (smaller image = smaller screen, etc).
  • Test page speed at webpagetest.org.

More Information:


Note: The Twitter bird icons link to the corresponding tweet for each piece. Thanks to @mor10@sbeatty, & @cek_io for live-tweeting the talk along with me on #aeaaus. 🙂

Notes from sessions are being compiled on this page.

event notes, events, technology & web

Notes From An Event Apart Austin: Ethan Marcotte

More notes from An Event Apart Austin… Ethan Marcotte (@beep) presented “Laziness in the Time of Responsive Design” and full disclosure: It wasn’t about being lazy overall, but was all about getting things setup now up front to let you be lazy later. Definitely good sense!

On laziness:

“Embrace laziness in responsive design” through layout, navigation, & animation. Twitter Bird Icon 16x16

Frameworks are vocabularies. They are philosophical conditions, not rigid systems of repetition. Twitter Bird Icon 16x16

“Design the transaction, not the interface.” Then, layer in complexity. Twitter Bird Icon 16x16

On using max-width:

  • We’ve used “max-width:100%” for images, objects, & videos.
  • But what about height?

Examples to check out:

  • fivethirtyeight.com — Great example of responsive navigation. When screen size reduces, navigation menu switches to hamburger & only top-level links remain.
  • BBC News — Watch how some navigation links are under a “more” link depending on size of screen. It shifts seamlessly and keeps the menu from being overwhelming.

Note: The Twitter bird icons link to the corresponding tweet for each piece. Thanks to @mor10 & @sbeatty for live-tweeting the talk along with me on #aeaaus. 🙂

Notes on some sessions linked on this page (and more added as I post them).

event notes, events, technology & web

Notes From An Event Apart Austin: Karen McGrane

I’m home and (sort of) recovered from Automattic‘s Grand Meetup (#a8cgm), so back to my notes from An Event Apart Austin

Karen McGrane presented “Content in a Zombie Apocalypse” and dropped some knowledge on us about WYSIWYG and the ridiculousness of web-paper (PDFs).

On WYSIWYG:

“I’m kind of like the President of the WYSIWYG Haters Club.” Twitter Bird Icon 16x16

This was an interesting story! — WYSIWYG came from XEROX so that they could sell laser printers. Twitter Bird Icon 16x16

On Web-Paper aka PDFs:

“The blobiest blob that we have ever blobbed onto the web… the PDF!” Twitter Bird Icon 16x16

Please, allow me to make one thing clear before I go on: Nobody is reading your PDF. The World Bank recently did a study in which they looked from 2008 to 2012 at all of the PDFs that they have put online and what they found was 33 percent of them, a third of them, never downloaded at all. What’s worse: 40 percent of them were downloaded fewer than 100 times.

Nobody is reading your PDF, because:
  • not digital
  • not responsive
  • not accessible
So why do people use PDFs on websites so much?

They allow someone to use a familiar tool (like Microsoft Word) to produce a complex document and put it on the web. It’s a simpler process than getting the document actually on a site, but definitely means fewer readers (like, sometimes none).

She says, “First add content repository, then layer author experience on top of that. Next pattern library, then design styles.” Twitter Bird Icon 16x16

More Information:


Note: The Twitter bird icons link to the corresponding tweet for each piece. Thanks to @mor10, @RainbowliciousD, @NickMartinUI, @sbeatty for live-tweeting the talk along with me on #aeaaus. 🙂

Notes on some sessions linked on this page (and more added as I post them).

event notes, events, technology & web

Notes from An Event Apart Austin: Jen Simmons

Next up at An Event Apart Austin (October 5) was Jen Simmons, designer and host of the weekly podcast, The Web Ahead, with: Modern Layouts: Getting Out of Our Ruts.

All I can really say about her presentation is: Wow! I learned so much and have so many things I want to try out now. I looooove looking at beautiful print layouts and magazine spreads, so seeing those connected to web design was just plain great. And good news! You can watch it online on Thursday, October 15 right here. (10/10 – Highly recommend!)

Notes I took/tweeted and some of my favorite live-tweets by others during her presentation follow.

She says we’re stuck in a rut.

Slide from Jen Simmons' Modern Layouts: Getting Out of Our Ruts at An Event Apart Austin

(And she shared several prominent examples that looked exactly like the image above, but with content plugged in. The rut is real.)

Slide from Jen Simmons' Modern Layouts: Getting Out of Our Ruts at An Event Apart Austin

“Panes are the new page.” She says consider how your brain recognizes a PDF & expects to scroll down. (Site example: Apple Watch page.) 

On what’s next:

“We’re about to see a renaissance in design on the web.” – @jensimmons excited about new CSS layout tools.

She talked about CSS shapes, responsive multi-column layouts, flexbox, etc. Gave great examples. Check out her resources, like: The Layouts Ahead.

On bringing print-inspired layouts to the web:

“Layout should serve the content.”

“There’s a world of Graphic Design other than the web.” She shared many beautiful print layouts, including many from Vogue Magazine. Also recommended checking out the Vogue documentary, The September Issue to see some of their process.

She asks where Vogue’s beautiful print layouts are on the website? Their site loses the magic in a grid & small images. The spreads from the magazine aren’t translated well to the site. 

“The web has matured enough” for us to look back at what we lost from print and add it to our sites. (Love this!)

Recommendations / Things to Check Out:

Thing I bet everyone in the audience agrees with:

@zeldman: I wish every web designer could see this presentation by @jensimmons.


Basically, if you haven’t seen this yet, you should check out the online version or watch her schedule for a chance to see her speak if she’s near you sometime soon. So much great info & helpful visuals!

Note: The Twitter bird icons link to the corresponding tweet for each piece. Thanks to @stephaniehobson for live-tweeting the talk along with me on #aeaaus. 🙂

Notes on @zeldman‘s & @yeseniaa‘s talks previously posted and linked on this page. More notes on other sessions added soon.

event notes, events, technology & web

Notes from An Event Apart Austin: Yesenia Perez-Cruz

Next in line at An Event Apart Austin (October 5) came Yesenia Perez-Cruz, a Philadelphia-based designer, with: Design Decisions Through the Lens of Performance.

Notes I took/tweeted and some of my favorite live-tweets by others during her presentation follow.

On starting a new project:

She says don’t forget to focus on performance. Twitter Bird Icon 16x16

Slide from Yesenia Perez-Cruz's Design Decisions Through the Lens of Performance at An Event Apart Austin

One example of why it’s important: Amazon observed a 1% decrease in revenue for every 100ms added to page load.

Always set a performance budget right from the start:

“A performance budget (for web design) is like your spending budget.” Spend more in one column, reduce in another. Twitter Bird Icon 16x16

“Quality is stability, performance, and reliability.” She reminds us that performance is a design feature, not a technical concern. Pages should weigh no more than 400-600kb, and make no more than 15 requests. Consider limiting fonts to 100kb. Twitter Bird Icon 16x16

Evaluate typography on performance + personality. Find a balance that works for both. Twitter Bird Icon 16x16

“Don’t add a style you don’t need.” Twitter Bird Icon 16x16

On comparison & keeping things in check: 

She says check your sites on webpagetest.org. Also check your competitors so you make sure your site is competitive with theirs. (Make it faster!)

On working with clients: 

Her advice when a client wants to add something large/not in the performance budget: “Remind. Educate. Find a balance.” Twitter Bird Icon 16x16

On style guides & testing:

Communicate & document decisions throughout a project. Recommends creating a style guide & being purposeful. Twitter Bird Icon 16x16

She mentions Trulia created a style guide, and now their site loads 21% faster now and they reduced unused CSS by 135kb. (Read more.)

Recommendation: “Get designs into a browser ASAP & test on real devices.” Twitter Bird Icon 16x16

Remember: 

“The important point is to look at every design decision, right through the design/build process, as something that has consequence…” -Mark Perkins


Yesenia shared lots of examples, comparisons, and details, so if you get a chance to see her speak or if she shares her slides online, check them out to get the full effect. (Looks like she’ll be speaking in SF in November.)

Note: The Twitter bird icons link to the corresponding tweet for each piece. Thanks to @mor10 & @RainbowliciousD for live-tweeting the talk along with me on #aeaaus. 🙂 

Notes on @zeldman‘s talk previously published here. More notes on other sessions coming soon. I’ll link them all in a list on this page.

event notes, events, technology & web

Notes from An Event Apart Austin: Jeffrey Zeldman

Jeffrey Zeldman, co-founder of An Event Apart, kicked off An Event Apart Austin (on October 5) with: The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man).

Notes I took/tweeted and some of my favorite live-tweets by others during his presentation follow.

On getting into work on the web:

“I was excited about the web because it was democratic and anyone could do it.” Twitter Bird Icon 16x16

On working with clients: 

His advice on showing a client your site design: “Never talk about the aesthetics. Talk about the business problems you’re solving.” Twitter Bird Icon 16x16

On navigating the workplace:

On how “politics trumps work” at big companies: “Attitude trumps work in most companies. Great work + bad attitude = fired.” Twitter Bird Icon 16x16

Bad attitudes are toxic and good attitudes are essential to good work in big and small companies. Twitter Bird Icon 16x16

Also: first impressions last! He says switch jobs or divisions within a company when you think you should be promoted but haven’t been. Once people see you as a certain thing (like an assistant), they might struggle to re-imagine you as a person with a different (higher up) position. Twitter Bird Icon 16x16

On getting involved in the community:

He recommends going to meetups to hang out with people in similar careers/with similar interests. He says even if you don’t talk the first few times… You will eventually! (Most people don’t open up right away, and that’s okay.) Twitter Bird Icon 16x16

On the importance of blogging:

“Everyone in this room start blogging.” He says it helps you get your ideas out & be more confident in talking about your work and your understanding of things. (I agree & recommend WordPress.com!) Twitter Bird Icon 16x16

Back to fundamentals “Blog like no one’s reading”… “The more I write the more I understand what I think. Twitter Bird Icon 16x16

And one last bit of advice: 

“DIY, people.” @zeldman says don’t wait for someone to hand you your dream job/project. Twitter Bird Icon 16x16


Note: The Twitter bird icons link to the corresponding tweet for each piece. Thanks to @jessfantz & @mor10 for live-tweeting the talk along with me on #aeaaus. 🙂

More notes on other sessions soon. I’ll link them all in a list on this page.

automattic, events

Home from Austin & An Event Apart

I had a great two days at An Event Apart Austin. It was the rare event where you can handle your booth duties and still attend all of the sessions (since it’s one-track and everyone was in one room during session time, rather than wandering around).

I’ll post my notes on the sessions here later this week. I learned a lot.