Problems That CSS3 Is Solving

• Resolution Dependent Layouts
• Rounded Corners
• Sliding Doors
• Transparency Effects
• Adding Classes like ‘First’ and ‘Last’ or ‘Odd’ and ‘Even’

Browser Dependent Styles

• Use @media to serve different styles to different media widths (like iPhone stylesheet declaration).
• Eric Meyer keeps stressing that he is not a designer which is why his examples aren’t pretty.

Rounded Corners

• We can just use border-radius rather than using all sorts of images and extra markup.
• Webkit doesn’t yet let you declare different values for each corner in one rule.

Sliding Doors

• We can now just use colors, gradients, border radius, etc. instead of images.
• No more need to use images for things like tabs.
• No more need for sliding doors (hallelujah) except for more irregular shapes.

Transparency Effects

• RGBA allows for transparency without images.
• Things like the Complexspiral aren’t necessary anymore.
• Layering flat colors doesn’t allow you to recreate some effects that you can use in Photoshop (things like overlay, multiply, soft light, etc.).

Unnecessary Classes

• We can use :nth-child, :first-child and :last-child selectors instead of classes for even, odd, first and last (I freaking love using these selectors).
• Can use it for float clearing, zebra striping, creating patterns and more.
• Doesn’t work in IE through 8 (duh). IE claims that IE9 will support all CSS3 magic.
• Use these selectors in combination with @media to clear based on the amount of width left in the column.

Interactive Objects

• Giving objects personality can be endearing - chalkboard example
• On the web, most sites that have personality have the same one - “I’m your friend!”
• It might be fun to see sites that have more genuine personalities and do things like call you names and make fun of you.

Links & Forms

Links and forms are the primary way that people interact with websites. They allow users to explore and communicate with the website.

Links

• Hover and mouseover are one of the primary ways that we interact with links.
• Important information should not be revealed only by hovering.
• We also shouldn’t expose ridiculous amounts of unwanted information on hover.
• If you set :hover you should set :focus too.
• Touch interfaces don’t have hover.

Forms

• In the real world, forms are rarely used for anything pleasurable. On the web, forms are a crucial part of interaction.
• Huffduffer inline form - a form like this feels more fun to use.
• Not every form should be a “Mad Libs” style form. Asking for more official things like credit card information should probably feel more like a real world form.

Safe Defaults

• We need to use safe defaults when we’re building a page.
• For example, use a “hasjs” class added by JavaScript for styles that are dependent on JavaScript.
• Hijax - make sure the site works without Ajax and then let JavaScript hijack links and forms. Build the site first the normal way, then add Ajax.

Feedback

• We need feedback to know that we’re doing things right.
• It’s important to make sure the feedback matches the message. If it’s not a critical message, it should be subtle. Example - Huffduffer Mario style feedback.

Rich Experiences

• Interactivity is what makes rich experiences.
• Some of the best online experiences aren’t necessarily graphically or textually rich, their richness comes from interactivity.

Content Strategy

Plans for the creation, delivery and governance for content

• Text & Data
• Images
• Videos & Audio

1. Plan
2. Create
3. Deliver
4. Govern

Messaging

• Not a mission statement
• Not a tagline

• Had a brownie for dessert.

I love Smashing Magazine, actually. It’s softer and more absorbant than other magazines.

What The Heck Is Hard Boiled?

• Hardboiled detectives use any means possible to get results.
• They work outside of the law.

Progressive Enhancement

• Build for the least capable browser first.
• Build from the sky down, not from the ground up.

The term progressive enhancement was coined 7 years ago. At that time, we were using Photoshop CS, OS x 10.2, Safari 1.0, and iPods without a click wheel.

• Progressive enhancement shouldn’t be used merely as visual treats.
• Most of the new capabilities are widely supported. The only thing that doesn’t support them is IE (through 8).
• The thing that’s holding us back is the view that websites need to look the same in every browser. They can’t!
• Even after the CSS3 spec is finished, it still won’t be supported by some browsers. There will probably never be a point in which all CSS standards are supported by all browsers at the same time.

Keep Calm Carry On

• Get excited and make things.
• Design for the top and work your way down.
• The design that people see should be appropriate to the device they’re using.

Just Say No To Microsoft Filters

• They are not part of the standards process.
• They are just hacks.
• If we use them, we give Microsoft no incentive to update their browser.

IE CSS3 Selectors

• IE-CSS3.js - gives IE new selectors like :nth-child and is JavaScript library agnostic.

IE6 Stylesheet

• Universal IE6 Stylesheet
• Makes the site usable, and readable but tells IE6 users that enough is enough.
• How do you get clients to approve this? - Ignorance is bliss.

Responsive Web Design

• A flexible grid
• Flexible images
• Media queries

The Flexible Grid

• All about ems.
• Design for proportions, not pixels.
• Target / Context = Result
• Give the container a percentage width and the columns an em based width.

Flexible Images

• img, video, object {max-width: 100%;}
• Max width doesn’t work in IE(douchey)6.
• IE6 and lower gets img, video, object {width: 100%;}.
• IE7 and lower and Firefox 2 and lower eff this up on Windows.
• Fluid Images - Using AlphaImageLoader() makes IE render flexible images better.

Media Queries

• Target certain CSS rules only to devices that have certain window widths, aspect ratio, even color depth.
• Design for an optimal viewing resolution.
• Enhance the default design conditionally at both ends of the spectrum.
• Supported by Opera 9.5+, Firefox 3.5+, Safari 3+, Chrome, Mobile Webkit.
• CSS3 Media Queries JS - helps other browsers parse media queries.

Great Talk, But Hard To Take Notes On