Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

RWD ist gar nicht schwer

Montag, 16. November 2015

… und sogar nachträglich machbar. Wenn das Desktop-Layout sauber strukturiert ist.
Ein Beispiel gefällig:

Das Navigationsmenü auf www.backis-welt.de befindet sich im Quellcode nach dem Inhalt, also am Ende der Seite. Per CSS float wird es rechtsbündig dargestellt:

Screenshot Desktop Seite
Die "normale" Darstellung der Seite auf Desktop-PC und Notebook. Das Navigationsmenü wird in der rechten Spalte dargestellt.

Für die Darstellung auf Smartphones ist dieses Layout natürlich nicht geeignet.
Einige wenige Zeilen CSS verhindern das floating. Die Naviation wird, wie im Quellcode vorgegeben, am Ende der Seite dargestellt.
Der Sprunglink "Zum Wegweiser" (zur Navigation) — der auf PC und Notebook versteckt ist, und dort nur sichtbar wird, wenn er mit der Tab-Taste angesprungen wird (CSS: focus) — wird für die mobile Ansicht permanent dargestellt. Das ist notwendig, weil es auf Smartphones keine Tab-Taste gibt.
Anstelle des (Hamburger-)Menü-Buttons, der ein Menü einblendet, erfüllt hier also ein seiteninterner Sprunglink zur Navigation den Zweck.

Screenshot 1 iPhone
Die Darstellung auf dem Smartphone. Der Sprunglink zur Navigation "Zum Wegweiser" oben.
Screenshot 2 iPhone
Die Navigation wird für das Smartphone per CSS auf Seitenbreite vergrößert.

Der CSS-Code, der all dies ermöglicht, umfasst im Prinzip nur wenig Zeilen:

@media only screen and (max-width: 680px) {
 
/* Angaben zurücksetzen, Elemente auf 100% Breite einstellen: */
body,#main,#kopf,#inhalt, #navi, #kopf {border:0;margin:0;padding:0;box-sizing:border-box;width:100%;max-width:100%;}
 
/* Querformat-Darstellung auf Smartphones */
body { -webkit-text-size-adjust:none;font-size:100%;}
 
img {max-width:97%; height:auto;}
#navi ul {margin-left:0 !important}
#navi li {margin:5px 0 !important}
 
/* Skiplink positionieren */
.skip a {left:1em;top: 7em}
 
}



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE