Wednesday, April 10, 2013

An Event Apart: Boston. June 18 & 19th 2012

In June of last year I went to An Event Apart. I wrote up my notes on my current workplaces knowledge base. I want a copy of those notes now that I'm leaving. So here they are:

Information about the conference can be found here:

Upper level thoughts: highly recommend. This is a well curated conference populated by passionate, innovative speakers. Insanely impressed by the content and quality. I would say the main, driving point in all of these presentations (besides a death star joke) is content first. Designers and developers are there to SERVE the content. CONTENT FIRST!

I'm going to break down the presentations individually and do a note/link dump. Many of these notes may not make sense without referencing the slides. But I want to stress to please feel free to ask me any questions in person or in comments. The slides themselves can be found here: [redacted] Please do not publish that link or share it outside of the office, An Event Apart has asked that we share responsibly.

Monday June 18

Content First! - Jeffrey Zeldman

Main point: designer/developer does not truly have control - our job: to connect the right user with the right content at the right time. Inherent conflict in the ebb & flow of the web and what our bosses want.

Concepts of note: contingency design (helpful errors, coding for the possible future needs), scent of information (we're hunters by nature, so even if something is buried in the site as long as the trail leaves a smell/is capable of following, we'll dig deep) and orbital content (that the content revolved around you and not the other way).

Book recommendations: Steve Krug - Don't Make Me Think, Aaron Gustafson - Adaptive Web Design

Sites to look at: Zeldman himself : with his very obviously CONTENT FIRST! web site. Text, text, text! Knowbility: accessibility organization with good resources

What s Your Problem? Putting Purpose Back into Your Projects - Whitney Hess

Main point: we are bad at defining what the problem actually is - and therefore are incapable of solving it. More emphasis should be put on understanding the problem before we design/develop a solution. Get to know the people you serve, otherwise you'll end up with a band-aid solution that will eventually fail. High emphasis on interviews/observations of the user.

Concepts of note: empathy for the problem owner is important, use empathy maps or personas to approach that (also, side note: make personas psychographically not demographically). 5 whys diagram. Fishbone diagram. Both help to get to the root of a problem.

Sites to look at: Whitney Hess

On Web Typography - Jason Santa Maria

This guy loves typography and hates helvetica, papyrus, comic sans and many other well known fonts. He doesn't hate Verdana.

Main point: Type can unify as it communicates. Contrast is super important. To pick a font, write down feeling words (bold, simple, sassy, gentle) that apply to your site and these will lead you to a font. Take note that there is a difference between display faces and text faces. Try to find workhorse faces that can do both.

Concepts of note: Contrast. Saccade (the way your eyes move as you read).

Book recommendations: (second for Steve Krug, see above).

Sites to look at: Typekit: a way to use fonts on your site, lettering.js: a jquery plugin for impactful typography,FitText.js: jquery plugin for flexible font sizes (headlines, not content text), Typedia: an encyclopedia of types, Mighty: Jason's design studio, Jason Santa Maria, Lost World's Fairs: beautiful example of Jason's work

The Five Most Dangerous Ideas - Scott Berkun

  1. Everyone is a designer: everyone is a maker, even the least technical of us. If you cast yourself in the role of mentor, you are an ambassador for design. A change of perspective is everything
  2. You have no power - you have a very small circle of control in your larger project (or organization). This causes people to get defensive and "hunker down" to protect that which they feel is in their power. This is not an effective strategy to gain any further control or to inspire others to listen to you. Whoever uses the most jargon is the least confident in their ideas and he's noted that teams that use the most jargon output the lowest quality work. There are three kinds of power - granted, earned and claimed. As a note of how to claim power, go to the white board first in meetings to clarify someone's thoughts. Immediate shift.
  3. The generalists are in charge - specific knowledge is our domain. The generalists oversee those of us with specific knowledge. In a meeting with more than 5 people, where decisions are supposed to be made - generally is not really where the decision is made. Catching the decision maker on the walk out or alone in their office has way more sway than being compelling in a large meeting (this is the gist of in-room power vs. out-of-room power). We have to own our ideas, if we won't put our all behind an idea, why would we expect our overseeing generalist to? Some percentage of our time (but admittedly not all) should be championing ourselves.
  4. We work in sales - nearly everything we do is a pitch (prototyping, meetings, presentations) so we need to accept that we are salesmen, that we need to be able to persuade and talk to people. Soft skills are insanely important. "if people think you are smart and useful, your job title is irrelevant"
  5. Creativity is risk - go out on a limb, take chances, be willing to fail. Because it will sometimes fail.

As a side note (i don't remember which point this was about - I think it might have been during Q&A) - trust is super important for anything/a team. Whoever is most senior in a room is responsible if the team doesn't trust each other - probably because that person doesn't trust everyone.

Sites to look at: Scott Berkun

Adapting Ourselves to Adaptive Content - Karen McGrane

Main point: Content first! Seriously. We should, in a perfect world, work with chunks of structured content that are wholly independent of design so that they can be consumed in whatever medium is desired. Most of our CMS's are coupled (content entry intricately tied to the design layer, think wysiwyg). There is a notion in most businesses of a "primary platform" that the content is made for (in a lot of industries this is still print. For the rest of us, even if we don't mean to, it's web pages) - this is bad. Everything should be written with a multi-channel viewpoint. Case study: NPR's content API.

Concepts of note: Blobs vs. chunks. Blob = "i just want to put all of my content into one big text area". Chunk = properly structured/metadata'd content. We should ALL be on team chunk.

I wrote two personal notes on this note page: 1) this presentation made me sad. giving in to blobs - content editors who just want to create a word doc. This strategy will never support multichannel publishing. 2) The structured content web part base is eerily close to a CMS within a CMS. If we do eventually build it to save to/pull from a list, we have essentially done what Karen wanted for part of our content - structured chunks that are independent of view markup/style.

Sites to look at: Karen McGrane, ftrain

Rolling Up Our Responsive Sleeves - Ethan Marcotte

Main point: Content first! We're not designing pages, we're designing systems of networked content. If something isn't valuable to your mobile readers, is it valuable to any readers? We are putting too much focus on columns. Possibly give some of the control back to the user (options for display).

Sites to look at: Starbucks styleguide: they went responsive and are sharing all their patterns, styletiles: design sales without webpage mockups, The Great Discontent: Ethan's favorite responsive site if he had to choose,responsive images: worked until browsers changed to asset pre-loading, picturefill: polyfill (sort of) to load pictures based on media size, responsive tables: choose which fields to show

Tuesday June 19, 2012

The Future of CSS - Eric Meyer

Very technical presentation about css3. My notes verbatim: labels & inputs: put label surrounding input. Math angles in prefix gradients, compass angles in CSS3 gradients (non-prefix). color stops = . (note, i literally just wrote color stops = blank...not sure what i was going for). Transparent = transparent black (in most browsers). Look up data-url as background images. GRADIENTS ARE IMAGES (creating images with css, not visual effects). text-rendering: optimizeLegibility.

Sites to look at: Eric Meyer

Interacting Responsibly (and Responsively!) - Scott Jehl

This dude is writing everything we should be using to make a responsive site. INSANE and awesome. See South Street on git.

Main point: We are not responsibly coding for all users - we are putting a heavy burden on the bandwidth of the user. We presume/assume that the network is solid/reliable. The average amount of js on a page is equivalent to six times (6 X!) the code that sent apollo to the moon. At the cost of the users. So we need to reconsider how we load. At the south street project, all of the following:

  • ajaxinclude - modular loading of content (every place we use this is a new http request, so....not great on its own)
  • quickconcat - combines many files into one request (pair with the above)
  • append arround - css moving of elements
  • ecssential - only loads the required css in a blocking manner (ie, in the head, blocking load of other items), otherwise the css lazy loads (or doesn't at all)
  • picturefill - images load based on media. picture element not supported in html5 specs at this moment, so use with divs. However, consider if we want to be loading HD images even if we can. Still a burden. A huge one.
  • enhance - help devs decide which scripts need to load on devices
  • wrap - a dom utility. Seems like an alternative to jquery.
Read recommended: Paul Ford - 10 Timeframes

Sites to look at: Scott Jehl, Filament Group

Buttons Are a Hack - Josh Clark

Touch presentation. We need to be as future friendly as possible - gestures are shortcuts to buttons. Windows 8 very much a topic here - the fact that it appears that "desktop" apps in windows 8 are written with web technology (html, css, etc). Embrace your metaphor - if your app/site looks like a physical object, people will try to interact with it in ways they know (ie, if it looks like a book, they will try to turn the page). Active discovery - learn something from games here, people learn how to play a game by coaching, leveling up and power ups. This should apply to apps as well. Saving the state of progress of what people have learned could be revolutionary. User interfaces are an illusion.

Sites to look at: Josh Clark

Mobile to the Future - Luke Wroblewski

I have a note on this one that I found the presentation awesome and that I'm not sure why my notes were so sparse.

Main point: mobile is the newest form of mass media, not just a branch of the internet. We should treat it as a different medium. Login and checkout are broken on most devices - why are we perpetuating an old, old pattern (a lot of case study here).

Sites to look at: LukeW

Handcrafted Patterns - Dan Cederholm

Main point: learning follows the pattern 1)imitation 2)repetition 3)innovation. Dan walked through some patterns he feels we need to start repeating now, since html5 is new, we can't keep feeling like we should always be innovating. Specific emphasis on html5 placeholder attribute, aria landmark roles, slats.

D on't

R epeat

Y ourself

concept in CSS - leads into an indepth talk about SASS, a CSS preprocessor.

Sites to look at: Pears: wordpress theme full of html/css pairs, SASS: css preprocessor, LESS: css preprocessor, Dan Cederholm

The Curious Properties of Intuitive Web Pages - Jared Spool

Unintuitive - easy to use once you know how. Unintuitive pages shift our focus from something we're interested in (content) to something we're not.

Used the magic escalator of acquired knowledge to illustrate the point. The top of the escalator is all the knowledge they need, bottom is no knowledge. Our users are somewhere on the escalator with current knowledge and we're trying to get them to some target knowledge. In order to do that we either train them or simplify. And by simplifying we're basically just making the site intuitive. The knowledge gap is the difference between current and target knowledge. Very interesting presentation about how a lot of patterns we're used to are learned/not intuitive. Also, re-designs are a really bad idea (his words) as you lose the knowledge people feel they have built up about your site. Gave stats on how bad (see slides).

Sites to look at: Hipmunk: example of intuitive flight site

No comments:

Post a Comment