Mistake: Ignore Your Instinct

• Don’t take a project just because you’re in love with the product.
• If you’re working for an indecisive person, you can’t succeed.
• When things go wrong with a client, it’s your fault.
• Any client contract needs a clause that allows either party to leave the project.

Trust Your Gut

• Don’t be afraid to say “No” if the job feels wrong.
• Listen to the little nagging voice.

Mistake: Dive Right In

• Don’t jump in before you know all the details.
• Gather requirements.
• Learn how to say “No” in a friendly way.
• Respectfully treat clients like a child.

Anything Goes

• Having multiple people to please makes it difficult to succeed.
• It’s important to have one person who’s in charge.

Roles & Responsibilities

• Make sure everybody involved knows their role.

Plan For Change

• If you’re sure it will take you 40 hours, budget for 60. You can always refund them or give them the option to add more features if you have time left over.
• Have a plan for if something doesn’t work.

Mistake: Avoid The Client

• If you have a problem, you cannot avoid it.

Tell It Like It Is

• Use psychology.
• Talk to the client in his or her language.
• Don’t explain the problem from your point of view, tell them what they want to hear so that they can understand it and see it as a benefit for them.
• Make it about the client and their needs.

Escape Clauses

• Create a series of milestones with clauses that either party can walk away from the project at any one of those milestones with no more money or work owed.

How To Fire A Client

• “It’s not you, it’s me.”
• Make the client think that ending the relationship is their idea. “I feel like I’m letting you down.”
• Raise your rates.

Points To Take Home

1. Know before you go. Know what the client needs.
2. Keep expectations on track & in sync.
3. Constantly course-correct. Be flexible.
4. Tell the truth.
5. Phrase it from the client’s or boss’s point of view.
6. Report bad news beflore the client or boss notices it.
7. Have a recovery plan.
8. Apologize, but never denigrate yourself or your team.
9. Have an exit strategy.
10. Know when to quit.

Web Dev Philosophy

• Work out of respect for the design.
• Designers make our code as beautiful and clever on the outside as it is on the inside.
• Respect the original design vision. Consistant design = clean code = fast site.

What’s The Problem?

Code Is Too Fragile

• Non-experts will ruin it.

Require Expert Ability To Get Started

• You have to take time to know what you’re doing before you’re useful to a web team.

Code Reuse Is Non Existent

• It’s too unpredictable.

File Size Keeps Getting Bigger

• New styles get added to the end.
• Users get pissed because the site gets slow.

Avoid ID, Inline & Important

• Allow the cascade order to determine the winner.

What Is OOCSS?

• A philosophy.
• A framework.
• A tool.
• An evolution of the language. It makes CSS more powerful.

How Is It Different?

• Until now, we focused on the rules (code between { and }).
• The architechture loves in the selectors.

Reusing Elements Makes Them Performance Freebies

• Components are like legos. Reuse them, mix and match them.

Avoid Location-Dependent Styles

• A heading should not look different based on it’s location on the page.
• Instead, try this:

  							
  	h1, .h1 {...}
  	h2, .h2 {...}
  	h3, .h3 {...}
  	h4, .h4 {...}
  	h5, .h5 {...}
  	h6, .h6 {...}
  	
  	‹h5 class="h2"›This is a heading‹/h5›
  						

  Global values are defined and semantics are respected while allowing design flexibility.
• If you need more types of objects, use classes on the objects, not wrapper selectors.

Three Things To Avoid

• Duplication
• Unpredictability
• CSS Kudzu

Simplify Specificity

• Use hacks sparingly and don’t let them change your specificity. Use underscore and star instead of overriding specificity.
• Avoid styling ids. Ids impact specificity and can’t be reused. Use Classes instead.
• Avoid styling elements unless you’re defining defaults.
• Avoid important expect on leaf nodes.
• Style classes rather than elements. Don’t use something like

  div.error

  instead just use

  .error

  except for exceptions.
• Give rules the same strength and use the cascade order to overwrite previous rules.

Layer Selectors

• Define default values for each element.
• Duplication is worse for performance than stale rules.
• Generalize. For Example:

  								
  	‹p class="message error"›...‹/p›
  	‹p class="message alert"›...‹/p›
  	‹p class="message somethingelse"›...‹/p›
  							

• Extend classes to avoid repeating code.

Location Independence

• Avoid specifying location. Apply classes to the object you want to change.

Encapsulation

• Don’t access sub-nodes of an object directly, use the parent node.
• Use location dependence for sub-nodes.

Creating The User Experience With The Best Technology Possible

• We’re essentially creating messages in a bottle. We don’t know who’s going to receive that message
• Our job isn’t just to pimp the message out, we need to communicate the information effectively.
• Progressive enrichment is similar to old TVs versus new TVs. You can still watch the same programs, but they will be experienced differently.
• Do websites need to be experienced exactly the same in every browser?

Using CSS3 To Enrich Experiences

• It makes the most sense right now to use CSS3 to add non-critical elements like visual rewards, feedback, and movement.
• Users who have a browser that can support these features are surprised and delighted.
• Use prefix versions of rules before the non-prefixed rule.

Multiple Backgrounds

• Parallax can be done with multiple backgrounds (apparently Webkit isn’t the only one to support it anymore).
• List the critical background image first.

Enriching Forms

• Use the attribute selector to target specific input types. For example:

  								
  	input[type="text"] {...}
  							

Can We Use CSS3 Now?

• Using CSS3 to enhance user interactions and non-vital styles, you can support the story your site is trying to tell and enhance the experience for some users while not degrading the experience for others.

Chicken & Roast Beef With A Ceasar Salad

• Fricken good food.
• Andy Clarke sat down next to me and we talked for a while.
• Got an eclair and a chocolate chip cookie for dessert.

Web Products Should Be Designed For Mobile First

• …even if no mobile version is planned…
• Google does it.

Why It’s A Good Idea

• Growth - the mobile web is growing 8x faster than the desktop web.
• Constraints - constraints help to enforce good design.
• Capabilities - some features of mobile phones can nurture innovation.

Growth = Opportunity

• Crazy amounts of growth in mobile web use in the past few years. (AT&T mobile web use grew 50x in 3 years after the release of the iPhone)
• People who use Facebook on mobile phones are 50% more active than those who don’t.

Constraints = Focus

Screen Size

• Forces the designer to focus on core actions.
• Forces you to know your users.
• Encourages you to use scalable design.
• Helps you to remove functions/features that you don’t need.

Speed

• Keep performance in mind.
• Take advantage of HTML5 - store things locally.
• Use CSS3 instead of images where possible.

Context

• Users use the web for quick small tasks throughout the day.
• Across a 650,000 tested URLs, 25% of all documents were displayed for less than 4 seconds and 52% were less than 10 seconds.
• Design for quick tasks.
• Mobile users only use one hand for most interactions.

Capabilities = Innovation

Touch

• Simplify your interface.
• Make sure your buttons are big enough and spacing is adequate.
• Don’t rely on hovers.
• Don’t overuse hover or use it as a crutch. For example, don’t have content that only shows on hover, it doesn’t work for touch interfaces.

Location

• Allows users to find location-based information without having to search for something like “Grand Rapids restaurants”.

And More…

• Device orientation - i.e. rotating an iPhone. Orientation can be used in Firefox 3.6.
• Audio and video - i.e. speaking instead of typing into web forms.

We All Have Needs

1. Physiological
2. Safety
3. Love/belonging
4. Esteem
5. Self-actualization

Needs From Computers

1. Functional
2. Reliable
3. Usable
4. Pleasurable

Usable = Edible

Saying you make usable websites is like a chef saying they make edible food.

• A website may be usable, but it isn’t necessarily pleasurable.
• Websites that only focus on usability tend to lack personality.
• Usability should be the base of the experience and personality can then be layered on top of that.

Personality is a platform for emotion.

Emotion

• People will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotions.
• Humans wants to empathize and personality invites empathy.
• Adding personality to even the most mundane tasks helps to create emotional connections like love and joy; Tapbots apps for example.

Emotional Usability

• Adding personality and emotion can make things feel more usable.

Treats

• Adding little treats can delight users and be a form of defensive design. Delight can outweigh frustrations that people are having.
• Example: MailChimp monkey speech bubbles.

Discovery

• When people discover treats, they are usually amused/delighted.
• Treats can also influence people to continue using your service and tell others about their experience.

Limits

• Attention is finite. Having too much going on at once overwhelms users.
• The simplest solution is the best.
• Users aren’t necessarily lazy, they’re just looking for the path of least resistance.

Design Decisions

• Design decisions shape the final design. Example: NY Times vs. Haven Works.

Design Decision Styles

• Unintentional Design
• Self Design
• Genius Design
• Activity Focused Design
• Experience Focused Design

Decision Style: Unintentional Design

• Happens when the designer guesses at the use.

Decision Style: Self Design

• When we design something for our own use.
• Works great when you use the product yourself every day.

Decision Style: Genius Design

• When we’ve previously learned what users need.
• Works great when we already know their knowledge and experiences.

Decision Style: Activity Focused Design

• When you’re designing for new activities that you’re unfamiliar with
• Works great when we can easily identify the users and their activities, we need to go beyond our previous experiences and innovations can come from removing complexity.

Decision Style: Experience Focused Design

• When we’re designing for the entire experience.
• Experiences are the spaces between the activities.

Rule-based Decisions vs. Informed Decisions

• Design style guides and guidelines (rule based design decisions) never work.
• Rule based decisions prevent thinking - fail on any exception cases.
• Informed decisions require thinking - work with normal and exception cases.