Praxiswissen Responsive Webdesign

Praxiswissen Responsive Webdesign

by Tim Kadlec
Released September 2013
Publisher(s): O'Reilly Verlag
ISBN: 97833955614331

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Responsive Webdesign gilt unter Webdesignern derzeit als Zauberformel, wenn es darum geht, anpassungsfähige Websites zu entwickeln, die auf allen Geräten gut aussehen. Ganz gleich, ob jemand mit einem Desktop-Rechner, Laptop, Tablet oder Smartphones auf eine Website zugreift - er bekommt immer ein für sein Device optimiertes Design zu sehen. Dieses in den USA hoch gelobte Buch richtet sich an Webdesigner und -entwickler, die Grundkenntnisse in HTML und CSS mitbringen und sich nun mit responsive Webdesign vertraut machen möchten. Behandelt werden nicht nur technische Aspekte, sondern auch die Planung und der Design-Workflow werden ausgiebig besprochen.

Table of contents

  1. Dedication
  2. Danksagungen
  3. Vorwort
    1. von Aaron Gustafson
  4. Beitragende
  5. 1. Das Web ist immer und überall
    1. Was wir falsch gemacht haben
    2. Die Geräte kommen, die Geräte kommen
      1. Bildschirmgröße
      2. Netzwerkgeschwindigkeit
      3. Unterstützung von Standards
      4. Eingabemethoden
      5. Kontext
    3. Getrennte Websites
      1. Divergenz
    4. »Responsive« werden
      1. Progressive Enhancement
    5. Wozu noch ein Buch über Responsive Design?
    6. Was wird behandelt?
    7. Für wen dieses Buch ist
    8. Codebeispiele
    9. Die Website zum Buch
  6. 2. Fluid Layouts
    1. Layoutoptionen
      1. Feste Breite
      2. Fluid Layouts
      3. Elastische Layouts
      4. Hybride Layouts
      5. Welcher Ansatz ist am ehesten responsive?
    2. Schriftgrößen
      1. Pixel
      2. Em
      3. Prozentsätze
      4. Bonusrunde: rem
      5. Welcher Ansatz ist am ehesten responsive?
      6. Konvertierung von Pixeln
    3. Grid-Layouts
      1. Vom Inhalt ausgehen
      2. Das Raster festlegen
        1. Flexible Lösung
        2. Objekte mit fester Breite in einer fluiden Welt
    4. Feste und fluide Breiten mischen
      1. Tabellenlayouts – und zwar richtig
        1. Unterstützung Für ältere Versionen Des Internet Explorer
    5. Zusammengefasst
  7. 3. Media Queries
    1. Viewports
      1. Ein Pixel ist ein Pixel, es sei denn, es ist keins
      2. Viewport-Tag und Eigenschaften
        1. Width
        2. Height
        3. User-Scalable
        4. Initial-Scale
        5. Maximum-Scale
        6. Minimum-Scale
        7. Lösung für das viewport-Problem
    2. Struktur von Media Queries
      1. Medientypen
      2. Medienausdrücke
      3. Logische Schlüsselwörter
        1. And
        2. Not
        3. Or
        4. Only
      4. Regeln
    3. Eingebettet kontra extern
    4. Reihenfolge von Media Queries
      1. Vom Desktop ausgehend
      2. Von mobilen Geräten ausgehend
    5. Die Grundfunktionalität entwickeln
    6. Breakpoints bestimmen
      1. Folgen Sie dem Inhalt
      2. Verbesserungen für große Bildschirme
      3. Flexiblere Media Queries mit em
    7. Navigation
      1. Toggle-Menü
        1. Toggle-Css
        2. Toggle-JavaScript
    8. Unterstützung für den Internet Explorer
    9. Zusammenfassung
  8. 4. Responsive Media
    1. Was ist das Problem?
      1. Performance
    2. Bilder für mobile Geräte
      1. JavaScript
      2. Gestatten, matchMedia
    3. Strategien für Responsive Images
      1. Kampf dem Browser
      2. Resignation
      3. Serverseitige Lösung
    4. Optionen für Responsive Images
      1. Sencha.io Src
      2. Adaptive Images
      3. Moment, was war noch mal die Antwort?
    5. Hintergrundbilder
      1. Da wir schon dabei sind
    6. Hochauflösende Displays
      1. SVG
    7. Andere Ressourcen mit fester Breite
      1. Video
        1. Die User Experience Verbessern
      2. Werbung
    8. Zusammengefasst
  9. 5. Planung
    1. Responsive Design ist eine Entscheidung
    2. Überlegungen
      1. Performance
      2. Kontext
      3. Content Negotiation
      4. Investierte Zeit
      5. Browserunterstützung
      6. Werbung
      7. Schlussfolgerung
    3. Achten Sie auf Ihre Analyse-Tools
      1. Verzerrte Analysen
      2. Auf welche Statistiken es ankommt
      3. Verzerrte Marktanteile
    4. Setzen Sie sich mit Ihren Inhalten auseinander
      1. Inhaltsanalyse
      2. Seitentabellen
    5. Setzen Sie Schwerpunkte bei der Optimierung
      1. Optimiert für manche, zugänglich für viele
    6. Sorgen Sie für eine geräteübergreifende User Experience
    7. Vorbereitung der Testumgebung
      1. Echte Geräte
        1. Bisheriger Traffic
        2. Regionaler Traffic und Markt
        3. Gerätespezifische Faktoren
        4. Projektspezifische Features
        5. Budget
        6. Browservielfalt
      2. Emulatoren
      3. Dienste von Drittanbietern
    8. Zusammengefasst
  10. 6. Design-Workflow
    1. Die Distanz steht nicht fest
      1. Ein interaktives Medium
      2. Zusammenarbeit
        1. KommuniKation
        2. Wiederholungen
        3. Respekt
        4. Zusammenarbeit Mit Dem Kunden
      3. In Systemen denken
    2. Mobile First
      1. Mobile Geräte nehmen explosionsartig zu
      2. Mobile Geräte zwingen zum Fokus
      3. Mobile Geräte erweitern Ihre Möglichkeiten
    3. Die Tools
      1. Wireframes
        1. Beginnen Sie mit einer Skizze
      2. Mock-ups
        1. Das Problem mit statischen mock-ups
        2. Design im Browser
        3. Unsere Gewohnheiten
        4. Unsere tools
      3. Styleguides
        1. Ihr Eigener Style Guide
    4. Zusammengefasst
  11. 7. Responsive Content
    1. Mit dem Inhalt anfangen
    2. Inhaltstypen
      1. Zielsetzung
      2. Erstellung
      3. Struktur
        1. Content Modeling
    3. Welchen Inhalt wann anzeigen?
      1. Inhalte entfernen
        1. »View Desktop« ist keine Lösung
        2. Vertrauen
      2. Inhalte verbessern
    4. Reihenfolge der Inhalte ändern
      1. Nochmals zur Struktur
        1. Hilfe wartet um die Ecke
    5. Wo wir hinwollen
      1. Codesuppe
      2. Winzige Schritte
      3. API für Inhalte
        1. Speicherschicht
        2. Übersetzungs- Oder Api-Schicht
        3. Anzeigeschicht
    6. Zusammengefasst
  12. 8. RESS
    1. User Agent-Erkennung
      1. Anatomie eines User Agent-Strings
      2. Was können Sie mit der User Agent-Erkennung anstellen?
        1. Pro user agent-Erkennung
        2. Kontra user agent-Erkennung
    2. Feature-Erkennung
      1. Modernizr
      2. Auf den Server
        1. Pro feature-Erkennung
        2. Kontra feature-Erkennung
    3. User Agent- und Feature-Erkennung kombinieren
    4. RESS: Das Beste aus zwei Welten
    5. Stürmische Zeiten
    6. WURFL installieren
      1. Konfiguration
    7. Leistungsmerkmale ermitteln
      1. Feature-Erkennung
      2. Anrufe tätigen
      3. Optimierung für Touch-Geräte
        1. Touch-freundliches JavaScript
    8. Zusammengefasst
  13. 9. Responsive User Experiences
    1. Ein System von Sensoren
    2. Netzwerk
      1. Was können wir tun?
        1. Testladen von Bildern
        2. Network Information-API
    3. Kontext
      1. Kontext klassifizieren
        1. Zusammengesetztes Bild
        2. Haltung des Benutzers
      2. Beobachten und forschen
    4. Leistungsmerkmale
      1. HTML5-Eingabetypen
      2. APIs
        1. Geolocation-API
        2. Media Capture and Streams
        3. Weitere APIs am Horizont
    5. Zusammengefasst
  14. 10. Nachwort: Blick nach vorn
  15. A. Bildnachweis
    1. Beispiel-WebSite
    2. Kapitel 1
    3. Kapitel 4
    4. Kapitel 5
    5. Kapitel 6
    6. Kapitel 9
  16. B. Über den Autor
  17. C. Über den technischen Gutachter
  18. Stichwortverzeichnis
  19. Copyright

Product information

  • Title: Praxiswissen Responsive Webdesign
  • Author(s): Tim Kadlec
  • Release date: September 2013
  • Publisher(s): O'Reilly Verlag
  • ISBN: 97833955614331