Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions...

Post on 01-Nov-2014

6.121 views 5 download

Tags:

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 of Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The 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

The 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

The 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Squared 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

Squared 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

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

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

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

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

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

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

The nicer your 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

The nicer your 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

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

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

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

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

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

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

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

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

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

The CSS3 Validator could highlight vendor specific extensions with a warning rather than an error

Validator suggestions css3infothe-big-css3-validation-debate

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

The CSS3 Validator could highlight vendor specific extensions with a warning rather than an error

The validator could mark such code as lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

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

The CSS3 Validator could highlight vendor specific extensions with a warning rather than an error

The validator could mark such code as lsquoexperimentalrsquo rather than an error or warning

Validator suggestions css3infothe-big-css3-validation-debate

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Jon Hicks hicksdesigncoukjournal

Jon Hicks hicksdesigncoukjournal

ltbgt

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Jon Hicks hicksdesigncoukjournal

ltbgt

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

ltbgt

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

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

Intentional invalidation in hicksdesigncoukcsslayout-9css

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Yes yes Bear with me

New techniques wonrsquot validate

and it doesnrsquot matter

Recognise the value of intentional invalidation

Validation does not equal conformity to Web Standards you can build a site with tables and a complete lack of semantics yet still have it validate

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Validation

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

does

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

not

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

equal

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

conformity

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

to

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Web

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Standards

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Wersquore looking at it in the wrong way

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Wersquore looking at it in the wrong way

ldquoWe canrsquot ensure that all users get the same experiencerdquo negative

ldquoWe can add further enhancements above the normrdquo positive

The flexibility the web offers is a blessing not a curse

Ensure a good experience for most a great one for some

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

Itrsquos not just about making things look pretty

Forward-thinking code meansa future-proof website

10

10 of users today will be 100 of users tomorrow

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

10

10 of users today will be 100 of users tomorrow

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

10 of users today will be 100 of users tomorrow

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

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

10 of users today will be 100 of users tomorrow

The amount of people who see your enrichments might seem small right now but that number will only grow not decline

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

10 of users today will be 100 of users tomorrow

The amount of people who see your enrichments might seem small right now but that number will only grow not decline

Itrsquos our duty to push forward-thinking development to make 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

10 of users today will be 100 of users tomorrow

The amount of people who see your enrichments might seem small right now but that number will only grow not decline

Itrsquos our duty to push forward-thinking development to make 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sIFR

The best of both 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

sIFR

The best of both 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

Mike Davidson mikeindustriescomblogsifr

While sIFR gives us better typography today it is clearly not the solution for the next 20 years

It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution

The moment that happens however sIFR will lift right out and give way to whatever other method is available

~ Mike Davidson

ldquo

rdquo

Mike Davidson mikeindustriescomblogsifr

While sIFR gives us better typography today it is clearly not the solution for the next 20 years

It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution

The moment that happens however sIFR will lift right out and give way to whatever other method is available

~ Mike Davidson

ldquo

rdquo

Mike Davidson mikeindustriescomblogsifr

While sIFR gives us better typography today it is clearly not the solution for the next 20 years

It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better 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

Mike Davidson mikeindustriescomblogsifr

While sIFR gives us better typography today it is clearly not the solution for the next 20 years

It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better solution

The moment that happens however sIFR will lift right out and give way to whatever other method is available

~ Mike Davidson

ldquo

rdquo

Mike Davidson mikeindustriescomblogsifr

While sIFR gives us better typography today it is clearly not the solution for the next 20 years

It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better 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

Mike Davidson mikeindustriescomblogsifr

While sIFR gives us better typography today it is clearly not the solution for the next 20 years

It is but a nice stopgap for people who value the importance of typography and donrsquot want to wait 1 5 or 10 years for browser makers OS vendors and type foundries to figure out a better 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

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

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

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

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

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

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

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

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

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

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

Microsoftrsquos EOT(Embedded Open Type)

Supported since IE4 (but not in IE8 yet)

Font 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

Microsoftrsquos EOT(Embedded Open Type)

Supported since IE4 (but not in IE8 yet)

Font 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

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

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

The issues

Protection is needed 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

The issues

Protection is needed 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

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

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

What needs to happen

Font foundries need to be protected by 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

What needs to happen

Font foundries need to be protected by 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Multiple background images

divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left 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

Multiple background images

divshoutbox background url(topgif) top left no-repeat url(middlegif) left repeat-y url(bottomgif) bottom left 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

All the small things

All the small things

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

All the small things

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

Consider attribute selectors

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

HTML with no need for class names on each ltligt

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

Attribute selectors

All the small things

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

Consider attribute selectors

Consider nth-child selectors

Fusion Ads fusionadsnetblog

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

All the small things

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

All the small things

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

Consider attribute selectors

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

HTML with no need for class names on each ltligt

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

Attribute selectors

All the small things

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

Consider attribute selectors

Consider nth-child selectors

Fusion Ads fusionadsnetblog

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

All the small things

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

Consider attribute selectors

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

HTML with no need for class names on each ltligt

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

Attribute selectors

All the small things

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

Consider attribute selectors

Consider nth-child selectors

Fusion Ads fusionadsnetblog

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

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

HTML with no need for class names on each ltligt

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

Attribute selectors

All the small things

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

Consider attribute selectors

Consider nth-child selectors

Fusion Ads fusionadsnetblog

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

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

Attribute selectors

All the small things

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

Consider attribute selectors

Consider nth-child selectors

Fusion Ads fusionadsnetblog

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

All the small things

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

Consider attribute selectors

Consider nth-child selectors

Fusion Ads fusionadsnetblog

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

Fusion Ads fusionadsnetblog

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

All the small things

CSS21 CSS3 etc allows you to write less code speeds up 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

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

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

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

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

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

Slides will be available online at elliotjaystockscomspeaking

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

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

Published by SitePoint

Shameless plug

Thank you

elliotjaystockscom | twittercomelliotjaystocks

Pin-ups image by Mauren Veras - flickrcomphotosmauren2298724158

Paint textures from The Stock Exchange - sxchu

Set in FS Clerkenwell - fontsmithcomfont_detailsphpfont_num=251

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

Published by SitePoint

Shameless plug

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

Published by SitePoint

Shameless plug