Hallo

 Sebastian Deutsch
 Mitgründer von 9elements
 Agentur für neue Medien
 Kunden: Deutsche Telekom, Trendbüro, Duden
 Kompetenzen: HTML5, Ruby on Rails,
Javascript
Status Quo
 Status Quo
 Welche Geräte haben wir?

– Computer

– Notebooks

– Netbooks
 Status Quo
 Welche Geräte haben wir?
– Computer
– Notebooks
– Netbooks
– iPhone/iPod
– Android
– MIDP
 Pads
 Upcoming?

– Das iPad ist schon da

– Für Herbst haben viele Namenhafte Hersteller

ebenfalls ein Pad angekündigt
 Zukunft
 Navigationsgeräte können bald auch Websites
darstellen

 Samsung und Lava entwickeln parallel einen

Fernseher der auf Android basiert

 GoogleTV
 Probleme
 Viele Formate

 Verschiedene Auflösungen

 Zwischen 640x480 bis 2800x1600 ist alles drin

 Probleme
 Verschiedene Plattformen
 IPhone (>26 Mio) / iPod (>19 Mio) / iPad (1 Mio)
 HABEN ALLE KEIN FLASH!
Ja und nu?
 Ja und nu?
 Choose your Weapon:

– Web

– iPhone Native App / Android Java App

– Hybrid über Titanium / Phonegap

 Wir konzentrieren uns aufs Web

 Ja und nu?
 Möglichkeit 1:
– Browserweichen über Agent Sniffing
– Unterschiedliche Ressources für Devices

 Möglichkeit 2:
– Responsive Web Design
– Gleiche Ressources für Devices
 Agent Sniffing
 Wir arbeiten bei img.ly mit Agent Sniffing

 Das geht so lange gut, wie die Anzahl der

Devices überschaubar ist

 Will man wirklich in Zukunft 1000 Devices

separat unterstützen?
 Responsive Web Design
 Neue Browser == neue Möglichkeiten

 Meet the CSS3 Media Query

 Supported in Safari 3+, Chrome, Firefox 3.5+,

and Opera 7+, (IE 9)

 Legacy Support über Javascript

 Responsive Web Design
 Was kann man alles abfragen?

 device-width, orientation, color, resolution

 und viele viele Dinge mehr:

 http://www.w3.org/TR/css3-mediaqueries/
 Responsive Web Design
 Wie schaut der Code aus:
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 640px)"
href="mobile.css" />

 CSS:
@media screen and (max-device-width: 640px) {
...
}
 Credits
 Responsive Web Design ist nicht von mir
erfunden worden, sondern wurde kürzlich von
A-List-Apart als Begriff geprägt:

 http://www.alistapart.com/articles/responsive-web-d

 Als HTML5 Evangelisten tragen wir allerdings

gerne neue Techniken weiter ;-)
 HTML5 + CSS3
 Angenommen wir lassen uns mal auf neuere
modernere Browser ein

 Was kann man alles machen?

 Wir machen mal den Roundhouse Kick durch

die neuen Features
 HTML5
 <header>

 <navigation>

 <section>

 <footer>
 CSS3
 text-shadow
z.B. text-shadow:2px 2px 2px #000000;
 border-radius
z.B. border-radius:16px 16px 16px 16px;
 rgba
z.B. rgba(0, 0, 0, 0.2)
 @font-face embed
 Kann man das benutzen?
 http://code.google.com/p/html5shiv/

 http://www.modernizr.com/

 http://www.fontsquirrel.com/

 http://typekit.com/
 Context: Responsive Web Design
 Design nicht mehr aus Grafiken
zusammenstückeln

 Den Flow von Inhalten beachten

 Mehr gestalterische Freiheit nutzen

 aber...
 Internet Explorer
 Für die meisten CSS3 Probleme gibt es im
Internet Explorer Lösungen

 http://www.smashingmagazine.com/2010/04/28/
css3-solutions-for-internet-explorer/

 Immerhin hat er noch einen Marketshare von

20-30 %
 Strategie
 Ein CSS erstellen, welches im Internet Explorer
nicht schlecht aussieht, d.h. die Seite bleibt
benutzbar

 Hacks ggf. über Conditional Comments

 In modernen Browsern werden die

entsprechenden Features voll ausgenutzt
 Flash
 Flash wird sehr viel für Video verwendet

 Flash wird für Vektorgrafiken und Animationen

verwendet

 … all diese Dinge gehen auch mit HTML5

 HTML5 vs. Flash
 <video> (ab IE9 über WebM)

 <canvas> (leider nicht im IE)

 <svg> über RaphaelJS

– RaphaelJS macht SVG sogar auf dem IE

nutzbar, da dort VML zum Einsatz kommt
 Wann vielleicht doch Flash
 Flash gerade mit AIR ist eine super Plattform

 Applikationen Cross Plattform entwickeln

 Emotionale Websites (Künstler, Kino)

Ende
 Website: http://9elements.com

 Blog: http://9elements.com/io

 Facebook: http://facebook.com/9elements

 Twitter: http://twitter.com/sippndipp