SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
Mobile First
& WordPress Themes

      © Wordpress-Logo: wordpress.prg
Kirsten Schelper
                   @kirstenschelper




www.schelperdesign.net · www.die-netzialisten.de
Lieblingsspielzeug Mobiltelefon
· 48% schalten ihr Mobiltelefon niemals aus
· 64% schlafen neben ihrem Mobiltelefon
   Quelle: Mobile Marketing Association, Umfrage 2012




© garyknight on Flickr | http://www.flickr.com/photos/garryknight/6436100219/sizes/l/in/photostream/   CC BY
MOBILE FIRST/01
Was ist das überhaupt?
MOBILE FIRST /01


Was ist Mobile First?
„Mobile First“ ist ein Teil der Responsive-Design-Technik
MOBILE FIRST /01


Was ist Mobile First?
Üblicherweise entwirft man zuerst die Desktop-Version.
Die entrümpelt man dann so lange, bis der Inhalt aufs
Smartphone passt.
MOBILE FIRST /01


Was ist Mobile First?
Mobile First dreht den Spieß um:
Man beginnt mit Coding & Design beim kleinsten Bildschirm
und arbeitet sich dann zur Desktop-Ansicht vor.
MOBILE FIRST /01


Was ist Mobile First?
Nachteil der „Desktop First“-Methode:
Es landet irgendein Informations-Rest auf dem Smartphone,
der nicht klar definiert ist.

‣ Besser
 Vorher überlegen, welches die wichtigsten Informationen
 sind, die ALLE Nutzer (Desktop und Smartphone) brauchen.
MOBILE FIRST /01


Was ist Mobile First?
• „Mobile First“ müsste eigentlich „Content First“ heißen.

• Es ist eher ein Denkansatz als eine Coding-Technik.

• Mobile First bedeutet eigentlich:
  Das Wichtigste kommt zuerst.
„Small screen sizes force you to prioritize what
really matters to your customers and business“
Luke Wroblewski, Mobile First
MOBILE FIRST/02
Mobile-First und WordPress
MOBILE FIRST /02


Mobile First und WordPress
LEICHT ZU INTEGRIEREN

• Alles spielt sich im Theme-Ordner ab

• stylesheet (style.css) enthält alle Angaben zu
  media queries usw.

• Je nach Anforderung des Projekts
  (z. B. Responsive Images) braucht es noch ergänzende
  Javascripts
MOBILE FIRST /02


Mobile First und WordPress
WICHTIG: EIN GUTES KONZEPT

Skizzen machen: Welche Inhalte erscheinen wo?


                                                1
   2         1          3
                                                2

                                                3
MOBILE FIRST /02


Mobile First und WordPress
Das CSS für die richtige Reihenfolge
         float:left


                                       1
    2          1          3
                                       2

                                       3

float:left float:right float:right
MOBILE FIRST /02


Mobile First und WordPress
• Der Haupt-Inhalt muss im HTML zuerst kommen,
  erst danach kommen die Sidebars
• So erscheint in der mobilen Ansicht der Hauptinhalt
  über den Inhalten der Sidebars
  1. <div id=“main-content“> ... </div>
  2. <div id= sidebar_1 > ... </div>
  3. <div id= sidebar_2 > ... </div>
Mobile First & WordPress:
       Eine gute Planung ist die halbe Miete


© Seattle Municipal | http://www.flickr.com/photos/24256351@N04/2713475713   CC BY
MOBILE FIRST/03
Wie baut man das?
MOBILE FIRST /03


Wie baut man das?
A. FLEXIBLES LAYOUT
• Ein „fluid grid“ ist für Mobile-First-Projekte sehr hilfreich.
  Alle Breiten werden in Prozent angegeben:
  #main-content {width: 75%}
  #sidebar {width: 25%}
• Angaben für die Höhe sind frei wählbar
  (Pixel, em oder rem )
MOBILE FIRST /03


Wie baut man das?
B. MOBILE STYLES KOMMEN ZUERST
• Ganz oben im Stylesheet stehen die Angaben für‘s
  Smartphone
• Mit Media-Queries (weiter unten) werden die Angaben für
  größere Bildschirme aufgerufen:
  @media screen and (min-width: 1024px) { ...}
  @media screen and (min-width: 1200px) { ...}
MOBILE FIRST /03


Wie baut man das?
Vorteil:
ALLE Smartphones – auch die, die Media Queries nicht lesen
können – können die Seite problemlos darstellen.
„The first media query is
no media query.“ Bryan Rieger


© garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY
MOBILE FIRST /04


Wie baut man das?
C. MIT CSS-BAUSTEINEN ARBEITEN
  Dabei unterscheiden zwischen
• Elementen, die die Struktur (das Layout) der Seite betreffen
• Elementen, die das Design (die Oberfläche) betreffen
  #sidebar = Struktur-Element
  .borderblue = Design-Element
MOBILE FIRST /04


Wie baut man das?
C. MIT CSS-BAUSTEINEN ARBEITEN
 Dadurch gewinnt man wiederverwendbare Komponenten,
 die man kombinieren kann

 mobile.css            Struktur für Smartphones
+ skin_theme.css       Design
+ grid_desktop.css     Struktur für Desktop
                       (media query)
MOBILE FIRST/04
Die Knackpunkte
MOBILE FIRST /04


Die Knackpunkte
A. DISPLAY:NONE
‣ Problem
  Im RWD und auch bei Mobile First muss man ab und zu
  HTML-Elemente per display:none ausblenden.
  Dabei werden alle Daten im Hintergrund trotzdem geladen.
  Das ist gerade bei Mobilfunk-Verbindungen nicht ideal.
‣ Lösung: Möglichst sparsam anwenden
MOBILE FIRST /04


Die Knackpunkte
B. GROSSE BILDDATEN
‣ Problem
 Das Smartphone verkleinert alle Bilder.
 Das Bild ist dann zwar nur so groß wie eine Briefmarke, aber
 die Datenmenge ist dieselbe wie beim großen Desktop-Bild.
                                 Bilder                                  Javascript   HTML/CSS




                               60%

  Daten einer durchschnittlichen Website (1227 KB) | Quelle: httparchive.org
MOBILE FIRST /04


Die Knackpunkte
B. GROSSE BILDDATEN
‣ Lösungen
• background-images per media query austauschen
  (Mobile: kleines Bild, Desktop: großes Bild)
• SVG & Icon-Fonts nutzen (für Logos und Icons)
• Responsive Images (Bilder in unterschiedlichen Auflösungen
  bereitstellen)
  » Adaptive Images (Matt Wilcox)
  » Plugin Stuart Bates „WP Responsive Images“
MOBILE FIRST /04


Die Knackpunkte
C. NAVIGATION
‣ Problem
• Das Menü passt auf kleine Bildschirme nicht drauf
  bzw. es beansprucht sehr viel Platz
• Nicht alle Dropdown-Menus funktionieren auf Touchscreens
MOBILE FIRST /04


Die Knackpunkte
C. NAVIGATION Lösungs-Beispiele
                                                Select

                        Toggle




http://bradfrostweb.com/blog/web/responsive-nav-patterns/
MOBILE FIRST /04


Die Knackpunkte
D. ÄLTERE BROWSER
‣ Problem
  IE 7 und IE8 verstehen Media Queries nicht. Sie können
  deshalb ein responsive Layout nicht darstellen.
‣ Lösungen
• Polyfills nutzen wie modernizr.js (Javascripts, die älteren
  Browser CSS3 beibringen)
• Unsere Lösung: Für IE7 und IE8 gibt es ein starres Layout
  (ohne Fluid Grid, ohne Media Queries).
Keep it Small.


© russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY
MOBILE FIRST /04


Die Knackpunkte
E. PERFORMANCE

‣ Problem
 Mobilfunkverbindungen sind langsam.

‣ Lösungen
• CSS und Javascript komprimieren
• HTML-Code schlank halten
• Minimalistisches Design: So wenig Bilder wie möglich
• Bild-Effekte wie Schatten, Verläufe mit CSS3 lösen
MOBILE FIRST/05
Zusammenfassung
MOBILE FIRST /05



• The first media query is no media query
• Konzept: Das Wichtigste zuerst („Content First“)
• Mit CSS-Bausteinen arbeiten
• Keep It Small (Bilder & Code)


• Testen, testen, testen
MOBILE FIRST /05



Die Slides zu diesem Vortrag und jede Menge Links zu
Quellen und Tools gibt‘s bei uns im Blog:

www.die-netzialisten.de
MOBILE FIRST /05




Vielen Dank!


Fragen? Fragen!

Weitere ähnliche Inhalte

Andere mochten auch

Cisco jabber presentation
Cisco jabber presentationCisco jabber presentation
Cisco jabber presentationabbyfavali
 
Projektplan streetart
Projektplan streetartProjektplan streetart
Projektplan streetartFrauke Godat
 
Tintín maría álvarez
Tintín maría álvarezTintín maría álvarez
Tintín maría álvarezpacitina
 
Treibhausgas-Emissionsprojektionen bis zum Jahr 2020
Treibhausgas-Emissionsprojektionen bis zum Jahr 2020Treibhausgas-Emissionsprojektionen bis zum Jahr 2020
Treibhausgas-Emissionsprojektionen bis zum Jahr 2020Oeko-Institut
 
„Data Sharing“ zwischen Wunsch und Wirklichkeit
„Data Sharing“ zwischen Wunsch und Wirklichkeit„Data Sharing“ zwischen Wunsch und Wirklichkeit
„Data Sharing“ zwischen Wunsch und WirklichkeitHeinz Pampel
 
Präsentation bei der Socialbar Bonn
Präsentation bei der Socialbar BonnPräsentation bei der Socialbar Bonn
Präsentation bei der Socialbar BonnTwick.it
 
Webquest. rumores en la red[1]
Webquest. rumores en la red[1]Webquest. rumores en la red[1]
Webquest. rumores en la red[1]montsetecnologia
 
Portfolio em interactive_version1
Portfolio em interactive_version1Portfolio em interactive_version1
Portfolio em interactive_version1repier77
 
Profilflyer Oeko-Institut
Profilflyer Oeko-InstitutProfilflyer Oeko-Institut
Profilflyer Oeko-InstitutOeko-Institut
 
Hagia Sofia, Isidoros
Hagia Sofia, IsidorosHagia Sofia, Isidoros
Hagia Sofia, IsidorosYPEPTH
 
Hecho en méxico, hecho en gf k contactos con su entorno- julio 2010
Hecho en méxico, hecho en gf k  contactos con su entorno- julio 2010Hecho en méxico, hecho en gf k  contactos con su entorno- julio 2010
Hecho en méxico, hecho en gf k contactos con su entorno- julio 2010Walkiria Calva
 
TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook X-PRIME GROUPE
 

Andere mochten auch (20)

Cisco jabber presentation
Cisco jabber presentationCisco jabber presentation
Cisco jabber presentation
 
Communiqué de presse Application iPhone National Citer
Communiqué de presse Application iPhone National CiterCommuniqué de presse Application iPhone National Citer
Communiqué de presse Application iPhone National Citer
 
Projektplan streetart
Projektplan streetartProjektplan streetart
Projektplan streetart
 
Presentaci+¦n diez
Presentaci+¦n diezPresentaci+¦n diez
Presentaci+¦n diez
 
Tintín maría álvarez
Tintín maría álvarezTintín maría álvarez
Tintín maría álvarez
 
Treibhausgas-Emissionsprojektionen bis zum Jahr 2020
Treibhausgas-Emissionsprojektionen bis zum Jahr 2020Treibhausgas-Emissionsprojektionen bis zum Jahr 2020
Treibhausgas-Emissionsprojektionen bis zum Jahr 2020
 
„Data Sharing“ zwischen Wunsch und Wirklichkeit
„Data Sharing“ zwischen Wunsch und Wirklichkeit„Data Sharing“ zwischen Wunsch und Wirklichkeit
„Data Sharing“ zwischen Wunsch und Wirklichkeit
 
Präsentation bei der Socialbar Bonn
Präsentation bei der Socialbar BonnPräsentation bei der Socialbar Bonn
Präsentation bei der Socialbar Bonn
 
Webquest. rumores en la red[1]
Webquest. rumores en la red[1]Webquest. rumores en la red[1]
Webquest. rumores en la red[1]
 
RDFS : une introduction
RDFS : une introductionRDFS : une introduction
RDFS : une introduction
 
Plaquette audi mut l
Plaquette audi mut lPlaquette audi mut l
Plaquette audi mut l
 
Portfolio em interactive_version1
Portfolio em interactive_version1Portfolio em interactive_version1
Portfolio em interactive_version1
 
Intradía
IntradíaIntradía
Intradía
 
427
427427
427
 
Profilflyer Oeko-Institut
Profilflyer Oeko-InstitutProfilflyer Oeko-Institut
Profilflyer Oeko-Institut
 
Evid. 1
Evid. 1Evid. 1
Evid. 1
 
Hagia Sofia, Isidoros
Hagia Sofia, IsidorosHagia Sofia, Isidoros
Hagia Sofia, Isidoros
 
Hecho en méxico, hecho en gf k contactos con su entorno- julio 2010
Hecho en méxico, hecho en gf k  contactos con su entorno- julio 2010Hecho en méxico, hecho en gf k  contactos con su entorno- julio 2010
Hecho en méxico, hecho en gf k contactos con su entorno- julio 2010
 
Clase 4 otras civilizaciones (india)
Clase 4 otras civilizaciones (india)Clase 4 otras civilizaciones (india)
Clase 4 otras civilizaciones (india)
 
TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook
 

Ähnlich wie WP Camp 2012 Mobile First & Wordpress

Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMicrofrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMark Lubkowitz
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Alexej Antropov
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haubefalconwhite
 
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
Responsive DesignResponsive Design
Responsive DesignMario Fink
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseitechrisign gmbh
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)die.agilen GmbH
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011Alexander Beck
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)Christian Heindel
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 

Ähnlich wie WP Camp 2012 Mobile First & Wordpress (20)

Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMicrofrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
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 Images
Responsive ImagesResponsive Images
Responsive Images
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 

WP Camp 2012 Mobile First & Wordpress

  • 1. Mobile First & WordPress Themes © Wordpress-Logo: wordpress.prg
  • 2. Kirsten Schelper @kirstenschelper www.schelperdesign.net · www.die-netzialisten.de
  • 3. Lieblingsspielzeug Mobiltelefon · 48% schalten ihr Mobiltelefon niemals aus · 64% schlafen neben ihrem Mobiltelefon Quelle: Mobile Marketing Association, Umfrage 2012 © garyknight on Flickr | http://www.flickr.com/photos/garryknight/6436100219/sizes/l/in/photostream/ CC BY
  • 4. MOBILE FIRST/01 Was ist das überhaupt?
  • 5. MOBILE FIRST /01 Was ist Mobile First? „Mobile First“ ist ein Teil der Responsive-Design-Technik
  • 6. MOBILE FIRST /01 Was ist Mobile First? Üblicherweise entwirft man zuerst die Desktop-Version. Die entrümpelt man dann so lange, bis der Inhalt aufs Smartphone passt.
  • 7. MOBILE FIRST /01 Was ist Mobile First? Mobile First dreht den Spieß um: Man beginnt mit Coding & Design beim kleinsten Bildschirm und arbeitet sich dann zur Desktop-Ansicht vor.
  • 8. MOBILE FIRST /01 Was ist Mobile First? Nachteil der „Desktop First“-Methode: Es landet irgendein Informations-Rest auf dem Smartphone, der nicht klar definiert ist. ‣ Besser Vorher überlegen, welches die wichtigsten Informationen sind, die ALLE Nutzer (Desktop und Smartphone) brauchen.
  • 9. MOBILE FIRST /01 Was ist Mobile First? • „Mobile First“ müsste eigentlich „Content First“ heißen. • Es ist eher ein Denkansatz als eine Coding-Technik. • Mobile First bedeutet eigentlich: Das Wichtigste kommt zuerst.
  • 10. „Small screen sizes force you to prioritize what really matters to your customers and business“ Luke Wroblewski, Mobile First
  • 12. MOBILE FIRST /02 Mobile First und WordPress LEICHT ZU INTEGRIEREN • Alles spielt sich im Theme-Ordner ab • stylesheet (style.css) enthält alle Angaben zu media queries usw. • Je nach Anforderung des Projekts (z. B. Responsive Images) braucht es noch ergänzende Javascripts
  • 13. MOBILE FIRST /02 Mobile First und WordPress WICHTIG: EIN GUTES KONZEPT Skizzen machen: Welche Inhalte erscheinen wo? 1 2 1 3 2 3
  • 14. MOBILE FIRST /02 Mobile First und WordPress Das CSS für die richtige Reihenfolge float:left 1 2 1 3 2 3 float:left float:right float:right
  • 15. MOBILE FIRST /02 Mobile First und WordPress • Der Haupt-Inhalt muss im HTML zuerst kommen, erst danach kommen die Sidebars • So erscheint in der mobilen Ansicht der Hauptinhalt über den Inhalten der Sidebars 1. <div id=“main-content“> ... </div> 2. <div id= sidebar_1 > ... </div> 3. <div id= sidebar_2 > ... </div>
  • 16. Mobile First & WordPress: Eine gute Planung ist die halbe Miete © Seattle Municipal | http://www.flickr.com/photos/24256351@N04/2713475713 CC BY
  • 18. MOBILE FIRST /03 Wie baut man das? A. FLEXIBLES LAYOUT • Ein „fluid grid“ ist für Mobile-First-Projekte sehr hilfreich. Alle Breiten werden in Prozent angegeben: #main-content {width: 75%} #sidebar {width: 25%} • Angaben für die Höhe sind frei wählbar (Pixel, em oder rem )
  • 19. MOBILE FIRST /03 Wie baut man das? B. MOBILE STYLES KOMMEN ZUERST • Ganz oben im Stylesheet stehen die Angaben für‘s Smartphone • Mit Media-Queries (weiter unten) werden die Angaben für größere Bildschirme aufgerufen: @media screen and (min-width: 1024px) { ...} @media screen and (min-width: 1200px) { ...}
  • 20. MOBILE FIRST /03 Wie baut man das? Vorteil: ALLE Smartphones – auch die, die Media Queries nicht lesen können – können die Seite problemlos darstellen.
  • 21. „The first media query is no media query.“ Bryan Rieger © garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY
  • 22. MOBILE FIRST /04 Wie baut man das? C. MIT CSS-BAUSTEINEN ARBEITEN Dabei unterscheiden zwischen • Elementen, die die Struktur (das Layout) der Seite betreffen • Elementen, die das Design (die Oberfläche) betreffen #sidebar = Struktur-Element .borderblue = Design-Element
  • 23. MOBILE FIRST /04 Wie baut man das? C. MIT CSS-BAUSTEINEN ARBEITEN Dadurch gewinnt man wiederverwendbare Komponenten, die man kombinieren kann mobile.css Struktur für Smartphones + skin_theme.css Design + grid_desktop.css Struktur für Desktop (media query)
  • 25. MOBILE FIRST /04 Die Knackpunkte A. DISPLAY:NONE ‣ Problem Im RWD und auch bei Mobile First muss man ab und zu HTML-Elemente per display:none ausblenden. Dabei werden alle Daten im Hintergrund trotzdem geladen. Das ist gerade bei Mobilfunk-Verbindungen nicht ideal. ‣ Lösung: Möglichst sparsam anwenden
  • 26. MOBILE FIRST /04 Die Knackpunkte B. GROSSE BILDDATEN ‣ Problem Das Smartphone verkleinert alle Bilder. Das Bild ist dann zwar nur so groß wie eine Briefmarke, aber die Datenmenge ist dieselbe wie beim großen Desktop-Bild. Bilder Javascript HTML/CSS 60% Daten einer durchschnittlichen Website (1227 KB) | Quelle: httparchive.org
  • 27. MOBILE FIRST /04 Die Knackpunkte B. GROSSE BILDDATEN ‣ Lösungen • background-images per media query austauschen (Mobile: kleines Bild, Desktop: großes Bild) • SVG & Icon-Fonts nutzen (für Logos und Icons) • Responsive Images (Bilder in unterschiedlichen Auflösungen bereitstellen) » Adaptive Images (Matt Wilcox) » Plugin Stuart Bates „WP Responsive Images“
  • 28. MOBILE FIRST /04 Die Knackpunkte C. NAVIGATION ‣ Problem • Das Menü passt auf kleine Bildschirme nicht drauf bzw. es beansprucht sehr viel Platz • Nicht alle Dropdown-Menus funktionieren auf Touchscreens
  • 29. MOBILE FIRST /04 Die Knackpunkte C. NAVIGATION Lösungs-Beispiele Select Toggle http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  • 30. MOBILE FIRST /04 Die Knackpunkte D. ÄLTERE BROWSER ‣ Problem IE 7 und IE8 verstehen Media Queries nicht. Sie können deshalb ein responsive Layout nicht darstellen. ‣ Lösungen • Polyfills nutzen wie modernizr.js (Javascripts, die älteren Browser CSS3 beibringen) • Unsere Lösung: Für IE7 und IE8 gibt es ein starres Layout (ohne Fluid Grid, ohne Media Queries).
  • 31. Keep it Small. © russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY
  • 32. MOBILE FIRST /04 Die Knackpunkte E. PERFORMANCE ‣ Problem Mobilfunkverbindungen sind langsam. ‣ Lösungen • CSS und Javascript komprimieren • HTML-Code schlank halten • Minimalistisches Design: So wenig Bilder wie möglich • Bild-Effekte wie Schatten, Verläufe mit CSS3 lösen
  • 34. MOBILE FIRST /05 • The first media query is no media query • Konzept: Das Wichtigste zuerst („Content First“) • Mit CSS-Bausteinen arbeiten • Keep It Small (Bilder & Code) • Testen, testen, testen
  • 35. MOBILE FIRST /05 Die Slides zu diesem Vortrag und jede Menge Links zu Quellen und Tools gibt‘s bei uns im Blog: www.die-netzialisten.de
  • 36. MOBILE FIRST /05 Vielen Dank! Fragen? Fragen!