3. What are we worried about?
Some users see โbrokenโ sites.
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
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!
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)
7. 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!
10. โ โ
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
11. โ โ
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
12. โ
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
13. โ
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
14. โ โ
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
25. 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!
28. Do websites need to look
exactly the same in
every browser?
Websites will never look consistent across all browsers
29. 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
30. 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
31. Bookmark these URLs
Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography
Web Typography (Richard Rutter) webtypography.net
32. 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
37. The experience
Beauty is the experienceโs visual layer
Visually pleasing layer = more fulfilling user experience
38. The experience
Beauty is the experienceโs visual layer
Visually pleasing layer = more fulfilling user experience
Functionality leads to usage; aesthetics lead to emotion
39. 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
40. 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/)
41. 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
55. 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
56. 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. 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
64. 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
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
68. 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
76. The nicer your site looks...
... the longer your visitors will look at it...
77. 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...
78. 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
79. Web design, for me, is
predominantly full of boring,
unimaginative work.
Letโs change that.
80.
81. N G
IN l :
A R
W oversia
con tr t
at en !
em ing
st ch
ap p r oa
86. The CSS3 Validator could offer the option to ignore
vendor specific extensions
Validator suggestions css3.info/the-big-css3-validation-debate/
87. The CSS3 Validator could offer 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/
88. The CSS3 Validator could offer the option to ignore
vendor 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/
89. Yes, yes. Bear with me...
New techniques wonโt validate...
... and it doesnโt matter!
90. Yes, yes. Bear with me...
New techniques wonโt validate...
... and it doesnโt matter!
Recognise the value of intentional invalidation
94. #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
95. 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
107. Weโre looking at it in
the wrong way
โWe canโt ensure that all users get the same experience.โ
// negative
108. 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
109. 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
110. 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
111. Itโs not just about
making things look pretty.
Forward-thinking code means
a future-proof website.
113. 10% of users today will be
100% of users tomorrow
114. 10% of users today will be
100% of users tomorrow
The amount of people who see your enrichments
might seem small right now, but that number
will only grow, not decline
115.
116. My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
117. My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
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. 10% of users today will be
100% 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
121. All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
122. 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
123. <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>
125. 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
127. 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?
128.
129. Slides will be available online at
elliotjaystocks.com/speaking/
130.
131.
132. 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
133.
134. Shameless plug!
Sexy Web Design
by Elliot Jay Stocks
Expert reviewers: Jina Bolton & Dan Rubin
Published by SitePoint