HTML5 und CSS3

Beispiele und Hintergrundinfos für Designer

Ihre Gastgeber heute: Björn und Nils

Was soll das?

Mit dieser kleinen Präsentation (Kaffee jemand?) wollen wir Euch zeigen, was man mit den modernen Webtechniken HTML5 und CSS3 samt JavaScript so alles machen kann.

Einige der Dinge, die wir zeigen werden, sind nicht in allen Browsern lauffähig. Dennoch möchten wir euch ermutigen auch solche neuen Features zu benutzen.

Nach dieser Session kennt ihr die wichtigsten, UX relevanten Features von HTML5/CSS3. Die Präsentation hier ist HTML basiert und kann inkl. aller Features noch einmal neu erlebt werden.

Halt! Browser-Statistik ...

Top 10 der Browser auf XING (Stand: 1. Mai 2012)

  1. Mozilla Firefox 11.0 24.3%
  2. MS Internet Explorer 8 15.0%
  3. MS Internet Explorer 9 12.5%
  4. Google Chrome 18 8.1%
  5. No information 8.0%
  6. Safari 5.1.5 4.7%
  7. MS Internet Explorer 7 4.6%
  8. Mozilla Firefox 3.6 2.9%
  9. Mozilla Firefox 10.0 2.5%
  10. Mozilla Firefox 12.0 1.8%

Generated Content

Mittlerweile ein Klassiker - Benutzt :before & :after

Absatz mit Bildchen davor & danach, die gar nicht da sind.

Wir benutzen die schon recht häufig auf der Plattform:

examples for generated content on XING

Browsersupport für Generated Content

Support
Chrome Firefox Internet Explorer Opera Safari
>3.5 9 >4

Am besten nur für rein dekorative Zwecke benutzen.

Gradients

Wir können fast alles! Eine ganze Menge!

Browsersupport für Gradients

Support
Chrome Firefox Internet Explorer Opera Safari
>3.6 ± >11

Viele Browser-Präfixes = kostspielig.

Minimale/maximale Breite/Höhe

Beispiel für Mindesthöhe und maximale Höhe. Das geht auch mit der Breite.

min-height: 200px;

max-height: 300px;

Browsersupport für min/max Breite/Höhe

Support
Chrome Firefox Internet Explorer Opera Safari

Der IE6 kann's nicht. Aber: Who cares?

Round and round

a jawning chimpanzee
1
What ever
2
A lot of blabla and some blabla more. Just to see if long texts can be applied.
3
Finally a quit workingspace!

Browsersupport für Border-Radius

Support
Chrome Firefox Internet Explorer Opera Safari
9+

Shadow on the Wall

1
2
3
4
5

Browsersupport für Box-Shadow

Support
Chrome Firefox Internet Explorer Opera Safari
9+ >10.5

Mehrfacher Hintergrund

One box with two background pictures. 1.) The landscape. 2.) The dude. (He would never read this paper in the public ...)

Browsersupport für multiple Background

Support
Chrome Firefox Internet Explorer Opera Safari
9+ >10.5

Der zweite Hintergrund sollte wirklich nur Deko sein. IE8 und 7 zeigen ihn nicht an.

"I can see you!"

Come to Hamburg!

Browsersupport für Opacity

Support
Chrome Firefox Internet Explorer Opera Safari

IEs benutzen nicht "normales" CSS, sondern MS-spezifische Filter. *seufz*

Einer flog über den Text

Da war es wieder das Geräusch. Er drehte sich rasch um und schaute in die Augen von einem Biest mit langen Fangzähnen.

Der Text geht natürlich noch weiter. Ganz spannend sogar. Aber da kein Platz vorhanden ist, schneidet der Browser ab und macht Auslasspunkte. - Benutzen wir schon auf der Seite.

Browsersupport für Text-Overflow

Support
Chrome Firefox Internet Explorer Opera Safari

Der Text hat 'n Schatten

Li Europan lingues es membres del sam familie.

Li Europan lingues es membres del sam familie.

Li Europan lingues es membres del sam familie.

Li Europan lingues es membres del sam familie.

Europan Lingues

Browsersupport für Text-Shadow

Support
Chrome Firefox Internet Explorer Opera Safari
±

IEs 7 und 8 können keinen Text-Schatten. IE9 nur mit ekligem Filter.

Transformers! *nänänänänä*

Normal

biermann

Rotated

biermann

Scaled

biermann

Sönke breit

biermann

Skewed

biermann

Browsersupport für Transforms

Support
Chrome Firefox Internet Explorer Opera Safari
9+

Es lebt!

Product 1

Best icecream in town. You have to buy it. Otherwise we will two kittens each day.

Product 2

Definitely the best product you've ever seen. Don't know what it is for - but great stuff!

Product 3

Whatever you're doing - do it quick. Consume! Consume and obey! Quick.

You want to buy me! You have to. You can't live without me!

Browsersupport für Transitions

Support
Chrome Firefox Internet Explorer Opera Safari
10+

Nur ein "Schmankerl" ...?

Flipp'n'Flipp

Back of Playcard
Playcard King
Back of Playcard
Playcard Queen
Back of Playcard
Playcard As

Browsersupport für 3D Transforms

Support
Chrome Firefox Internet Explorer Opera Safari

Benötigt JavaScript-Fallback.

Wir benutzen es an einer Stelle: Login > "Passwort vergessen"

Aaaaand: Action!

Die Komponenten

Aaaaand: Action!

Die Komposition

Browsersupport für Animations

Support
Chrome Firefox Internet Explorer Opera Safari
±

Animationen benötigen viele Präfixe. Und dann sind sie sehr verschachtelt. = Teuer.

Wenn, dann extrem sparsam einsetzen.

Rappen

Was macht man mit zu langen Worten? - Man rappt sie! Ähhh ... Man man man man macht ein word-wrap.

Normal

Superkallifragilistischexpialigetisch

Gewrapt

Superkallifragilistischexpialigetisch

Browsersupport für Word-Wrap

Support
Chrome Firefox Internet Explorer Opera Safari

Und jetzt: HTML5

Ein bisschen technischer aber nicht minder spannend!

<figure>Waschmaschinen sind auch spannend</figure>

Canvas

Beispiel Statistiken

Beispiel Spielchen

Browsersupport für Canvas

Support
Chrome Firefox Internet Explorer Opera Safari
9+

Inhalt lässt sich bearbeiten

Pures HTML5! Die Box hat ein contenteditable="true". Das ist alles.

Frage: Verstehen User das? Einfach direkt eintippen wie in einem Text-Editor?

Könnte Sicherheitsrisiko beinhalten ...

Browsersupport für contenteditable

Support
Chrome Firefox Internet Explorer Opera Safari

Details & Summary

Dies ist ein Punkt, den mal einfach mal ausklappen kann

Damit Ihr indess erkennt, woher dieser ganze Irrthum gekommen ist, und weshalb man die Lust anklagt und den Schmerz lobet, so will ich Euch Alles eröffnen und auseinander setzen, was jener Begründer der Wahrheit und gleichsam Baumeister des glücklichen Lebens selbst darüber gesagt hat. Niemand, sagt er, verschmähe, oder hasse, oder fliehe die Lust als solche, sondern weil grosse Schmerzen ihr folgen, wenn man nicht mit Vernunft ihr nachzugehen verstehe.

Wenig Support bisher, aber ein unglaublich effektives Features. Wenn das vom Browser nativ unterstützt wird, spart das eine Menge Arbeit.

Nutzen wir bisher im Hilfecenter.

Browsersupport für Details & Summary

Support
Chrome Firefox Internet Explorer Opera Safari

Semantic Tags

Neue Tags wie <article>, <header>, <footer>, <nav>, <aside>, <figure> geben neue semantische Möglichkeiten und verbessern die Möglichkeiten des Stylings.

Setzen wir verstärkt in Topics ein

Nicht unbedingt UX relevant ...

Browsersupport für Semantic Tags

Support
Chrome Firefox Internet Explorer Opera Safari

HTML5 Form Features



HTML5 Form Features

Seid mutig! Seid verwegen! Wagt etwas! Lasst die Browser die Fehlermeldungen generieren.

verschiedene Validierungen

Browsersupport für HTML5 Form Features

Support
Chrome Firefox Internet Explorer Opera Safari
10+

Fortschritt anzeigen!

Your score is: 2 out of 10

Your score is:

Browsersupport für Progress & Meter

Support
Chrome Firefox Internet Explorer Opera Safari
10+

Geolocation

Beispiel Standortbestimmung

Browsersupport für Geolocation

Support
Chrome Firefox Internet Explorer Opera Safari
9+

Web Notifications

Beispiel für persistente Nachrichten auf dem Desktop Twitter

Browsersupport für Web Notifications

Support
Chrome Firefox Internet Explorer Opera Safari

"Ich will den ganz großen Bildschirm!"

Ernsthaft, das ist komplett nativ !!!

The Hoff onna beach

Browsersupport für Full Screen API

Support
Chrome Firefox Internet Explorer Opera Safari

PNG Alphatransparenz

Browsersupport für PNG Alphatransparenz

Support
Chrome Firefox Internet Explorer Opera Safari

Tipps und Quellen

Schluss. Aus. Finito. Das war's.

Danke für die Aufmerksamkeit.

The show is over - Thank you!