souper tuesday - responsive webdesign

Download Souper Tuesday - Responsive Webdesign

Post on 20-Mar-2017

1.624 views

Category:

Design

7 download

Embed Size (px)

TRANSCRIPT

  • Willkommen zum

  • Souper Tuesday am 27.11.2012

    Responsive Webdesign

    s t u d i o s e l z a m

  • berblick

    Was ist responsive?Ein paar ZahlenSo siehts ausDie ZutatenDas RezeptAusblick

  • responsiveansprechbar, reaktionsfhig

  • http://www.core.form-ula.com/2008/05/17/skylite001/

    http://www.core.form-ula.com/2008/05/17/skylite001/http://www.core.form-ula.com/2008/05/17/skylite001/

  • http://www.core.form-ula.com/2008/05/17/skylite001/

    http://www.core.form-ula.com/2008/05/17/skylite001/http://www.core.form-ula.com/2008/05/17/skylite001/

  • http://www.core.form-ula.com/2008/05/17/skylite001/

    http://www.core.form-ula.com/2008/05/17/skylite001/http://www.core.form-ula.com/2008/05/17/skylite001/

  • In unserem Fall ...

  • Content in verschiedenen Kontexten

  • Ein paar Zahlen

  • Ein paar Zahlen

    Mobile Webnutzung heute

    Rund ein Drittel der Internet-Nutzer in Deutschland gehen auch mit dem Handy ins Internet. FORSA

    33%

    67%

    Internet-Nutzer mit Handy

    Rund ein Fnftel des Internet-Traffics in den USA wird ber mobile Gerte genutzt. CHITIKA

    80%

    6%

    15%

    Smartphones Tablets

  • Ein paar Zahlen

    Mobile Webnutzung in der Zukunft

    http://www.q4blog.com/2012/07/11/cisco-systems-report-mobile-traffic-doubled-and-smart-phone-use-tripled-in-2011/

    http://www.core.form-ula.com/2008/05/17/skylite001/http://www.core.form-ula.com/2008/05/17/skylite001/

  • Ein paar Zahlen

    Wir nutzen etliche Formate und Bildschirmgren

    768 x 1024

    768 x 1024

    1024 x 768

    480 x 320

    1024 x 768

    320 x 568

    540 x 960

    960 x 540

    1280 x 800

    800 x 1280

    320 x 480

    960 x 540

    540 x 9601366 x 768

    1440 x 900

    2560 x 14401920 x 10801440 x 900

    1280 x 800

  • So siehts aus

  • Responsive Websites

    Am Bildschirm simuliert

    http://resizemybrowser.com/

    http://resizemybrowser.com/http://resizemybrowser.com/

  • Responsive Websites

    Beispiel: Sony Mobile

    http://www.sonymobile.com/de/

    http://www.sonymobile.com/de/http://www.sonymobile.com/de/

  • Responsive Websites

    Beispiel: edenspiekermann

    http://edenspiekermann.com/de/

    http://edenspiekermann.com/de/http://edenspiekermann.com/de/

  • Responsive Websites

    Beispiel: Simon Collison

    http://colly.com/

    http://colly.comhttp://colly.com

  • Die Zutaten

  • Die Zutaten

    Responsive Websites bestehen aus:

    HTML (Hypertext Markup Language) beschreibt die inhaltliche Struktur einer Website im Browser

    CSS (Cascading Stylesheets) beschreiben die Darstellung einer Website mit Farben, Verlufen, Layout (Formen, Gren und Positionen) und Schriften.

    HTML

    5 3CSS

    Media Queries fragen Gerteeigenschaften ab und stellen die darauf zugeschnittenen CSS-Eigenschaften bereit.

    MEDIA QUERIES

  • MEDIA QUERIES

    CSS

    CSSCSS

    CSSCSS

    CSSCSS

    CSSCSS

    CSSCSS

    Die Zutaten

    Media Queries und diverse Stylesheets erzeugen die Responsive Website

    Stndige Abfrage der Gerteeigenschaften

    Responsive WebsiteAuswahl des StylesheetsHTML

  • Die Zutaten

    Brauche ich fr jedes Gert ein eigenes CSS?

    3CSS

    3CSS

    3CSS

    3CSS

    3CSS 3

    CSS

    3CSS

    3CSS

    3CSS

    3CSS

    3CSS

    3CSS

    3CSS

    3CSS

    3CSS

  • Die Zutaten

    Zum Glck nicht! Ich brauche Fluid Grids.

    Umrechnung harter Pixelwerte in ProzenteDefinierung von Anfangs- und Endpunkten

    http://goldengridsystem.comhttp://goldengridsystem.com

  • Die Zutaten

    Fluid Grid Beispiele

    http://www.lottanieminen.com

    http://www.lottanieminen.comhttp://www.lottanieminen.com

  • Die Zutaten

    Fluid Grid Beispiele

    http://crushlovely.com

    http://crushlovely.comhttp://crushlovely.com

  • Die Zutaten

    Fluid Grid Beispiele

    http://stephencaver.com

    http://stephencaver.comhttp://stephencaver.com

  • Das Rezept

  • Das Rezept

    Breakpoints definieren

    767 480 1024+ 1023 768 bis 479

  • Das Rezept

    mobile first

    bis 479

    1

    CSS

    767 480

    2

    CSS

    1023 768

    3

    CSS

    1024+

    4

    CSS

  • Kochstunde

    Warum mobile first?

    Wegen des geringen Platzes auf mobilen Gerten, mssen Inhalte und Features von Anfang an stark priorisiert werden

    Weniger ist mehr tut dann auch der Desktop Website gut

    Man kann sich eher auf die Mglichkeiten von Mobile einlassen

    Wie kann ich GPS, Orientierung des Gertes und Umgebungsinformationen sinnvoll nutzen?

    Man entwickelt vom Einfachen zum Komplexen

    sauberer Quellcode, mit weniger Bugs und weniger Problemen

  • People are increasingly fed up with the sheer amount of crap that they have to deal with on web pages.Luke Wroblewski - mobile first Prophet

  • Das Rezept

    Verwendung von Bildern

    Um lange Ladezeiten zu vermeiden, mssen Bilder in unterschiedlichen Gren bereitgestellt werden.

    Desktop Thumbnail580 x 420 ca. 200kb

    200kb

    Mobile Thumbnail280 x 200 ca. 30kb

    30kb

  • Das Rezept

    Typografie

    Schriftgren mssen grundstzlich auf das jeweilige Gert angepasst werden

    Das Hauptkriterium zur Bestimmung der Schriftgre ist die Lesedistanz

    Auch Zeilenabstnde mssen bei grerer Lesedistanz vergrert werden

    Bei sehr kleiner Schrift (Smartphones) sollte die Laufweite der Schrift vergrert werden

    Bei der Gestaltung von Desktop Websites werden hufig zu kleine Schriftgren verwendet

    http://informationarchitects.net/blog/responsive-typography-the-basics/

    http://www.core.form-ula.com/2008/05/17/skylite001/http://www.core.form-ula.com/2008/05/17/skylite001/

  • Das Rezept

    Weitere Herausforderungen von responsive webdesign

    Rollover-Effekte sind auf Touchscreens nicht sinnvoll Neben verschiedenen Bildschirmgren bringen unterschiedliche mobile Browser eigene Tcken mit sich, die Funktion und Darstellung der responsive Site beeintrchtigen knnen

    Lange Ladezeiten sind gerade im Mobile Bereich ein No GoRetina Displays (zunehmend im Smartphone und Tablett Bereich vertreten) verlangen aber nach hochaufgelstem Bildmaterial

    Ausgiebige Tests auf allen erdenklichen Devices sind nahezu unmglich - d.h. nicht zu viele Experimente wagen

  • Web design is engineering: its not about finding perfection, its finding the best compromise.

    Oliver Reichenstein - responsive Prophet

  • Ausblick

  • Ausblick

    RVLT

    http://rvlt.com/

    http://rvlt.comhttp://rvlt.com

  • Rdiger von Selzam / www.studioselzam.com

    s t u d i o s e l z a m

    http://www.studioselzam.comhttp://www.studioselzam.com