event notes, events, technology & web, wordpress

Additional Notes for my Session at NTC’s WordPress Day

Hi, WordPress Day-ers! As promised, here are the additional notes to accompany my slides from my session, “From Sharing to Hashtags: Social Media Musts for Your WordPress Site.” Slides are shared here. (And thanks for joining me!)

Everyone else: I made this presentation for WordPress Day at the Nonprofit Technology Conference in San Jose on March 22. Some of the information is geared specifically toward nonprofits, but lots of it is pretty universal for using WordPress & social media together, so enjoy! 🙂

Note: I’m not rehashing all of the text on the slides, so look at those for the main ideas and images. These notes include the additional things I said and things I wish I would’ve had time to say.

Click to see the notes!

about sarah, events, wordpress

Achievement Unlocked

WordPress Day was a success!

I talked about social media and WordPress:

And then I celebrated with a milkshake for dinner:

 

It feels good to be flying home tomorrow having accomplished a goal I set for 2016. And it’s only March! 😀

events, technology & web, wordpress

NTC’s WordPress Day

I’m speaking at the Nonprofit Technology Conference’s WordPress Day tomorrow (March 22) in San Jose, California.

11:30-12:10pm
From Sharing to Hashtags: Social Media Musts for Your WordPress Site – Social media is a must for every organization in 2016. We’ll check out the sharing features built right into WordPress, as well as top plugins, apps, and tips, to update your social media strategy and extend your reach even further this year.

 

My slides are posted here. Additional notes to accompany them will be up by Wednesday.

Wish me luck! 🙂

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.