stop worrying & get on with it (fowd tour 2009)

134

Upload: elliotjaystocks

Post on 28-Jan-2015

108 views

Category:

Design


0 download

DESCRIPTION

Slides from my presentation at the Bristol leg of the 2008 FOWD Tour.

TRANSCRIPT

Page 1: Stop Worrying & Get On With It (FOWD Tour 2009)

What are we worried about

What are we worried about

Some users see lsquobrokenrsquo sites

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

Missing rounded corners donrsquot matter

Take Your Design To The Next Level With CSS3 jmpsmashingcss3

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 2: Stop Worrying & Get On With It (FOWD Tour 2009)

What are we worried about

Some users see lsquobrokenrsquo sites

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

Missing rounded corners donrsquot matter

Take Your Design To The Next Level With CSS3 jmpsmashingcss3

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 3: Stop Worrying & Get On With It (FOWD Tour 2009)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

Missing rounded corners donrsquot matter

Take Your Design To The Next Level With CSS3 jmpsmashingcss3

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 4: Stop Worrying & Get On With It (FOWD Tour 2009)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

Missing rounded corners donrsquot matter

Take Your Design To The Next Level With CSS3 jmpsmashingcss3

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 5: Stop Worrying & Get On With It (FOWD Tour 2009)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

Missing rounded corners donrsquot matter

Take Your Design To The Next Level With CSS3 jmpsmashingcss3

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 6: Stop Worrying & Get On With It (FOWD Tour 2009)

What are we worried about

Some users see lsquobrokenrsquo sites

Donrsquot build broken sites basic support can be offered as long as it doesnrsquot look broken If itrsquos a real problem for older browsers use universalie6css a warning message or something similar

But this visual treatment is integral to the brand

Then include it (if not donrsquot worry)

Missing rounded corners donrsquot matter

Take Your Design To The Next Level With CSS3 jmpsmashingcss3

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 7: Stop Worrying & Get On With It (FOWD Tour 2009)

Take Your Design To The Next Level With CSS3 jmpsmashingcss3

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 8: Stop Worrying & Get On With It (FOWD Tour 2009)

Fearful forabeautifulwebcoms598

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 9: Stop Worrying & Get On With It (FOWD Tour 2009)

Great article thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 10: Stop Worrying & Get On With It (FOWD Tour 2009)

I hope CSS3 will be a standard in the near future right now you cant really use anything of it rsquocause not every browser supports it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 11: Stop Worrying & Get On With It (FOWD Tour 2009)

CSS 3 rocks Unfortunately we need to stay at least 5 more years with CSS 21 if we want to offer the same design to each user (what in most lsquocommercialrsquo projects is necessary)

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 12: Stop Worrying & Get On With It (FOWD Tour 2009)

I canrsquot wait to use CSS3 in a real project Unfortunately Irsquom 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 jmpsmashingcss3

ldquo rdquo

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 13: Stop Worrying & Get On With It (FOWD Tour 2009)

CSS3 looks really good however because of IE it will be long time before I start using it

Comments from Smashing Magazine readers on jmpsmashingcss3

ldquo rdquo

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 14: Stop Worrying & Get On With It (FOWD Tour 2009)

These arguments are complete and utter bullshit

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 15: Stop Worrying & Get On With It (FOWD Tour 2009)

If 98 of the users canrsquot see a text-shadow it doesnrsquot matter but itrsquoll be a nice enrichment for the 2 of users who can

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 16: Stop Worrying & Get On With It (FOWD Tour 2009)

Tap Tap Tap taptaptapcom

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 17: Stop Worrying & Get On With It (FOWD Tour 2009)

Tweet CC tweetcccom

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 18: Stop Worrying & Get On With It (FOWD Tour 2009)

Fusion Ads fusionadsnet

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 19: Stop Worrying & Get On With It (FOWD Tour 2009)

Fusion Ads fusionadsnet

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 20: Stop Worrying & Get On With It (FOWD Tour 2009)

Progressive means progressive

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 21: Stop Worrying & Get On With It (FOWD Tour 2009)

Progressive means progressive

Fall-back solutions (JS on and off)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 22: Stop Worrying & Get On With It (FOWD Tour 2009)

Barclaycard online admin barclaycardcouk

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 23: Stop Worrying & Get On With It (FOWD Tour 2009)

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 24: Stop Worrying & Get On With It (FOWD Tour 2009)

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 mdash the sexy stuff is an add-on so itrsquos fine

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 25: Stop Worrying & Get On With It (FOWD Tour 2009)

Do websites need to look exactly the same in every browser

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 26: Stop Worrying & Get On With It (FOWD Tour 2009)

dowebsitesneedtolookexactlythesameineverybrowsercom

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 27: Stop Worrying & Get On With It (FOWD Tour 2009)

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 28: Stop Worrying & Get On With It (FOWD Tour 2009)

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 wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 29: Stop Worrying & Get On With It (FOWD Tour 2009)

Jon Tan

Designers will use [technologies like Flash PDF and hacks like embedding type in images] [] because they wonrsquot 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 warsldquo rdquo

Display Type amp the Raster Wars jmpjontan

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 30: Stop Worrying & Get On With It (FOWD Tour 2009)

Jon Tan Web Typography tag jontangerinecomlogtagweb-typography

Bookmark these URLs

Web Typography (Richard Rutter) webtypographynet

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 31: Stop Worrying & Get On With It (FOWD Tour 2009)

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 donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 32: Stop Worrying & Get On With It (FOWD Tour 2009)

Usability vs aesthetics

Usability accessibility functionality= very important

Usability vs aesthetics

Usability accessibility functionality= very important

But donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 33: Stop Worrying & Get On With It (FOWD Tour 2009)

Usability vs aesthetics

Usability accessibility functionality= very important

But donrsquot underestimate the importance of beauty

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 34: Stop Worrying & Get On With It (FOWD Tour 2009)

The experience

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 35: Stop Worrying & Get On With It (FOWD Tour 2009)

The experience

Beauty is the experiencersquos visual layer

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 36: Stop Worrying & Get On With It (FOWD Tour 2009)

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 37: Stop Worrying & Get On With It (FOWD Tour 2009)

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 38: Stop Worrying & Get On With It (FOWD Tour 2009)

The experience

Beauty is the experiencersquos 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 experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 39: Stop Worrying & Get On With It (FOWD Tour 2009)

The experience

Beauty is the experiencersquos visual layer

Visually pleasing layer = more fulfilling user experience

Functionality leads to usage aesthetics lead to emotion

The experience layer(See Dan Mallrsquos FOWD presentation eventscarsonifiedcomfowd2008newyorkvideosdan-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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 40: Stop Worrying & Get On With It (FOWD Tour 2009)

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

ldquo rdquo

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 41: Stop Worrying & Get On With It (FOWD Tour 2009)

Variety in web design

I can haz it

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 42: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 43: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 44: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 45: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 46: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 47: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 48: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 49: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 50: Stop Worrying & Get On With It (FOWD Tour 2009)

BORING

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 51: Stop Worrying & Get On With It (FOWD Tour 2009)

Whorsquos pushing things forward

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 52: Stop Worrying & Get On With It (FOWD Tour 2009)

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 53: Stop Worrying & Get On With It (FOWD Tour 2009)

Whorsquos 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 madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 54: Stop Worrying & Get On With It (FOWD Tour 2009)

Made By Elephant madebyelephantcom

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 55: Stop Worrying & Get On With It (FOWD Tour 2009)

Atebits atebitscom

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 56: Stop Worrying & Get On With It (FOWD Tour 2009)

Atebits atebitscomtweetie-mac

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 57: Stop Worrying & Get On With It (FOWD Tour 2009)

24 Ways 24waysorg

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 58: Stop Worrying & Get On With It (FOWD Tour 2009)

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 59: Stop Worrying & Get On With It (FOWD Tour 2009)

Stack Overflow stackoverflowcarsonifiedcom

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 60: Stop Worrying & Get On With It (FOWD Tour 2009)

Carsonified Events eventscarsonifiedcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 61: Stop Worrying & Get On With It (FOWD Tour 2009)

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 62: Stop Worrying & Get On With It (FOWD Tour 2009)

Born Living bornlivingcom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 63: Stop Worrying & Get On With It (FOWD Tour 2009)

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 64: Stop Worrying & Get On With It (FOWD Tour 2009)

Jason Santa Maria jasonsantamariacom

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 65: Stop Worrying & Get On With It (FOWD Tour 2009)

Whorsquos pushing things forward

Tim Van Damme Made By Elephant

Mike Kus Carsonified

Miguel Ripoll Cesser Digital

Jason Santa Maria

Matthew Smith Squared Eye

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 66: Stop Worrying & Get On With It (FOWD Tour 2009)

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 67: Stop Worrying & Get On With It (FOWD Tour 2009)

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 68: Stop Worrying & Get On With It (FOWD Tour 2009)

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 69: Stop Worrying & Get On With It (FOWD Tour 2009)

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 70: Stop Worrying & Get On With It (FOWD Tour 2009)

Squared Eye squaredeyecomworkfeaturedfamily-life-network

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 71: Stop Worrying & Get On With It (FOWD Tour 2009)

Squared Eye squaredeyecomworkfeaturedfamily-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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 72: Stop Worrying & Get On With It (FOWD Tour 2009)

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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 73: Stop Worrying & Get On With It (FOWD Tour 2009)

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 theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 74: Stop Worrying & Get On With It (FOWD Tour 2009)

The nicer your site looks

the longer your visitors will look at it

the longer your visitors look at it the longer theyrsquoll 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 theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 75: Stop Worrying & Get On With It (FOWD Tour 2009)

The nicer your site looks

the longer your visitors will look at it

the longer your visitors look at it the longer theyrsquoll 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

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 76: Stop Worrying & Get On With It (FOWD Tour 2009)

Web design for me is predominantly full of boring unimaginative work

Letrsquos change that

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 77: Stop Worrying & Get On With It (FOWD Tour 2009)

WARNING

controversial

statement

approaching

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 78: Stop Worrying & Get On With It (FOWD Tour 2009)

Validation is irrelevant

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 79: Stop Worrying & Get On With It (FOWD Tour 2009)

Yes yes Bear with me

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 80: Stop Worrying & Get On With It (FOWD Tour 2009)

Yes yes Bear with me

New techniques wonrsquot validate

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 81: Stop Worrying & Get On With It (FOWD Tour 2009)

Validator suggestions css3infothe-big-css3-validation-debate

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 82: Stop Worrying & Get On With It (FOWD Tour 2009)

The CSS3 Validator could offer the option to ignore vendor specific extensions

Validator suggestions css3infothe-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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 83: Stop Worrying & Get On With It (FOWD Tour 2009)

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 css3infothe-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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 84: Stop Worrying & Get On With It (FOWD Tour 2009)

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 lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 85: Stop Worrying & Get On With It (FOWD Tour 2009)

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 86: Stop Worrying & Get On With It (FOWD Tour 2009)

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 87: Stop Worrying & Get On With It (FOWD Tour 2009)

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 88: Stop Worrying & Get On With It (FOWD Tour 2009)

Jon Hicks hicksdesigncoukjournal

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 89: Stop Worrying & Get On With It (FOWD Tour 2009)

ltbgt

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 90: Stop Worrying & Get On With It (FOWD Tour 2009)

tops b displayblock floatright width333px height15px backgroundurl(imagespaulsmithgif) no-repeat

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 91: Stop Worrying & Get On With It (FOWD Tour 2009)

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 92: Stop Worrying & Get On With It (FOWD Tour 2009)

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 93: Stop Worrying & Get On With It (FOWD Tour 2009)

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 94: Stop Worrying & Get On With It (FOWD Tour 2009)

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 95: Stop Worrying & Get On With It (FOWD Tour 2009)

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 96: Stop Worrying & Get On With It (FOWD Tour 2009)

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 97: Stop Worrying & Get On With It (FOWD Tour 2009)

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 98: Stop Worrying & Get On With It (FOWD Tour 2009)

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 99: Stop Worrying & Get On With It (FOWD Tour 2009)

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 100: Stop Worrying & Get On With It (FOWD Tour 2009)

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 101: Stop Worrying & Get On With It (FOWD Tour 2009)

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 102: Stop Worrying & Get On With It (FOWD Tour 2009)

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 103: Stop Worrying & Get On With It (FOWD Tour 2009)

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 104: Stop Worrying & Get On With It (FOWD Tour 2009)

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 105: Stop Worrying & Get On With It (FOWD Tour 2009)

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 106: Stop Worrying & Get On With It (FOWD Tour 2009)

10

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 107: Stop Worrying & Get On With It (FOWD Tour 2009)

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 108: Stop Worrying & Get On With It (FOWD Tour 2009)

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 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 109: Stop Worrying & Get On With It (FOWD Tour 2009)

My site before Firefox 35 (no font-face support) elliotjaystockscom

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 110: Stop Worrying & Get On With It (FOWD Tour 2009)

My site after Firefox 35 (with font-face support) elliotjaystockscom

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 111: Stop Worrying & Get On With It (FOWD Tour 2009)

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand 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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 112: Stop Worrying & Get On With It (FOWD Tour 2009)

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

Itrsquos our duty to push forward-thinking development to make the most of the tools made available to usand our users

New CSS techniques will never become mainstream if we designers arenrsquot using them

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 113: Stop Worrying & Get On With It (FOWD Tour 2009)

All the small things

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 114: Stop Worrying & Get On With It (FOWD Tour 2009)

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 115: Stop Worrying & Get On With It (FOWD Tour 2009)

All the small things

CSS21 CSS3 etc allows you to write less code speeds up development time and generally makes life easier

Consider attribute selectors

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 116: Stop Worrying & Get On With It (FOWD Tour 2009)

ltul class=blogrollgt ltligt lta href=httpshauninmancomgtShaun Inmanltagt ltligt ltligt lta href=httpmezzobluecomgtDave Shealtagt ltligt ltligt lta href=httphicksdesigncoukgtJon Hicksltagt ltligtltulgt

HTML with no need for class names on each ltligt

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 117: Stop Worrying & Get On With It (FOWD Tour 2009)

ulblogroll li a[href=httpshauninmancom] backgroundurl(httpshauninmancomfaviconico)

Attribute selectors

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 118: Stop Worrying & Get On With It (FOWD Tour 2009)

All the small things

CSS21 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 fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 119: Stop Worrying & Get On With It (FOWD Tour 2009)

Fusion Ads fusionadsnetblog

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 120: Stop Worrying & Get On With It (FOWD Tour 2009)

All the small things

CSS21 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 doesnrsquot support these things so what

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 121: Stop Worrying & Get On With It (FOWD Tour 2009)

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 122: Stop Worrying & Get On With It (FOWD Tour 2009)

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug

Page 123: Stop Worrying & Get On With It (FOWD Tour 2009)

Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin

Published by SitePoint

Shameless plug