# Responsive Design
Mit dem ersten iPhone wurde 2007 der erste brauchbare Webbrowser für Smartphones präsentiert. Nie zuvor boten sich vergleichbare Möglichkeiten, Websites auf einem mobilen Gerät zu nutzen.
Das erste iPhone. Bild: Apple
Was mit einem einzigen Gerät begann, ist in wenigen Jahren zu einem riesigen Markt mit unzähligen verschiedenen Smartphones und Tablets angewachsen. Websites, die ursprünglich für einen Desktop-Computer oder Laptop optimiert worden waren, mussten plötzlich mit dutzenden Bildschirmgrössen und Fingern statt Mauszeigern umgehen können. Responsive Design war geboren.
“Responsive“ bedeutet im Development “reaktionsfähig”. Die Programmierung der Website ist in der Lage zu erkennen, welcher Browser, welches Betriebssystem und/oder welche Displayauflösung vom Nutzer verwendet wird und kann darauf reagieren. Konkret heisst dies, dass unterschiedliche Darstellungen anhand der abgerufenen Geräteangaben möglich sind.
Der aufwändigste Schritt bei der Konzeption und Gestaltung einer responsiven Website ist die Planung: wie soll sich die Website und deren Layout responsive verhalten?
# Relative Units
Du erinnerst dich bestimmt an das Kapitel Masseinheiten. Spätestens jetzt wird klar, warum du für dein Layout so häufig wie möglich relative Units verwenden solltest. Statische Werte führen zu vielen Nachteilen oder erheblichem Mehraufwand, wenn sich deine Website responsive verhalten soll.
Bild FROONT
# Responsive & Adaptive
Während sich eine responsive Website meist “fluid“ an die Bildschirmgrösse anpasst, besteht eine adaptive Website meist aus zwei (oder mehreren) festen Layouts, die je nach Screen entsprechend angewendet werden.
Bild FROONT
Es gibt Websites, die nur über eine Mobile- und Desktop-Version verfügen, das ist jedoch die Ausnahme. Grundsätzlich sind das zwei völlig unterschiedliche Seiten, die meistens auch auf unterschiedlichen Domains zugänglich sind. Beispiele dafür sind de.wikipedia.org und de.m.wikipedia.org. Sinnvoll ist das meist nur bei sehr komplexen Projekten, um etwa die Ladezeiten oder die User Experience (Nutzererlebnis) für das entsprechende Ausgabegerät zu verbessern.
# Mobile oder Desktop first
Mit dem Aufstieg von Smartphones und Tablets verabschiedeten sich viele Nutzer von klassischen Desktop-Computern. Als Designer solltest du dir deshalb immer Gedanken machen, ob das Hauptpublikum deiner Website eher im Büro am Bildschirm oder unterwegs auf dem Smartphone auf deine Seite zugreift.
In den letzten Jahren hat “Mobile first“ stark an Bedeutung gewonnen, also die Priorisierung der Gestaltung für mobile Geräte. Dabei wird zuerst für Smartphones konzipiert und gestaltet und erst in einem zweiten Schritt für grössere Bildschirme optimiert. Bei “Desktop first“ ist es umgekehrt. Welches Konzept wann sinnvoll ist, hängt vom Zielpublikum und dem Zweck deiner Website ab.
Bild FROONT
# Breakpoints
Breakpoints (Haltepunkte) ermöglichen es dir das Layout zu ändern, sobald die Bildschirmgrösse einen bestimmten Punkt über- oder unterschreitet. So können beispielsweise drei Spalten auf einem Desktop zu einer einzigen Spalte auf dem Smartphone umbrechen. An welchen Stellen du diese Breakpoints setzen solltest ist abhängig von deinem Inhalt.
Bild FROONT
Hinweis
Nicht nur das Umbrechen eines Layouts kann zur Verbesserung der Usability (Bedienbarkeit) führen, sondern auch das Anpassen von Abständen. Mit einer Computermaus kannst du winzige Flächen präzise auswählen. Mit dem Daumen auf deinem Smartphone ist das kaum möglich. Achte deshalb immer darauf, dass die Dinge jeweils genügend Abstand zueinander haben, damit sie gut bedienbar sind.
# Breakpoints mit Media Queries
Media Queries werden innerhalb deines CSS-Stylesheets definiert und bestimmen, welche CSS-Anweisungen für unterschiedliche Bildschirmgrössen angewandt werden sollen. Dabei definierst du, welche Regeln für eine minimale und/oder maximale Bildschirmgrösse gelten sollen. Media Queries haben grundsätzlich immer die höchste Spezifität in deinem CSS. Das bedeutet, dass diese andere CSS-Stylerules überschreiben können und vom Browser als wichtiger erachtet werden.
/* Mindestens 700px breit */
@media (min-width: 700px) {
/* Deine CSS-Stylerules */
p {
color: red;
}
}
/* Maximal 700px breit */
@media (max-width: 700px) {
/* Deine CSS-Stylerules */
}
/* Mindestens 700px breit und Querformat */
@media (min-width: 700px) and (orientation: landscape) {
/* Deine CSS-Stylerules */
}
/* Media query für den Druck */
@media print {
/* Header beim Ausdrucken ausblenden */
header {
display: none;
}
}
Weiterführende Links
# Breakpoints ohne Media Queries
Für einfache Layoutumbrüche brauchst du teilweise keine Media Queries. Mit Flexbox kannst du Dinge beispielsweise automatisch umbrechen lassen, sofern sie nicht mehr auf eine Zeile passen.
.parent {
display: flex;
flex-wrap: wrap;
}
/*
Ist der Bildschirm grösser als 800px werden beide Childs
nebeneinander dargestellt. Ansonsten brechen sie um.
*/
.child1,
.child2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 400px;
}
# Responsive Styles hinzufügen Aufgabe
Da du jetzt die Grundlagen über Responsive Design weisst, kannst du dein Portfolio entsprechend anpassen.
Hinweis
Damit du die Übersicht behältst, solltest du diese neuen Styles in einer eigenen responsive.css-Datei ablegen. Speichere diese ebenfalls im css-Ordner und füge sie mit einem link-Tag unterhalb deiner style.css-Datei in der index.html hinzu.
<!-- index.html -->
<!-- responsive.css Datei im <head> unterhalb der style.css hinzufügen -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
Sobald du diese Datei erstellt und im HTML verknüpft hast, kannst du darin die folgenden Styles platzieren:
/* Mediaqueries bis ungefähr 960px Bildschirmbreite */
@media (max-width: 60em){
/*
--------------------------------
<header> Bereich
--------------------------------
*/
nav ul {
padding-right: 4vw;
}
nav a {
padding: 1.5rem 3vw;
}
/*
--------------------------------
<main> Bereich
--------------------------------
Keine zusätzlichen responsive Styles nötig.
*/
/*
--------------------------------
About section
--------------------------------
*/
#about {
flex-direction: column-reverse; /* Reihenfolge umdrehen. Erst das Bild, dann der Text. */
}
.about_image {
border-radius: 0; /* Keine abgerundeten Ecken beim Bild */
margin-bottom: 7vw;
}
/*
--------------------------------
Expertise section
--------------------------------
*/
.expertise_item {
flex-basis: auto; /* flex-basis zurücksetzen */
}
/*
--------------------------------
Work section
--------------------------------
*/
.work_group {
margin: -1rem 0;
}
.work_item {
border-radius: 2rem;
margin: 1rem 0;
}
.work_item, .work_item:nth-child(3n+1) { /* Jedes zweite Element */
flex-basis: 100%;
padding-bottom: 100%;
}
.work_text {
padding: 3vw;
}
/*
--------------------------------
Career section
--------------------------------
*/
#career {
padding: 7vh 0 0;
}
#career .section_title {
margin: 0 7vw;
}
.career_group {
display: flex;
align-items: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Flüssiges Scrollverhalten bei iOS */
padding-left: 7vw;
}
.career_item:last-child {
padding-right: 7vw;
}
.career_item, .career_item:nth-child(even) {
flex-direction: column;
flex: 1 0 90%;
}
.career_date, .career_text {
text-align: left;
padding-right: 10%;
padding-bottom: 0;
}
.career_item:last-child .career_text{
padding-right: 0;
}
.career_timeline {
margin: 2rem 0;
}
.career_timeline:before {
margin: 0;
}
.career_timeline:after {
width: 100%;
height: 3px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
/*
--------------------------------
Contact Bereich
--------------------------------
Keine zusätzlichen responsive Styles nötig.
*/
/*
--------------------------------
Styles für weitere Seiten z.B. Arbeiten / Work
--------------------------------
*/
.detail_mainimage {
width: calc(100% + 14vw);
max-width: none;
margin-left: -7vw;
border-radius: 0;
}
.detail_media {
margin: 0 -7vw;
}
} /* Abschluss des Media Querys*/
# Überprüfen im Browser Aufgabe
Wie immer solltest du das Ergebnis nun im Browser überprüfen.
Hinweis
Verwende die Developer Tools, um ein mobiles Gerät zu simulieren. Einfach nur das Fesnter zu verkleinern reicht nicht aus, um das Resultat zu überprüfen.
Wenn alles stimmt, sollte dein Portfolio gemäss Vorlage nun so aussehen:
Passende Challenges
#25 Hamburger Menu (Füge für Smartphones ein aufklappbares Menu ein)