Neatly Sliced

An Event Apart 2008, Day 1, 6:15pm – 7:15pm

Read the previous talk in this series, Underpants Over My Trousers by Andy Clarke, or view An Event Apart’s Table of Contents

Special Adobe Session: Web Workflow with the Adobe Creative Suite

Adam Pratt Sponsored by Adobe

• CS4 walkthrough
• This project includes >1700 Person Years of development time to “give
  birth to the baby”
• Photoshop
• GPU acceleration
• Real-time canvas rotation! Really, really cool(tm)
• 442MP camera capture. Lightning speed zooming on this massive file. 56.3% zoom and everything still looks great, from new anti-aliasing engine.
• You can clearly see signs that are 1.5miles and 2 miles away. Cool deal.
• New bird’s eye view to zoom in and out quickly. Shortcut key for it.
• Once you zoom over 500%, you can see the pixel display. Yes, each color for each pixel. Cool.
• Content aware scaling – rather than squashing 4 people when you want to squish a 4×6 to a 4×3, it would make people super skinny. But content aware scaling will keep the people normal but you can scale and crop it over… really snazzy.
• Illustrator
• Improved gradients.
• InDesign
• XFL – FLA format provided in XML. So you can take your inDesign document and bring it over to flash. Neato.
• Good for taking your print publications and taking them online. There’s a convert to web catalog type thing option (real name please?) – like “view my ad online” where you turn the pages and look through the catalog with flash. Some people have been doing this already, but either huge jpgs or junk looking text. Soooo this is awesome because then people’s print catalogs that you create can go straight to the web without any work at all.
• Flash
• The bowing tool – create separate but attached elements and the can interact, like sections to a crane’s hinges, and then move the pieces around and they are all attached.
• Motion Tween – with a couple clicks, can create a tween. Easy enough, but then you change your mind, and that’s never fun.
• Implementing tabbed browsing across the suite
• Fireworks
• color pallette is working right in the apps, running flash within their own apps
• Better PSD support
• Export to MXML directly to flex!
• Acrobat
• PDF export – use password to open doc OR if don’t know password, maybe they can see it but no printing, etc.
• a PDF created in CS4, someone can use comment tools in the FREE reader. ONLY because you created it in CS4, though, can they use the comment tools. Usually they would need the pro version.
• Dreamweaver
• Visual notification that files are too large. Allows to recompress the original – recompress the web saved graphic to a lower sized file. That’s pretty cool. You can clean up the slop without having to go back to a designer.
• Live Code/Preview
• Tab support still – new for Dreamweaver
• links under the tabs to the files that it references. Don’t need to hunt and peck like we used to.
• Running webkit inside of Dreamweaver - Safari – on both mac and windows
• Live Code option – the code changes live in the split source view. Annnnd, you can freeze JavaScript, so you can see the change in your code based on the JavaScript. Awesome for troubleshooting.
• Emulation of the Firebug style inheritance display (code and style navigator)
• Multi-touch support for Photoshop – the pinch and rotate. Was this included in CS3? Cool regardless.

View the next talk in this series: Live Code Workshop with Eric Meyer, or skip to An Event Apart’s Table of Contents

Popularity: 15% [?]

An Event Apart 2008, Day 1, 5pm – 6pm

Read the previous talk in this series, Designing the Details: Web-App UI Design Beyond the Basics by Jason Fried, or view An Event Apart’s Table of Contents

Underpants Over My Trousers

Andy Clarke

• A design related talk
• Comic book analysis- the transcripts of the comic from the writer
• “Final panel on this page, and it extends across the entire bottom tier of the page” – this is clearly a direction from the writer to the designer. This doesn’t happen anymore on the web.
• Don’t buy a CSS book, go buy “Understanding Comics”, to greatly influence web design.
• Eliminate the borders, and your eye extends beyond the normal bounds. In doing so, the reader will allow more time to read that block, as the amount of time to read a section of text (particularly with comics, the entire slideshow is comic screenshots) is bound to the size of the block that it is in, or without borders, it then extends to the boundary of your comic book or screen.
• How many divs for this?
• None. It’s a UL of news items. Code, replete with markup
• We can do lots of things inspired from comics to help people find their content. 
• Sort of break away from the grid approach, although the grid is still there, but just much more subtle. Looks less griddy.
• How do we draw the eye? Comics use speech bubbles. Web can use images. 
• We don’t build up suspense and drama for the web.
• Watchmen : pages 4 and 5 of slide PDF. 
• Kinda like splashpages. Forget what we used to think about them, they used to be front covers. No, instead make them front covers with content, explanatory and introductory.
• How much of your design process do you reveal to the client?
• Hardly at all. People don’t care about how, they just want to see the end result. That’s more a conversation you have with your peers more than you delve into with your client.
• Andy Clarke shows clients fewer Photoshop markups, he shows a working prototype.
• He deals with being a 1(to 2 to 3)-man shop by setting expectations properly in the beginning, so they don’t think you’re a 20 person company, and also have a good workflow and collaboration with the others in your setup.

View the next talk in this series: Special Adobe Session: Web Workflow with the Adobe Creative Suite by Adam Pratt, or skip to An Event Apart’s Table of Contents

Popularity: 5% [?]

An Event Apart 2008, Day 1, 3:45pm – 4:45pm

Read the previous talk in this series, On-the-Spot Usability Reviews by Robert Hoekman, Jr., or view An Event Apart’s Table of Contents

Designing the Details: Web-App UI Design Beyond the Basics

Jason Fried of 37 Signals

• Hilight the craftmanship of our product
• The calendar items that have active items are not emboldened, but normal, and the inactive pages are weakened. Don’t focus on normal and strong, but normal and weak. 
• People often design the screens with a series of functions and goals, but think about flow and how that’s going to work. Use JS/Ajax to make flow more smooth.
• Think about Before, During, and Next
• You should minimize having to use the mouse. You don’t want to keep using your mouse. Think how you can focus people’s attention on the next thing they have to do. 
• Add contact, the expected item pops up in Ajax popup, you select what you want. It pops up, the focus immediately goes to the text box where you want to type the note. They start typing, and then they use the mouse for the first time to add the item.
• Next time people will want to add a follow up task. So, add a little yellow bar there with the “Add a task” link deal to it, which will expand to a text box with the allowance of an addition of a task.
• Copywriting is key
• “Who can see this person?” It’s a permissions issue, but don’t make it “Permissions”. Make it “Who can see this person?” Then continue the conversation with the options: “Everyone, Only I Can, Select a group…, Select people…”
• Write your copy like you would talk to someone. Change things, don’t do person(s). Make it “Delete the selected person” and then “Delete the 2 selected people”. Just like we pay attention to pixels, these things matter because it contributes to the user experience.
• Be as explicit as you possibly can. Don’t do “Advanced”, give people an idea. 
• If you’re going to “add a category”, type “Add This Category” to the submit button. Don’t say “Submit”. No one says that. Say what you mean.
• When hovering over stuff and having sections activate (like a hover tab that appears on hover of a TR), let it stick around a bit in case they overshoot. They have found .25 seconds to be a good amount of delay time. If off the target for over .25s, it will disappear then. This is the same for certain areas that for someone reason you want to have a delay to appear as well: .25s.
• Allow things to have a delay. We’re accustomed in nature to things not happening instantly. When checking off an item in a todo list, allow it to relatively slowly (slower than instant) cross out, and then fade out to delete. This seems more natural.
• Photographic memory
• The app should remember things.
• Create a task – there is a checkbox for “Let everyone see this task”. After making the post, remember this. Remember the last default settings, because whatever they just had as a preference they will likely want to keep for the next time around.
• What just happened?
• Allow ppl to know that something has happened without having to reload the page. The Yellow Fade Technique™. Also known as .highlight, or whathaveyou. Before the page would reload, but now in the Ajax world, this allows a notification. It feels natural.
• Allow dialogs to come up that notify and then fade away. Give them some sort of confirmation that it actually worked.
• Drag and drop visual cues to allow people to do tasks with an immediate visceral experience
• reorder TRs by drag and drop
• Show information (the “drag this item to a page in the sitebar to move the note to that page” box) as it’s needed – not on an immediate click, but wait until they’ve gone 200px to the right (toward the sidebar).
• Eliminate error messages where you can.
• Most cases it’s not an error, but an inconvenience. They add a new to-do list without naming it first. Most apps would say “error, requires a name”. Well can you just name it “List” and they can change it later? I think so. Just do that. Don’t error, just apply a default.
• Applies thumbnails to a document as it is added, so on the grid view, can see the thumbnail next to the item. Must be generating it server side and applying an image thumbnail metadata to the piece of content.
• These things take extra time, but these things matter. Jump people to where they need to go, implement JavaScript to let them know where they need to go.
• 37Signals made a conscious decision that their products will not work without JavaScript. And that’s okay for them, some projects that won’t fly. But state that in the product requirements that you’re selling.
• 37Signals uses Prototype
• “We use Prototype because Sam, the guy who works for us, uh, he developed Prototype.” – Jason Fried
• He likes to use words as much as possible without icons
• The idea that everything has to be obvious is unimportant. The horizontal drag to a new page, that’s not mission critical, there’s nothing informing the user that they can do that, and that’s okay. If they don’t know that, it’s not a big deal either.
• 37Signals doesn’t use wireframes, doesn’t believe in them. Doesn’t use Photoshop very often. Doesn’t use a Photoshop mockup. They go straight to HTML, because that’s real and that’s what the customer is going to use.
• You never know if anything is any good until you build the real thing. Everything else is best guess, but once you start plugging in real content, it’s nothing. 95% of the time (cavalier made up stat) it is much better to start for realz.

View the next talk in this series: Underpants Over My Trousers by Andy Clarke, or skip to An Event Apart’s Table of Contents

Popularity: 6% [?]

An Event Apart 2008, Day 1, 2:30pm – 3:30pm

Read the previous talk in this series, Design Criteria: Actionable Ideas by Sarah Nelson, or view An Event Apart’s Table of Contents

On-the-Spot Usability Reviews

Robert Hoekman, Jr

• An interaction designer and usability specialist
• Purpose, benefit, usage are the three keys in analysing a site’s usability
• “Clutter isn’t good, texture is.” – Seth Godin
• Giving away copies of “Designing the Obvious”
• http://theideacenter.org
• Yellow on the site needs to go
• Any tips to educate the client to not mess it up?
• If this is supposed to be like a billboard, do that. Don’t unite. 
• People go right past text. They look, skim, and find “trigger words”
• http://asufoundation.org
• The tiny “Give to ASU” link is the whole point of this website. 
• Homepage-news blips should go somewhere else, make them three bullet points and then a take action button
• People skip blocks of text, so make these bullet points
• Then click “Make a gift online” and you start the payment process
• Before you get to the form, answer questions and paragraphs on previous pages. Make sure there is NOTHING on the page that is focused on getting them through the process
• The “Select a college or unit for investing” … dragons be there
• Just get rid of the dropdown menus for people who have come through a link from a specific fund, rather than have them be prepopulated
• Do as much as possible to the workflow to get that information out from that page and off to somewhere else, where then they click “give” and have it filled in from there.
• http://schooldude.com
• Not many complaints. Whatever your webpage is, make your entry points clear.
• No one is going to read the text on the homepage. Treat it like a billboard, just drive them to the current info. Make that the important information. Hilight it, and eliminate information 
• To get feedback on your own site:
• 5 second usability test. Show it to the user for 5 seconds – could be anyone, your mom, whoever. Then ask them to write down everything that they remember from the page. Your page should communicate its main purpose in 5 seconds and they should be able to remember that. Fast, cheap way to get that feedback.
• http://fivesecondtest.com/
• You upload your screenshot, it creates a link, and you email your link to people and they write the 5 bullet points they remember. Cool.

View the next talk in this series: Designing the Details: Web-App UI Design Beyond the Basics by Jason Fried, or skip to An Event Apart’s Table of Contents

Popularity: 5% [?]

An Event Apart 2008, Day 1, 12:15pm – 1:15pm

Read the previous talk in this series, Storytelling by Design by Jason Santa Maria, or view An Event Apart’s Table of Contents

Design Criteria: Actionable Ideas

Sarah Nelson

• Design Criteria are: a set of 5-7 short, memorable strategic directives your team can use to focus design activities. And… design criteria emphasize specific rules your team will follow when tackling the problem at hand.
• Working within constraints: contraints are freedom.
• Constraints help us to:
• generate ideas
• evaluate ideas
• make decisions
• move forward
• Sarah Nelson hates the phrase “Think outside the box.” She prefers “Innovation”. 
• The box helps innovation. The box is a constraint, and it engenders innovation.
• In her dream world, she would work alone, create the box, and no one would have to know the box except herself. 
• Unfortunately, not one person has the box. Everyone has a small piece of this box.
• To make the implicit constraints explicit… Design Criteria!
• The Creative Process
• Every creative process goes through the same arc: divergence to convergence
• Say, planning a trip… Divergence: Pull out the list, where can I go on vacation? I can go to 27 places, but let me narrow it down through this following convergence stage. Brainstorming = divergent. Narrow = convergent.
• Examples of Design Criteria:
• Diabetes study
• Google calendar
• set out a vision statement  before even starting (vision statement, design criteria, same-same)
• design criteria item: “Drop dead simple to get information into the calendar”. It’s constraining, but it’s not super-duper constraining, like “Must add an item within 3 clicks.” That’s just silly. Get the point, and leave it at that: “Drop dead simple”.
• Having that written gives you justification for making a specific type of design decision. Goes back to Zeldman’s previous talk, of creating a paper trail so you have a foundation to go back to with the client.
• Flickr
• http://www.flickr.com/about/
• Very simple goal, and keep in union with that
• PayCycle 
• “We need to increase conversion rates” – this is not actionable! Need to have something actionable!        
• photo of all the papers around the office – those were all the steps in the set up process. People were failing to follow through because it was such a monster.
• Is primarily a wizard, you go and go and go.
• Their criteria that was bad:
1. Be Human
2. Work the way your customers do
3. Set expectations
4. Show progress
• (These things aren’t really that actionable)
• The design criteria Sarah wrote:
1. Come from anywhere
2. Start from the start
3. One brain, many brains, one brain
4. Art, not science
5. Support with evidence
6. Criteria everywhere
• Art, not science
• Don’t make things too open-ended but not too concrete.
• Support with evidence
• Show progress. “Everything is like, next, next, next. It never says ‘You’re almost finished’”. Let them know where they stand.

View the next talk in this series: On-the-Spot Usability Reviews by Robert Hoekman, Jr., or skip to An Event Apart’s Table of Contents

Popularity: 5% [?]

An Event Apart 2008, Day 1, 11am – 12noon

Read the previous talk in this series, "Debug/Reboot" by Eric Meyer, or view An Event Apart’s Table of Contents

Storytelling by Design

Jason Santa Maria

• How does a design tell a story?
• Graphic resonance: from a young age, we look for meaning from images.
• The atari game "Haunted House" – cheesy atari game, and the creepy image for the cover art. The cover art sets the mood, and it fills in the gaps where the graphics cannot achieve in its 8-bit glory.
• The designer is the narrator – helping fill in the gaps with imagery.
• Compare: the text version of the Spam King article to the print. The print you get a feeling… the text, there's no feeling. It has been distilled to content, and it has lost a lot of its meaning behind it.
• "Design can't not communicate" – David Carson, Helvetica
• Our logos look the same – all the talk logos. Our designs look the same – no one complains about them.
• "It is a plague [of sameness]." – Jason Santa Maria
• How can we create awesome design when we're limited to 5 typefaces? We're capable of telling a story, type is one way of doing this, but how can we present this to the web?
• In old time, they were limited to maybe 5 types and only a few sizes, yet beautiful design was made. Are we just not designing hard enough?
• Base a design off of ratios (like the golden ratio: 1.618:1). You create a visual language, a visual cohesion. Whether they can tell or not that you're using a ratio, it is a natural, cohesive, subconscious thing.
• Utilize rule of thirds? Creates tension, interest, but applicable?
• Utilize them, but they don't apply in the same way. Rule of thirds relies on dimesion – can't predict it or count on it, cannot count on width. Cannot really work – they may not see the whole width of the page, they could only see a portion.
• "No One Belongs Here More Than You" – breaks all the rules, but still sucks you in. Tells such a great story. It's the story that makes this site reign.
• http://www.fray.com – no real consistent design through the site, but each story has its own feeling.
• Shows lots more examples:
• abriefmessage.com
• principlesofbeautifulwebdesign.com
• ESPN e-ticket (find through google search)
• Each article has unique mood, unique design
• wetellstories.co.uk
• jasonsantamaria.com
• Designed with the ability to throw stuff in to change up the design. Simple CSS values – not difficult to do technically, but just a matter of well-planning the front end
• Trying to disprove the theory that it takes forever to make swappable design.
• Jason's article on "Shake it like a metaphorical".. polaroid.
• Can't make a completely new site each time, it's not a completely new page liek the ESPN stuff, but the primary content has freshness. Let the design come out.
• Photography
• "Written with light"
• People weren't getting what was happening or what the good of photography was. But they get the easy message "written with light". They don't care about the technical aspect of why it is made.
• Jason's CMS: Expression Engine
• Getting the content online is not enough. There needs to be greater consideration to what we put online – more thought in uniting the content with the design.

View the next talk in this series: Design Criteria: Actionable Ideas by Sarah Nelson, or skip to An Event Apart’s Table of Contents

Popularity: 5% [?]

An Event Apart Day 1, 9:45-10:45 am:

Read the previous talk in the series, Understanding Web Design by Jeffrey Zeldman, or skip to the note’s talk Table of Contents

• CSS for accessibility checking
• You can set up safari to use a debug stylesheet
• Example of his personal debug.css
• Hilight the things that you do NOT want, that are not supposed to exist:
• Empty checking
• div:empty, span:empty, td:empty, etc.
• Note, these things are not supported by IE, but who cares because this is a development purposed stylesheet
• Really nice if the CMS isn’t pouring stuff into the HTML like it is supposed to.
• May be generating LIs that are completely empty – never notice them if hiding bullets, but there you go.
• A CMS with a “rich text editor” – see what this evilness has pushed in. Those love to generate empty Ps.
• Markup that shouldn’t be there
• *[style], font, center{ outline:red 5px solid;} – these are invalid/not good practices. Point them out and then manually address them.
• Also *[class=""], *[id=""]. Want to be able to catch these.
• Important to keep your code clean. Take pride in your work, just like in HVAC you want to keep it pretty even though it’s behind a wall, the same here. No one will see it, but have pride.
• Image cleanup
• img[alt=""] – blank attr
• img:not([alt]) – look for absense of alt
• outline – does not affect layout of the page. Not counted in width/height. It is drawn outside the border. Outlines are perfect for diagnostics, for hover in Ajax effects, etc. (Don’t want your layout going like crazy on hover because you’ve added a border to hilight Ajax action)
• Table cleanup
• Your THs should have scopes:
• th[scope="col"], th[scope="row"]
• Links
• a[href]:not([title]) – check for title attribute existence.
• a[href="#"] – “when a href = octathorp(e)… yeah that’s what I said. Because that’s how I roll.”
• Evidence that you’ve been naughty and not cleaned up your JavaScript. You want to have a fallback for your links.
• a[href=""] – CMS or you have forgotten to fill it in.
• What if you can’t develop in Firefox? What if you have to develop in IE7?
• Well fortunately, IE7 does support attribute selectors. But not not()… so you have to simulate.
• IE7 does not support the outline style.
• Give everything a border, and then as things are good, take them away.
• a[href]{border:5px solid red;}, and then a[title]{border: 0}, a[href="#"]{background:lime}, etc.
• Next section, checking for cleanness of code.
• div div div div div blah blah{outline}, because nesting too much can be just as bad as tables. Fix things, and for each subsequent section he increases the intensity of the color outline.
• form:not([action]) – there needs to be a real life action so that if no JS, they can still do something.
• *new thing* inputs cannot be direct children of the form element – it has to be wrapped by a block level element, like (or, specifically) a fieldset.
• Recap of his reset.css
• He admonishes us to personalize the reset.css.
• Make it less a reset.css as a reboot.css. Do the change once, in this document, than resetting and THEN rebooting
• Don’t count on CSS for content generation-
• Don’t use it for quottation marks – go ahead and turn the auto-insert off, but probably shouldn’t use it.
• Don’t use it for legislature and legal code and whatnot – could lead to lawsuits later. Point 1.2.5 will always be that, don’t use CSS because that can easily change, and it won’t appear in CSS disabled devices.
• NEVER turn off :focus, because you’ve made it insanely impossible for people who navigate by keyboard.
• Why the huge group selector rather than a *?
• Different browsers allow for styling for form elements, others don’t. They often ignore stuff. Browsers very inconsistent in styling form elements. Soooo just ignore.
• It’d be nice to say *[not(form,input,textarea....)].. but not() can only have one element, not a group selector.
• Learned a few things / issues:
• font-size, font-weight, font-style, etc. for fonts: inherit is not supported by IE for windows.
• Plus, issues are caused of inheritance – everything is reset. so you reset the li, but the p, strong, span inside are set to that initial reset to line-height 1. Inheritance has been broken.
• background: transparent also causing issues with td in IE.
• IE will not apply the TR background to its children – it will just apply the reset background:transparent. Silliness. You’ll have to say td, th background specific. This explains why the issues with background table colors in IE. Set the TD.
• If you use a CSS framework, it should be one that you built.

Read the next talk in the series: Storytelling by Design by Jason Santa Maria, or skip to the note’s talk Table of Contents

Popularity: 8% [?]