What are we worried about?
What are we worried about?
Some users see ‘broken’ sites.
What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long a...
What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long a...
What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long a...
What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long a...
Take Your Design To The Next Level With CSS3 j.mp/smashingcss3
Fearful forabeautifulweb.com/s/598
Great article, thanks but I think to wait that
the most of browsers support CSS3 totally to
develop websites for my client...
I hope CSS3 will be a standard in the near
future, right now you cant really use anything
of it ’cause not every browser s...
CSS 3 rocks. Unfortunately we need to stay at
least 5 more years with CSS 2.1 if we want to
offer the same design to each ...
I can’t wait to use CSS3 in a real project.
Unfortunately I’m going to be stuck with
things as they are for the time being...
CSS3 looks really good however because of IE
it will be long time before I start using it.
Comments from Smashing Magazine...
These arguments are
complete and utter bullshit
If 98% of the users can’t see a
text-shadow, it doesn’t matter,
but it’ll be a nice enrichment
for the 2% of users who can
Tap Tap Tap taptaptap.com
Tweet CC tweetcc.com
Fusion Ads fusionads.net
Fusion Ads fusionads.net
Progressive means progressive
Progressive means progressive
Fall-back solutions (JS on and off?)
Barclaycard online admin barclaycard.co.uk
Progressive means progressive
Fall-back solutions (JS on and off?)
Enhancements only become features when the
majority of ...
Progressive means progressive
Fall-back solutions (JS on and off?)
Enhancements only become features when the
majority of ...
Do websites need to look
exactly the same in
every browser?
dowebsitesneedtolookexactlythesameineverybrowser.com
Do websites need to look
exactly the same in
every browser?
Websites will never look consistent across all browsers
Do websites need to look
exactly the same in
every browser?
Websites will never look consistent across all browsers
Render...
Jon Tan:
Designers will use [technologies like Flash, PDF,
and hacks like embedding type in images] [...]
because they won...
Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography
Bookmark these URLs
Web Typography (Richard Rutter) we...
Do websites need to look
exactly the same in
every browser?
Websites will never look consistent across all browsers
Render...
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 don’t need to look in
the same in each one....
Usability vs. aesthetics
Usability vs. aesthetics
Usability / accessibility / functionality
= very important
Usability vs. aesthetics
Usability / accessibility / functionality
= very important
But don’t underestimate the importance...
The experience
The experience
Beauty is the experience’s visual layer
The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functiona...
The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functiona...
The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functiona...
The experience layer
Our emotions change the way we think
and serve as constant guides to appropriate
behaviour, steering ...
Variety in web design.
I can haz it?
BORING
BORING
BORING
BORING
BORING
BORING
BORING
BORING
BORING
Who’s pushing things forward?
Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Sa...
Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Sa...
Made By Elephant madebyelephant.com
Atebits atebits.com
Atebits atebits.com/tweetie-mac/
24 Ways 24ways.org
Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Sa...
Stack Overflow stackoverflow.carsonified.com
Carsonified Events events.carsonified.com
Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Sa...
Born Living bornliving.com
Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Sa...
Jason Santa Maria jasonsantamaria.com
Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Sa...
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
The nicer your site looks...
The nicer your site looks...
... the longer your visitors will look at it...
The nicer your site looks...
... the longer your visitors will look at it...
... the longer your visitors look at it, the ...
The nicer your site looks...
... the longer your visitors will look at it...
... the longer your visitors look at it, the ...
Web design, for me, is
predominantly full of boring,
unimaginative work.
Let’s change that.
WARNING:
controversial
statement
approaching!
Validation is irrelevant
Yes, yes. Bear with me...
Yes, yes. Bear with me...
New techniques won’t validate...
Validation errors jigsaw.w3.org/css-validator
Validator suggestions css3.info/the-big-css3-validation-debate/
The CSS3 Validator could offer the option to ignore
vendor specific extensions
Validator suggestions css3.info/the-big-css...
The CSS3 Validator could offer the option to ignore
vendor specific extensions
The CSS3 Validator could highlight vendor s...
The CSS3 Validator could offer the option to ignore
vendor specific extensions
The CSS3 Validator could highlight vendor s...
Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional i...
Jon Hicks hicksdesign.co.uk/journal
Jon Hicks hicksdesign.co.uk/journal
<b>
#tops b {
display:block;
float:right;
width:333px;
height:15px;
background:url(/images/paulsmith.gif) no-repeat;
}
Intenti...
Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional i...
Validation
does
not
equal
conformity
to
Web
Standards
We’re looking at it in
the wrong way
We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative
We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative
“We can add fur...
We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative
“We can add fur...
We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative
“We can add fur...
It’s not just about
making things look pretty.
Forward-thinking code means
a future-proof website.
10%
10% of users today will be
100% of users tomorrow
10% of users today will be
100% of users tomorrow
The amount of people who see your enrichments
might seem small right now...
10% of users today will be
100% of users tomorrow
The amount of people who see your enrichments
might seem small right now...
10% of users today will be
100% of users tomorrow
The amount of people who see your enrichments
might seem small right now...
@
My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
A personal
typographic journey...
Note: CS3 panel shown
Dreamweaver adobe.com/products/dreamweaver
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 wasn’t clear about w...
The early days...
... Dreamweaver...
... confusion!
The choice of fonts appeared
to be system-wide
It wasn’t clear about w...
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 ca...
Back to basics: HTML
Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing
Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing
Updatable:
the source text dictates the fin...
Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing
Updatable:
the source text dictates the fin...
Image replacement
Image replacement
PROS
It looks good
It gives control over other elements besides type
Image replacement
PROS
It looks good
It gives control over other elements besides type
CONS
Difficult to update
Inaccessib...
sIFR at work on Jason Santa Maria’s site jasonsantamaria.com
sIFR
sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of*) the benefits
of Flash-base...
sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of*) the benefits
of Flash-base...
sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of*) the benefits
of Flash-base...
Mike Davidson, mikeindustries.com/blog/sifr
While sIFR gives us better typography today, it is
clearly not the solution fo...
Mike Davidson, mikeindustries.com/blog/sifr
While sIFR gives us better typography today, it is
clearly not the solution fo...
Mike Davidson, mikeindustries.com/blog/sifr
While sIFR gives us better typography today, it is
clearly not the solution fo...
@font-face
@font-face
Originated in the CSS2 spec, despite its general
association with CSS3
@font-face
Originated in the CSS2 spec, despite its general
association with CSS3
Extremely simple to implement
@font-face
Originated in the CSS2 spec, despite its general
association with CSS3
Extremely simple to implement
Current su...
@font-face
Originated in the CSS2 spec, despite its general
association with CSS3
Extremely simple to implement
Current su...
Jos Buivenga’s fonts josbuivenga.demon.nl
IE4!!!
Microsoft’s EOT
(Embedded Open Type)
Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT wa...
Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT wa...
The issues
The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT)
The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT)
How do we cope with licenses? M...
The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT)
How do we cope with licenses? M...
What needs to happen?
What needs to happen?
Font foundries need to be protected by the technology,
as they are with EOT
What needs to happen?
Font foundries need to be protected by the technology,
as they are with EOT
Font embedding is the pa...
What needs to happen?
Font foundries need to be protected by the technology,
as they are with EOT
Font embedding is the pa...
2009: the year web typography
started to grow up
Typekit typekit.com
Fontdeck fontdeck.com
Kernest kernest.com
Typekit, FontDeck, et al
Multiple foundries
Typotheque typotheque.com
Typotheque, et al
Foundry-specific system
The font-as-service: ilovetypography.com/the-font-as-service/
Some recent articles I’ve
written on the subject
More reason...
.webfont
.webfont
This is where it gets exciting!
.webfont
This is where it gets exciting!
A recommendation for a new standard
.webfont
This is where it gets exciting!
A recommendation for a new standard
Two files: font data + info.xml
.webfont
This is where it gets exciting!
A recommendation for a new standard
Two files: font data + info.xml
Built-in copy...
Some handy CSS3 features
Some handy CSS3 features
Advanced layout
Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip
Some handy CSS3 features
Advanced layout
Backgrounds
div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-...
Multiple background images
div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(...
Multiple background images
div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(...
Multiple background images
div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(...
Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Borders: radius
div.vcard {
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
Borders: image
div.vcard {
border-image:url(border.png) 10 10 10 10 round round;
}
Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows
Borders: image
div.info {
box-shadow:10px 10px 5px #888;
}
Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Multiple column layouts
div.article {
column-count:2;
column-gap:20px
}
Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors
Nth child selectors
tr:nth-child(odd) td {
background:#999
}
Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors
Text shadows
Text shadows
p {
text-shadow:1px 2px 1px #000
}
Sam Brown sam.brown.tc
Tim Van Damme timvandamme.com
Web Directions webdirections.org
All the small things
All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes lif...
All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes lif...
<ul class="blogroll">
<li>
<a href="http://shauninman.com">Shaun Inman</a>
</li>
<li>
<a href="http://mezzoblue.com">Dave ...
ul.blogroll li a[href="http://shauninman.com"]{
background:url(http://shauninman.com/favicon.ico);
}
Attribute selectors
All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes lif...
Fusion Ads fusionads.net/blog/
All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes lif...
Thomas Silkjær theundersigned.net (Safari)
ul.gallery li:hover {
webkit-transform:rotate:(-2.5deg);
}
theundersigned.net/wp-content/themes/default/style.css
Thomas Silkjær theundersigned.net (Firefox)
dictionary.reference.com/browse/progressive
Favoring or advocating progress, change,
improvement, or reform, as opposed to...
Don’t fear degradation:
plan for it
Slides will be available online at
elliotjaystocks.com/speaking/
Thank you!
elliotjaystocks.com | twitter.com/elliotjaystocks
Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298...
Sexy Web Design
by Elliot Jay Stocks
Expert reviewers: Jina Bolton & Dan Rubin
Published by SitePoint
Shameless plug!
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)
Upcoming SlideShare
Loading in...5
×

Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)

4,771

Published on

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'.

Published in: Design, Technology
1 Comment
9 Likes
Statistics
Notes
  • Nice design and flow
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,771
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
92
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)

  1. 1. What are we worried about?
  2. 2. What are we worried about? Some users see ‘broken’ sites.
  3. 3. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar
  4. 4. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand!
  5. 5. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry)
  6. 6. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry) Missing rounded corners don’t matter!
  7. 7. Take Your Design To The Next Level With CSS3 j.mp/smashingcss3
  8. 8. Fearful forabeautifulweb.com/s/598
  9. 9. 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 j.mp/smashingcss3 “ ”
  10. 10. I hope CSS3 will be a standard in the near future, right now you cant really use anything of it ’cause not every browser supports it. Comments from Smashing Magazine readers on j.mp/smashingcss3 “ ”
  11. 11. CSS 3 rocks. Unfortunately we need to stay at least 5 more years with CSS 2.1 if we want to offer the same design to each user (what in most ‘commercial’ projects is necessary). Comments from Smashing Magazine readers on j.mp/smashingcss3 “ ”
  12. 12. I can’t wait to use CSS3 in a real project. Unfortunately I’m going to be stuck with things as they are for the time being as I wait for my clients to catch up. I expect this will be the case for most designers for the time being. Comments from Smashing Magazine readers on j.mp/smashingcss3 “ ”
  13. 13. CSS3 looks really good however because of IE it will be long time before I start using it. Comments from Smashing Magazine readers on j.mp/smashingcss3 “ ”
  14. 14. These arguments are complete and utter bullshit
  15. 15. If 98% of the users can’t see a text-shadow, it doesn’t matter, but it’ll be a nice enrichment for the 2% of users who can
  16. 16. Tap Tap Tap taptaptap.com
  17. 17. Tweet CC tweetcc.com
  18. 18. Fusion Ads fusionads.net
  19. 19. Fusion Ads fusionads.net
  20. 20. Progressive means progressive
  21. 21. Progressive means progressive Fall-back solutions (JS on and off?)
  22. 22. Barclaycard online admin barclaycard.co.uk
  23. 23. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them
  24. 24. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them Use progressive enrichment in your dull, corporate sites — the sexy stuff is an add-on, so it’s fine!
  25. 25. Do websites need to look exactly the same in every browser?
  26. 26. dowebsitesneedtolookexactlythesameineverybrowser.com
  27. 27. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers
  28. 28. 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
  29. 29. Jon Tan: Designers will use [technologies like Flash, PDF, and hacks like embedding type in images] [...] because they won’t have to deal with painful inconsistencies between user agents; the bane of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars.“ ”Display Type & the Raster Wars j.mp/jontan
  30. 30. Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography Bookmark these URLs Web Typography (Richard Rutter) webtypography.net
  31. 31. 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
  32. 32. Enhancement: reward
  33. 33. Enhancement: reward Visual treats for the more capable browser
  34. 34. Degradation: punishment
  35. 35. Degradation: punishment The removal of a treat
  36. 36. Degradation: punishment The removal of a treat The designer giveth and the designer taketh away!
  37. 37. Intention
  38. 38. Intention An awareness of browser capabilities and the appreciation that sites don’t need to look in the same in each one. Stuff and Nonsense stuffandnonsense.co.uk
  39. 39. Usability vs. aesthetics
  40. 40. Usability vs. aesthetics Usability / accessibility / functionality = very important
  41. 41. Usability vs. aesthetics Usability / accessibility / functionality = very important But don’t underestimate the importance of beauty!
  42. 42. The experience
  43. 43. The experience Beauty is the experience’s visual layer
  44. 44. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience
  45. 45. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion
  46. 46. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer
  47. 47. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer (See Dan Mall’s FOWD presentation: events.carsonified.com/fowd/2008/newyork/videos/dan-mall/)
  48. 48. 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 “ ”
  49. 49. Variety in web design. I can haz it?
  50. 50. BORING
  51. 51. BORING
  52. 52. BORING
  53. 53. BORING
  54. 54. BORING
  55. 55. BORING
  56. 56. BORING
  57. 57. BORING
  58. 58. BORING
  59. 59. Who’s pushing things forward?
  60. 60. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  61. 61. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  62. 62. Made By Elephant madebyelephant.com
  63. 63. Atebits atebits.com
  64. 64. Atebits atebits.com/tweetie-mac/
  65. 65. 24 Ways 24ways.org
  66. 66. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  67. 67. Stack Overflow stackoverflow.carsonified.com
  68. 68. Carsonified Events events.carsonified.com
  69. 69. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  70. 70. Born Living bornliving.com
  71. 71. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  72. 72. Jason Santa Maria jasonsantamaria.com
  73. 73. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  74. 74. Squared Eye squaredeye.com/work/featured/family-life-network/
  75. 75. Squared Eye squaredeye.com/work/featured/family-life-network/
  76. 76. Squared Eye squaredeye.com/work/featured/family-life-network/
  77. 77. Squared Eye squaredeye.com/work/featured/family-life-network/
  78. 78. Squared Eye squaredeye.com/work/featured/family-life-network/
  79. 79. Squared Eye squaredeye.com/work/featured/family-life-network/
  80. 80. The nicer your site looks...
  81. 81. The nicer your site looks... ... the longer your visitors will look at it...
  82. 82. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website...
  83. 83. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website... ... and the longer they spend on your website, the easier it will be for you to sell them your product or service
  84. 84. Web design, for me, is predominantly full of boring, unimaginative work. Let’s change that.
  85. 85. WARNING: controversial statement approaching!
  86. 86. Validation is irrelevant
  87. 87. Yes, yes. Bear with me...
  88. 88. Yes, yes. Bear with me... New techniques won’t validate...
  89. 89. Validation errors jigsaw.w3.org/css-validator
  90. 90. Validator suggestions css3.info/the-big-css3-validation-debate/
  91. 91. The CSS3 Validator could offer the option to ignore vendor specific extensions Validator suggestions css3.info/the-big-css3-validation-debate/
  92. 92. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error Validator suggestions css3.info/the-big-css3-validation-debate/
  93. 93. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error The validator could mark such code as ‘experimental’ rather than an error or warning Validator suggestions css3.info/the-big-css3-validation-debate/
  94. 94. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter!
  95. 95. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation
  96. 96. Jon Hicks hicksdesign.co.uk/journal
  97. 97. Jon Hicks hicksdesign.co.uk/journal
  98. 98. <b>
  99. 99. #tops b { display:block; float:right; width:333px; height:15px; background:url(/images/paulsmith.gif) no-repeat; } Intentional invalidation in hicksdesign.co.uk/css/layout-9.css
  100. 100. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation Validation does not equal conformity to Web Standards: you can build a site with tables and a complete lack of semantics yet still have it validate
  101. 101. Validation
  102. 102. does
  103. 103. not
  104. 104. equal
  105. 105. conformity
  106. 106. to
  107. 107. Web
  108. 108. Standards
  109. 109. We’re looking at it in the wrong way
  110. 110. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative
  111. 111. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive
  112. 112. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse
  113. 113. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse Ensure a good experience for most; a great one for some
  114. 114. It’s not just about making things look pretty. Forward-thinking code means a future-proof website.
  115. 115. 10%
  116. 116. 10% of users today will be 100% of users tomorrow
  117. 117. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline
  118. 118. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users
  119. 119. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users New CSS techniques will never become mainstream if we designers aren’t using them
  120. 120. @
  121. 121. My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
  122. 122. My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
  123. 123. A personal typographic journey...
  124. 124. Note: CS3 panel shown Dreamweaver adobe.com/products/dreamweaver
  125. 125. The early days... ... Dreamweaver... ... confusion!
  126. 126. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide
  127. 127. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide It wasn’t clear about web-safe fonts
  128. 128. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide It wasn’t clear about web-safe fonts To an extent, Dreamweaver is still guilty
  129. 129. The allure of Flash
  130. 130. The allure of Flash You can use any font you like
  131. 131. The allure of Flash You can use any font you like Layout freedom, a la print design (vs. HTML inconsistency)
  132. 132. The allure of Flash You can use any font you like Layout freedom, a la print design (vs. HTML inconsistency) Hence type can be presented as intended
  133. 133. Back to basics: HTML
  134. 134. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing
  135. 135. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing Updatable: the source text dictates the final render
  136. 136. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing Updatable: the source text dictates the final render Simple: HTML and CSS — that’s it!
  137. 137. Image replacement
  138. 138. Image replacement PROS It looks good It gives control over other elements besides type
  139. 139. Image replacement PROS It looks good It gives control over other elements besides type CONS Difficult to update Inaccessible in some situations Potentially it differs from the source code
  140. 140. sIFR at work on Jason Santa Maria’s site jasonsantamaria.com
  141. 141. sIFR
  142. 142. sIFR The best of both worlds: the accessibility and ‘selectability’ of HTML but with (some of*) the benefits of Flash-based rendering. * = Layout is still determined by HTML
  143. 143. sIFR The best of both worlds: the accessibility and ‘selectability’ of HTML but with (some of*) the benefits of Flash-based rendering. Gracefully degrades for users without Flash / JS. * = Layout is still determined by HTML
  144. 144. sIFR The best of both worlds: the accessibility and ‘selectability’ of HTML but with (some of*) the benefits of Flash-based rendering. Gracefully degrades for users without Flash / JS. It’s brilliant, but essentially it’s a hack; not a solution. * = Layout is still determined by HTML
  145. 145. Mike Davidson, mikeindustries.com/blog/sifr While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution. The moment that happens however, sIFR will lift right out and give way to whatever other method is available. ~ Mike Davidson “ ”
  146. 146. Mike Davidson, mikeindustries.com/blog/sifr While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution. The moment that happens however, sIFR will lift right out and give way to whatever other method is available. ~ Mike Davidson “ ”
  147. 147. Mike Davidson, mikeindustries.com/blog/sifr While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution. The moment that happens however, sIFR will lift right out and give way to whatever other method is available. ~ Mike Davidson “ ”
  148. 148. @font-face
  149. 149. @font-face Originated in the CSS2 spec, despite its general association with CSS3
  150. 150. @font-face Originated in the CSS2 spec, despite its general association with CSS3 Extremely simple to implement
  151. 151. @font-face Originated in the CSS2 spec, despite its general association with CSS3 Extremely simple to implement Current support: Safari (since 3.1) Firefox 3.5 Opera 10
  152. 152. @font-face Originated in the CSS2 spec, despite its general association with CSS3 Extremely simple to implement Current support: Safari (since 3.1) Firefox 3.5 Opera 10 Has some piracy issues (more on that in a sec!)
  153. 153. Jos Buivenga’s fonts josbuivenga.demon.nl
  154. 154. IE4!!!
  155. 155. Microsoft’s EOT (Embedded Open Type)
  156. 156. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet)
  157. 157. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet) Font encoding protects against piracy
  158. 158. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet) Font encoding protects against piracy EOT was submitted to the W3C for approval as a new standard. As far as I know, it was rejected
  159. 159. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet) Font encoding protects against piracy EOT was submitted to the W3C for approval as a new standard. As far as I know, it was rejected WEFT: Web Embedding Fonts Tool for making .eot files
  160. 160. The issues
  161. 161. The issues Protection is needed for font foundries to counteract font piracy (as with EOT)
  162. 162. The issues Protection is needed for font foundries to counteract font piracy (as with EOT) How do we cope with licenses? Mozilla proposes including license data in HTTP headers
  163. 163. The issues Protection is needed for font foundries to counteract font piracy (as with EOT) How do we cope with licenses? Mozilla proposes including license data in HTTP headers More fonts need to be made available so that the choice can improve. In its current state, the limited choice is turning into not much more than an alternative list of web-safe fonts
  164. 164. What needs to happen?
  165. 165. What needs to happen? Font foundries need to be protected by the technology, as they are with EOT
  166. 166. What needs to happen? Font foundries need to be protected by the technology, as they are with EOT Font embedding is the path to typographic enlightenment on the web... it now has multiple browser support
  167. 167. What needs to happen? Font foundries need to be protected by the technology, as they are with EOT Font embedding is the path to typographic enlightenment on the web... it now has multiple browser support Start using font embedding now!
  168. 168. 2009: the year web typography started to grow up
  169. 169. Typekit typekit.com
  170. 170. Fontdeck fontdeck.com
  171. 171. Kernest kernest.com
  172. 172. Typekit, FontDeck, et al Multiple foundries
  173. 173. Typotheque typotheque.com
  174. 174. Typotheque, et al Foundry-specific system
  175. 175. The font-as-service: ilovetypography.com/the-font-as-service/ Some recent articles I’ve written on the subject More reasons to get excited about Typekit: elliotjaystocks.com
  176. 176. .webfont
  177. 177. .webfont This is where it gets exciting!
  178. 178. .webfont This is where it gets exciting! A recommendation for a new standard
  179. 179. .webfont This is where it gets exciting! A recommendation for a new standard Two files: font data + info.xml
  180. 180. .webfont This is where it gets exciting! A recommendation for a new standard Two files: font data + info.xml Built-in copyright protection
  181. 181. Some handy CSS3 features
  182. 182. Some handy CSS3 features Advanced layout
  183. 183. Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip
  184. 184. Some handy CSS3 features Advanced layout Backgrounds
  185. 185. div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat } Multiple background images
  186. 186. Multiple background images div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat }
  187. 187. Multiple background images div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat }
  188. 188. Multiple background images div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat }
  189. 189. Some handy CSS3 features Advanced layout Backgrounds Borders
  190. 190. Borders: radius div.vcard { border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }
  191. 191. Borders: image div.vcard { border-image:url(border.png) 10 10 10 10 round round; }
  192. 192. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows
  193. 193. Borders: image div.info { box-shadow:10px 10px 5px #888; }
  194. 194. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows Multi-column layout
  195. 195. Multiple column layouts div.article { column-count:2; column-gap:20px }
  196. 196. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows Multi-column layout Selectors
  197. 197. Nth child selectors tr:nth-child(odd) td { background:#999 }
  198. 198. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows Multi-column layout Selectors Text shadows
  199. 199. Text shadows p { text-shadow:1px 2px 1px #000 }
  200. 200. Sam Brown sam.brown.tc
  201. 201. Tim Van Damme timvandamme.com
  202. 202. Web Directions webdirections.org
  203. 203. All the small things
  204. 204. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier
  205. 205. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors
  206. 206. <ul class="blogroll"> <li> <a href="http://shauninman.com">Shaun Inman</a> </li> <li> <a href="http://mezzoblue.com">Dave Shea</a> </li> <li> <a href="http://hicksdesign.co.uk">Jon Hicks</a> </li> </ul> HTML with no need for class names on each <li>
  207. 207. ul.blogroll li a[href="http://shauninman.com"]{ background:url(http://shauninman.com/favicon.ico); } Attribute selectors
  208. 208. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors
  209. 209. Fusion Ads fusionads.net/blog/
  210. 210. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors And if a browser doesn’t support these things... ... so what?
  211. 211. Thomas Silkjær theundersigned.net (Safari)
  212. 212. ul.gallery li:hover { webkit-transform:rotate:(-2.5deg); } theundersigned.net/wp-content/themes/default/style.css
  213. 213. Thomas Silkjær theundersigned.net (Firefox)
  214. 214. dictionary.reference.com/browse/progressive Favoring or advocating progress, change, improvement, or reform, as opposed to wishing to maintain things as they are. “ ” Progressive
  215. 215. Don’t fear degradation: plan for it
  216. 216. Slides will be available online at elliotjaystocks.com/speaking/
  217. 217. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/ Paint textures from The Stock Exchange - sxc.hu Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251
  218. 218. Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint Shameless plug!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×