Summary: This week we talk about HTML5 and CSS3. We've all heard about it, but do we really understand the differences it brings to the industry? We try to find out for ourselves. Download: Direct Link Itunes: itunes link What do I need to know? Fully understand things introduced in HTML4. DOCTYPE, CSS guidelines Learn HTML4 deprecated tags center, frameset and more [W3Schools link below] Learn new stuff in HTML5 tags: footer, header, progress, navigation, canvas, section. SEO BOOST! [W3Schools link below] audio, video and canvas geolocation, localstorage, full web apps Wassup wit CSS3? What’s New? Native: Media queries, rounded corners, opacity, gradients, animations, shadows Know your audience and your intended platform How soon applicable to average user??? Limitations: browsers. Users must be up to date with their platform, because HTML5 is constantly evolving. Tackle limitations: graceful degradation vs progress enhancement Choosing CSS2 vs CSS3 base Mobile and HTML5 is like fish in water What do I do? Working on a static page [brochure site] full CSS3 animations, scrolling navigation, responsive (media queries) Use the appropriate tags header, nav, section, article, footer, etc. Tutorials/examples [html5 link below] spyrestudios html5rocks thebestdesigns Moving Forward Fancy effects != HTML5 scroll down navigation, fluid/responsive design HTML5 / CSS3 Frameworks Responsive web design has become extremely important lately, since our content is published across many different platforms. It is important to consider how your content will reflow, so that you can plan accordingly. Frameworks like these are great starting points for creating responsive layouts, while not having to reinvent the wheel each time. 52Framework foundation by zurb boilerplate.com Grid Frameworks Sencha Emulating desktop experience games: localstorage, canvas tag for animation, processing, css3 animation phone gap Mind Blowing Sites jpunt.nl camstech.com ycoyacht.com nikebetterworld.com ft.com Mentioned Links: HTML4 New Elements HTML5 New Elements HTML5 CSS3 Jasper Nike Correction: Tijuana Flats is not a HTML5 site, but an example is similar effects/sites done without HTML5.
