stop worrying & get on with it: progressive enhancement & intentional degradation (web...
DESCRIPTION
Slides from my appearance at Web Directions South 09: a talk that combines my presentations 'Stop Worrying & Get On With It' and 'Progressive Enhancement & Intentional Degradation'.TRANSCRIPT
![Page 1: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/1.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 2: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/2.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 3: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/3.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 4: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/4.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 5: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/5.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 6: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/6.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 7: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/7.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 8: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/8.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 9: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/9.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 10: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/10.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 11: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/11.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 12: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/12.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 13: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/13.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 14: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/14.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 15: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/15.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 16: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/16.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 17: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/17.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 18: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/18.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 19: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/19.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 20: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/20.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 21: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/21.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 22: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/22.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 23: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/23.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 24: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/24.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 25: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/25.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 26: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/26.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 27: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/27.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 28: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/28.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 29: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/29.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 30: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/30.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 31: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/31.jpg)
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
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 32: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/32.jpg)
Enhancement reward
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 33: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/33.jpg)
Enhancement reward
Visual treats for the more capable browser
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 34: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/34.jpg)
Degradation punishment
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 35: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/35.jpg)
Degradation punishment
The removal of a treat
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 36: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/36.jpg)
Degradation punishment
The removal of a treat
The designer giveth and the designer taketh away
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 37: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/37.jpg)
Intention
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 38: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/38.jpg)
Intention
An awareness of browser capabilities and the appreciation that sites donrsquot need to look in the same in each one
Stuff and Nonsense stuffandnonsensecouk
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 39: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/39.jpg)
Usability vs aesthetics
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 40: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/40.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 41: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/41.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 42: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/42.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 43: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/43.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 44: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/44.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 45: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/45.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 46: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/46.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 47: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/47.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 48: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/48.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 49: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/49.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 50: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/50.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 51: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/51.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 52: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/52.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 53: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/53.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 54: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/54.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 55: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/55.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 56: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/56.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 57: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/57.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 58: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/58.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 59: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/59.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 60: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/60.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 61: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/61.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 62: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/62.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 63: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/63.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 64: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/64.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 65: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/65.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 66: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/66.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 67: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/67.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 68: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/68.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 69: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/69.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 70: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/70.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 71: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/71.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 72: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/72.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 73: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/73.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 74: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/74.jpg)
Squared 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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 75: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/75.jpg)
Squared 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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 76: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/76.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 77: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/77.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 78: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/78.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 79: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/79.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 80: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/80.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 81: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/81.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 82: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/82.jpg)
The nicer your 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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 83: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/83.jpg)
The nicer your 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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 84: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/84.jpg)
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
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 85: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/85.jpg)
WARNING
controversial
statement
approaching
Validation is irrelevant
Yes yes Bear with me
Yes yes Bear with me
New techniques wonrsquot validate
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 86: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/86.jpg)
Validation is irrelevant
Yes yes Bear with me
Yes yes Bear with me
New techniques wonrsquot validate
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 87: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/87.jpg)
Yes yes Bear with me
Yes yes Bear with me
New techniques wonrsquot validate
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 88: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/88.jpg)
Yes yes Bear with me
New techniques wonrsquot validate
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 89: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/89.jpg)
Validation errors jigsaww3orgcss-validator
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 90: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/90.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 91: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/91.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 92: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/92.jpg)
The CSS3 Validator 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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 93: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/93.jpg)
The CSS3 Validator 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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 94: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/94.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 95: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/95.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 96: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/96.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 97: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/97.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 98: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/98.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 99: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/99.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 100: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/100.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 101: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/101.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 102: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/102.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 103: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/103.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 104: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/104.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 105: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/105.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 106: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/106.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 107: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/107.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 108: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/108.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 109: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/109.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 110: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/110.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 111: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/111.jpg)
Wersquore looking at it 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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 112: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/112.jpg)
Wersquore looking at it in the wrong way
ldquoWe canrsquot ensure that all users get 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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 113: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/113.jpg)
Wersquore looking at it in the wrong way
ldquoWe canrsquot ensure that all users get 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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 114: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/114.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 115: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/115.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 116: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/116.jpg)
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
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 117: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/117.jpg)
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only grow not decline
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 118: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/118.jpg)
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 119: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/119.jpg)
10 of users today will be 100 of users tomorrow
The amount of people who see your enrichments might seem small right now but that number will only 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
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 120: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/120.jpg)
My site before Firefox 35 (no font-face support) elliotjaystockscom
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 121: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/121.jpg)
My site after Firefox 35 (with font-face support) elliotjaystockscom
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 122: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/122.jpg)
A personal typographic journey
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 123: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/123.jpg)
Note CS3 panel shown
Dreamweaver adobecomproductsdreamweaver
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 124: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/124.jpg)
The early days Dreamweaver confusion
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 125: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/125.jpg)
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 126: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/126.jpg)
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 127: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/127.jpg)
The early days Dreamweaver confusion
The choice of fonts appeared to be system-wide
It wasnrsquot clear about web-safe fonts
To an extent Dreamweaver is still guilty
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 128: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/128.jpg)
The allure of Flash
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 129: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/129.jpg)
The allure of Flash
You can use any font you like
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 130: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/130.jpg)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 131: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/131.jpg)
The allure of Flash
You can use any font you like
Layout freedom a la print design (vs HTML inconsistency)
Hence type can be presented as intended
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 132: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/132.jpg)
Back to basics HTML
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 133: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/133.jpg)
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 134: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/134.jpg)
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 135: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/135.jpg)
Back to basics HTML
Accessible screenreader-friendly and allows for resizing
Updatable the source text dictates the final render
Simple HTML and CSS mdash thatrsquos it
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 136: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/136.jpg)
Image replacement
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 137: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/137.jpg)
Image replacement
PROS
It looks goodIt gives control over other elements besides type
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 138: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/138.jpg)
Image replacement
PROS
It looks goodIt gives control over other elements besides type
CONS
Difficult to updateInaccessible in some situationsPotentially it differs from the source code
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 139: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/139.jpg)
sIFR at work on Jason Santa Mariarsquos site jasonsantamariacom
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 140: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/140.jpg)
sIFR
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 141: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/141.jpg)
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 142: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/142.jpg)
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
= Layout is still determined by HTML
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 143: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/143.jpg)
sIFR
The best of both worlds the accessibility and lsquoselectabilityrsquo of HTML but with (some of) the benefits of Flash-based rendering
Gracefully degrades for users without Flash JS
Itrsquos brilliant but essentially itrsquos a hack not a solution
= Layout is still determined by HTML
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 144: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/144.jpg)
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 145: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/145.jpg)
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 146: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/146.jpg)
Mike Davidson mikeindustriescomblogsifr
While sIFR gives us better typography today it is clearly not the solution for the next 20 years
It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution
The moment that happens however sIFR will lift right out and give way to whatever other method is available
~ Mike Davidson
ldquo
rdquo
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 147: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/147.jpg)
font-face
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 148: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/148.jpg)
font-face
Originated in the CSS2 spec despite its general association with CSS3
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 149: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/149.jpg)
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 150: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/150.jpg)
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 151: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/151.jpg)
font-face
Originated in the CSS2 spec despite its general association with CSS3
Extremely simple to implement
Current supportSafari (since 31)Firefox 35Opera 10
Has some piracy issues (more on that in a sec)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 152: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/152.jpg)
Jos Buivengarsquos fonts josbuivengademonnl
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 153: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/153.jpg)
IE4
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 154: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/154.jpg)
Microsoftrsquos EOT(Embedded Open Type)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 155: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/155.jpg)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 156: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/156.jpg)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 157: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/157.jpg)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 158: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/158.jpg)
Microsoftrsquos EOT(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval as a new standard As far as I know it was rejected
WEFT Web Embedding Fonts Tool for making eot files
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 159: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/159.jpg)
The issues
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 160: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/160.jpg)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 161: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/161.jpg)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 162: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/162.jpg)
The issues
Protection is needed for font foundries to counteract font piracy (as with EOT)
How do we cope with licenses Mozilla proposes including license data in HTTP headers
More fonts need to be made available so that the choice can improve In its current state the limited choice is turning into not much more than an alternative list of web-safe fonts
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 163: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/163.jpg)
What needs to happen
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 164: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/164.jpg)
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 165: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/165.jpg)
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 166: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/166.jpg)
What needs to happen
Font foundries need to be protected by the technology as they are with EOT
Font embedding is the path to typographic enlightenment on the web it now has multiple browser support
Start using font embedding now
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 167: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/167.jpg)
2009 the year web typography started to grow up
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 168: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/168.jpg)
Typekit typekitcom
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 169: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/169.jpg)
Fontdeck fontdeckcom
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 170: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/170.jpg)
Kernest kernestcom
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 171: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/171.jpg)
Typekit FontDeck et al
Multiple foundries
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 172: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/172.jpg)
Typotheque typothequecom
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 173: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/173.jpg)
Typotheque et al
Foundry-specific system
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 174: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/174.jpg)
The font-as-service ilovetypographycomthe-font-as-service
Some recent articles Irsquove written on the subject
More reasons to get excited about Typekit elliotjaystockscom
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 175: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/175.jpg)
webfont
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 176: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/176.jpg)
webfont
This is where it gets exciting
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 177: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/177.jpg)
webfont
This is where it gets exciting
A recommendation for a new standard
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 178: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/178.jpg)
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 179: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/179.jpg)
webfont
This is where it gets exciting
A recommendation for a new standard
Two files font data + infoxml
Built-in copyright protection
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 180: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/180.jpg)
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 181: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/181.jpg)
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 182: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/182.jpg)
Jina Bolton creatingsexystylesheetscomcss3andwhatcouldbezip
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 183: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/183.jpg)
Some handy CSS3 features
Advanced layoutBackgrounds
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 184: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/184.jpg)
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 185: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/185.jpg)
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 186: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/186.jpg)
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 187: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/187.jpg)
Multiple background images
divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left no-repeat
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 188: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/188.jpg)
Some handy CSS3 features
Advanced layoutBackgroundsBorders
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 189: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/189.jpg)
Borders radius
divvcard border-radius20px -webkit-border-radius20px -moz-border-radius20px
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 190: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/190.jpg)
Borders image
divvcard border-imageurl(borderpng) 10 10 10 10 round round
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 191: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/191.jpg)
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadows
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 192: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/192.jpg)
Borders image
divinfo box-shadow10px 10px 5px 888
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 193: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/193.jpg)
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layout
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 194: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/194.jpg)
Multiple column layouts
divarticle column-count2 column-gap20px
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 195: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/195.jpg)
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 196: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/196.jpg)
Nth child selectors
trnth-child(odd) td background999
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 197: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/197.jpg)
Some handy CSS3 features
Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 198: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/198.jpg)
Text shadows
p text-shadow1px 2px 1px 000
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 199: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/199.jpg)
Sam Brown sambrowntc
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 200: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/200.jpg)
Tim Van Damme timvandammecom
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 201: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/201.jpg)
Web Directions webdirectionsorg
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 202: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/202.jpg)
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 203: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/203.jpg)
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 204: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/204.jpg)
All 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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 205: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/205.jpg)
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 206: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/206.jpg)
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 207: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/207.jpg)
All the small things
CSS21 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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 208: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/208.jpg)
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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 209: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/209.jpg)
All the small things
CSS21 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
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 210: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/210.jpg)
Thomas Silkjaeligr theundersignednet (Safari)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 211: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/211.jpg)
ulgallery lihover webkit-transformrotate(-25deg)
theundersignednetwp-contentthemesdefaultstylecss
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 212: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/212.jpg)
Thomas Silkjaeligr theundersignednet (Firefox)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 213: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/213.jpg)
dictionaryreferencecombrowseprogressive
Favoring or advocating progress change improvement or reform as opposed to wishing to maintain things as they areldquo rdquo
Progressive
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 214: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/214.jpg)
Donrsquot fear degradationplan for it
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 215: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/215.jpg)
Slides will be available online at elliotjaystockscomspeaking
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 216: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/216.jpg)
Thank you
elliotjaystockscom | twittercomelliotjaystocks
Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158
Paint textures from The Stock Exchange - sxchu
Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug
![Page 217: Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)](https://reader038.vdocuments.mx/reader038/viewer/2022110114/54578c22af79594f558b5069/html5/thumbnails/217.jpg)
Sexy Web Designby Elliot Jay StocksExpert reviewers Jina Bolton amp Dan Rubin
Published by SitePoint
Shameless plug