Responsive Webdesign mit Bootstrap

Erstellung von flexiblen Webseiten für alle Geräte mit responsive Webdesign und das Arbeiten mit dem Framework Boostrap. Die Teilnehmer erhalten weiterhin eine Einführung in Less.

Inhalte des Seminars

Die Web-Welt im Wandel

• Moderne Webdesign und Gestaltung
• Gestaltung einer Webseite mit Tabellen
• Gestaltung einer Webseite mit DIVs und CSS-Layouts
• 960 Pixel-Layout (fest/flexibel - 960.gs/designinfluences.com/fluid960gs/)
• iPhone bis Full-HD
• Gestaltung einer Webseite im Grid-Layout und Media-Queries
• Aktueller Stand: HTML5/CSS3 /JavaScript-Frameworks

Layout-Typen

• Fixed Layout
• Fluid Layout
• Elastic Layout
• Responsive Layout
• Adaptive Layout
• Grid/Blöcke

Techniken für responsive Webdesign

• Ordnung schaffen mit dem Grid-Layout
• Prozentbasiert
• Media Queries
• Flexible Bilder

Tools

• Webseiten-Auflösung verändern
• Firefox Bildschirmgrößen testen
• Firebug/Chrome-Inspektor: Element durchsuchen, CSS-Kontrolle
• Angepasste Layouts anzeigen

Media Queries

• Was sind Media Queries?
• Ursprünge mit Screen/Print
• Viewport
• Min-/Max-width, Orientation
• Browser-Unterstützung, Conditional Comments
• Beispiele: Container-Positionen, Menüleisten

Bootstrap Grundlagen

• Quellen
• Lizenz
• Struktur/Browser
• Bootstrap installieren
• Bootstrap-Datei

Bootstrap Grid Raster

• Aufbau des Rasters
• Container, Reihen, Spalten
• Umbrüche, Geräteklassen
• Struktur, Leerblöcke
• CSS-Namen

Typografie und Komponenten

• Überschriften
• Listen
• Tabellen
• Formulare
• Bilder
• Glyphicons
• Button, Button-Dropdown
• Navbar
• Breadcrumb
• Accordion
• Slider

Bootstrap Extended

• Barrierefreiheit
• Templates
• Less/Sass
• Ausblick auf Bootstrap 4