Barndoor's Event Apart

August 29, 2007

Goodbye, Chicago

I am now back at my job. Tired brain crammed with new stuff.

August 28, 2007

Jim Coudal: Dealing with the Both of You

Craft/Curiousity bridges passion of personal projects with job/client work.

Videos as lessons:

Short attention span (NSFW language)

Act on spontaneous ideas. One thing leads to another.
"Wouldn't it be cool if...?"
Final design reached by individual ideas --> weeding out ideas (with a fair hearing) --> to one.
Ripping off designs: Remaking it helps you "understand" the design.
Taste...the ability to look at two things and know the better one is most important.
Web Design: Art Web code: Science.

An Unsolicited Response

"If the RFP is more than two pages long we do not respond."
1. Can we make money? 2. Are we going to be proud of the work? 3. Are we going to learn something new?

Copy Goes Here

Coudal Partners

Coudal videowall

Jeffery Zeldman: Selling Design

Persuade others to let us do our jobs

It's the Relationship, Stupid

"The only way to do great work is to have great clients." - Lou Dorfsman, CBS Creative Director (There aren't great clients. You make great clients.)
Endless scope: one way to sell great work is to never stop working on the same job.
Respect flows both ways.
The client is not an idiot.
Don't choose idiots for clients.
First impressions are everything.

Avoid bad clients

Learn to smell trouble:
Bad assignments pack paperwork.
Listen for bad date vibes.
"Your emergency is not my problem."

Build Trust

The non-webby client. Make a presentation about the web, tailored to them.
Have a process. Be calm and methodical.
Wireframes build relationships, not just user flows.
The Alzheimer's method. Problems cloud their memory.
(As in any relationship,) Learn to translate.

"Everybody UNDERSTANDS design." - Hillman Curtis

Sell ideas, not pixels

Not "The yellow one" vs "The grey one"
Amnesty International: Impact? News channel? Human
Kansas City Chiefs: Like no other? Heritage? Big Boys
York industries (manufacturer, high-tech): Personal Touch? Product focus? Hybrid
AIGA: Consumer? Elite? Inspirational

Responding to criticism

That color is ugly. "Remember, it's for fourteen-year-olds."
That button is too big. "Because users couldn't find the button."
Translation

When All Else Fails... 1. Push Back. 2.We'll look into it. 3. Shock them. AGREE.

Eric Meyer: The State of CSS In an IE7 World

They fixed fixed positioning!

Children of Elements

body > div {border: 1px solid #fff;
body > div > div {border: 1px solid #000;
div > ul > li (top level of links)

First Children

#ericmeyer > *:first-child { cuteness: 110%;} (his first child)
#ericmeyer:first-child { pedantics: xx-large;} (any first child)
td:first-child {background: yellow;} (any first child as a td)

Attribute Selectors

[attr] [href]
[attr="val"] [href="http://w3.org"]
[attr="val"] [class="example"]
[attr="val"] [lang|="en"]
css3 accepts attr* for "any"
instead of classing
Styling forms: input[type="text"] {width: 85%; border: 1px solid #000;} input[value="required"] {color: red; font-weight: bold;}
Visual Link Typing: LINK: a{href=".pdf"] {padding-right: 18px; background:url(/pix/pdf_icon.gif");} TITLE: a[title*="(PDF") {padding-right: 18px; background:url(/pix/pdf_icon.gif");} Every .pdf link or title will have PDF icon.
Secure Link Styling: a{href="http"] {padding-right: 18px; background:url(/pix/lock_icon.gif");} Every HTTPS link will have a "lock" icon.
Use if not vital to site.
Selecting Table Cells: th[scope="col"] {border-top: 1px solid #000;} th[scope="row"] {border-right: 1px solid #000;}
Highlighting images by type: img[img=".jpeg"]{border: 1px solid #fff}
Sample diagnostics: Expose bugs/problems. div [id] { border: 1px dotted red;} img {border: 5px solid red;} img[alt] {border-style: none !important;}
What about IE6? Dean Edwards' IE7 script: IE7 { css2: auto } connects to .js

What the hack?

Import ie6 stylesheet:
Enhancing IE6 with the IE7 script brings it nicely up to date.
Hacking will still be necessary.

positioniseverything.net

Lunch v2

Yesterday we had Crazy Spoon. Today we had Crazy Cup!

Derek Featherstone: Accessibility: Lost in Translation

Checklist Syndrome

Compliance; Quality Assurance; Impersonal
Instead: Accessibility as User Experience

Patterns/techniques from real sites interplay between XHTML/CSS/JS

Custom widgets (Google Maps) - Customized controls not available in html. Problem: voice recognition/keyboard tabbing does not recognize map controls. Ironfeathers.ca customized controls to allow this using button element (div onClick to buttononClick).; remember mouse/keyboard interaction.
Inline editing - Requires fewer page refreshes, changing on the fly; Problem: requires mouse to expose controls. Flickr has solution (link).
Live updates - Updates without refreshing. In some cases more accessible. Problem: (Twitter) Character count is always displayed (screen reader problems), how do we notify user update has occurred?
Tree menus -
Error/Advisory information - Each field has a label; some fields have additional info; errors/advisory info needs to be near the control to which it relates. Username must not contain spaces
Form linearization - Often we translate visual layout and effects into our code. Reconsider code to take into account intent and design. 1. Search field 2. Radio buttons 3. Search button.
Search Results - Results are often below the fold; Repetition of the form can confuse people that have a limited view of the page; Many diff page elements require a mechanism to move around the page. Solution: submit form to name anchor or id.

Translating visual language

We need to translate the visual language that designers created to something meaningful in code.
Nested lists for hierarchy/groupings.

Use alt tags! Label fields!

furtherahead.com
boxofchocolates.ca
ironfeathers.ca

Luke Wroblewski: Best Practices For Form Design

Why does form design matter?

How customers "talk" to companies online
Commerce, access (membership), engagement
Form redesign can change bottom line

Design principles

Minimize the pain - nobody likes filling forms in. Smart defaults, inline validation, forgiving inputs.
Illuminate a path to completion
Consider the context - Familiar vs. foreign. Frequently used vs. rarely used.
Ensure consistent communication - Errors, Help, Success. Single voice despite many stakeholders

Multiple Data sources

Usability Testing
Customer support
Best practices
Site tracking

Design patterns

Information + Interaction + Feedback

Information

Layout:
Top Aligned - when data being collected is familiar; Spacing/contrast is vital; Require vertical space
Right Aligned - Clear association between label/field; More difficult to scan labels; Fast completion times.
Left-Aligned - when data is unfamiliar (advanced preferences); less vertical space; enables label scanning; slower input
Ebay registration form redesign 2004. Had to re-report earnings ($$$)
Indicate required form fields only if a few are required.
Text > *
Try to avoid optional fields.
Associate indicators with labels.
Field Lengths: Appropriate field lengths provide enough space for inputs (shorter for zip code, longer for address).

Content Grouping

Use minimum visual seperations
Use relevant groupings to organize forms

Actions

Not all form actions are equal: Reset, Cancel, Go Back are secondary; rarely use!. Save, Continue, and Submit are primary actions. (small link vs big button). See eBay Cancel/Confirm.
Distinction between actions is important.
Keep continue/cancel/go back, etc. close together.
Align primary action beneath primary form flow.

Help & Tips

Useful when: Asking for unfamiliar data, recommended ways of filling in data.
Don't overkill!
Automatic; User-activated (? link); Pop-ups;
Help visible and adjacent to a data request is most useful.

Interaction

Path to Completion: Remove unnecessary barriers; Flexible data input (phone number formatting); Defaults; Alignment; Save progress.
Tabbing: Remember to account for tabbing behavior; Use the tabindex attribute.
Progressive Disclosure: Not all users require certain options; Prioritize; Advanced dialogues; Gradual engagement (geni.com);

Feedback

Inline validation: Provide direct feedback as data is entered - use for potentially high error rates; User name picking; Valid input suggestions; Maximum characters;
Errors: Get people out of errors as fast as possible; Clear communication - prominent error message; Way to fix problem; Use dual visual imagery (not just red text), especially on long forms;
Progress: Give people feedback as actions load; Disable submit button upon submission;
Success: Put in context, on updated page or revised form;

Wufoo
Form Assembly
icebrrg

Book (2008)

Jeremy Keith: Be Pure. Be Vigilant. Behave.

Be pure

seperation - progressive enhancement
content -> structure (html) -> presentation (css) -> behavior (javascript)
english: get all the p elements lolcat: i can has p elements?
CSS #foo p { } DOM document. getElementbyID("foo"). getElementsbyTagName ("p")
think in english, then translate.
keep things simple, avoid touching css markup.

Being vigilant

Consistency. Resisting inline styles.
Avoid the "#"!
for subcategories/elements

Behave

Ajax "Communicating with the server without refreshing the whole page." xmlhttprequest.
"Hijax" applying progressive enhancement to html requests.
Intercept "hijack" links. Pass the xmlhttprequest, which passes data to server and back to document.
Server does the hard work.
Challenge isn't in the code. Challenges are in design.
Beyond the browser: What's happening (progress bar)? What happened? The back button. Bookmarking.

No movie sets. No gunshots. Open bar at Fado Irish Pub? Yes!

Walked to the Navy Pier afterwards, snapped some pics of interesting ads on the way. After departing my CSS friends, I made my way to a 7 Eleven (We don't have those where I come from). I had not only a 7-Eleven "Squishee", but a 7-Eleven HALO3 Crystal Light Squishee.

Tasty, calorie-free, nerdy goodness.

Read it.

World's largest McDonalds. Anyone who knows me will get the reference from the bottom of the shot.

Somewhere, someone is offended.

Not just awesome. 7000% More AWESOME!

August 27, 2007

Dan Cederholm: Interface Design Struggling

We juggle Color, Typography, Iconography, Flexibility.

Example: toupeepal.com

Color

Color is emotional
"I hate that green, It reminds me of my ex-girlfriend's quilt"
More "WOW"
Color Scheme generator
Choose color palettes from photos (Pixelate)
Flickr color groups. "Two colors or less"
Drawn
Play around with paint bucket in Photoshop
Colors tie everything together
Link color carries weight
Texture: Add Noise in photoshop; monochromatic; decrease opacity; add light

Typography

Great typography is invisible.
"Web design is 95% Typography"
Small amount of web fonts? Italian Renaissance: One typeface in typography
AIGA site: Georgia/Verdana. Letterspacing, aligning, weight, italicizing, etc to broaden two fonts.
In heads and titles, use the best available ampersand.
span.amp { font-family: "Goudy Old Style", "Palatino", "Book Antiqua" , "Serif"}
webtography.net
myfonts.com

Favicons The most important design element of any site. No, really.

One use: favicons as link images
Really easy or really difficult to make.
Scale down to 16x16 or Choose a fragment or Use something unique
Iconographer - program
Delta Tango Bravo

Add detail without adding complexity

Subtle shadow underneath toupeepal.com search box
Suggest the box (container). Subtle borders. Round one corner.
Reuse/Recycle Diagonal/repeating bg image throughout toupeepal.com.

Microformats

microformats.org
symantic markup
people, application, css
use what works today (not waiting for standards)
hCard (contact information)
cork'd microformat used in reviews
microformats work together

www.simplebits.com

Liz Danzico: The Seven Lies of Information Architecture

1. Navigation must always be consistent

Must Google maps have the same Google header as the homepage?
Need->Interpret->Navigate->React
Apple.com: Excellent example of inconsistency (Good thing)

2. There is a magic number seven (plus or minus two).

There is a magic number (omit plus or minus two).

3. Users must get to all parts of the site all the time.

Mistake: thinking about individual sites as solo experiences.

4. Users must know where they are at all times.

Youtube allows you to move throughout the site randomly, loosely connecting the video content.
Amazon:People also bought
Users must know what's next.

5. The user experience must be seamless.

The designer must design beautiful seams.

6. Shorter is better.

Telling a story
Shorter is not always better.

7. Information architects do information architecture.

..and so should developers, designers, writers, clients, and users.

www.bobulate.com

Lou Rosenfeld: Search Analytics For Fun and Profit

Search analytics:

Diagnostic tool. (Example: misspellings in searches=add spell checker to search field)
The Zipf curve: Short Head, Middle torso, long tail.

Books: Search Analytics for Your Site: Conversations with your Customers (2008)

Lunch

I call it: Crazy Spoon. I had no idea how to eat it.

Jason Santa Maria: Design Your Way Out of a Paper Bag

Little details add up to a big design

Discovery:

Good environment. Inspiration. Sketchbook.
Old printed materials (digital and paper).
Keep iphoto bank of images/scans.

Research:

Attend event/place of website content if possible (Attend Pub for Irish music/heritage website).
Books (heirarchy, typography, etc) For A List Apart.

Process:

Iterative Design: Revisions, staying close to original intent/design. Broad strokes.
Sketch->Greybox->Photoshop. (Greybox comps: Illustrator, no color, default typefaces, content layout.)
2nd round: Clean up typefaces, spacing, header/copy relationship, etc.

Layout:

Gridwork: Solid framework holding the site structure together. Column grids.
Illustrator/Photoshop.
White Space: Padding, line-height.
Heirarchy and focal point:
"Left to right, top to bottom, big and small." - Winter Sorbeck. Size, color, contrast. Use restraint.

Details:

Sweat the small stuff. Black text on white...too much contrast.
Typography interlude: REAL quote: “:

www.aiga.org

Brand vs logo: "A brand is a person's gut feeling about aq product, service, or company" - Brand Gap.

Brand Equity: UPS logo tweak. Keep the colors.

Books: The elements of Typographic Style", "Thinking with type", "Making and Breaking the Grid"

Jeffrey Zeldman: Writing the User Interface

boingboing.net Design? No. Content. Yes.

Base Camp: Project Management
Writing budgets! Content czars. Content is KEY.
Design helps people read less. When people read less, every word counts.
Copy is often the cheapest part of your site to fix. All copy is a brand opportunity.

Guide Copy:

Blogger: 1-2-3 create a blog; Veer: "Preview type before you buy."
Clear,
Brief
Audience-appropriate (Appropriate can mean non-inappropriate..ie neutral), Brand-appropriate.

"Copy" Copy

Brand copy. Clear. "The Leukemia Letters: My Experiences with Leukemia, Blindness, and Life in General." ; "A List Apart: For People who Make Websites."
Make it appear to be easy to use. Does not need to be "dumbed down."
Bad: lulu.com about page.

Speaking URLs

haveamint.com/requirements; alistapart.com/topics/design

Even "readers" scan online. Reading online can be more fatiguing than reading print(?).
Turn manure into gold. Lulu.com copy into organized text blocks.

Articles: "Attack of the Zombie copy", "Your About page is a robot."

Eric Meyer: Secrets of the CSS Jedi

Padding is for any element (Even images). Use background color on images as a matte color. Transparent PNGs.
He is using Keynote. Cool.

CSS Vertical Bar graphs:

Apply to table. Table id: #q-graph; div size: em; Display: block; Position table rows absolutely; td Width: 25% (4 quarters) offset left: xx%; height: xx%;
Use th for headings (legend) position 100% left, left margin to position to right side (outside) of graph;
Tick marks ($ amounts vertically) div position: relative; top: -30em; height: 30em; border-bottom left: 100%; top: -.05 em; $50,000 $40,000
CSS Horizontal Bar graphs: See above, change height to width. Left to top.
Scope: Associates a th element with a row or column. Scope="col" class="paid"> Cell is read with speaking browser. Search engines will index content easier.
Quick outset/inset Border Border-color: #000 #edc #000 #edc (top, right, bottom, left)
Do not apply css to unstructured documents.
BB Edit (program)
Percentages can have decimals.
Use em

Reset Style Sheets

Browsers use CSS files to interpret CSS as a default. (HTML.css in Firefox). With this in mind, override the defaults. Linky

Background color for HTML element is applied to canvas. Background applied to "body" is same thing. This is why they fight sometimes.

Pre-show

Enjoy some pre-show pics. The nerds tremble in my presence.

August 26, 2007

Chi-town

Enjoy some pics from Chicago (sorry some aren't rotated..this iBook doesn't have iPhoto. Jerks.) Oh, and we witnessed the filming of Wanted (pics/video to come). Batman: Dark Knight was also being filmed (helicopter scene). Apparently, the bat signal was on earlier. ..