My notes from Eric Meyer’s presentation on resetting stylesheets and debugging markup using css. These were typed quickly and are not without error. Furthermore, they are subject to change.

Flickr community manager

Flickr allows you to see the news unfiltered (London bombing)

COnferences for community managers
Simetimes CM is being a pinata
Being active with blog posts, feedback, bugs, etc
The help forum has ambassadors from the user community
Dont let your abuse forms get indexed by Google

Terms of USe not scalable – Communit Guidelins
Human-readable – people can understand.

She has the biggest block list of the team

Marketing can stifle communication
Be transparent
Don’t whitewash errors or problems
Don’t wait

Don’t create supervillains – they keep coming back
New York Times article on Trolls

Get permission to user to reuse their content
Be clear! Make lemonade!

Dell expolding patteries: exploded in the building
Fire people come, and people get pics from exploded battery. Troll says: don’t perpetuate the myth.

Stolen laptop captures picture of the theif

Before launching geotagging, they though “porn island” Instead, Greenland says “FUCK”

Pandas are cute. Freat Panda Wars! Trying to hack each other. Secres of Explore featuring vomiting pandas.

Patterns in the Process

Clearleft
This is the way we do things

Discovery!
Content!
IA
Visual Design
Templates
(They don’t do backend work)

Client Worksheet download.
Serves as a barrier to entry, (Kelly Goto? Web workflow redesigned?)

@rellyab freelance copywriter
Copywriting IS interface design

Websites (chalkboards) are people too.

Edenbee:
The signup process is the first interactive experience.

They wireframe with html/css. Page interaction has changed so much that HTML/css is the best tool for that. Css frameworks incredibly useful at this sstage.

elfcartel.clearleft.com

Polypage jquery extension (Dev by Andy Kent)

It’s like product design. So, do your user testing now.
Each stage limits the possibilities. Game designers do “possibility spaces” rather than narrative stories.

User testing with Silverback. User testing from here on out.

Visual design

Take the html/css and create a visual design from it. The hierarchy is preserved (important stays emphasized, layout may change).
Wireframe is too early for deciding on the layout.

Go to the wireframes to answer questions.

http://www.alistapart.com/articles/dao/

IE6 : You need to allow people access to your content, but it doesn’t need to look the same in every browser. Dean edwards works.

Recurring patterns: forms, tables, microformats, etc

Page-specific css pages uses increasing

CSS Tips:
Specify min-width in px and max-width in ems

input radio and checkboxes need width and height 1em;

Wherever you set the :hover class, define :focus (for keyboard tabbing!)

Javascript: bastard stepchild

When you dont want to show everything all at once, but those without javascript need to be able to complete their task. Starting with Javascript instead of the other way around is building on sand.

wiki + svn sandbox for keeping track of cool design patterns.
or blog them

Questions:

During the build phase hand-off, how do you maintain the integrity of your markup?
That is the hard part. I can’t slap the developer on the head and tell him to fix the markup. It’s tough, you could provide a style guide, but you have to learn to live with it. I haven’t though.

Do you find doing the user testign on the wireframe stage
The biggest changess happen on the wireframe stage, but it’s inportant to test on the visual desing phase. OFten the budget dictates cuts and the testing at the visual can get cut. As yo get further down the line, the possibilities are narrowing and it becomes more expensinve to make changes.
The layout may vay on designs, but he hierarchy does not, whether thru size, emphasis, position, etc. Wrieframes shouldn’t dictate the visual design.

Storytelling – Jason Santa Maria

Deep deep meaning of Web design – what’s the message behind the design?
It’s not how we build things

Design tells a story – we are taught to look for stories in imagery before we can read (where the wild things are) – Graphic Resonance (inferring a story from visuals)

Old Atari packaging sets the mood for the unrealistic graphics. The fill in the gaps that the terrible graphics can’t visualize.

The graph really visualizes how dramatic and telling the story is.

Wired
The design reinforces the content before you get to the article.

Stories are lacking when you just pull content from the CMS

How do we make amazing designs with only 5 crappy web fonts?

At the dawn of the printing era, type faces were very! expensive. MOst printing companies could only afford a few, yet still created beautiful designs.

These are not limitations.

Should we just design harder?

Armin Vit, Speak Up – Landmark Web Sites, Where Art Thou
Doesn’t that piss you off? We’re all starting from square 1 paper or browser.

Nature of the Medium
Common principles are no longer common on the web
4 big distinctions!

The metaphorical page: dowsnt matter if you design on paper or a cave wall or the web, you have some medium. Urgent need for precision and clarity (1964)
Not new problems here!

New needs need new solutions
Sutnar’s 2-page spread – nobody did it before him
Even in print (an ancient media) innovation happens

Constraints of the page
Length, height obvious on books. Not so on the web.

All-in-one on the web, books can spread it out.

Newspaper is WYSIWYG for real. WYSIWYG on the web is false.

Collections of pages: books are obvious: thickness, size, etc. Websites have no way to tell how long it will take to consume the content.

Layout: Golden Ratio (theta) 1/1.618, “The Form of the Book” analyzes many ratios. The rule of thirds, aligning points of interest.

Web design is unpredictable. Ratio systems break down.

Telling better stories

We’re not working in a closed system

interesting examples:
“No One Belongs Here More Than You” – The whiteboard site
Fray – Pairing stories with designs
A Brief Message – 200 words or less, with visuals
Princliples of Beautiful Web Design – pen stuff describes its own structure

Immaturity
We fall back to stories to sell new inventions (photography is Stories Written With Light). The story drives the form. “You can have the Model T in any color as long as it’s black.”

Questions:

Do you worry about losing your site’s brand by changing pages? No, because the important brand and visual guidelines are the same. Nav, footers, etc – the bookends stay the same. Plus, this is an experiment.

What CMS are you using? ExpressionEngine right now, since it’s used all the time at HAppy Cog.

How are you styling the pages? A big if() to see if you are including a new stylesheet, then have a new stylesheet skeleton to control the content area.

How do you deal with telling a complex story or lots of stories on the same page? There isn’t going to be one way to do it. Look at the cover or contents of a magazine, they solve the problems in lots of ways.

How does this apply to web apps? Not everything needs an over-arching story. Web apps need to work first, it’s more about utility than emotional connection. Social networks, too; Facebook’s story is about interacting with people.

Advice for getting great photography (on a budget)? Take your own when possible. istockphoto.

How would this work for a large site? You get what you pay for. MAybe have an art director style a few articles a week. We just aren’t used to doing it this way.

How do you retian the story on different devices and into the future? Don’t know, that’s the next step. Hopefully, we can raise awareness and build off of each other’s work.

(couldnt hear question) How did you convince your clients to leave tables and go semantic? It’s about education.

How do you work with clients to get the story? Happy Cog has a writer on staff (editorial director) to work with the client. Try hiring people who are great writers.

Popular frameworks: 960, blueprint, CWS, Elements, YUI, etc.
960 came along after the fact but was interesting enough to include in Eric’s research.

What are the common themes? What are the differences? Arey they good or bad things?

Which one should you be using? None of them!
There is nothing wrong with templates (for inspiration, etc) but we don’t make cookie-cutter sites.

Overview
A truth table basically of features.
Commonalities: Resets, Colors, Fonts.
This is evidence of what we all feel: extreme frustration with browser differences.

Font sizes:
1em != 1 on line height. 1em computes to 12.16 px and that is propogated down the DOM. Generally, don’t use units on line heights.

Heading sizes:
Very inconsistent.
YUI doesn’t touch header sizes.
Heading sizes don’t go below 1em (unless you count the HTML4 proposed)
Perfect heading sizes as per the wisdom of the crowd (averaging 2 averages)
These are similar to what designers already use.

Naming conventions:
Masthead vs header, container vs content vs goingtohell, etc.
Some used global grid classes (960, blueprint, yui/tsg) like: .span-16 (which you of course apply to a div),
The others use ids that are descriptive: #footer, #nav, #topnav, #content #content, #main, and #page are separate concepts

Layout Invocation:
Some had all the possibilities in 1 file (960, blueprint, YUI), others used separate layout files for 1-2-3col layouts

Some used Wired pattern: 1 css with @imports to lots of others, the other frameworks include multiple s in html
IEWIN only caches the 1st level of @imports. <—GET CLARIFICATION ON THIS

Hacks:
clear-fixing (css limitation)
pseudo-padding (css box-model limitation) (using .box with margin inside a column, esp with mixing units)
IEEEEE! (* html ie is teh suck)

Cool bits:
Attribute styling urls on external links (like ALA article) (Don’t use for crucial content)
Debugging styles (blueprint grid is neato)
YAML ‘draft’ files: a skeleton for variying styles (could be cool for multi-team environs)
960 has ‘sketch’ files, pdf templates that have a grid like the framework.

Questions: – IE caching: IE6-7 will cache any stylesheet that your HTML file points to, but if those stylesheets import stylesheets they will not be chached. – uncool bits? Set pixel-size fonts, the body is bad enough but it’s uncool to do it to all the headers and elements, etc – resources for understanding ems? ems for sizing and ems for fonts are very different concepts. A number of css books attempt to explain it – zooming? Text zooming != page zooming. As page zoom is more widespread, pixel fonts less of an issue. – Other media? Print is the only one in the frameworks, but that will change (media queries). When will we see TV styles again? – css predictions 10 years from now? At least a dozen albums. No, Eric is not a prophet. Sry. – Would you recommend using a framework? No, they are based on the assumptions of the people who make them. If you want a framework, develop it to reflect yourself or your team.

Empathy is the most important thing.
Real.com is a bad example – it doesn’t work very well
Links don’t look like links and vice versa
Site is driven by conflicting corporate needs rather than user needs
Half wants to distribute the free player and half wants to bury it in favor of the pay version

cosumersearch.com
No planned user experience, requres lots of motivation to drill down.
Unacceptable user experience
Can’t tell external ads from internal, cant tell adds from navigation

Good education
Hard to come by holistic education – not much out there for user experience
Excel vs Business
bobulate.com

Web people are not in charge of the web experience
If your web site resembles your org chart, you fail.

Who speaks for web design?
The public doesn’t understand the web (opinions come from places that don’t understand user experience)

When you have contests, it perpetuates the same kinds of work.
Judges make judges out of similar work (intentionally or otherwise)

Journalists have a hard time talking about ideas; they concentrate on money or other tangibles.

A bunch of new templates for Blogger: minima is the most popular. That design is iconic and an example of “landmark web design”, seems custom-designed no matter what the content is.

Guitar Solo
Design is not a heroic or impressive thing; the design is to represent your brand, not make the users jaws drop. Good design is invisible! People don’t get burned out on it.

Empathetic design gets away from Agile vs User-centered. Put the work in front of real users and redesign until it works.

I encourage all of you web people out there to take this survey. It helps us in the profession as well as the public at large to better understand what we do.

Just got an email from eMusic informing me of their price for the 30/month plan increasing from $9.99 to $11.99. But, because they love me so much, they’ll throw in an additional 10 downloads, making my $11.99 worth 40 downloads.

Less is not more.

Then they show me a nice table and declare ”[I] will actually pay less per download.”

This is a nice gesture, showing me the breakdown and everything. Next time, though, somebody might want to re-check the math and send a slightly modified email: not only is the math wrong (11.99/40 = 0.29975) but the bad math tells me I will be paying more per download. If I wasn’t the kind of guy who carries a calculator around and likes to correct everybody, I’d have thought “You guys are idiots; I’m not paying more for less.”

Before Excel we are all equally wise – and equally foolish

Formulas can be unruly beasts, but this is also a simple matter of proofreading. It reminds me of their ongoing problem with mismatched track names. It would be a shame to lose a customer due to a misapplied Excel formula.

Turns out if I’m drunk and you ask me an economics question, I can’t play guitar hero until I explain supply-side economics to you.

Oh yeah. Goin’ to AEA SF08. Thanks, Mike!