You are on page 1of 37

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