====== Responsive Webdesign ======
web:design:responsive
Beim "Responsive Webdesign" gibt es eine Datenquelle, die durch CSS und auch Javascript an das Endgerät angepasst wird.
"Mobile" bedeutet dagegen, eine Extra Lösung für “Mobile Geräte” anzufertigen.
Hier eine kleine Zusammenfassung, was beim __Responsive Webdesign__ zu beachten ist …
===== 1. Festlegung der Größenbereiche =====
Eine Media Query im CSS bestimmt einen Bereich von CSS Anweisungen, die für bestimmte Geräte (Screen, Print, etc) und für festgelegte Größen gültig sind.
Da wir das Layout über die Media-Queries in CSS steuern, müssen wir uns zunächst Gedanken machen, bei welchen Auflösungen wir die Bereiche umschalten möchten:
Einige Entwickler schlagen vor, den ersten Bereich größer als 1024px festzulegen, ich denke aber, das sollte zum einen vom Headerbild abhängig gemacht werden, zum anderen habe ich bisher meine Seiten immer auf 960px festgelegt und damit gute Erfahrungen gesammelt.
Wir starten einfach mal mit der Vorlage aus dem [[https://html5boilerplate.com/|HTML5 Boilerplate]]
/** Bereich 1: Mobile first */
/** Bereich 2: Intermediate */
@media only screen and (min-width: 480px) {}
/** Bereich 3: Wide */
@media only screen and (min-width: 768px) {}
/** Bereich 4: Maximal Width */
@media only screen and (min-width: 1067px) {}
/** Bereich 5: Print Style */
@media print {}
Wenn wir für folgende Elemente die Breite begrenzen wollen, benutzen wir die Klasse Wrapper, die die Breite auf 90% festlegt. Damit wir auf Wide Screen nicht untergehen, führen wir im Bereich 4 noch eine maximale Breite von 960 ein.
/* Bereich 1 */
.wrapper {
width: 90%;
margin: 0 5%;
}
/* Bereich 4 */
.wrapper {
width: 960px; /* 1067px - 10% for margins */
margin: 0 auto;
}
===== 2. Definition des Header =====
In unserem Fall haben wir für den Header eine Grafik von 436px Breite ( + 10% = 480px ), d.h. dieser wird im Bereich 2 definiert und oben zentriert angezeigt. Für den ersten Bereich erstellen wir noch eine Grafik mit der Breite 216Pixel (240 – 10%). Das Verfahren ist noch nicht optimal und kann noch verfeinert werden, jedoch war das Urspungslayout (960px Breite) auch mit diesem Header gestartet. Eine bessere Möglichkeit zum Umwandeln von Bildern werden wir später noch kennenlernen ….
===== 3. Aufteilung Navigation / Content auf “großen” Bildschirmen” =====
Wir benutzen eine einfache HTML5 Struktur:
Den Header hatten wir schon, den Footer hängen wir einfach “fixed” an den unteren Rand, bleiben noch die Navigation und der Content.
Wenn genügend Platz vorhanden ist, wollen wir die Navigation links und den Content rechts darstellen. Was ist genügend Platz ? Klassischerweise haben wir die Navigation mit 200px dargestellt, sie sollte ca. ein Viertel der Breite einnehmen, also entscheiden wir uns mal für die 768 Pixel Grenze.
Wir definieren also im Bereich 3:(Der Code ist nicht vollständig)
nav{
width:25%;
float:left;
}
article{
width:75%;
float:left;
}
===== 4. Aufteilung Navigation / Content auf “kleinen” Bildschirmen” =====
Für Bildschirme unter 768px Breite ordnen wir das Menü oberhalb vom Content an, gleichzeitig soll das Menü eingeklappt sein und über einen Trigger geöffnet werden. Dafür orientieren wir uns an dieser Lösung: [[http://themetaq.com/articles/responsive-toggle-menu]]
Das Navigationsmenü wird erweitert:
Menu
Für die ersten beiden Bereiche blenden wir den Trigger ein
.slide-trigger { display: block; }
.no-js .slide-trigger { display: none; }
nav { display: none; }
.no-js nav { display: block; }
nav { margin: 0 15px; }
nav li { float: none; }
nav li a { border-bottom: 1px solid #fff; }
===== 5. Wichtige HTML und CSS Befehle =====
==== HTML ====
=== Explorer Rendering ===
Mit dem X-UA-Compatible meta tag wird em InternetExplorer mitgeteilt, für welche Version man die Seite optimiert haben möchte. Edge ist hier die letzte IE Version.
=== viewport ===
Eine typische Responsive Seite sollte folgenden meta Tag enthalten:
[[https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag|Viewport Meta Tag auf MDN]]
==== CSS ====
=== flex ===
Flex ist ein CSS Verfahren (display:flex;) zur automatischen Anordnung und Ausrichtung von Elementen//
[[http://flexboxin5.com/]]
Flexiejs ist ein JS Polyfill, um alte Browser für die flex-Darstellung zu supporten //
[[http://flexiejs.com/]]
=== word-wrap ===
The word-wrap property is used to specify whether(word-wrap: break-word;) or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.//
[[https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap]]
=== word-wrap ===
The word-break CSS property is used to specify whether to break lines within words. //
[[https://developer.mozilla.org/en-US/docs/Web/CSS/word-break]]
=== overflow ===
The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.
/* Content is not clipped */
overflow: visible;
/* Content is clipped, with no scrollbars */
overflow: hidden;
/* Content is clipped, with scrollbars */
overflow: scroll;
/* Let the browser decide */
overflow: auto;
Es gibt auch overflow-x und overflow-y
[[https://developer.mozilla.org/en-US/docs/Web/CSS/overflow]]
===== 6. Passende Bilder ausliefern =====
Für Bilder ist
img{
max-width:100%;
}
immer eine ganz gute Anfangslösung, optimaler ist es, für unterschiedliche Medien
unterschiedliche Bildgrößen auszuliefern.
Um Bilder entsprechend der Bildschirmauflösung auszulieferen, und um damit ressourcenschonend zu arbeiten, gibt es die Bibliothek **Adaptive Images**. Bei dieser wird die Anfrage nach einem Bild über die htaccess auf das PHP-Skript mit dem Parameter Bildschirmauflösung geleitet, und dann ein passendes Bild generiert.
Weitere Details: [[http://www.elmastudio.de/programmierung/mit-adaptive-images-bilder-fur-responsive-webdesigns-optimieren/]]
Interessant ist auch noch mal ein Blick in die Konfiguration am Anfang der Datei adaptive-images.php:
/* CONFIG */
$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality = 75; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
/* END CONFIG */
Hier sollte //$resolutions// an unsere Auswahl für die Media Querias angepasst werden ( Bildschirmbreite, nicht Bildbreite),
Über //$jpg_quality// und //$sharpen// kann experimentiert werden, falls die Bildqualität nicht in Ordnung ist
und die beiden anderen Parameter legen fest, wie lange die Bilder gecacht werden(//$browser_cache//) bzw. ob eine Änderung des Originalbildes überwacht werden soll(//$watch_cache//).
===== 7. Videos skalieren =====
Ebenfalls vom Elma Studio noch eine Anleitung, um Videos passend zur Auflösung darzustellen über iFrame: [[http://www.elmastudio.de/programmierung/css/css-tipp-eingebettete-videos-fur-responsive-webdesigns-optimieren/]]
===== 8. Schriften =====
Schriften sollten über em definiert werden und auf mobilen Geräten ruhig etwas größer ausfallen.
===== 9. Testen =====
Um das Layout auf verschiedenen Größen zu testen, hat sich z.B. der [[http://www.responsinator.com/|Responsinator]] als tauglich erwiesen. Verschiedene Auflösungen der Webseite werden in verschieden großen iFrames geladen. Das Ganze funktioniert auch lokal und es läßt sich auch als Skriplet bookmarken.
Im Firefox wird mit Strg + Shift + M die mobile Ansicht aktiviert,
im Chrome gibt es mit F12 und Klick auf das Handysymbol eine große Auswahl an Geräten.
Alle Tools ersetzen allerdings nicht das Testen auf realen Geräten in der "Wildnis", hier ist der Zugang zu vielen verschiedenen Gerätetypen sehr hilfreich.
===== 10. Ressourcen =====
[[http://pxtoem.com/|Umwandlung Pixel in em]]
[[https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/|Tabellen Responsive]]
[[http://ami.responsivedesign.is/|Vorschau auf verschiedenen Geräten]]