Real solutions, no tricks
98
Real solutions, no tricks!
-
Upload
jens-grochtdreis -
Category
Technology
-
view
1.394 -
download
1
description
English version of a talk given at SAE Alumni Convention 2011 in Berlin, covering modern web development with HTML5 and CSS3
Transcript of Real solutions, no tricks
Real solutions, no tricks!
‣Frontend developer
‣10 years work in agencies
‣12 years work in and for the web
‣Founder of the Webkrauts
‣Blogger
‣Author for several developer-magazines
‣technical book-editor for Galileo, O'Reilly, Pearson
Jens Grochtdreis
http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/
Less documents, more applications
Missing controls
What can we do with CSS 2?
‣ text formats
‣ colours for fore- and background
‣ positioning
‣ floats
‣ images are needed for many solutions
‣ sometimes extra markup is needed for image-based solutions
‣ transparence with side effects
HTML5-Highlights
One Doctype to rule them all
<!DOCTYPE html>
Links around block elements
New semantic elements
New HTML5-Elements
http://html5doctor.com/designing-a-blog-with-html5/#comment-17535
New semantic elements
‣ On many occasions a replacement for DIV.
‣ Based on the actual practise on the web.
‣ No special functions in the browser. Just new elements.
‣WAI-ARIA inclusive!
New semantic
‣ fine structure of the content
‣ Browser takes on the headline hierarchy. On complex pages this is great! Outline-algorithm
The outline-algorithm
Headlines
‣ HTML4/XHTML: 6 headlines
‣ HTML5: endless headlines
‣ Each content inside the <body>-element is part of a "section". Sections can be nested.
‣ The <body>-element is the main section. Further sections are implicitely (h1 - h6) or explicitly defined.
‣ These elemens are defining explicitely a section:
‣ <body>, <section>, <article>, <aside>, <footer>, <header>, <nav>
https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
Each section has its own headings-hierarchy
the outline - uncertainty
from an MDN-article
http://gsnedders.html5.org/outliner/process.py
Online-Outliner-Tool
Does this threaten us?
https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
Think of the consequences!
http://code.google.com/p/html5shim/
‣ HTML5-pages work in old browsers only via javascript. This concerns mainly IE including version 8.
http://www.modernizr.com/
With Javascript
Without Javascript
HTML5-formelements
HTML5-formelements
Appropriate screen keyboard
Date
Opera 11.5
Chrome 15 dev Firefox 5
http://wufoo.com/html5/attributes/01-placeholder.html
The placeholder-attribute
What if a browser doesn‘t know the new elements?
Then all new input-elements are rendered as
<input type=“text“> and attributes get ignored.
Built-in Validation
Firefox 5 Mac
Opera 11.5 Mac
Chrome 15 dev Mac
Chrome doesn‘t play well with scaled pages and validation.
What if a browser doesn‘t know the validation?
‣ Ignore it! ( = Progressive enhancement)
‣ Load JS-alternatives with Modernizr (http://modernizr.com)
‣ Use polyfills
‣ https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Which gap is filled by CSS3?
animations
Less images
new layout-model
more possibilities with borders and backgrounds
new selectors
rounded corners
gradients
transitions
multiple columnscalc()
transparency with rgba()
media-queries
The pros
‣ Less decorative images are needed
‣ Less Javascript is needed.
‣ Animations and transitions via CSS are faster than via Javascript.
‣ The sourcecode will be leaner and better readable as HTML is rarely used for decorative purpose.
http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
The cons
There are none!
Okay, a small one!
modern selectors
‣ Old IE (including version 8) don‘t understand them!
‣ Those browser can be helped via Javascript.
‣ If those selections aren‘t „vital“ the use of Javascript is okay.
http://jsfiddle.net/Flocke/VCSEB/
Can I use CSS3 and HTML5 today?
yes and no
Some new properties aren‘t implemented in any browser.
Does this work in IE, too?
http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
http://www.findmebyip.com/litmus/
http://www.findmebyip.com/litmus/
http://www.findmebyip.com/litmus/
Progress depends on the slowest because of its wide
distribution.
http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
Old IE-versions ...
The Web is inherently flexible
„Responsive Design“ is no new invention, despite the hype!
The consumer can use information from the Internet
as he likes.
http://www.webdesignshock.com/responsive-design-problems/
important insight:There can not be THE ONE
form of representation!
http://shouldwebsiteslookthesameinallbrowsers.com/
Our Layout is only a recommendation!
Agree early on the development strategy
Progressive Enhancement
http://www.alistapart.com/articles/understandingprogressiveenhancement/
‣ Focus is on the content
Graceful Degredation
‣ Focus is on the most modern browsers
‣ old browsers get a downgraded version
http://stuffandnonsense.co.uk/
Brutal Degredation
including IE8 modern browsers
http://www.fillerati.com/
How to deal with IE
Fallback
‣ Microsoft participates at the technical improvement of the internet starting with IE9.
‣ For most techniques it doesn‘t matter if we talk about IE6 or IE8.
‣ Some may be simulated by Javascript.
‣ Some may be simulated by IE-filters.
‣ Apart from that: graceful degredation / progressive enhancement
Even with modern techniques you can do
nonsense!
CSS3 ≠ always useful
http://codepo8.github.com/CSS3-Rainbow-Dividers/
http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
Frameworks/Tools
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://www.sciweavers.org/i2style
http://www.colorzilla.com/gradient-editor/
http://www.display-inline.fr/projects/css-gradient/
http://leaverou.me/demos/nth.html
The three most important best practices
Think Investigate
http://goo.gl/HbFx0http://goo.gl/NYGeI
Experiment
http://goo.gl/LohPq
Twitter: @Flocke
Slideshare: Flocke669
Jens Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/
