10. Using <video> today
Pros
Greater compatibility
Better performance
Cons
More complex preparation
Can be tricky when embedding hosted videos
(YouTube, Vimeo, etc.)
11. Video tag markup
Video for Everybody code by Kroc Camen
<video width="480" height="270" controls>
<source src="mafSept10Welcome.mp4" type="video/mp4" />
<source src="mafSept10Welcome.ogv" type="video/ogg" />
<object width="480" height="289" type="application/x-
shockwave-flash"
data="player.swf?&file=mafSept10Welcome.flv”>
<param name="movie"
value="player.swf?&file=mafSept10Welcome.flv&" />
</object>
</video>
12. VideoJS
Builds on VFE
Uses JavaScript for a more consistent
experience
Falls back gracefully if JavaScript is
disabled
FREE!
See http://videojs.com for details and downloads.
18. PIE
A JavaScript solution that uses IE specific
behavior that is applied via HTML
Components (HTC).
Limited feature support:
border-radius
box-shadow
linear-gradient
HTC file is 11kb.
19. At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes ?
PIE No Limited 11K IE Only
23. At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes N/A
PIE No Limited 11K IE Only
Selectivzr Yes No 4K IE Only
Modernizr No No 5K
24. eCSStender
A JavaScript solution that dynamically writes
CSS to support older browsers.
Core is (20k), Extensions are additional
(tiny)files to download. Only download the
extensions that you want.
25. At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes N/A Pure CSS
PIE No Limited 11K IE Only
Selectivzr Yes No 4K IE Only
Modernizr No No 5K
eCSStender Yes Limited 20K+
26. Which Approach To Take?
Depends…
How much CSS3 are you leveraging
Download size and performance
Who’s your client
No JS support and fall back strategies
Test, Test, Test!
28. Web fonts
Allows a page to use fonts not installed on a
users computer
@font-face first spec’d in CSS2
Resistance from font designers made it
unworkable
Designers and services now working together
to make fonts available
29. When to use web fonts
Great for headlines, pull quotes, etc.,
especially when limiting font styles to limit file
size
Be careful with body copy. Not all fonts are
readable at body copy size
Keep in mind that different browsers will
render differently, so avoid line-breaks and
accommodate re-flow of text
30. Using web fonts
Pros
Fewer images = lighter pages
More creative typography
Easier to maintain pages
Cons
Added page size
More “creative” typography
Rendering differences make testing a must
31. Hosted solutions
Typekit, Monotype, etc.
Low set up difficulty
Excellent compatibility: IE4+, Firefox 3.5+,
Safari 3.1+, Opera 10+, Chrome 4+
Great selection, no licensing issues
Javascript file required, dependence on 3rd
party
Recurring payments required upper tiers
32. Serving locally
Good selection from Font Squirrel, League of
Moveable Type, etc.
Moderate set up difficulty
Excellent compatibility: IE4+, Firefox 3.5+,
Safari 3.1+, Opera 10+, Chrome 4+, iOS
No JavaScript required
Using your own desktop fonts probably
violates the license
33. How to use @font-face
Hosted services require a script tag and
configuration via their website
Local code (generated by Font Squirrel):
@font-face {
font-family: 'LeagueGothicReg';
src: url('League_Gothic-webfont.eot');
src: local('☺'),
url('League_Gothic-webfont.woff') format('woff'),
url('League_Gothic-webfont.ttf') format('truetype'),
url('League_Gothic-webfont.svg#webfontOTINA1xY')
format('svg');
font-weight: normal;
font-style: normal;
}
34. Take Away
Don’t be afraid to provide the HTML5
experience today
HTML5
CSS3
Web fonts
JS
