Inhaltsverzeichnis

Wenn du wirklich moderne Webseiten und Webanwendungen gestalten willst, musst du deine Seiten so gestalten, dass sie auf allen nur denkbaren Geräten gut aussehen. Hier erfährst du wie.

Lernziele dieser Einheit

Nac h Abschluss dieser Einheit kannst du …

🏁

Geräteübergreifendes Webdesign

Bildnachweis: Pixabay: rawpixel

Mobile Webseiten früher und heute

Laptop, Tablet, Smarthpone

Bildnachweis: Pixabay: FirmBee

Die Entwicklungswerkzeuge des Browsers

Der Responsive-Design-Modus

Bildnachweis für das Endesymbol: Pixabay: janf93

Wie es nicht aussehen soll

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Smartphones, nutzt das wirklich jemand?</h1> </header> <section> <!-- Hauptbereich mit Inhalt --> <main> <h1>Jasper (Alberta)</h1> <p> Jasper ist eine Siedlung innerhalb des Jasper-Nationalparks … </p> <img src="jasper1.jpg" alt="Typisches Haus in Jasper"/> <img src="jasper2.jpg" alt="Typische Straße in Jasper"/> <h2>Lage</h2> <p> Jasper liegt im Jasper-Nationalpark nahe der Grenze … </p> … </main> <!-- Side Bar mit Navigation --> <nav> <h2>Toolbox</h2> <ul> <li> <a>Einstellungen</a> </li> <li> <a>Bearbeiten</a> </li> <li> <a>Nutzer/innen</a> </li> … </ul> </nav> </section> </body> </html>
/** Allgemeines **/ html { font-family: sans-serif; font-size: 2.3vmin; } /** Hauptbereich **/ section { display: flex; } section main { padding: 0.5rem; } section img { display: inline-block; max-width: calc(50% - 2em); margin: 0 1em 1em 0; background: white; border: … }

Dieselbe Seite ein wenig anders

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Klar nutzen wir Smartphones </h1> </header> <section> <!-- Side Bar mit Navigation --> <!-- Steht jetzt vor dem Hauptbereich --> <nav> <h2>Toolbox</h2> <ul> <li> <a>Einstellungen</a> </li> <li> <a>Bearbeiten</a> </li> <li> <a>Nutzer/innen</a> </li> … </ul> </nav> <!-- Hauptbereich mit Inhalt --> <main> … </main> </section> </body> </html>
/** Allgemeines und Smartphone **/ html { font-family: sans-serif; font-size: 10pt; } section main { padding: 0.5rem; } section img { max-width: calc(100% - 1rem); display: block; margin-bottom: 1em; background: white; border: … } /** Große Bildschirme **/ @media (min-width: 40em) { html { font-size: 2.3vmin; } section { display: flex; } section img { display: inline-block; max-width: calc(50% - 2em); margin: 0 1em 1em 0; } }

Mehr über Media Queries

Syntaxbeschreibung

ausgabemedium (eigenschaft: wert)
Ausgabemedium Beschreibung
all Alle Geräte, keine Einschränkung
screen Bildschirm
print Drucker
speech Sprachsynthesizer
Eigenschaft Beschreibung
width Exakte Breite
min-width Mindestbreite
max-width Maximalbreite
height Exakte Höhe
min-height Mindesthöhe
max-height Maximalhöhe
aspect-ratio Seitenverhhältnis
orientation portrait (Hochformat), landscape (Querformat)

Beispiele

all (min-width: 800px)

Alle Ausgabemedien mit einer Mindestbreite von 800 Pixeln.

(min-width: 800px)

Dasselbe wie oben. Wenn alle Medien gemeint sind, kann das all fehlen.

print

Eingrenzung nur auf Drucker. Wird häufig genutzt, um störende Elemente nicht zu drucken.

(orientation: landscape), (min-width: 1024px)

ODER-Verknüpfung mehrerer Prüfungen.

screen (max-width: 600px) and screen (orientation: landscape)

UND-Verknüpfung mehrerer Prüfungen.

Gängige Gerätegrößen

(max-width: 768px)

Kleine Geräte und Smartphones

(min-width: 768px)

Mittlere Geräte und Tablets

(min-width: 992px)

Sehr große Tablets oder kleine Computerbildschirme

(min-width: 1200px)

Große Computerbildschirme und Fernseher

Quelle: Bootstrap-Dokumentation

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Media Queries beim Laden der Stylesheets</title> <!-- Allgemeines Stylesheet für alle Ausgabemedien --> <link rel="stylesheet" href="common.css"/> <!-- Medienabhängige Stylesheets mit zusätzlichen Anweisungen --> <link rel="stylesheet" media="print" href="print.css"/> <link rel="stylesheet" media="screen and (min-width: 40em)" href="desktop.css"/> </head> <body> ... </body> </html>
@import url(desktop.css) screen (min-width: 60em);

Hier wird ein anderes Stylesheet eingelesen. Aber nur, wenn die Webseite auf einem Bildschirm mit mindestens 60em Breite dargestellt wird.


@media print { header, footer { display: block; background: none; color: black; } }

Sorgt dafür, dass bestimmte Elemente beim Drucken untereinander stehen und keinen Hintergrund haben.


@media screen (min-width: 800px) { #main_parent { display: flex; } }

Schaltet für ein Element den Flexbox-Algorithmus ein, wenn der Bildschirm mindestens 800px breit ist.


@media (orientation: landscape) { html { background-image: url(landscape.jpg); } }

Setzt ein spezielles Hintergrundbild, wenn die Webseite im Querformat angezeigt wird.

Aufgabe 1: Ein kleines Webdesign-Quiz

Was bewirkt der folgende Media Query?

body { font-size: 11pt; } @media (max-width: 30em) { body { font-size: 9pt; } }
  1. Auf Bildschirmen im Querformat wird eine größere Schriftart verwendet.
  2. Auf kleinen Bildschirmen wird eine etwas kleinere Schriftart verwendet.
  3. Auf großen Bildschirmen wird eine etwas kleinere Schriftart verwendet.

Was bewirkt der folgende Media Query?

@media all and (orientation: landscape) { main { background-image: url(landscape.jpg); } } @media all and (orientation: portrait) { main { background-image: url(portrait.jpg); } }
  1. Bildschirme im Hochformat verwenden ein anderes Hintergrundbild als im Querformat.
  2. Der Anwender kann zwischen einem Landschaftsbild und einem Porträt als Hintergrund umschalten.
  3. Falls die Seite ausgedruckt wird, werden alle Hintergrundbilder deaktiviert.

Was bewirkt der folgende Media Query?

@media print { nav, aside, footer { display: none; } main { color: black; background: none; } }
  1. Auf kleinen Bildschirmen werden überflssige Elemte nicht angezeigt.
  2. Ausdrucke in DIN A5 oder kleiner beinhalten weniger Elemente als im DIN A4-Format.
  3. Ein Ausdruck der Seite beinhaltet nur den Hauptbereich ohne sonstige Elemente.

Lösung: 2, 1, 3

Aufgabe 2: Ein einfaches Fallbeispiel

Kopiere den folgenden HTML-Code in eine neue Datei und passe ihn gemäß der Beschreibung an.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Media-Query-Aufgabe</title> <style> html { font-family: sans-serif; font-size: 12pt; background-image: url(https://unsplash.it/1024/768/?random); background-repeat: no-repeat; background-position: center center; background-size: cover; } h1 { color: crimson; } main { text-align: center; } </style> </head> <body> <main> <h1>Das Gedicht vom Älter werden</h1> <p> Das große Glück, noch klein zu sein, <br /> Sieht mancher Mensch als Kind nicht ein. <br /> Und möchte, dass er ungefähr <br /> So 16 oder 17 wär'. </p> <p> Doch schon mit 18 denkt er: „Halt! <br /> Wer über 20 ist, ist alt.” <br /> Warum? Die 20 sind vergnüglich – <br /> Auch sind die 30 noch vorzüglich. </p> <p> Zwar in den 40, welche Wende, <br /> Da gilt die 50 fast als Ende. <br /> Doch in den 50, peu à peu, <br /> Schraubt man das Ende in die Höh'! </p> <p> Die 60 scheinen noch passabel <br /> Und erst die 70 miserabel. <br /> Mit 70 aber hofft man still: <br /> „Ich schaff' die 80, so Gott will.” </p> <p> Wer dann die 80 biblisch überlebt, <br /> Zielsicher auf die 90 strebt. <br /> Dort angelangt, sucht er geschwind <br /> Nach Freunden, die noch älter sind. </p> <p> Doch hat die Mitte 90 man erreicht <br /> – Die Jahre, wo einen nichts mehr wundert –, <br /> Denkt man mituntner: „Na, vielleicht <br /> Schaffst du mit Gottes Hilfe auch die 100.” </p> </main> </body> </html>

Auf dem Smartphone

  • Auf dem Smartphone soll kein Hintergrundbild angezeigt werden.
  • Auch soll das <main> auf dem Smartphone maximal breit sein.

Für Bildschirme ab 50em

  • Zeige das Hintergrundbild, so wie im HTML bereits angegeben.
  • Mache das <main> genau 40em breit.
  • Verwende margin: 0 auto;, um das <main> mittig zu zentrieren.
  • Sorge dafür, dass oberhalb und unterhalb 2em Platz bleiben.
  • Lasse innerhalb des <main> 1em Abstand zum Text.
  • Gebe dem <main> einen weißen Hintergrund und einen dezenten Rahmen.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Media-Query-Aufgabe</title> <style> html { font-family: sans-serif; font-size: 12pt; } h1 { color: crimson; } main { text-align: center; } @media (min-width: 50em) { html { background-image: url(https://unsplash.it/1024/768/?random); background-repeat: no-repeat; background-position: center center; background-size: cover; } main { width: 40em; margin: 0 auto; margin-top: 2em; margin-bottom: 2em; background: white; border: 1px solid #E5E5E5; box-shadow: 1px 1px 2px #BFBFBF; padding: 1em; } } </style> </head> <body> <main> … </main> </body> </html>

CSS-basierte Layout Grids

Bildnachweis: Pixabay: rawpixel

Automatisch responsive dank CSS-basierter Layout Grids

Anordnung auf großen Bildschirmen

Zeile: 1
Element: 1
Breite: 4
Zeile: 1
Element: 2
Breite: 4
Zeile: 1
Element: 3
Breite: 4
Zeile: 2
Element: 1
Breite: 9
Zeile: 2
Element: 2
Breite: 3

Anordnung auf kleinen Bildschirmen

Zeile: 1
Element: 1
Zeile: 1
Element: 2
Zeile: 1
Element: 3
Zeile: 2
Element: 1
Zeile: 2
Element: 2

CSS-basierte Layout Grids am Beispiel von Bootstrap

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Beispiel für Bootstrap</title> <!-- Bootstrap Stylesheets und Javascript --> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <!-- Container für das Grid --> <div class="container"> <!-- Zeile mit drei gleichgroßen Spalten --> <div class="row"> <div class="col-md-4"> <h2>Die Beatles</h2> <p>The Beatles waren …</p> </div> <div class="col-md-4"> <h2>Abbey Road Studios</h2> <p>Abbey Road Studios sind die …<p> </div> <div class="col-md-4"> <img src="img/london.jpg" alt="Abbey Road in London"/> </div> </div> </div> </body> </html>

Anleitung zur Integration von Bootstrap

Wenn du keine besonderen Werkzeuge benutzt

Wenn du mit Netbeans programmierst

Bildnachweis für das Endesymbol: Pixabay: janf93

Aufgabe 3: Ein kleines Bootstrap-Quiz

Wie wird der folgende HTML-Code mit Bootstrap dargestellt?

<div class="container"> <div class="row"> <div class="col-md-4">…</div> <div class="col-md-8">…</div> </div> <div class="row"> <div class="col-md-12">…</div> </div> </div>
  1. Auf mittelgroßen Bildschirmen werden zwei Zeilen mit jeweils zwei Elementen nebeneinander angezeigt. Auf kleineren Bildschirmen steht alles untereinander.
  2. Auf allen Bildschirmen werden zwei unterschiedliche große Elemente in der ersten Zeile und ein großes Element in der zweiten Zeile dargestellt.
  3. Auf mittgelgroßen Bildschirmen stehen zwei unterschiedlich große Elemente in der ersten Zeile und ein großes Element in der zweiten Zeile. Auf kleineren Bildschirmen steht alles untereinander.

Wie wird der folgende HTML-Code mit Bootstrap dargestellt?

<div class="container"> <div class="row"> <div class="col-lg-4">…</div> <div class="col-lg-4">…</div> <div class="col-lg-4">…</div> </div> <div class="row"> <div class="col-lg-2">…</div> <div class="col-lg-4">…</div> <div class="col-lg-3">…</div> <div class="col-lg-3">…</div> </div> </div>
  1. Auf großen Bildschirmen werden zwei Zeilen mit jeweils drei oder vier Elementen nebeneinander angezeigt. Auf kleineren Bildschirmen steht alles untereinander.
  2. Auf mittelgroßen Bildschirmen werden zwei Zeilen mit jeweils drei oder vier Elementen nebeneinander angezeigt. Auf kleineren Bildschirmen steht alles untereinander.
  3. Auf allen Bildschirmen werden zwei Zeilen mit jeweils drei oder vier Elementen nebeneinander angezeigt.

Lösung: 3, 1

Aufgabe 4: Wir erkunden Bootstrap

Lade dir das ZIP-File zu dieser Aufgabe herunter, damit du einen Grundstock an Bildern hast. Anschließend lege ein neues Projekt mit Bootstrap an und baue die Seite aus der Vorschau nach.

Mein schönster Urlaub

Mein Auto
Wir sind viel Auto gefahren.
Schnellboot
Aber manchmal auch mit dem Boot.
Bucht am Meer
Bär im Wald
Finde den Bär.
Hafen in Vancoucer
Denman St. in Vancouver

Farbcodes

  • Die Farbe der Überschrift nennt sich crimson.
  • Der Farbcode des roten Kästchens ist #880033.
  • Der Farbcode des blauen Kästchens ist #005987.
  • Der Farbcode des grünen Kästchens ist #1B8D68.

Abstände

  • Damit zwischen den Kästchen kein Abstand bleibt, musst du den <div class="row"> zusätzlich noch die Klasse no-gutters geben. Sonst verschiebt sich das ganze Layout.
  • Für den linken und rechten Innenabstand innerhalb der fabrigen Kästchen benötigst du die CSS-Anweisungen padding-left: 0.5em !important; und padding-right: 0.5em !important;.

Bilder

  • Den Bildern solltest du die Anweisungen width: 100% und height: 100% geben.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Bootstrap-Aufgabe</title> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> <style> html { font-family: sans-serif; font-size: 12pt; padding: 1em 0 1em 0; } h1 { color: #A52A2A; } img { display: block; width: 100%; height: 100%; } .bigtext { font-size: 300%; color: white; padding: 0.5em; padding-left: 0.5em !important; padding-right: 0.5em !important; } .red { background-color: #880033; } .blue { background-color: #005987; } .green { background-color: #1B8D68; } </style> </head> <body> <div class="container-fluid"> <div class="row no-gutters"> <div class="col"> <h1>Mein schönster Urlaub</h1> </div> </div> <div class="row no-gutters"> <div class="col-md-9"> <img src="auto.jpg" alt="Mein Auto" /> </div> <div class="col-md-3 bigtext red"> Wir sind viel Auto gefahren. </div> </div> <div class="row no-gutters"> <div class="col-md-6"> <img src="boot.jpg" alt="Schnellboot" /> </div> <div class="col-md-3 bigtext blue"> Aber manchmal auch mit dem Boot. </div> <div class="col-md-3"> <img src="bucht.jpg" alt="Bucht am Meer" /> </div> </div> <div class="row no-gutters"> <div class="col-md-3"> <img src="baer.jpg" alt="Bär im Wald" /> </div> <div class="col-md-3 bigtext green"> Finde den Bär. </div> <div class="col-md-3"> <img src="vancouver.jpg" alt="Hafen in Vancoucer" /> </div> <div class="col-md-3"> <img src="denmanst.jpg" alt="Denman St. in Vancouver" /> </div> </div> </div> </body> </html>

Hinweise zum Schluss

Bildnachweis: Pixabay: rawpixel

Do & Don't

Responsive Webdesign

CSS-basierte Layout Grids

Sonstige Tipps und Tricks

Rechtshinweise

Creative Commons Namensnennung 4.0 International

§