Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015

Transkript

1 Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015

2 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap, Foundation & co. 3. Demo Bootstrap & co. 4. Abschlussdiskussion Fragen & Antworten Seite 2

3 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing Seite 3

4 Definition Responsive Webdesign Das ResponsiveWebdesign passt sich flexibel der Größe des Browserfensters an. Responsive bedeutet soviel wie reagierend. Der Website im Responsive Webdesign liegt ein flüssiges Raster zugrunde. Die enthaltenen Bilder, Text und Videos sind größenvariabel. Mittels Media Queries werden detailliert die Bedingungen des jeweiligen Ausgabemediums abgefragt, um letztlich die Webseite auf jedem Gerät optimal anzuzeigen. Der Begriff ResponsiveWebdesign geht auf den Bostoner Webdesigner und -entwickler Ethan Marcotte zurück, der 2010 einen Artikel zum Thema im Magazin A List Apart veröffentlicht hat. Seite 4

5 Einführung Warum Responsive Webdesign? Viele unterschiedliche Endgeräte, Bildschirmgrößen und Auflösungen wollen bedient werden: z.b. z.b. 2560x *750 z.b * * 1600 z.b * * * * 1050 Smartphone Tablet Desktop Seite 5

6 Einführung ein Beispiel Seite 6

7 Einführung Media Queries(1) Eine Stärke von CSS liegt darin, dass die Darstellung eines Dokuments für verschiedene Ausgabemedien festgelegt werden kann. Die Zuordnung eines Stylesheets zu einem Medium erfolgt mit Hilfe von Medienabfragen (Media Types / Media Queries) Media Types vs. Media Queries: Bei Media Queries handelt es sich in CSS3 um eine Weiterentwicklung der unter CSS2 bekannten Media Types. Browserunterstützung: Seite 7

8 Einführung Media Queries(2) Allgemeine Syntax für die Benutzung von Media Queries in HTML: <link rel="stylesheet" media="mediatype and not only (media feature)" href="style.css"> Allgemeine Syntax für die Benutzung von Media Queries in not only mediatype and (media feature) { /* CSS-Code; */ } Seite 8

9 Einführung Media Queries(3) Übersicht über die wichtigsten Mediatypes und einiger Media Features Mediatypes Erläuterung Media Features Erläuterung all Für alle Medientypen min-device-height Minimale Höhe des Endgeräts screen Für Desktop, Smartphone und Tablet max-width Maximale Anzeigebreite (z.b. Fenster) print Für Drucker orientation horizontal / vertikal speech Für Screenreader color Bits je Farbe resolution Auflösung in DPI Seite 9

10 Einführung Media Queries(4) Beispiele für die Verwendung von Media Queries im HTML: <link rel="stylesheet" href="all.css" media="all"> für alle Medientypen <link rel="stylesheet" href="bildschirm.css" media="screen"> Nur für Desktops, Smartphones und Tablets <link rel="stylesheet" href="drucker.css" media="print"> Nur für Drucker <link rel="stylesheet" href="sprache.css" media="speech"> Nur für Sprachausgabe <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> Für Desktops, Smartphones und Tablets mit einer maximalen Fensterbreite von 600px <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> Für Desktops, Smartphones und Tablets aber einer minimalen Fensterbreite von 600px Seite 10

11 Einführung Media Queries(5) Beispiele für die Verwendung von Media Queries im not speech { body { background: yellow; } } Für alle Medientypen außer die print { body { background: pink; } } Nur für screen and (min-width: 600px) and (max-width: 700px) {body { background: red; }} Für Desktops, Smartphones und Tablets UND einer minimalen Fensterbreite von 600px UND einer maximalen Fensterbreite von screen and (max-width: 600px), (min-width: 800px) {body { background: green; }} Für Desktops, Smartphones und Tablets UND einer maximalen Fensterbreite von 600px ODER einer minimalen Fensterbreite von 800px Seite 11

12 Einführung Fazit zu Media Queries Media Queries können sowohl imhtml verwendet werden um unterschiedliche Stylesheets anzuziehen oder innerhalb des Stylesheets um unterschiedliche Formatierungen zu definieren. Empfehlung: Wenn die Bandbreite hoch ist (z.b. Netz-intern): Verwendung von mehreren Stylesheets und Einbindung dieser mittels Media Queries im HTML Grund: Übersichtlichkeit und Strukturierung einfacher Wenn die Bandbreite niedrig oder offen ist (z.b. Homepage): Verwendung eines (/ weniger) Stylesheets und Formatierung über Media Queries im CSS Grund: Geschwindigkeit bei niedriger Bandbreite besser Seite 12

13 Einführung CSS Preprocessing Programmierer gelangen schnell an die Grenzen voncss, da es als reine Gestaltungssprache u.a. keine Variablen unterstützt und selbst gut strukturierte Stylesheets nach mehreren hundert Zeilen schnell unübersichtlich werden. Eine Lösung kann CSS Preprocessing sein. SASS (SyntacticallyAwesomeStylesheets) und LESS erweitern CSS deshalb um ein paar nützliche Eigenschaften. Variablen Mixins Verschachtelungen Seite 13

14 Agenda 2. Frameworks Bootstrap, Foundation & co. Seite 14

15 Frameworks Überblick (1) Seite 15

16 Frameworks Überblick (2) Erscheinung: 2011 Von: Twitter Lizenz: MIT Technik: CSS (LESS / SASS) JavaScript Erscheinung: 2013 Von: Digital Surgeons? Lizenz: MIT Technik: CSS (SASS) JavaScript Erscheinung: 2011 Von: ZURB Lizenz: MIT Technik: CSS (SASS) JavaScript Seite 16

17 Agenda 3. Demo Bootstrap & co. Seite 17

18 Demo Bootstrap & co. Seite 18

19 Fazit Wir haben gesehen es gibt eine Vielzahl an Endgeräten, aber auch jede Menge Möglichkeiten um diese ideal zu bedienen es gibt eine noch viel größere Anzahl an unterstützenden Frameworks Wichtig: Geschmäcker und Anwendungsfälle sind verschieden bei der Entscheidung ob und wenn ja welches Framework eingesetzt werden soll, ist sowohl die eigene Meinung als auch eine detaillierte Analyse des Anwendungsfalles notwendig

20 Agenda 4. Abschlussdiskussion Fragen & Antworten Seite 20

21 Abschlussdiskussion Fragen und Antworten Seite 21

22 Quellen

23 Agenda - wie geht s weiter Agenda muss am Tag vorher noch aktualisiert werden Seite 23

24 Vielen Dank! Pierre Hein Consultant, Collaboration Management Benjamin Stein Consultant, Collaboration Management CENIT AG Industriestraße Stuttgart Seite 24