Lesson 2: Involve the audience.
Example: Washington Square Park's fountain. People started using the fountain as seating/etc before they finished getting it working. Soap in the fountain = fail.
by Wesley Hodgson at 8/18/2008 11:18:45 PM
Enormous community response to HappyCog's redesign of the WordPress Admin interface. It's kind of like NYC subway user's chalk-modifications of the subway's signage (for better/worse).|
by Wesley Hodgson at 8/18/2008 11:21:22 PM
They involved users in the design process. Posted demo's of the new interface during the process.
by Wesley Hodgson at 8/18/2008 11:23:32 PM
Be ready to step away from what you "know" and involve your users.
by Wesley Hodgson at 8/18/2008 11:23:53 PM
Lesson 3: Listen and watch.
by Wesley Hodgson at 8/18/2008 11:24:09 PM
More music analogies. Good stuff.
Ex. practicing music: if you're by yourself you can kinda speed through stuff you're comfortable with. Playing with a group you have to listen and watch your fellow musicians.
by Wesley Hodgson at 8/18/2008 11:24:54 PM
And an architecture example: desired paths. There's a Flickr group for this. Basically, an architect says "you should walk this way", but people may not agree. You can see their worn out paths in the grass as they take shortcuts.
by Wesley Hodgson at 8/18/2008 11:25:47 PM
Liz read my mind. Talking lots about eye-tracking, but I'm thinking "not everyone can afford that!"
by Wesley Hodgson at 8/18/2008 11:28:04 PM
She mentioned a service for user feedback. Voice something. Gonna have to look up her slide.
by Wesley Hodgson at 8/18/2008 11:28:37 PM
Lesson 4: Call and Response.
by Wesley Hodgson at 8/18/2008 11:28:46 PM
Examples:
User Reviews. Commenting on the "parent thing", but also responding on other people's responses.
Unboxing website.
Abriefmessage.com: 200 word "limit", but everyone seems to have to get their piece to exactly 200 words.
by Wesley Hodgson at 8/18/2008 11:29:27 PM
Participatory design / user-centered design. This is all focused on the process of DESIGN, not the process of USE. The latter requires "Design for participation."
by Wesley Hodgson at 8/18/2008 11:31:27 PM
hahah.. Liz mentioning "no pants day" in NYC in January. Put on by Improv Anywhere (of course). Hilarious picture of pantless people on the subway.
by Wesley Hodgson at 8/18/2008 11:33:30 PM
Liz: www.bobulate.com
by Wesley Hodgson at 8/18/2008 11:34:02 PM
And she's done (minus questions).|
by Wesley Hodgson at 8/18/2008 11:34:05 PM
Someone asked about typography as lots of presenters are using very similar typefaces. Liz is using "archer" which was designed for Martha Stewart.
by Wesley Hodgson at 8/18/2008 11:35:53 PM
Interesting but unrelated (sorta): the same parts of the brain fire during improvisation and "unselfconsciousness" are the same parts that fire during dreaming.
by Wesley Hodgson at 8/18/2008 11:39:20 PM
DAN CEDERHOLM IN THE HOUSE.
by Wesley Hodgson at 8/19/2008 12:01:52 AM
TOPIC: Implementing Design: Bulletproof A-Z.
by Wesley Hodgson at 8/19/2008 12:02:31 AM
by Wesley Hodgson at 8/19/2008 12:02:54 AM
CRAFTSMANSHIP in IMPLEMENTATION.
Crafting implies something that isn't cookie-cutter.
by Wesley Hodgson at 8/19/2008 12:04:06 AM
Dan's slides are beautiful and simple. Nice.
Also says: cool stuff that won't work in IE. *round of laughs*
by Wesley Hodgson at 8/19/2008 12:05:40 AM
Now coffee talk. POWER OF THE BEAN™. That's the inspiration of today's talk.
Iced or Hot. Website that decides on whether you should order an iced/hot coffee based on the temperature in your location.
|
by Wesley Hodgson at 8/19/2008 12:06:59 AM
Non-functioning demo: http://www.icedorhot.com
by Wesley Hodgson at 8/19/2008 12:08:16 AM
A: anchor links.
- not just link text is clickable in a UL nav list, but the entire row.
by Wesley Hodgson at 8/19/2008 12:10:53 AM
B: border radius.
- rounded corners are predicted to be the next big design thing. hah!
- css3: border-radius. css3 = about 20 years from now.
- Alternatives: browser-specific stuff using webkit/moz stuff.
- put these extra things in "enriched.css".
- What about other browsers? Not quite as pretty, but still totally functional/pretty. Just can't rely on this stuff. border-radius degrades nicely.
- Doesn't look quite as nice in FF2 (versus FF3), but it's fine with lower-contrast stuff.
- Great for prototyping, not necessarily for production/client sites. Depends on clients desires.|
by Wesley Hodgson at 8/19/2008 12:11:27 AM
C: color with rgba.
- hover over a city on icedorhot, you get the temperature.
- you *could* use opacity: .7; but this is inherited by the 'children'
- background-color: rgba(0,0,0,.7); <- aka black at 70%
- include non rgba color AND rgba color, and browsers that don't understand will just fall back to the old-school css rule.
by Wesley Hodgson at 8/19/2008 12:19:31 AM
D: do websites have to look identical in every browser.
- dowebsitesneedtolookexactlythesameineverybrowser.com
- dan says: NO!
- eg. sundance film fest. nav flyouts use semi-transparent pngs for backgrounds. Doesn't work in IE6. No biggie!
- another eg: foamee. h1:before and h1:after elements. In IE6 (or any other browser that doesn't support generated content), the user doesn't get the ornaments.
by Wesley Hodgson at 8/19/2008 12:23:07 AM
E: easy clearing of floats.
- floats = flexibility.
- FLOAT FIX CODE HERE - kinda bad class name. "fix" implied something is broken.
- use a more semantic name, eg. "group". As in a "group of floated elements".
by Wesley Hodgson at 8/19/2008 12:26:02 AM
dah.. messed up linkage there..
by Wesley Hodgson at 8/19/2008 12:26:25 AM
hah.. Dan used "!reallyeffingimportant" in a css rule.
by Wesley Hodgson at 8/19/2008 12:26:42 AM
F: frameworks
- kinda skimmed over
by Wesley Hodgson at 8/19/2008 12:28:40 AM
g: gridlasticus!
- ie. grid layout using EMs
- uhaul website is layed out using EM-grid. Surprising!
- so is icedorhot.com
- Forces you to ensure ultimate flexibility. Since you can't use pixels, you're forced to be flexible.
- Your layout is more adaptable.
- Dan mentioned setting the base font-size to 62.5 again. Gotta remember this: makes a lot of sense.
- Adjusting text size may throw off the grid. Pixel rounding. Especially with Safari.
- use max-width: 100%; on the #container.
- think outside in. design big boxes before small boxes.
- Xscope: like guides in photoshop, but for your whole screen. Great for grid lines when you're designing. (note: I just use the rulers/etc in Firefox's web developer toolbar).
- difficult to align for a vertical grid depending on content length.
by Wesley Hodgson at 8/19/2008 12:40:19 AM
i: IE8 beta still refuses to reset text in pixels
- slide one: "WTF".. nice.
- ie. when you set your body text size in px, you still can't change it in browser.
- So, because of that, still using relative text sizing.
by Wesley Hodgson at 8/19/2008 12:42:47 AM
j: jQuery
- I don't know jQuery, so this is greek to me. fairly quick.
by Wesley Hodgson at 8/19/2008 12:44:15 AM
k: kitty
- invisible pool
- ...
- (he had nothing)
by Wesley Hodgson at 8/19/2008 12:44:32 AM
l: class="last"
- use jquery to create a function "addLast()"
by Wesley Hodgson at 8/19/2008 12:45:48 AM
m: must skip a few letters
by Wesley Hodgson at 8/19/2008 12:45:54 AM
n-r: still skipping.. :)
by Wesley Hodgson at 8/19/2008 12:46:08 AM
s: shifting backgrounds.. aka parallax scrolling for the lazy.
- eg. the silverback site using layered pngs. Still love this.
- Dan says, "craftmanship." Totally!
- howto on thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax
- header background has 'orbs of caffeine' that shift when you resize the window
- another method: background position set to a high negative percentage.
by Wesley Hodgson at 8/19/2008 12:48:39 AM
t: a testimonial for reset.css
- hear, hear!
by Wesley Hodgson at 8/19/2008 12:49:38 AM
u: ur stats. (as in 'your stats')
- when can we _____? ie. when can we push the envelope with Cool New Stuff™
- when your user logs tell you that you can!
by Wesley Hodgson at 8/19/2008 12:51:11 AM
hacks/scripts to get alpha-transparency pngs in ie6. dan says: mixed results. But Dan likes the filtered css properties method the best. But everything has issues in certain situations.
by Wesley Hodgson at 8/19/2008 12:52:51 AM
And Dan has left the build^H^H^H^H^Hstage.
by Wesley Hodgson at 8/19/2008 1:03:56 AM
Adobe Session: SCOTT FEGETTE
by Wesley Hodgson at 8/19/2008 1:15:42 AM
Topic: Responsible Web Design
by Wesley Hodgson at 8/19/2008 1:15:49 AM
responsible apps:
- strive to support web stand's
- foster confidence in their output
- WYS is really WYG
- gracefully degrade!
- accessible experiences|
by Wesley Hodgson at 8/19/2008 1:20:20 AM
Good semantics
POSH = Plain Olkd Semantic HTML
No presentational or behavioral markup
by Wesley Hodgson at 8/19/2008 1:25:58 AM
THINK SEMANTICALLY.
by Wesley Hodgson at 8/19/2008 1:27:52 AM
Name elements for PURPOSE not APPEARANCE.
.left-column <- what if you want to move it later?
by Wesley Hodgson at 8/19/2008 1:28:37 AM
Microformats for naming conventions. Allows you to leverage your markup for other purposes. example: hCalendar to pull out events from your content into your scheduling app.
by Wesley Hodgson at 8/19/2008 1:32:47 AM
Getting lazy with my blogging. Very long day. First session: 8:30am. Last session ends: 7:15pm.
by Wesley Hodgson at 8/19/2008 1:40:26 AM
by Wesley Hodgson at 8/19/2008 1:50:26 AM