Die nexum AG ist Beratung und Agentur fr digitale Medien.

Responsive Design
Martin Gamper, Senior Art Direktor

Kln, 23.08.2011

Responsive was?
Traditionell werden Webdesigns gedacht fr:

Bestimmte Fenstergren

Texteingabe ber Keyboard

Bedienung mit der Maus

Responsive was?
Prognose:

Grafiken/Quelle: http://blog.freenetmobile.de/nutzung-des-mobilen-internets-nimmt-zu/

Plus: halb-mobile Endgerte: Laptops, Netbooks und Tablet-PCs haben bereits 24% Anteil bei den Computern in 2011
Quelle: http://blog.kennstdueinen.de/2011/03/mobile-web-aktuelle-nutzerzahlen-von-bitkom-veroffentlicht/

Responsive was?
Also designen wir immer mehr auch hierfr:
Verschiedenste Interfaces, Controller und ScreenFormate T9 Keypads, TouchscreenTastaturen etc.

Touchable Interfaces

Responsive Webdesign: ein Design, viele Gerte

Gemeint ist damit ein Design-Ansatz, der flexibel auf verschiedene Endgerte und vor allem Displaygren reagieren kann.
Quelle: http://t3n.de/news/t3n-linktipps-responsive-webdesign-e-commerce-video-313610/

Bildquelle: Sehenswerte Slideshow auf: http://www.slideshare.net/djesse/unwissenheit-ist-ein-segen-responsive-webdesign

Wie sieht sowas aus?

Linktipps von David und Simon

http://earthhour.fr

http://teixido.co/

http://www.frontend2011.com

http://thedolectures.co.uk/ http://8faces.com/

http://100tage.jensfranke.com/

Beispiele aus unserem Kreis

by David Hellmann

http://www.makebettershirts.com/ http://demos.launchblog.de/Tamron/Mobile%20Website/index.php http://www.davidhellmann.com/?theme=awesome_mobile http://www.davidhellmann.com/blog/archiv/?theme=awesome_mobile http://www.davidhellmann.com/portfolio/?theme=awesome_mobile

Wie gehts?

Flexible Grids Fluid Images Media Query

Media Query

Media Query
Media Query erlaubt nicht nur, bestimmte Ausgabe-Gerte zu definieren, sondern die exakten physikalischen Eigenschaften des Gerts abzufragen, das unser Design rendern wird:

orientation http://www.w3.org/TR/css3-mediaqueries/#media1

10

Flexible Grids
Durch die Media Query knnen min- und max-Werte definiert werden, fr die dann ein bestimmter Style gelten soll, andernfalls wird die Angabe ignoriert.

Verweis auf ein bestimmtes Stylesheet

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

Oder direkt im CSS als @media Regel:

@media screen and (max-device-width: 480px) { .column { float: none; } }

11

Fluid Images

Element wird in seiner ursprnglichen Gre gerendert, solange es schmaler ist als sein Container. Die max-width: 100% Regel zwingt das Element, sich der Breite seines Containers anzupassen. Funktioniert auch fr Videos und andere Rich Media Elemente. Aber nicht immer: IE6 und niedriger Kombination bestimmte Windows OS x bestimmte Browser-Typen bg-Images Workarounds (JS) http://www.alistapart.com/articles/fluid-images/

12

Responsive Web Design vs. Mobile Website

Responsive Web Design hat Vor- und Nachteile und scheint auch gestalterisch gewisse Limits zu setzen. Alternative: Mobile Website 1) Styleangaben: z.B. Ausblenden von bestimmten Inhalten (Bildern), vereinfachter Aufbau, nur bestimmte Inhalte werden ausgegeben 2) Eigenstndige Mobile Seite: komplett neuer Seitenaufbau mglich mit optimierten Inhalten + Designs fr Smartphones Vorteil: Dabei kann auch konzeptionell auf unterschiedliche UserBedrfnisse besser eingegangen werden.

13

Mobile Website

14

Mobile Website

15

Was heit das fr uns Designer?

Auch wenn ein Groteil hiervon Entwicklungs-Arbeit ist, ist es unser Job, das Verhalten einer Seite mit zu designen (im Sinne ausdenken). Zu Beginn des Projekts Gedanken ber gewnschte Flexibilitt machen Mit Konzept und Entwicklung abstimmen Bei der Kalkulation bedenken (Design und Entwicklung) Beim Gestalten selbst: Vorstellungsvermgen Eventuell mehrere Skalierungs-Stati visuell abbilden? Gewnschtes Verhalten der Seite mit Entwickler absprechen und ggf. in Styleguide dokumentieren

16

Tutorials / Artikel / Sammlungen

http://www.alistapart.com/articles/responsive-web-design/ Guter Artikel ber das Thema generell, viele techn. Details http://www.alistapart.com/d/responsive-web-design/ex/ex-siteFINAL.html Zugehrige Beispielseite (Code wird in o.g. Artikel erklrt) http://www.netmagazine.com/node/1337 21 top tools for responsive web design (Sketch Sheets, Grids u.a.) http://mediaqueri.es/ Schne Sammlung von coolen Designs, die Media Query nutzen http://www.lovelyui.com/ Schne Sammlung von Mobile Sites (Designs und UI Elemente) http://www.abookapart.com/products/responsive-web-design Buchtipp