FOWD NYC 2009

Take Your Design To The Next Level With CSS3 j.mp/smashingcss3

Fearful forabeautifulweb.com/s/598

“ ” Great article, thanks but I think I’ll wait until most of the browsers support CSS3 totally to develop websites for my clients. Comments from Smashing Magazine readers on j.mp/smashingcss3

“ ” I hope CSS3 will be a standard in the near future; right now you cant really use anything of it ’cause not every browser supports it. Comments from Smashing Magazine readers on j.mp/smashingcss3

“ CSS 3 rocks. Unfortunately we need to stay at ” least 5 more years with CSS 2.1 if we want to offer the same design to each user (which in most ‘commercial’ projects is necessary). Comments from Smashing Magazine readers on j.mp/smashingcss3

“ I can’t wait to use CSS3 in a real project. Unfortunately I’m going to be stuck with ” things as they are for the time being as I wait for my clients to catch up. I expect this will be the case for most designers for the time being. Comments from Smashing Magazine readers on j.mp/smashingcss3

“ ” CSS3 looks really good however because of IE it will be long time before I start using it. Comments from Smashing Magazine readers on j.mp/smashingcss3

These arguments are complete and utter bullshit

If 98% of the users can’t see a text-shadow, it doesn’t matter, but it’ll be a nice enrichment for the 2% of users who can

Tap Tap Tap taptaptap.com

Tweet CC tweetcc.com

Fusion Ads fusionads.net

Progressive means progressive

Progressive means progressive Fall-back solutions (JS on and off?)

Barclaycard online admin barclaycard.co.uk

Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them

Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them Use progressive enrichment in your dull, corporate sites — the sexy stuff is an add-on, so it’s fine!

Do websites need to look exactly the same in every browser?

dowebsitesneedtolookexactlythesameineverybrowser.com

Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers

Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way

Jon Tan: “ Designers will use [technologies like Flash, PDF, and hacks like embedding type in images] [...] because they won’t have to deal with painful inconsistencies between user agents; the bane ” of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars. Display Type & the Raster Wars j.mp/jontan

Bookmark these URLs Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography Web Typography (Richard Rutter) webtypography.net

Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way So stop trying to reach the unreachable! Embrace the differences

Usability vs. aesthetics Usability / accessibility / functionality = very important

Usability vs. aesthetics Usability / accessibility / functionality = very important But don’t underestimate the importance of beauty!

The experience

The experience Beauty is the experience’s visual layer

The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience

The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion

The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer

The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer (See Dan Mall’s FOWD presentation: events.carsonified.com/fowd/2008/newyork/videos/dan-mall/)

The experience layer “ Our emotions change the way we think ” and serve as constant guides to appropriate behaviour, steering us away from the bad and guiding us towards the good. Donald Norman, Emotional Design

Variety in web design. I can haz it?

BORING

Who’s pushing things forward?

Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye

Made By Elephant madebyelephant.com

Atebits atebits.com

Atebits atebits.com/tweetie-mac/

24 Ways 24ways.org

Stack Overflow stackoverflow.carsonified.com

Carsonified Events events.carsonified.com

Born Living bornliving.com

Jason Santa Maria jasonsantamaria.com

Squared Eye squaredeye.com/work/featured/family-life-network/

The nicer your site looks...

The nicer your site looks... ... the longer your visitors will look at it...

The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website...

The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website... ... and the longer they spend on your website, the easier it will be for you to sell them your product or service

Web design, for me, is predominantly full of boring, unimaginative work. Let’s change that.

N G IN l : A R W oversia con tr t at en ! em ing st ch ap p roa

Validation is irrelevant

Yes, yes. Bear with me...

Yes, yes. Bear with me... New techniques won’t validate...

Validation errors jigsaw.w3.org/css-validator

Validator suggestions css3.info/the-big-css3-validation-debate/

The CSS3 Validator could offer the option to ignore vendor specific extensions Validator suggestions css3.info/the-big-css3-validation-debate/

The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error Validator suggestions css3.info/the-big-css3-validation-debate/

The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error The validator could mark such code as ‘experimental’ rather than an error or warning Validator suggestions css3.info/the-big-css3-validation-debate/

Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter!

Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Know that you can break the rules

Jon Hicks hicksdesign.co.uk/journal

#tops b { display:block; float:right; width:333px; height:15px; background:url(/images/paulsmith.gif) no-repeat; } hicksdesign.co.uk/css/layout-9.css

Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Know that you can break the rules Validation does not equal conformity to Web Standards: you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

conformity

Standards

We’re looking at it in the wrong way

We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative

We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive

We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse

We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse Ensure a good experience for most; a great one for some

It’s not just about making things look pretty. Forward-thinking code means a future-proof website.

10% of users today will be 100% of users tomorrow

10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline

My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com

My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com

10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users

10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users New CSS techniques will never become mainstream if we designers aren’t using them

All the small things

All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier

All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors

<ul class="blogroll"> <li> <a href="http://shauninman.com">Shaun Inman</a> </li> <li> <a href="http://mezzoblue.com">Dave Shea</a> </li> <li> <a href="http://hicksdesign.co.uk">Jon Hicks</a> </li> </ul> HTML with no need for class names on each <li>

ul.blogroll li a[href="http://shauninman.com"]{ background:url(http://shauninman.com/favicon.ico); } Attribute selectors

All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors

Fusion Ads fusionads.net/blog/

All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors And if a browser doesn’t support these things... ... so what?

Thomas Silkjær theundersigned.net (Safari)

ul.gallery li:hover { webkit-transform:rotate:(-2.5deg); } theundersigned.net/wp-content/themes/default/style.css

Thomas Silkjær theundersigned.net (Firefox)

Progressive “ ” Favoring or advocating progress, change, improvement, or reform, as opposed to wishing to maintain things as they are. dictionary.reference.com/browse/progressive

Don’t fear degradation: plan for it

Slides will be available online at elliotjaystocks.com/speaking/

Shameless plug! Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint

Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/ Paint textures from The Stock Exchange - sxc.hu Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251

http://pousta.com	364
http://lanyrd.com	32
http://www.slideshare.net	7
http://alhaqqagency.wordpress.com	7
http://plug.pennabarkersnorth.co.uk	2

FOWD NYC 2009

by elliotjaystocks

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 412

Statistics

FOWD NYC 2009 Presentation Transcript