Lukas SchwarzenbacherStand: November 2013

Merkblatt: Responsive DesignAnmerkung zu Responsive DesignAls „Responsive Design“ bezeichnet man ein Layout für eine Website, welches sich an die Bildschirmgrösse des Betrachters anpasst. Dieses Konzept ist noch sehr neu. Es exis-tiert erst, seit die vielen „Gadgets“ wie iPhone und iPad auf dem Markt sind. Viele Ge-stalter und Programmierer sind am ausprobieren, wie man herkömmliche Websites auf den kleinen, mobilen Geräten geeignet darstellen kann. Seit einigen Monaten ist ein Trend zu beobachten, der eindeutig in eine benutzerfreund-liche Richtung geht. Während falsch eingesetzte Dropdown-Menus oder bildschirmfül-lende Header-Module mit grossem Navigations-Bereich den Benutzer ärgern, bringt eine Menu-Schaltfläche, mit drei Strichen in einem Qudrat, einen besseren Bedienkomfort. Die Idee an dieser Schaltfläche ist, dass die Navigation erst beim Klick auf diese Fläche erscheint. Zuvor ist sie ausgeblendet. Dies spart Platz. Grosse Websites wie Facebook oder Programme wie Google-Chrome haben diesen Button fest in ihr Layout eingebun-den. Somit muss sich jeder Benutzer von mobilen Endgeräten an solche Buttons gewöh-nen, denn sonst ist er nicht fähig, diese zu bedienen. Im Webdesign kann man sich dies zu Nutze machen, indem man bei einem Responsive Design genau diesen Button einblendet, sobald der View-Port, also die Grösse des Fens-ters, eine gewisse Breite unterschreitet. Hier drei gelungene Beispiele:

Beispiel 1:

Google Chome Browser auf dem iPhone. Bei Klick auf die Menu-Schaltfläche, neben der URL-Zeile, erscheint ein Dropdown-Menu.

Merkblatt: Responsive Design 2 von 3

Beispiel 2:

Die Website von Starbucks. Zuerst die Desktop Ansicht und dann unten die Mobile Website mit Menu-Schaltflä-che. Bei Klick auf die Menu-Schaltfläche erscheint ein Dropdown-Menu.

Merkblatt: Responsive Design 3 von 3

Beispiel 3:

Facebook. Zuerst die Desktop Ansicht und dann die Mobile Website mit Menu-Schaltflä-che. Aus Datenschutzgründen sind die Inhalte verschwom-men. Bei Klick auf die Menu-Schaltfläche schiebt sich die Website nach rechts, und es erscheint eine Navigation mit untereinander aufgelisteten Links.