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

Post on 28-Jan-2015

106 views 0 download

Tags:

description

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

transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wersquore looking at it 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

Wersquore looking at it 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

Wersquore looking at it 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

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

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

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

10 of users today will be 100 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

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

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

10 of users today will be 100 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

10 of users today will be 100 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

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

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

All 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

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

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

All 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

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

All 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

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

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

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

Published by SitePoint

Shameless plug