Responsive Webdesign Schulung

Internetseiten werden heute auf einer Vielzahl von Endgeräten betrachtet, deren Größe und Auflösung sehr stark variieren. Von Desktop-Computern über Tablet-PCs, bis hin zu den Smartphones (iPhone, Android) sollte eine moderne Website gut darstellbar und anwenderfreundlich entwickelt werden.
Die Entwicklung eigenständiger und jeweils zum Endgerät optimierter Webseiten ist zeitaufwändig und zu kostenintensiv. Oftmals sogar unmöglich! Daher sollten Internetseiten heutzutage im "Responsive Design" Verfahren optimal geplant und umgesetzt werden. Dabei werden konzeptionelle Layouts entwickelt, die sich selbstständig an das jeweilige Endgerät anpassen. Mit dieser Technik wird sichergestellt, dass jeder Besucher eine optimale Darstellung Ihrer Internetseiten erhält.

Empfohlene Voraussetzungen:
sicheres Arbeiten unter Windows 7 oder macOS, DTP-Grundlagenkenntnisse und Internet Basis-Knowhow

Ziel der Schulung:
Sie lernen anhand von Praxisbeispielen die theoretischen Grundlagen des Responsive Designs kennen, um zukünftig moderne HTML5/CSS3 basierende Internetseiten zu gestalten. Dazu gehören u.a. die Layouterstellung mit flüssigen Rastern, die optimale Planung Ihrer Website-Navigation für unterschiedliche Endgeräte und Bildschirmgrößen, sowie die Einbindung flexibler Bilder.

Zielgruppe:
Grafiker, WebDesigner

Dauer:
2 Tage à 8 Unterrichtsstunden (jeweils von 9:30 Uhr bis ca. 16:30 Uhr). Eine Unterrichtsstunde entspricht 45 Minuten.

Hinweis: Die Buchung eines 1-Tageskurses – ohne Workshop – ist möglich.

Adobe Certified Expert Photoshop

Schulungsinhalte:

Schulungstag 1: theoretische Grundlagen

  • Grundlagen Responsive Webdesign
    • Adaptive Webdesign
    • Responsive Webdesign
    • Warum Responsive Webdesign?
    • So sollte man es lieber nicht machen ...
    • Rückbesinnung auf Flexibilität
    • Konzeptionelle Ansätze
    • Bestandteile von Responsive Webdesign
    • Raster mit flexiblen Maßeinheiten
    • Relative Einheiten für Schriftgrößen
  • Reaktionsfähige Gridsysteme im Überblick
    • Vorteile eines Rasters
    • Gridsetapp
    • Gridpak
  • Mediaqueries
    • Geräteeigenschaften abfragen
    • Mediaqueries und JavaScript
    • Wahl der richtigen Maßeinheit
    • Mediaqueries einbinden
    • Mediaqueries kombinieren
    • Mediaqueries verschachteln
    • Viewport-Tag einbinden
    • Gängige Bildschirmauflösungen
    • Vertikale Mediaqueries
    • Mediaqueries am Design orientieren
  • Konzeption, Design & Entwicklung
    • Progressive Enhancement (Mobile First)
    • Graceful Degradation
    • Mobile First = Content First
    • Mobile First: Einsatz und Gefahren
    • Geräteübergreifendes Design
    • Layoutphasen
    • Styletiles
    • Designsystem
    • Zusammenarbeit Design & Entwicklung
  • Layouttypen
    • Überwiegend flüssiges Layout
    • Spalten verschieben
    • Layout umschalten
    • Off Canvas: außerhalb des Screens
  • Möglichkeiten der Inhaltsanpassung
    • Inhalte weglassen
    • Inhalte ausblenden
    • Inhalte nach Klick anzeigen
    • Inhalte neu anordnen
    • HTML neu anordnen: AppendAround
    • Zukunftsmusik: Flex Layout mit CSS
    • Einfacher Zweispalter
    • Verschachtelter Zweispalter
    • Einfacher Dreispalter
    • Dreispalter mit Zwischenschritt
    • Mehrere Zwischenschritte
    • Visuelle Hierarchie wahren
  • Mobile Navigationskonzepte: eine Navigationsebene
    • Navigation im mobilen Kontext
    • Kopf-Navigation
    • Fußanker-Navigation
    • Auswahlmenü
    • Aufklappmenü
    • Aufklappmenü-Varianten
    • Schiebenavigation (Off-Canvas-Menü)
    • Teilweises Ausblenden
    • Icon-basierte Navigation
  • Mobile Navigationskonzepte: mehrere Navigationsebenen
    • Mehrfaches Aufklappmenü
    • Rechts-nach-links Navigation
    • Unternavigation im Inhalt
    • Karussell-Navigation
    • Komplexe Off-Canvas-Navigation
  • Anpassungsfähige Bilder
    • Bilder flexibel einbauen
    • Probleme
    • Bilder für hochauflösende Displays
    • Picturefill/picture-Tag
    • Hintergrundbilder verwenden
    • CSS Eigenschaft: background-size
    • Seitenverhältnis flexibler Elemente steuern
    • Sprite-Grafiken
    • Iconfonts
    • SVG Vektorgrafiken
    • Flex Slider 2
    • Favoriten-Icons
    • Touch-Icons
  • Inhalte reaktionsfähig aufbereiten
    • Flexible iFrame Videos
    • Flexible ImageMaps
    • Reaktionfähige Tabellen
    • Infografiken und Schaubilder
  • Reaktionsfähige Webtypografie
    • Webfonts
    • em/rem/vw als Maßeinheit verwenden
    • Headlines skalieren
    • Schriftarten/-größen testen
    • Lesbarkeit optimieren
  • Performance-Optimierung
    • Langsame Seiten verlieren Besucher
    • Dateien zusammenführen
    • JavaScript & Stylesheets optimieren
    • Bilder optimieren
    • Gestalten mit CSS 3
    • GZIP: komprimierte Übertragung
    • Caching
    • Lazy Loading
  • Internet-Trends
    • Bilder im Fokus
    • Animierte Inhalte
    • Single-Page-Layouts
    • Bildschirmfüllende Hintergrundbilder

Schulungstag 2: Workshop

  • Nützliche Funktionen für die Erstellung responsiver Webseiten in Adobe PhotoShop
    • Bilddateien aus PhotoShop-Ebenen automatisch generieren lassen
    • Regeln für die korrekte Ebenenbenennung
    • Mehrere Bilddateien aus einer Ebene erzeugen lassen
    • Bilddateien in unterschiedlichen Größen erzeugen lassen
    • CSS Stile extrahieren
    • Hilfslinien-Raster erzeugen
    • NEU in CC 2015: Zeichenflächen
    • Erstellen von Zeichenflächen
    • Arbeiten mit Zeichenflächen
    • NEU in CC 2015: Gerätevorschau
    • Wozu dient die App Preview CC?
    • Verbindung von Preview CC mit PhotoShop
    • Vorschauen auf iOS Geräte übertragen
    • NEU in CC 2015: Elemente exportieren
    • Zeichenflächen exportieren
    • Ebenen und Ebenengruppen exportieren
    • Schnell-Export von Elementen
    • Arbeitsfläche und Bildgröße beim Export anpassen
    • Export-Voreinstellungen
  • Nützliche Funktionen für die Erstellung responsiver Webseiten in Adobe Illustrator
    • SVG-Grafiken exportieren
    • Schnellexport vieler Grafiken in mehreren Größen und Dateiformaten
    • CSS Stile extrahieren
  • Einstieg in das Responsive Webdesign mit Adobe Muse
    • Hinzufügen eines Tablet-Layouts
    • Hinzufügen eines Handy-Layouts
    • Texte in mehreren Layouts synchronisieren
    • Erstellen einer Website mit variabler Breite
    • Breakpoints hinzufügen
    • Ein- oder Ausblenden von Objekten
    • Verankern von Objekten
    • Responsives Verhalten von Objekten
    • Kopieren der Größe und Position von Objekten
    • Formatieren von Text in responsiven Layouts
    • Textformatierung kopieren über Haltepunkten
  • Kurzüberblick über das Bootstrap-Framework
    • Was ist Bootstrap 3.0?
    • Vorteile eines Frameworks
    • Nachteile eines Frameworks
    • Bootstrap installieren

Preise & Buchung bei

WildKolleg, die Schule für Kommunikation und Medientechnologie, ist die erste Adresse für Einsteiger, Anfänger und Fortgeschrittene, die strategisches Wissen und Programm-Fertigkeiten erlernen, festigen oder erweitern möchten. Offene Schulungen, Einzel- und Firmenkurs in Nürnberg und Inhouse bei Ihnen vor Ort.