[Tutorial]Responsive Webseiten

  • Hallo Community,
    heute möchte ich Euch zeigen, wie Ihr responsive Webseiten ( http://de.wikipedia.org/wiki/Responsive_Webdesign ) schreiben könnt.
    Ihr wisst nicht genau was das ist? Einfach auf den bereits genannten Link klicken und schlau machen!

    Dann fangen wir mal an:
    Wir gehen davon aus, dass wir bereits eine funktionstüchtige Seite mit drei Containern haben. Der Navigation, der Hauptcontainer und der Footer.
    Auf dem PC sieht alles super aus, doch auf dem Handy oder Tablet passt noch nicht alles so, wie es sein soll. Wir bringen unsere Seite nun soweit in Schuss, dass wir eine gutaussehende Seite nicht nur auf dem PC, sondern auch auf mobilen Endgeräten haben.
    Ein gutes Beispiel dafür ist übrigens die Seite http://www.currys.co.uk/gbuk/index.html -> Öffnet diese und zieht Euren Browser auf die minimalste Größe. Ihr werdet den Unterschied erkennen.

    Unsere Seite sieht momentan so aus:


    Wichtig im CSS Teil ist, dass Ihr ausschließlich Prozentuale oder "em"-Angaben macht. Dadurch haben wir die Möglichkeit alle Funktionen zu nutzen.

    Sehr simpel, ist aber auch egal. Nun möchten wir es schaffen, dass unsere Seite auf mobilen Endgeräten verbessert dargestellt wird. Dazu nehmen wir das Beispiel der Navigation.
    Ich möchte, dass wenn ich mir die Seite mit dem Handy anschaue, die Navigation ausgeblendet wird und ich sie durch einen Klick auf einen Link "Menü" öffnen und schließen kann.
    Dann fangen wir mal sofort mit dem Spaß an.

    -> Wir fügen einen Link namens "Menü" in die Navigation hinzu und geben diesem eine ID ( #menu ) und lassen diesen ausgeblendet via display: none;.
    -> Die restlichen Links, welche auf- und einklappbar werden sollen, packen wir in einen weiteren Div ( #nav-links )
    -> Nun schreiben wir ein bisschen CSS Code:

    CSS
    @media screen and (max-width: 450px){ /* Sollte die Breite des Browsers maximal die Größe von 450px haben ( Smartphone ) */
    	#main-wrapper #main-top #menu{ display: block !important; } /* Wir lassen den Menü Link anzeigen */
    }

    Damit haben wir schon mal den Anfang geschafft. Nun müssen wir festlegen, dass #nav-links nicht angezeigt wird und die Links untereinander angezeigt werden anstatt nebeneinander, wenn wir auf dem Smartphone sind.

    Code
    @media screen and (max-width: 450px){ /* Sollte die Breite des Browsers maximal die Größe von 450px haben ( Smartphone ) */
    	#main-wrapper #main-top #nav-links{ display: none; }
    	#main-wrapper #main-top #nav-links a{ width: 100%; display: block; margin-bottom: 0.25em; margin-top: 0.25em; background-color: #666666; }
    }

    Dies haben wir damit getan und müssen nur noch ein Javascript einfügen, welches das Menü mit den Links öffnet oder schließt, sobald auf Menü geklickt wird.

    Code
    $(function(){
    	$("#main-wrapper #main-top #menu").click(function(){
     $("#main-wrapper #main-top #nav-links").slideToggle("slow");
     return false;
    	});
    });

    Das war es in diesem Fall eigentlich schon, allerdings müssen wir noch eine Sache beachten. Wenn die Breite des Browsers größer als 450px ist, muss das Menü auf jeden Fall wieder sichtbar werden. Das amchen wir jetzt.

    CSS
    @media screen and (min-width: 450px){ /* Sollte die Breite des Browsers größer als 450px sein ( Tablet / PC Browser ) */
    	#main-wrapper #main-top #nav-links{ display: block !important; }
    }

    Soweit sind wir nun fertig, allerdings können wir noch eine nette Sache nutzen: Sobald das Gerät kleiner wird, desto größer ist die Schrift, wenn wir sie nicht ändern. Deshalb ändern wir einfach die Schriftgröße im body.

    CSS
    @media screen and (max-width: 450px){ /* Sollte die Breite des Browsers maximal die Größe von 450px haben ( Smartphone ) */
    	html body{ font-size: 85%; }
    	#main-wrapper #main-top #menu{ display: block !important; }
    	#main-wrapper #main-top #nav-links{ display: none; }
    	#main-wrapper #main-top #nav-links a{ width: 100%; display: block; margin-bottom: 0.25em; margin-top: 0.25em; background-color: #666666; }
    }
    "Endprodukt"

    Ich hoffe ich konnte Euch damit ein wenig weiterhelfen. Sollte es zu Unverständlichkeit kommen, keine Scheu! Fragt ruhig hier im Thread oder belastet die Nachrichten Funktion des Forums und schreibt mir privat.

    Grüße
    Sarcasm

    2 Mal editiert, zuletzt von Sarcasm (30. März 2015 um 13:04)

  • Dieses Thema enthält 6 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registrieren Sie sich oder melden Sie sich an um diese lesen zu können.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!