kingkool68

Summary Of An Event Apart DC Day 1

September 27 2010, 6:15am

The Event Apart conference series is the top-notch gathering for people who make websites. Making its way across various cities in the U.S., the Event Apart tour stopped in Washington, D.C., which I was fortunate enough to attend. The speakers themselves were amazing but interacting with the attendees in real-time during the talks opened a whole new level to the experience. Below are some of the best tweets I curated from each of the sessions. All of which came from afeedapart.com, the official feed aggregator for An Event Apart.Web 2.1: The Medium Comes of Age by Jeffery ZeldmanZeldman started things off with a presentation covering the history of communication from the printing press to HTML5, and everything in between. In 2010, standards based design is no longer fringe, HTML5/CSS3 are viable technologies, and the mobile web is taking shape.The death of the web is greatly exaggerated. @tomkrukIf the web is dead, then print must be mummified. @Merlaak“There are 241 newsgroups on 1986. 240 are porn…” @grum_dot_comZeldman calls the telegraph The Victorian Internet @eduiconfR. Cailliau – leading man’s best friend. Worked with Tim Berners-Lee to invent the web. @mad_sunshine1991 AOL… remember 9600 baud modem? = yuck @lavinia“there’s a history of the internet being ugly and being designed by people who can’t design their way out of a paper bag” @ashleyjoost1993. Mosaic. We’ve come a long way. #aea http://yfrog.com/jcem8mj @eTapWebI remember using MOSAIC on my Amiga 500, wondering why “forms” are not showing… @tomkrukAnd you had to PAY for Netscape @cityrider49Netscape Gold FTW! @tomkrukZeldman breaking down landmark moments in web history: “1995 brings us the tiled background” @mattmediadc“IE no longer sucks, IE is awesome” – Zeldman, #aea … hear it from the man! @franksedivy1998 — internet traffic doubles every 100 days @ashleyjoostthe phrase “best viewed…” should be left to history @cityrider49dot com bust = coming off a coke bender @tonyvia2000 dot com bubble burst brought us benefits: people were forced to learn standards, improve their skills to make a difference. @mihswatThe CSS Zen Garden changed my professional career… Design for the web became a whole different concept @mattmediadc“you can’t burn every house down because we have this new idea for architecture” @TheTrozXHTML 2.0 was burning every house in the world just to propose a new architecture. @mihswat“HTML5. You keep using that word. I do not think it means what you think it means.” @eTapWebObject Oriented CSS by Nicole SullivanNicole developed a technique for managing CSS called Object Oriented CSS. The basic premise is to recognize visual patterns and mark them up consistently. Consistent markup results in more compact and efficient CSS code to style which in turn results in more manageable code and faster performing websites.If you write CSS for any site of significant size or traffic you MUST hear @stubbornella talk on OOCSS. This is my second time listen. @aebsrReason for CSS optimization, CSS Blocks progressive rendering @eduiconf42% of Alexa’s Top 1000 don’t gzip CSS. 44% have more than 2 files. 56% serve with cookies. 62% don’t minify. 21% have > 100k of CSS. @mihswat“Our sites are choking on the amount of CSS we’re throwing over the wire.” @eTapWebOOCSS makes me intellectually erect @grum_dot_comObject oriented CSS sound a lot more complicated than it really is. @kingkool68wow around May 2009 FaceBook had over 700 CSS files that totaled more than 1.9Mb @160mph“If you fighting your CSS, your architecture failed” @franksedivyFacebook has all of their headings bold. Non-bolded headings looked weird to users. @kingkool68People aren’t viewing your home page or reading your about section anymore. It’s all Google hit-and-runs, and it’s changing our design. @brian_klaasCss objects were better for humungo sites like Facebook. Seems overkill for smaller, simple sites. @kingkool68Dust-me Selectors to find unused css. http://www.sitepoint.com/dustmeselectors/ @chrismjonesA ‘giant pink heading’ should not become a ‘small blue heading’ when placed in another part of the site. @phejElements should be styled globally, avoiding area-dependent declarations in CSS. Rules should be predictable, avoid overwriting them. @mihswatLove how @stubbornella uses the story of the lady who swallowed a fly in relation to CSS @candiRSXWriting CSS to correct previous bad CSS is the legacy of the old woman who swallowed a fly. It makes sense when @stubbornella says it. @achelliosNicole Sullivan’s Grids on github – http://wiki.github.com/stubbornella/oocss/grids @MerlaakClassing elements with element names (“.h1″) is one step removed from or similar. @jgarberhmmmm…not sure about @stubbornella rec. on eg h3.h6 Isn’t that sort of hacky? Shouldn’t we re-examine design first? @ryanhoonlavertyAmong Alexa’s Top 1000, there’s a site with 511 declarations setting styles for h1-h6. Facebook used to have 958. @mihswatAfter a CSS rewrite, there were only 25 declarations. @mihswatAmen to the underscore hack. I use it all the time. @kingkool68Avoid styling IDs. IDs are for JavaScript. @mihswatstyling IDs messes up specificity @eduiconf“You should definitely suffer if you use hacks” @chrismjonesNot sure about this ‘not styling IDs’ and have class driven styles .that on top of the things aren’t semantic (.h1, .h2 etc…) … :/ @franksedivy“AVOID !IMPORTANT – except on leaf nodes” Good advice!! @JudyBad“I try to get specificity out-of-the-way so my cascade can really shine.” @andysherryagree with not using !important, disagree with not styling IDs. style IDs if they’re used sparingly or if “lead nodes”. @courcelanStyling using IDs, !importants, and too many nested elements is like fighting whose CSS rules are going to win. @mihswatwho knew? the way I wrote CSS as a n00b was on the right path – lots of class selectors and few element/ID selectors! @raelehmanI think OO CSS takes the art and craft away from CSS and gets it ready for consumers world! @franksedivyThe blinking cursor says, “You don’t remember anything.” (Referring to the command line) @MerlaakFind and replace is really why I use Dreamweaver as my coding tool of choice. No need to figure out grep. @kingkool68See how many times a declaration if when your css from command line. grep -r font-size . | wc -l @chrismjonesHmm, @stubbornella‘s OO approach to CSS preso has some good QA tricks, but her philosophy has too much scaffolding for general use @talbsFeeling a little weird about @stubbornella‘s approach to object-oriented CSS, but liking some ideas about finding duplication. @graphicsgirlOOCSS sounds like the best approach for Facebook, but not most sites we design and build. @graphicsgirlafraid newbs will get the wrong idea with @stubbornella‘s methodology and not consider scale/context/semantics @talbsI found taking the general idea from this presentation and building a custom framework for our approach to build sites worked great @aeaattendeeLooking at CSS in a way I never have thanks to @stubbornella @TheTrozFacebook reduced CSS size by 19% and HTML size by 44% after optimizations @mihswat* and _ hacks > conditional statements @160mphBeen using OOCSS for the past year and a half. Have never found a site that did not benefit. @chrismjonesThe CSS3 Experience by Dan CederholmDan emphasizes that sites don’t need to look and behave exactly the same in every browser. Case in point, he owns http://dowebsitesneedtolookexactlythesameineverybrowser.com/ and http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/. CSS3 is available in modern browsers today and suitable for non-critical elements of a design. His presentation consisted of several demos showcasing how CSS3 could be used to sweeten interfaces.Things We Left On The Moon: http://css3exp.com/moon/ (CSS3 demo site.) @zeldmanDesigners “pimping out” the message in a bottle – Dan Cederholm at ‘An Even Apart’ @sgstevens08Cederholm discussing progressive enhancement re: delivering info & determining UX based on capabilities of new devices @dinalewWebsites don’t need to look the same and don’t need to be experienced the same in every browser. @mihswatWill have to download IE9 beta. Just got a round of applause here. @mad_sunshineCSS3 rules you may use right now: border-radius, text-shadow, box-shadow, opacity, RGBA, multiple backgrounds. (IE version >= 9) @mihswathaha, I’m seeing a bit too much excitement about IE9 from speakers, and an equal amount of hate from attendees. @aebsrCritical vs. Non-critical elements. It currently makes the most sense to apply CSS3 to the latter. @eTapWeb-moz and -webkit, IE9 is now using border-radius. What do you think of that? @MattTurnureCheck out the background as you resize the browser window. Fun! http://silverbackapp.com/ @sgstevens08parallax effect IS pimping out the bottle. @ryanhoonlavertyMultiple background images in CSS3. Check out http://silverbackapp.com or http://css3exp.com/moon/ and resize your browser window. @eTapWebCSS3 gradient generator: http://www.westciv.com/tools/gradients/index.html @shiotaImpressed @stubbornella isn’t heckling @simplebits for using ID selectors in all his CSS examples. @lincolnwebsMobile First! by Luke WroblewskiLuke covered designing Web applications for mobile platforms first before the desktop. This helps you focus a website down to its bare essentials and functionality. The mobile web is exploding, and in some cases, is the only access someone has to the Internet.“Web products should be designed for mobile first, even if no mobile version is planned.” @eTapWebdesktop internet devices: 1 billion, mobile devices: 10 billion @tonyvia“50% of people who were new to the web last year were on mobile devices.” @eTapWebWhy build mobile first? More growth and future users. @tyraleMobile Web growth has outpaced desktop Web growth 8x. Smartphone sales will pass PC sales in 2011. @mihswatMobile is the new black @JudyBadGreat mobile products are created never ported. @kingkool68mobile stats from #lukew http://lukew.com/ff/ @eduiconf“27% of searches on Yelp! come from 4% of users (i.e. the users who access Yelp! via iPhone.)” @zeldman“Designing for mobile forces you to focus and prioritize.” @eTapWebMoving from desktop to mobile… First remove 80% of the crap @tyraleDesign for mobile first and you will get down to the things that matter. @mad_sunshine“everything else on this page needs to pixelate and die.” @courcelanMobile devices’ limited screen size makes you focus on what’s important – main features, straight communication. @mihswatUse vector to design for the web, build with css3 it will scale automagically! @tyraleMobile design is all about adaption @kingkool68for mobile, make the content the UI @rkunboxed100ms delay results in 1% sales loss for Amazon ($191 Million) @eduiconfGoogle says 500ms delay drops search traffic by 20%. Wonder what our 8,000ms server hangs do. Cough. @itmaybejjoptimize for mobile:speed eg, eliminate redirects & use app cache for local content storage @dinalewMobile is quick bursts, and mostly at home on usage. @tyraleYour mobile is with you all the time, so designing for mobile means designing something that can be used all the time. @zeldmanOnly make content and web apps that are useful to people all the time @halvorsonPeople spend only about 2 to 4 seconds on a webpage using a mobile device. Optimize your site for this behavior. @mihswatdesign = constraining until an elegant solution presents itself @laviniaMany users will interact with mobile devices using one hand and one thumb (one-handed touch), so the UI has to be simple. @jessicaivins1 million per day = touch based phone purchase @laviniamobile: must accommodate “french fry fingers” @JudyBadwow. ’1.1 billion consumers with Nokia devices in 2009′ @westerndave8-10mm = average human finger pad , so design for 9mm touch area @laviniatouch me = Touch Gesture Reference Guide http://www.lukew.com/ff/entry.asp?1071 @westerndaveHovers are not intentional, clicks are @eduiconfgreat stat: People spend only about 2 to 4 seconds on a webpage using a mobile device. Optimize your site for this behavior. @laviniaHovers are not intentional. Just because a user’s mouse has paused somewhere doesn’t mean they expect to see a menu. @zeldmanmost devices use wifi for location (gps is narly indoors) @laviniaYes! Hover cannot be considered an intentional interaction on a mobile device. I activate them accidentally on my *desktop. @kissaneYelp’s augmented reality feature boosted their sustained traffic by 40 to 50 percent @mihswatWonderful presentation from Luke Wroblewski. This really jives with a lot of stuff that get talked about in IxD these days. @iwilsonjrMessage and Medium: Better Content by Design by Kristina HalvorsonKristina sure knows how to develop a killer content strategy. A website’s message carries through to other places on the web than just the main website. Customer support, social media, and meta data should all echo the tone of the main message. And there is a lot more to a good content strategy than determining what text goes on the front page. How will this content be produced? Who will update it? How often will we add new content?Kristina Halvorson (@halvorson) asked us to sing Happy Birthday to her son. How sweet… @shiota@halvorson on two of my favorite topics: teeth & content strategy! @dinalewhaha. User-scented content. “Smells like user.” @ryanhoonlavertyContent strategy plans for the creation, delivery, and governance of content that people care about. @eTapWebwebsite content: stop talking about what you do and talk about what your users want. hello user-centered content @dinalewcontent requirements ≠ content strategy @tonyviacontent strategy = content (substance + structure) & people (workflow + governance) @tonyviamessaging is not a mission statement, brand promise or tagline @eduiconfnobody cares about your mission statement [so true!] @tonyviaFirst second visiting a website is an emotional response @kingkool68user forms an impression of your site in ONE SECOND (load time + design) & decides to trust you or not within 10 seconds @tonyviaIn 1 second user should have an emotional response. 10 seconds, understand your primary message. 2 minutes, secondary msg. @eTapWebReminded of how some of the traditional #ux roles/deliverables can suffocate copywriters’ creativity/skills. Preach on, @havlorson. @talbsInclude maintenance requirements for key pages – great content strategy idea @graphicsgirlConsistency inspires trust in your readers. @JudyBadconsistency inspires trust in your readers @laviniaVisiting every page of your site with its main message in mind helps to see if you’re communicating it the right way with consistency @mihswat#aea is really driving home the importance to collaboration across roles/disciplines to tackle those important grey areas of an experience! @talbsAnd your FAQ page is inconsistent. Where’s the fun, Ben & Jerry? @mad_sunshinepet peeve: “contact us” page hiding phone/address 10 layers deep. after all, that’s all we want from “contact us” page 99% of the time @sarahdippityWorkflow and governance are crucial for good content strategy. @kingkool68“whats our facebook strategy?” “that depends… what are you trying to do, who’s going to do [keep up with it]?” hear, hear. @courcelanWhat is your social media strategy? Is it successfully delivering your message? Or do you have a Twitter just for the sake of it? @mihswatPage descriptions. Tweets. Facebook posts. Google results. Your message should be consistently delivered everywhere. @mihswat@halvorson‘s talks on content strategy are ALWAYS timely and poignant. Maybe because content strategy is a never-ending struggle… @ryanhoonlavertyAnatomy of a Design Decision by Jared SpoolJared pointed out that every site on the web came to be from a series of decisions. He has identified 5 styles to design decisions and when each style might be appropriate for a given project. Oh and university homepages feature images of girls under trees way too much.Seen it before, but it’s easy to forget just how awesome http://havenworks.com/ is… @davidocoulter“it validates” – Jared Spool (sarcastically referring to havenworks.com) @SethBlanchard“Someone actually designed this on purpose. This way.” – @jmspool on a particularly egregious web design specimen. @alykatSites like havenworks.com or arngren.net went over design decisions. Now that’s something to think about. @shiotaJared is talking about the famous 37signals vs. Donald Norman “celebrity deathmatch”. @shiota“Self design works great when you’re designing something for your own use, or for use by people just like you.” @eTapWebCrappy and unhelpful error messages are the perfect way to frustrate your user. @shiotaUnintentional design happens on its own. Works great if user will put up with whatever or we don’t care about support costs. @eTapWebAirline websites: helping AEA speakers make their point since 2005 @ryanhoonlaverty“Genius design: when we’ve previously learned what users need. We’re solving the same problems repeatedly.” @eTapWeb“Activity Focused Design: designing for new activities unfamiliar to us.” @eTapWebWell @jmspool‘s talk includes a reference to @lingscars‘ website http://www.lingscars.com… and well, just check it out. @hellogeriJared is comparing Six Flags map to Disney World’s map. Both amusement parks, yet totally different maps. Each with its own focus. @mihswatDisney. Someone has thought about what happens between the rides. Thinking about the experience. @mad_sunshineexperience is the stuff that happens around usage. @lavinia“User experience is what happens in between activities” @simplebitsUniversity website traps — girl under trees. WOW! So many of them… @mad_sunshineOMG I can’t search – the search box is on the left [side]! @raelehmanRule #17: Always put the search box in the upper right @grum_dot_comHmm. design style guides and guidelines never work. @mad_sunshineInformed Decisions > Rule-based Decisions @160mphRule-based decisions prevent thinking. Informed decisions require thinking. @sarahdippityDesign is about the exception cases. If everything was always the same, we would not be interested in this work. @beepInstead of spreading dogmas/methodologies, try spreading tricks/techniques. People will learn, think, and won’t struggle with rules @mihswatSummary Of An Event Apart DC Day 1 by Russell Heimlich