Hands on: Responsive Development

ZIELGRUPPE

Webdesigner, Webentwickler, Webmaster

VORAUSSETZUNGEN

Erfahrungen in der Umsetzung von Webseiten, HTML- und CSS-Kenntnisse, Teilnahme am Training „Responsive Webdesign Basics“ empfohlen.

DAS ZIEL

Klippen bei der Entwicklung von responsiven Webseiten kennen, erkennen, priorisieren und umschiffen.

ZUORDNUNG

Smartphones, Tablets, Rechner, alte Browser, neue Browser. Die Probleme bei der Programmierung von Webseiten sind mit der sukzessiven Einführung von HTML 5 und CSS 3 noch komplexer geworden. Hinzu kommt, dass sich Webseiten nun an unterschiedliche Gerätetypen anpassen sollen, die verschiedene Formate und Bedienkonzepte mit sich bringen. In diesem eintägigen Workshop werden einige Stolperfallen und Besonderheiten vorgestellt und Lösungsmöglichkeiten aufgezeigt.

THEMEN

DIE GERÄTELANDSCHAFT: ENTWICKLUNGSRELEVANTE UNTERSCHIEDE
  • Unterschiede zwischen den Geräten
    • Größen und Auflösungen
    • Navigationsarten
  • Die optimale Viewport-Einstellung
  • Festlegen der Breakpoints
  • Mediaqueries sinnvoll einsetzen:
    • Width vs. devicewidth
    • Landscape vs. portrait
BESONDERHEITEN VON SMARTPHONES UND TABLETS
  • TouchScreens haben keinen a:hover-Status
  • Format detection vs. Telefonie-Links
  • Hoch- und Querformat
  • iOS Orientation-Change-Fix
VIRTUELLE TASTATUREN BEEINFLUSSEN
  • Input-Types für Formularfelder
LAYOUT-TECHNIKEN UND BROWSERKOMPATIBILITÄT
  • Flexbox und Grids einsetzen
  • Progressive Enhancement mit Modernizr und Featurequeries (und deren Grenzen)
  • Gracefull Degradation im CSS berücksichtigen
SCALABLE VECTOR GRAPHICS
  • SVGs mit CSS manipulieren
  • SVGSprites einsetzen
TYPOGRAPHIE: WEB- UND ICONFONTS RICHTIG LADEN UND EINSETZEN
  • Verwendung von Webfonts
  • WebfontIcons erzeugen und einsetzen (ein- und mehrfarbig)
  • Die Wahl der richtigen Größeneinheit und Werte
BITMAPBILDER IN VERSCHIEDENEN AUFLÖSUNGEN EINBINDEN
  • Verschiedene Ansätze um Bilder in verschiedenen Auflösungen (Stichwort hochauflösende „Retina-Displays“, Adaptive Images)
SKRIPTE FÜR SPEZIALFÄLLE AUSWÄHLEN UND EINSETZEN 
  • Skripte für Spezialfälle (z.B. fittext.js, kerning.js), Vor- und Nachteile
  • Slideshows einbinden (Besonderheiten, Anforderungen)
  • Videos über Youtube oder Vimeo in proportionaler Größe einbinden

Achtung! Frameworks und CMS werden hier nicht berücksichtigt.

Eckdaten

Keine Gesprächsbeiträge

Hierzu ist es noch ruhig, wenn Sie möchten, starten Sie jetzt ein Gespräch.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Nachoben