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.
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.
“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.
Evaluate typography on performance + personality. Find a balance that works for both.
“Don’t add a style you don’t need.”
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.”
On style guides & testing:
Communicate & document decisions throughout a project. Recommends creating a style guide & being purposeful.
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.”
“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.