Tutorial mit Beispielen zum responisiven Webdesign



Ausgangsmaterial ohne jeglich Optimierung für die Anzeige in mobilen Geräten

Die erste Beispielseite kann man sich hier ansehen. Sie enthält nur ein HTML5-Grundgerüst mit header, section und footer, alle drei Elemente sind in einen div-Container verpackt.

PageSpeedInsights liefert die folgenden Ergebnisse für diese Fassung:


Variante mit konfiguriertem Darstellungsbereich

Diese Variante ist identisch mit der vorherigen, lediglich der Metatag für den Darstellungsbereich wurde eingefügt. Variante ansehen


Websites, die sowohl traditionelles wie auch respronsives Webdesign verwenden.

Skywalk-Webdesign.de

Beispielbild mit class max-img

Skywalk-Webdesign.de mit traditionellem Design

Diese Website verwendet im Rahmen eines CMS traditionelle Designtechniken. skywalk-webdesign.de ist einen Website, die sich schwerpunktmäßig mit den Themen:

beschäftigt. Der Hauptteil dieser Website zeigt ein traditionelles, nichtrespronsives Webdesign.

Beispielbild mit class max-img

Skywalk-Webdesign.de mit responsivem Design - Desktopansicht

Die responsive Variante dieser Website, die zunächst nur als Designstudie vorliegt, wurde mit dem Amazium-Framework auf Skywalk-webdesign.de umgesetzt.

Beispielbild mit class max-img

Skywalk-Webdesign.de mit responsivem Design - Verkleinerte Ansicht

Sobald man die Bildschirmgröße deutlich verkleinert, wird die horizontale menüleiste zu einem grafischen Button zusammengefasst, der sich mit einem Klick aufklappen lässt.



Websites mit responsivem Webdesign

Dropbox Blog Scriptogramm

Bei diesem neuen Design verwende ich die Technik des Responsiven Webdesigns. Mit dieser Technik soll ereicht werden, dass die Seite mit beinahe jedem Gerät gut lesbar ist.

Beispielbild mit class max-img

Bei diesem neuen Design verwende ich die Technik des Responsiven Webdesigns. Mit dieser Technik soll ereicht werden, dass die Seite mit beinahe jedem Gerät gut lesbar ist.


Deutsche Droppages mit jQuery Mobile

Beispielbild mit class max-img

Bei diesem neuen Design verwende ich die Technik des Responsiven Webdesigns. Mit dieser Technik soll ereicht werden, dass die Seite mit beinahe jedem Gerät gut lesbar ist.




Impressum und Kontaktforumular

Impressum lesen / Kontaktformular nutzen.