SlideShare ist ein Scribd-Unternehmen logo
1 von 39
Downloaden Sie, um offline zu lesen
RESPONSIVE
WEBDESIGN
   von Andreas Simon
ÜBER MICH
        ★     Webentwicklung
              (TYPO3, Mobile Web, PHP/MySQL....)
              Konzeption und Projektleitung

        ★     G16 Media, Kiel (www.g16.net)
        ★     Freelancer sitevisions.de
        ★     @sitevisions, Google+




andreas simon @sitevisions
WARUM
            RESPONSIVE WEBDESIGN
        ★     ca. 2014/2015 wird es mehr Traffic über
              mobile Geräte geben als über Desktop

        ★     immer mehr (mobile) Endgeräte
        ★     versch. Größen, versch. Auflösungen etc.




andreas simon @sitevisions
VERSCHIEDENE GRÖSSEN
TABLETS
VERSCHIEDENE GERÄTE


        ★     Smartphones in versch. Größen
        ★     Tablets in versch. Größen
        ★     PCs, Laptops, Subnotebooks
        ★     Fernseher



andreas simon @sitevisions
DIE PROBLEME

        ★     große, statische Seiten auf versch.
              Screengrößen

        ★     Zoomen, links-rechts, oben-unten
        ★     Orientierung, wo bin ich hier?!
        ★     Touchgesten > Links treffen
        ★     Schriftgrößen; Bildgrößen; Buttons (zu klein)


andreas simon @sitevisions
WARUM
          RESPONSIVE WEBDESIGN?
        ★     bisheriges Webdesign: statisch
        ★     feste Größe, nicht skalierbar
        ★     px-Werte (auch bei Schriften)




andreas simon @sitevisions
DARSTELLUNG STATISCHER
                SEITEN




andreas simon @sitevisions
FOLGE / ZIEL

★   Website an die jeweiligen Situation
    (Endgeräte) anpassen
★   responsive = reagieren


    >> Das Ende der 960px




    Ein Beispiel....
BEISPIELE


                              hier viell. die eigene
                              BVeispielseite




andreas simon @sitevisions
RESPONSIVE WEBDESIGN
★   fluide Layouts

★   Anpassung der Breite an Screen

★   weitere Anpassungsmöglichkeiten durch
    mediaqueries

★   Veränderung der Darstellung

★   lineare Anordnung von Inhalten

★   Reduzierung von Inhalten (u.a. Formulare)
RESPONSIVE WEBDESIGN
        ★     Anpassung der Navigation

        ★     Anpassung von Button

        ★     Anpassung von Bildgrößen

        ★     etc.




andreas simon @sitevisions
MEDIAQUERIES
        ★     Anpassung des Layouts abh. von Screengröße

        @media screen and (max-width: 700px) {
           div#col2 {width:62,5%;} (...) }

        ★     Mediaqueries abhängig von Content setzen,
              nicht von Devicegrößen (iPhone, iPad)

        ★     Wir erstellen Websites nicht für bestimmte
              Devices, sondern wollen EINE Website für alle
              Geräte!

andreas simon @sitevisions
TECHNIK
        ★     fluides Layout: % statt px

        ★     em statt px für Schriften!




        ★     Typische Probleme:

andreas simon @sitevisions
SCHRIFTEN
        ★     Schriftgrößen auch über MediaQueries
              anpassen!

        ★     nicht zu klein (gute Lesbarkeit auf
              Smartphone)

        ★     nicht zu groß (Designtrend „große Schriften“):




andreas simon @sitevisions
FITTEXT
★   stufenloses
    Skalieren von
    Text
SCHRIFTEN GGF.
 VERKLEINERN
LAYOUT
 ★     3 Spalten > 2 Spalten > 1 Spalte




                                          .
                                          u




andreas simon @sitevisions
LAYOUT




           von Heiliger Dreispaltikgeit
            ➡    zu linearem Aufbau

andreas simon @sitevisions
IMAGES




andreas simon @sitevisions
IMAGES
        ★     einfaches Skalieren:

        img { max-width:100% }

        Orientierung am Elternelement




andreas simon @sitevisions
IMAGES - PROBLEME
        ★     Ladezeiten: es werden Bilder für Desktop-
              Version geladen

        ★     Lösungsansätze

              ★     Adaptive Images (PHP)

              ★     picture vs. srcset

        ★     Achtung: Retina (Auflösung)


andreas simon @sitevisions
NAVIGATION
        ★     Content ist King

        ★     Navi ist Queen

        ★     Platzproblem auf kleinen Screens!



        Lösungsansätze...



andreas simon @sitevisions
Ü
                                                        K



    WEITERE PROBLEMSTELLEN
        ★     Tabellen, Akkordeon, hover ,Lightboxen

        ★     Platzprobleme - wohin mit dem Content?!




        ★     Neuer Ansatz: Mobile First


andreas simon @sitevisions
Ü
                                                      K



                     MOBILE FIRST
        ★     Content is King!

        ★     kleine Geräte = wenig(er) Platz



        Mobile First:

        ★     bei Konzeption und Design mit kleinen
              Screens starten


andreas simon @sitevisions
Ü
                                                         K



                     MOBILE FIRST
        ★     Wichtiger Content zuerst!

        ★     ..zwingt uns, uns auf das Wesentliche zu
              beschränken

        ★     und somit mehr an den User zu denken:

        ★     User First




andreas simon @sitevisions
MOBILE FIRST




Quelle: Brad Frost - bradfrost.com/blog/web/mobile-first-responsive-webdesign
DESIGN - MOCKUPS
DESIGN - MOCKUPS
        ★     Adobe Edge Reflow!




andreas simon @sitevisions
PROGRESSIVE ENHANCEMENT
        ★     Mobile Bowser = techn. auf aktuellem Stand

              >> NUTZEN

        ★     aber: muss auch lauffähig sein auf Desktop-
              und älteren Geräten

        ★     Beispiele: Navigationen, Akkordeon
              (auch ohne Javascript!)

        ★     modernizr!
andreas simon @sitevisions
Ü
                                                               K



 PROGRESSIVE ENHANCEMENT
        ★     Beispiel Mobile:

        ★     Geolocation

        ★     Formular-Felder > richtige Tastatur einblenden

        ★     href=“tel:0432112345“

        ★     Touch Events!



andreas simon @sitevisions
VORTEILE RWD
        ★     Anpassung an verschiedenste Größen
        ★     Mehraufwand/Kosten, aber günstiger als
              Mobile Website

        ★     geringer Pflegeaufwand! geringe Folgekosten
        ★     gut für SEO > eine Domain/URL
        ★     !?! gleiche Inhalte
        ★     kein Springen zw. 2 Versionen!

andreas simon @sitevisions
NACHTEILE RWD
        ★     Ladezeiten (nicht optimiert)
        ★     reines Ausblenden von Inhalten
              (werden aber geladen!)

        ★     keine indiv. Inhalte (mobile Situation)




andreas simon @sitevisions
PROBLEME UMGEHEN
        ★     Inhalte über Ajax nachladen
              ★     RESS = Responsive WD+ ServerSide
                    Components

        ★     Adaptive bzw. Responsive Images
        ★     IE <= 8 keine mediaqueries = respond.js
        ★     schön: Slider mit Touchevents (Flexslider!)


andreas simon @sitevisions
MOBILE VS. RESPONSIVE SITE
Mobile Websites:
★    spezieller (mobiler) Content;
★    Reduzierung (Vor- oder Nachteil?)
★    optimierte Ladezeiten
★    Optimiertes Layout (eigenes Layout)
★    aber: doppelte Pflege von Inhalten, neue
     Domain, neue URLs (SEO);
★    will der User auf eine „alternative“ Website!?
NUTZUNG VON
        MOBILE DEVICES
★    auf dem Weg zur Arbeit, Stadt etc.

★    informieren über Produkte im Geschäft

= unterwegs (geringe Bandbreite, weniger Zeit)

★    aber: auf Toilette ( > 80% der Männer )

★    Sofa, Bett

= at home (hohe Bandbreite, viel Zeit)
RESPONSIVE WEBDESIGN
★   Es gibt kein mobiles Web
★   Wir erstellen keine Websites für das iPhone,
    oder das iPad, Tablets etc.
★   Wir wollen EINE Website für alle Devices


★   = RESPONSIVE WEBSITES
TOOLS
        ★     Adobe Edge Inspect
        ★     Foundation (Framework)

        ★     mediaqueri.es (gute Beispiele)
        ★     http://bradfrost.github.com/this-is-responsive/


        Blog: www.sitevisions.de    @sitevisions

andreas simon @sitevisions

Weitere ähnliche Inhalte

Andere mochten auch

61 e bilanz
61 e bilanz61 e bilanz
61 e bilanz
ICV_eV
 
SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...
SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...
SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...
Swiss eHealth Forum
 
Bewerbungsunterlagen nachwuchspreis 12 cib
Bewerbungsunterlagen nachwuchspreis 12 cibBewerbungsunterlagen nachwuchspreis 12 cib
Bewerbungsunterlagen nachwuchspreis 12 cib
ICV_eV
 
Presentation deutsch
Presentation deutschPresentation deutsch
Presentation deutsch
mchrotter
 
ONEM 2010: Fase N°3- Nivel 2
ONEM 2010: Fase N°3- Nivel 2ONEM 2010: Fase N°3- Nivel 2
ONEM 2010: Fase N°3- Nivel 2
aldomat07
 
Cib2013 programm
Cib2013 programmCib2013 programm
Cib2013 programm
ICV_eV
 
Ontwerp UMC Descartes Vergadercentrum - Utrecht
Ontwerp UMC Descartes Vergadercentrum - UtrechtOntwerp UMC Descartes Vergadercentrum - Utrecht
Ontwerp UMC Descartes Vergadercentrum - Utrecht
Studio Kloppenburg
 

Andere mochten auch (20)

Krisenkommunikation im Social Media-Universum
Krisenkommunikation im Social Media-UniversumKrisenkommunikation im Social Media-Universum
Krisenkommunikation im Social Media-Universum
 
1politicas de juventudexposicion conipenj
1politicas de juventudexposicion conipenj1politicas de juventudexposicion conipenj
1politicas de juventudexposicion conipenj
 
Die ideale Form von Presseaussendungen
Die ideale Form von PresseaussendungenDie ideale Form von Presseaussendungen
Die ideale Form von Presseaussendungen
 
Posible trabajo para los alumnos sobre habilidades directivas
Posible trabajo para los alumnos sobre habilidades directivasPosible trabajo para los alumnos sobre habilidades directivas
Posible trabajo para los alumnos sobre habilidades directivas
 
61 e bilanz
61 e bilanz61 e bilanz
61 e bilanz
 
SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...
SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...
SeHF 2015 | Mit einem Bein im Gefängnis? Gravierende Folgen bei Datenschutzve...
 
Windows 8 Produkthandbuch für Unternehmen
Windows 8 Produkthandbuch für UnternehmenWindows 8 Produkthandbuch für Unternehmen
Windows 8 Produkthandbuch für Unternehmen
 
Bewerbungsunterlagen nachwuchspreis 12 cib
Bewerbungsunterlagen nachwuchspreis 12 cibBewerbungsunterlagen nachwuchspreis 12 cib
Bewerbungsunterlagen nachwuchspreis 12 cib
 
Connected "Durchschnitt"
Connected "Durchschnitt"Connected "Durchschnitt"
Connected "Durchschnitt"
 
Mit OpenStack zur eigenen Cloud (LinuxWochen Wien, 2012)
Mit OpenStack zur eigenen Cloud (LinuxWochen Wien, 2012)Mit OpenStack zur eigenen Cloud (LinuxWochen Wien, 2012)
Mit OpenStack zur eigenen Cloud (LinuxWochen Wien, 2012)
 
LVM Vertragsmanagement für Office365 und SharePoint
LVM Vertragsmanagement für Office365 und SharePointLVM Vertragsmanagement für Office365 und SharePoint
LVM Vertragsmanagement für Office365 und SharePoint
 
Presentation deutsch
Presentation deutschPresentation deutsch
Presentation deutsch
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Der Geschmack der Marke - Wilfried Leven
Der Geschmack der Marke - Wilfried LevenDer Geschmack der Marke - Wilfried Leven
Der Geschmack der Marke - Wilfried Leven
 
Sistema digestiu
Sistema digestiuSistema digestiu
Sistema digestiu
 
ONEM 2010: Fase N°3- Nivel 2
ONEM 2010: Fase N°3- Nivel 2ONEM 2010: Fase N°3- Nivel 2
ONEM 2010: Fase N°3- Nivel 2
 
Whitebox2
Whitebox2Whitebox2
Whitebox2
 
trabajo de moodle
  trabajo de moodle  trabajo de moodle
trabajo de moodle
 
Cib2013 programm
Cib2013 programmCib2013 programm
Cib2013 programm
 
Ontwerp UMC Descartes Vergadercentrum - Utrecht
Ontwerp UMC Descartes Vergadercentrum - UtrechtOntwerp UMC Descartes Vergadercentrum - Utrecht
Ontwerp UMC Descartes Vergadercentrum - Utrecht
 

Ähnlich wie Responsive Webdesign - Barcamp Hamburg 2012

Ähnlich wie Responsive Webdesign - Barcamp Hamburg 2012 (6)

Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Mobile Apps als Web Developer? Ja, mit Ionic!
Mobile Apps als Web Developer? Ja, mit Ionic!Mobile Apps als Web Developer? Ja, mit Ionic!
Mobile Apps als Web Developer? Ja, mit Ionic!
 
Von „less Server“ bis „Serverless“: Wie viel Cloud soll es sein?
Von „less Server“ bis „Serverless“: Wie viel Cloud soll es sein?Von „less Server“ bis „Serverless“: Wie viel Cloud soll es sein?
Von „less Server“ bis „Serverless“: Wie viel Cloud soll es sein?
 

Responsive Webdesign - Barcamp Hamburg 2012

  • 1. RESPONSIVE WEBDESIGN von Andreas Simon
  • 2. ÜBER MICH ★ Webentwicklung (TYPO3, Mobile Web, PHP/MySQL....) Konzeption und Projektleitung ★ G16 Media, Kiel (www.g16.net) ★ Freelancer sitevisions.de ★ @sitevisions, Google+ andreas simon @sitevisions
  • 3. WARUM RESPONSIVE WEBDESIGN ★ ca. 2014/2015 wird es mehr Traffic über mobile Geräte geben als über Desktop ★ immer mehr (mobile) Endgeräte ★ versch. Größen, versch. Auflösungen etc. andreas simon @sitevisions
  • 6. VERSCHIEDENE GERÄTE ★ Smartphones in versch. Größen ★ Tablets in versch. Größen ★ PCs, Laptops, Subnotebooks ★ Fernseher andreas simon @sitevisions
  • 7. DIE PROBLEME ★ große, statische Seiten auf versch. Screengrößen ★ Zoomen, links-rechts, oben-unten ★ Orientierung, wo bin ich hier?! ★ Touchgesten > Links treffen ★ Schriftgrößen; Bildgrößen; Buttons (zu klein) andreas simon @sitevisions
  • 8. WARUM RESPONSIVE WEBDESIGN? ★ bisheriges Webdesign: statisch ★ feste Größe, nicht skalierbar ★ px-Werte (auch bei Schriften) andreas simon @sitevisions
  • 9. DARSTELLUNG STATISCHER SEITEN andreas simon @sitevisions
  • 10. FOLGE / ZIEL ★ Website an die jeweiligen Situation (Endgeräte) anpassen ★ responsive = reagieren >> Das Ende der 960px Ein Beispiel....
  • 11. BEISPIELE hier viell. die eigene BVeispielseite andreas simon @sitevisions
  • 12. RESPONSIVE WEBDESIGN ★ fluide Layouts ★ Anpassung der Breite an Screen ★ weitere Anpassungsmöglichkeiten durch mediaqueries ★ Veränderung der Darstellung ★ lineare Anordnung von Inhalten ★ Reduzierung von Inhalten (u.a. Formulare)
  • 13. RESPONSIVE WEBDESIGN ★ Anpassung der Navigation ★ Anpassung von Button ★ Anpassung von Bildgrößen ★ etc. andreas simon @sitevisions
  • 14. MEDIAQUERIES ★ Anpassung des Layouts abh. von Screengröße @media screen and (max-width: 700px) { div#col2 {width:62,5%;} (...) } ★ Mediaqueries abhängig von Content setzen, nicht von Devicegrößen (iPhone, iPad) ★ Wir erstellen Websites nicht für bestimmte Devices, sondern wollen EINE Website für alle Geräte! andreas simon @sitevisions
  • 15. TECHNIK ★ fluides Layout: % statt px ★ em statt px für Schriften! ★ Typische Probleme: andreas simon @sitevisions
  • 16. SCHRIFTEN ★ Schriftgrößen auch über MediaQueries anpassen! ★ nicht zu klein (gute Lesbarkeit auf Smartphone) ★ nicht zu groß (Designtrend „große Schriften“): andreas simon @sitevisions
  • 17. FITTEXT ★ stufenloses Skalieren von Text
  • 19. LAYOUT ★ 3 Spalten > 2 Spalten > 1 Spalte . u andreas simon @sitevisions
  • 20. LAYOUT von Heiliger Dreispaltikgeit ➡ zu linearem Aufbau andreas simon @sitevisions
  • 22. IMAGES ★ einfaches Skalieren: img { max-width:100% } Orientierung am Elternelement andreas simon @sitevisions
  • 23. IMAGES - PROBLEME ★ Ladezeiten: es werden Bilder für Desktop- Version geladen ★ Lösungsansätze ★ Adaptive Images (PHP) ★ picture vs. srcset ★ Achtung: Retina (Auflösung) andreas simon @sitevisions
  • 24. NAVIGATION ★ Content ist King ★ Navi ist Queen ★ Platzproblem auf kleinen Screens! Lösungsansätze... andreas simon @sitevisions
  • 25. Ü K WEITERE PROBLEMSTELLEN ★ Tabellen, Akkordeon, hover ,Lightboxen ★ Platzprobleme - wohin mit dem Content?! ★ Neuer Ansatz: Mobile First andreas simon @sitevisions
  • 26. Ü K MOBILE FIRST ★ Content is King! ★ kleine Geräte = wenig(er) Platz Mobile First: ★ bei Konzeption und Design mit kleinen Screens starten andreas simon @sitevisions
  • 27. Ü K MOBILE FIRST ★ Wichtiger Content zuerst! ★ ..zwingt uns, uns auf das Wesentliche zu beschränken ★ und somit mehr an den User zu denken: ★ User First andreas simon @sitevisions
  • 28. MOBILE FIRST Quelle: Brad Frost - bradfrost.com/blog/web/mobile-first-responsive-webdesign
  • 30. DESIGN - MOCKUPS ★ Adobe Edge Reflow! andreas simon @sitevisions
  • 31. PROGRESSIVE ENHANCEMENT ★ Mobile Bowser = techn. auf aktuellem Stand >> NUTZEN ★ aber: muss auch lauffähig sein auf Desktop- und älteren Geräten ★ Beispiele: Navigationen, Akkordeon (auch ohne Javascript!) ★ modernizr! andreas simon @sitevisions
  • 32. Ü K PROGRESSIVE ENHANCEMENT ★ Beispiel Mobile: ★ Geolocation ★ Formular-Felder > richtige Tastatur einblenden ★ href=“tel:0432112345“ ★ Touch Events! andreas simon @sitevisions
  • 33. VORTEILE RWD ★ Anpassung an verschiedenste Größen ★ Mehraufwand/Kosten, aber günstiger als Mobile Website ★ geringer Pflegeaufwand! geringe Folgekosten ★ gut für SEO > eine Domain/URL ★ !?! gleiche Inhalte ★ kein Springen zw. 2 Versionen! andreas simon @sitevisions
  • 34. NACHTEILE RWD ★ Ladezeiten (nicht optimiert) ★ reines Ausblenden von Inhalten (werden aber geladen!) ★ keine indiv. Inhalte (mobile Situation) andreas simon @sitevisions
  • 35. PROBLEME UMGEHEN ★ Inhalte über Ajax nachladen ★ RESS = Responsive WD+ ServerSide Components ★ Adaptive bzw. Responsive Images ★ IE <= 8 keine mediaqueries = respond.js ★ schön: Slider mit Touchevents (Flexslider!) andreas simon @sitevisions
  • 36. MOBILE VS. RESPONSIVE SITE Mobile Websites: ★ spezieller (mobiler) Content; ★ Reduzierung (Vor- oder Nachteil?) ★ optimierte Ladezeiten ★ Optimiertes Layout (eigenes Layout) ★ aber: doppelte Pflege von Inhalten, neue Domain, neue URLs (SEO); ★ will der User auf eine „alternative“ Website!?
  • 37. NUTZUNG VON MOBILE DEVICES ★ auf dem Weg zur Arbeit, Stadt etc. ★ informieren über Produkte im Geschäft = unterwegs (geringe Bandbreite, weniger Zeit) ★ aber: auf Toilette ( > 80% der Männer ) ★ Sofa, Bett = at home (hohe Bandbreite, viel Zeit)
  • 38. RESPONSIVE WEBDESIGN ★ Es gibt kein mobiles Web ★ Wir erstellen keine Websites für das iPhone, oder das iPad, Tablets etc. ★ Wir wollen EINE Website für alle Devices ★ = RESPONSIVE WEBSITES
  • 39. TOOLS ★ Adobe Edge Inspect ★ Foundation (Framework) ★ mediaqueri.es (gute Beispiele) ★ http://bradfrost.github.com/this-is-responsive/ Blog: www.sitevisions.de @sitevisions andreas simon @sitevisions