SlideShare ist ein Scribd-Unternehmen logo
RESPONSIVE
WEBDESIGN
   von Andreas Simon
ÜBER MICH
        ★     Webentwicklung
              (TYPO3, Mobile Web, Backend...)
              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 GERÄTE


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



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




andreas simon @sitevisions
DIE PROBLEME

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




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




    Einige Beispiele.....
BEISPIELE




andreas simon @sitevisions
FOLGE:




andreas simon @sitevisions
BEISPIELE




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




andreas simon @sitevisions
MEDIAQUERIES
CSS-Datei:

#content {
  width: 600px;
  background-color:#c3c3c3;
}
@media screen and (max-width: 700px) {
  width:62,5%;
  background-color:#000
  }
MEDIAQUERIES
★   @media screen { ... } @media print { ... }

★   @media (orientation: landscape) { ... }

★   @media (aspect-ratio: 4/3) { ... }


    Kombinieren von Werten:

★   @media screen and (max-width: 700px) {...}

★   respond.js für IE<=8
TECHNIK
        ★     umdenken in Prozente

        ★     % statt px

        ★     Anpassung CSS (ein- ausblenden; umstylen
              z.B. Button etc.)




andreas simon @sitevisions
EM UND %
        ★     % für Layouts (div)

              Einfache Rechnung

              Ausgangsgröße(px) : Kontext = %-Größe

              300px / 960px = 0,3125   ( 31,25% )




andreas simon @sitevisions
VON PIXEL ZU PROZENT




andreas simon @sitevisions
EM UND %
        ★     gleiches für Abstände etc.

        ★     margin:15px;

              15 / 960 = 0,015625 ( 1,5625% )




andreas simon @sitevisions
SCHRIFTEN
★    Schriftgröße in em! (u.a. für User)

★    Standardschriftgröße = 16px

h2 { 20px }

20 / 16 = 1.25em

h2 { 1.25em /* 20px */ }

★    ! em = relativ zum Elternelement
SCHRIFTEN
        ★     Schriftgrößen auch über MediaQueries
              anpassen!

        ★     nicht zu klein (gute Lesbarkeit auf
              Smartphone)

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




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




andreas simon @sitevisions
LAYOUT




           von Heiliger Dreispaltikgeit
            ➡    zu linearem Aufbau

andreas simon @sitevisions
TEASER




andreas simon @sitevisions
ANPASSUNGEN




andreas simon @sitevisions
LINKS & BUTTON
NAVIGATION




andreas simon @sitevisions
NAVIGATION




andreas simon @sitevisions
NAVIGATION
NAVIGATION
NAVIGATION




andreas simon @sitevisions
NAVIGATION




andreas simon @sitevisions
IMAGES




andreas simon @sitevisions
IMAGES
        ★     einfaches Skalieren:

        img { max-width:100% }

        Orientierung am Elternelement



        Problem: Ladezeiten



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

        ★     lediglich skaliert

              verschiedene Möglichkeiten:

        ★     Javascript-basierte Ansätze

              ★     <img src=“small.jpg“ data-2=“big.jpg“ />

              ★     Nachteil: Browser lädt erste Version vor

andreas simon @sitevisions
IMAGES - LADEZEITEN
        ★     Adaptive Images

              ★     nutzt PHP und JS um Größe
                    rauszufinden und zu speichern

              ★     PHP bearbeitet Bild bei Anfrage

              ★     keine Markup-Änderung

              ★     Caching der Bilder


andreas simon @sitevisions
RESPONSIVE IMAGES
       ★     WHATWG <> W3C

       <picture alt=“alttext“>
         <source src=“small.jpg“>
         <source src=“medium.jpg“ media=“min-width:500px “>
         <source src=“full.jpg“ media=“min-width:960px“ >
         <img src=“default.jpg“>
       </picture>

       Viel Code; lädt kein anderes Image vor;
       Websites, CMS etc. anzupassen

andreas simon @sitevisions
RESPONSIVE IMAGES
        ★     WHATWG <> W3C

        <img alt=“alttext“ src=“small.jpg“
        scrset=“medium.jpg 500w, full.jpg 960w“>

        Image wird trotzdem vorgeladen;
        komplizierte Schreibweise,
        ungewöhnlich, fehleranfällig, nicht intuitiv

        nutz weiterhin das img-Tag

andreas simon @sitevisions
RESPONSIVE IMAGES
        Damit noch nicht alles berücksichtigt:

        ★     verfügbare Bandbreite!

        ★     Retina-Displays




andreas simon @sitevisions
RETINA DISPLAYS
Bilder in doppelter Größe speichern und in halber
Größe auszeichnen:

<img src=“400x200.jpg“ width:200“ height=“100“>

CSS: background-image:url(400x200.jpg)
background-size:200px 100px;

riloadr.js > src=“image.jpg“ sucht „image@2xjpg“
Ladezeiten!
DESIGN-ANPASSUNGEN
★   beachten: weniger Platz (Viewport!)

★   Größen für Bilder, Schriften, Button, Links,
    Navigationen anpassen

    ★    reduzieren auf das Wesentliche
         (gilt auch für Desktop)



Responsive Webdesign in Layout und Content gut
planen!
WIREFRAMES
...DANN PHOTOSHOP


                             Inhalt entfernt




andreas simon @sitevisions
WEITER ZU BEACHTEN
        ★     Inhalte über Ajax nachladen
              ★     RESS = Responsive WD+ ServerSide
                    Components

        ★     IE <= 8 keine mediaqueries = respond.js
        ★     Probleme bei hover; Lightboxen, Meganav
        ★     schön: Slider mit Touchevents (Flexslider!)


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
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)
MOBILE FIRST
        ★     erst mobil denken (Reduzierung auf das
              Wesentliche)

        ★     Telefonnummer: ja, wichtig! Aber auch auf
              Desktop (Restaurant-Website)

        ★     Seiten nicht zukleistern > weniger ist mehr
        ★     ...auch bei Technik!
        ★     Konzentration auf das Wichtige (User ist nicht
              konzentriert > one thumb, one eyeball)

andreas simon @sitevisions
UNWICHTIG...


  Inhalt entfernt
TOOLS
        ★     Adobe Shadow
        ★     http://mattkersley.com/responsive/ (Testing)

        ★     Foundation (Framework)
        ★     mediaqueri.es (gute Beispiele)

        ★     riloadr (Respons. Images)



andreas simon @sitevisions

Weitere ähnliche Inhalte

Andere mochten auch

Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
sascha assbach
 
Eins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive DesignEins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive Design
denkwerk GmbH
 
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX DesignUxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
fwippich
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
NAWAZ KHAN
 
design thinking - ein überblick
design thinking - ein überblickdesign thinking - ein überblick
design thinking - ein überblick
gezeitenraum gbr
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Sara Cannon
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
2015 Font Trends For Presentations
2015 Font Trends For Presentations2015 Font Trends For Presentations
2015 Font Trends For Presentations
Presentation Panda
 
Maduro Encaja el golpe.
Maduro Encaja el golpe.Maduro Encaja el golpe.
Maduro Encaja el golpe.
Mario Abate Liotti Falco
 
S040215s Esto es guerra de Estado.
S040215s Esto es guerra de Estado.S040215s Esto es guerra de Estado.
S040215s Esto es guerra de Estado.
Mario Abate Liotti Falco
 
Planificacion estrategica
Planificacion estrategicaPlanificacion estrategica
Planificacion estrategica
Eric Fuentes
 
Projektmanagement LPM für Microsoft SharePoint und Office365
Projektmanagement LPM für Microsoft SharePoint und Office365Projektmanagement LPM für Microsoft SharePoint und Office365
Projektmanagement LPM für Microsoft SharePoint und Office365
Locatech IT Solutions GmbH
 
Die Integration von Voxtron Communication Center mit Microsoft Dynamics CRM
Die Integration von Voxtron Communication Center mit Microsoft Dynamics CRMDie Integration von Voxtron Communication Center mit Microsoft Dynamics CRM
Die Integration von Voxtron Communication Center mit Microsoft Dynamics CRM
Custemotion Unternehmensberatung UG (haftungsbeschränkt)
 
Wirkt Werbung CBS Köln - 04.10.2011
Wirkt Werbung CBS Köln - 04.10.2011Wirkt Werbung CBS Köln - 04.10.2011
Wirkt Werbung CBS Köln - 04.10.2011
Plus PR - Agentur für Public Relations
 
Robotica
RoboticaRobotica
Cronometría 5- Práctica
Cronometría 5- PrácticaCronometría 5- Práctica
Cronometría 5- Práctica
aldomat07
 
The way to god german
The way to god germanThe way to god german
The way to god germanWorldBibles
 
Informe tracking de coyuntura venezuela mayo 2015 pdf
Informe tracking de coyuntura venezuela mayo 2015 pdfInforme tracking de coyuntura venezuela mayo 2015 pdf
Informe tracking de coyuntura venezuela mayo 2015 pdf
Mario Abate Liotti Falco
 
La función de nutrición
La función de nutriciónLa función de nutrición
La función de nutrición
tellado
 

Andere mochten auch (20)

Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
 
Eins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive DesignEins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive Design
 
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX DesignUxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
design thinking - ein überblick
design thinking - ein überblickdesign thinking - ein überblick
design thinking - ein überblick
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
2015 Font Trends For Presentations
2015 Font Trends For Presentations2015 Font Trends For Presentations
2015 Font Trends For Presentations
 
Präsentation Workshop Angebotsentwicklung Kreativ Reisen Rheinland Pfalz
Präsentation Workshop Angebotsentwicklung Kreativ Reisen Rheinland PfalzPräsentation Workshop Angebotsentwicklung Kreativ Reisen Rheinland Pfalz
Präsentation Workshop Angebotsentwicklung Kreativ Reisen Rheinland Pfalz
 
Maduro Encaja el golpe.
Maduro Encaja el golpe.Maduro Encaja el golpe.
Maduro Encaja el golpe.
 
S040215s Esto es guerra de Estado.
S040215s Esto es guerra de Estado.S040215s Esto es guerra de Estado.
S040215s Esto es guerra de Estado.
 
Planificacion estrategica
Planificacion estrategicaPlanificacion estrategica
Planificacion estrategica
 
Projektmanagement LPM für Microsoft SharePoint und Office365
Projektmanagement LPM für Microsoft SharePoint und Office365Projektmanagement LPM für Microsoft SharePoint und Office365
Projektmanagement LPM für Microsoft SharePoint und Office365
 
Die Integration von Voxtron Communication Center mit Microsoft Dynamics CRM
Die Integration von Voxtron Communication Center mit Microsoft Dynamics CRMDie Integration von Voxtron Communication Center mit Microsoft Dynamics CRM
Die Integration von Voxtron Communication Center mit Microsoft Dynamics CRM
 
Wirkt Werbung CBS Köln - 04.10.2011
Wirkt Werbung CBS Köln - 04.10.2011Wirkt Werbung CBS Köln - 04.10.2011
Wirkt Werbung CBS Köln - 04.10.2011
 
Robotica
RoboticaRobotica
Robotica
 
Cronometría 5- Práctica
Cronometría 5- PrácticaCronometría 5- Práctica
Cronometría 5- Práctica
 
The way to god german
The way to god germanThe way to god german
The way to god german
 
Informe tracking de coyuntura venezuela mayo 2015 pdf
Informe tracking de coyuntura venezuela mayo 2015 pdfInforme tracking de coyuntura venezuela mayo 2015 pdf
Informe tracking de coyuntura venezuela mayo 2015 pdf
 
La función de nutrición
La función de nutriciónLa función de nutrición
La función de nutrición
 

Ähnlich wie Responsive Webdesign

Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
Christoph Reinartz
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Acquia
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
 
Mit Wordpress zur Conversion
Mit Wordpress zur ConversionMit Wordpress zur Conversion
Mit Wordpress zur Conversion
Adam_Sinko
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Oseon
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
KirstenSchelper
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Mario Fink
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
 
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
Michael Oeser
 
Vorteile von Managed Service Providern
Vorteile von Managed Service ProvidernVorteile von Managed Service Providern
Vorteile von Managed Service Providern
root360 GmbH
 
Cloud Architekturen - von "less Server" zu Serverless
Cloud Architekturen - von "less Server" zu ServerlessCloud Architekturen - von "less Server" zu Serverless
Cloud Architekturen - von "less Server" zu Serverless
OPEN KNOWLEDGE GmbH
 
WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional III
Sebastian Blum
 
Serverless: The Missing Manual
Serverless: The Missing ManualServerless: The Missing Manual
Serverless: The Missing Manual
OPEN KNOWLEDGE GmbH
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
holgerrueprich
 
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?
OPEN KNOWLEDGE GmbH
 
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
We4IT Group
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
André Scharf
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
André Goldmann
 
Presentation Papers Web 2008
Presentation Papers Web 2008Presentation Papers Web 2008
Presentation Papers Web 2008
kaeau
 

Ähnlich wie Responsive Webdesign (20)

Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
Mit Wordpress zur Conversion
Mit Wordpress zur ConversionMit Wordpress zur Conversion
Mit Wordpress zur Conversion
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
 
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
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
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
 
Vorteile von Managed Service Providern
Vorteile von Managed Service ProvidernVorteile von Managed Service Providern
Vorteile von Managed Service Providern
 
Cloud Architekturen - von "less Server" zu Serverless
Cloud Architekturen - von "less Server" zu ServerlessCloud Architekturen - von "less Server" zu Serverless
Cloud Architekturen - von "less Server" zu Serverless
 
WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional III
 
Serverless: The Missing Manual
Serverless: The Missing ManualServerless: The Missing Manual
Serverless: The Missing Manual
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
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?
 
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
 
Presentation Papers Web 2008
Presentation Papers Web 2008Presentation Papers Web 2008
Presentation Papers Web 2008
 

Responsive Webdesign

  • 1. RESPONSIVE WEBDESIGN von Andreas Simon
  • 2. ÜBER MICH ★ Webentwicklung (TYPO3, Mobile Web, Backend...) 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
  • 4. VERSCHIEDENE GERÄTE ★ Smartphones in versch. Größen ★ Tablets in versch. Größen ★ PCs, Laptops, Subnotebooks ★ Fernseher andreas simon @sitevisions
  • 5. WARUM RESPONSIVE WEBDESIGN? ★ bisheriges Webdesign: statisch ★ feste Größe, nicht skalierbar ★ px-Werte (auch bei Schriften) andreas simon @sitevisions
  • 6. DIE PROBLEME ★ große Seiten auf kleinen Screens ★ Zoomen, links-rechts, oben-unten ★ Orientierung, wo bin ich hier?! ★ Touchgesten > Links treffen ★ Schriftgrößen; Bildgrößen; Buttons (zu klein) andreas simon @sitevisions
  • 7. DARSTELLUNG STATISCHER SEITEN andreas simon @sitevisions
  • 8. FOLGE / ZIEL ★ Website an die jeweiligen Situation (Endgeräte) anpassen ★ responsive = reagieren >> Das Ende der 960px Einige Beispiele.....
  • 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 andreas simon @sitevisions
  • 14. MEDIAQUERIES CSS-Datei: #content { width: 600px; background-color:#c3c3c3; } @media screen and (max-width: 700px) { width:62,5%; background-color:#000 }
  • 15. MEDIAQUERIES ★ @media screen { ... } @media print { ... } ★ @media (orientation: landscape) { ... } ★ @media (aspect-ratio: 4/3) { ... } Kombinieren von Werten: ★ @media screen and (max-width: 700px) {...} ★ respond.js für IE<=8
  • 16. TECHNIK ★ umdenken in Prozente ★ % statt px ★ Anpassung CSS (ein- ausblenden; umstylen z.B. Button etc.) andreas simon @sitevisions
  • 17. EM UND % ★ % für Layouts (div) Einfache Rechnung Ausgangsgröße(px) : Kontext = %-Größe 300px / 960px = 0,3125 ( 31,25% ) andreas simon @sitevisions
  • 18. VON PIXEL ZU PROZENT andreas simon @sitevisions
  • 19. EM UND % ★ gleiches für Abstände etc. ★ margin:15px; 15 / 960 = 0,015625 ( 1,5625% ) andreas simon @sitevisions
  • 20. SCHRIFTEN ★ Schriftgröße in em! (u.a. für User) ★ Standardschriftgröße = 16px h2 { 20px } 20 / 16 = 1.25em h2 { 1.25em /* 20px */ } ★ ! em = relativ zum Elternelement
  • 21. SCHRIFTEN ★ Schriftgrößen auch über MediaQueries anpassen! ★ nicht zu klein (gute Lesbarkeit auf Smartphone) ★ nicht zu groß (Designtrend „große Schriften“): andreas simon @sitevisions
  • 23. FITTEXT ★ stufenloses Skalieren von Text
  • 24. LAYOUT ★ 3 Spalten > 2 Spalten > 1 Spalte andreas simon @sitevisions
  • 25. LAYOUT von Heiliger Dreispaltikgeit ➡ zu linearem Aufbau andreas simon @sitevisions
  • 36. IMAGES ★ einfaches Skalieren: img { max-width:100% } Orientierung am Elternelement Problem: Ladezeiten andreas simon @sitevisions
  • 37. IMAGES - LADEZEITEN ★ es werden Bilder für Desktop-Version geladen ★ lediglich skaliert verschiedene Möglichkeiten: ★ Javascript-basierte Ansätze ★ <img src=“small.jpg“ data-2=“big.jpg“ /> ★ Nachteil: Browser lädt erste Version vor andreas simon @sitevisions
  • 38. IMAGES - LADEZEITEN ★ Adaptive Images ★ nutzt PHP und JS um Größe rauszufinden und zu speichern ★ PHP bearbeitet Bild bei Anfrage ★ keine Markup-Änderung ★ Caching der Bilder andreas simon @sitevisions
  • 39. RESPONSIVE IMAGES ★ WHATWG <> W3C <picture alt=“alttext“> <source src=“small.jpg“> <source src=“medium.jpg“ media=“min-width:500px “> <source src=“full.jpg“ media=“min-width:960px“ > <img src=“default.jpg“> </picture> Viel Code; lädt kein anderes Image vor; Websites, CMS etc. anzupassen andreas simon @sitevisions
  • 40. RESPONSIVE IMAGES ★ WHATWG <> W3C <img alt=“alttext“ src=“small.jpg“ scrset=“medium.jpg 500w, full.jpg 960w“> Image wird trotzdem vorgeladen; komplizierte Schreibweise, ungewöhnlich, fehleranfällig, nicht intuitiv nutz weiterhin das img-Tag andreas simon @sitevisions
  • 41. RESPONSIVE IMAGES Damit noch nicht alles berücksichtigt: ★ verfügbare Bandbreite! ★ Retina-Displays andreas simon @sitevisions
  • 42. RETINA DISPLAYS Bilder in doppelter Größe speichern und in halber Größe auszeichnen: <img src=“400x200.jpg“ width:200“ height=“100“> CSS: background-image:url(400x200.jpg) background-size:200px 100px; riloadr.js > src=“image.jpg“ sucht „image@2xjpg“ Ladezeiten!
  • 43. DESIGN-ANPASSUNGEN ★ beachten: weniger Platz (Viewport!) ★ Größen für Bilder, Schriften, Button, Links, Navigationen anpassen ★ reduzieren auf das Wesentliche (gilt auch für Desktop) Responsive Webdesign in Layout und Content gut planen!
  • 45. ...DANN PHOTOSHOP Inhalt entfernt andreas simon @sitevisions
  • 46. WEITER ZU BEACHTEN ★ Inhalte über Ajax nachladen ★ RESS = Responsive WD+ ServerSide Components ★ IE <= 8 keine mediaqueries = respond.js ★ Probleme bei hover; Lightboxen, Meganav ★ schön: Slider mit Touchevents (Flexslider!) andreas simon @sitevisions
  • 47. 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
  • 48. NACHTEILE RWD ★ Ladezeiten (nicht optimiert) ★ reines Ausblenden von Inhalten (werden aber geladen!) ★ keine indiv. Inhalte (mobile Situation) andreas simon @sitevisions
  • 49. 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!?
  • 50. 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)
  • 51. MOBILE FIRST ★ erst mobil denken (Reduzierung auf das Wesentliche) ★ Telefonnummer: ja, wichtig! Aber auch auf Desktop (Restaurant-Website) ★ Seiten nicht zukleistern > weniger ist mehr ★ ...auch bei Technik! ★ Konzentration auf das Wichtige (User ist nicht konzentriert > one thumb, one eyeball) andreas simon @sitevisions
  • 53. TOOLS ★ Adobe Shadow ★ http://mattkersley.com/responsive/ (Testing) ★ Foundation (Framework) ★ mediaqueri.es (gute Beispiele) ★ riloadr (Respons. Images) andreas simon @sitevisions