Im PAGE eDossier »Responsive Webdesign: Basics, Cases, Workshops» erfahren Sie alles über die Grundlagen des Responsive Webdesign.
In unseren Workshops zeigen wir Ihnen Schritt für Schritt den Weg zur Responsive Website, und in den Making-ofs erfahren Sie, wie Unternehmen wie Lufthansa oder Ferrari die neue Technik einsetzen.
Starre Gestaltung im fixen Raster ist out und Responsive Design mit seinen flexiblen Webseiten längst im Bewusstsein der Auftraggeber angekommen. Ganz gleich ob PC, Notebook, Smartphone, Tablet oder Fernseher – in Zeiten eines stark fragmentierten Gerätemarkts mit seinen unzähligen Screen-Größen wurde dieser Ansatz schnell zur Pflichtübung für Designer und Entwickler.
Die Basics des Responsive Design
Responsive Webdesign stellt Gestalter und Entwickler vor neue Herausforderungen: Anordnung und Darstellung der einzelnen Elemente einer Website wie Navigation, Raster und Text müssen neu gedacht werden. Und auch den Einsatz von Webstandards wie HTML5, CSS3 und JavaScript gilt es anzupassen. Diese Einführung erläutert die Grundlagen des responsiven Webdesigns und zeigt spannende Projekt, die die Technik gelungen umsetzen.
Prototyping mit Zurb Foundation
Responsive Gridsysteme wie Zurb Foundation sind schlank im Quellcode und leicht in der Handhabung. Am Beispiel einer responsiven HTML-Vorlage für einen Onlineshop demonstriert Frontend-Entwickler Oliver Mayer die Grundfunktionen und Vorteile des Frameworks und erläutert den Umgang mit Gridsystemen, CSS-Klassen und Resets sowie einigen grundlegenden JavaScript-Funktionen.
Integrieren Sie skalierbare Vektorgrafiken in Ihre responsive Webseite
Skalierbare Vektorgrafiken sind ideal für Websites, die auf allen Bildschirmgrößen gut aussehen sollen. In unserem Workshop zeigt Ihnen Mobile-Screen-Designerin Annika Brinkmann, wie sie SVG auf ihrer Website integrieren.
So funktioniert Responsive Prototyping mit Axure 7
Mit der Prototyping-Software Axure RP können Sie bereits in der Entwurfsphase responsive Layouts für Ihre Webseite anlegen. Axure-Coach Rolf Schulte Strathaus zeigt Ihnen in unserem PAGE eDossier »Responsive Webdesign: Basics, Cases, Workshops« wie das geht.
So legt man eine Responsive Landing Page an
Mit Ihrer Landing Page wollen Sie beim User einen positiven ersten Eindruck hinterlassen. Umso wichtiger ist es, dass Ihre Landing Page auf allen Geräten richtig dargestellt wird. Lukas F. Hartmann zeigt Ihnen, wie Sie eine solche Lannding Page mit CoffeeScript, Sassy CSS (SCSS), Middleman und Zepto umsetzen.
Responsive Websites gestalten
In diesem Tutorial erläutert User Interface Designer Daniel Stein, worauf Sie bei der Gestaltung einer Responsive Website achten müssen und wie Sie Ihre Website für verschiedene Geräte anpassen.
Für die Lufthansa Technik AG entwickelte Ingenieur Matthas Hamann das Frontend einer responsiven HTML5-Webapp, mit der sich Kabinenfunktionen von Flugzeugen und ein Entertainment-System steuern lassen. Unser Making-of gewährt einen Blick hinter die Kulissen und zeigt, wie das Team die Performance der App optimierte.
Making-of: Responsive Marken-Website für Ferrari
Die Hamburger Digitalagentur SinnerSchrader entwickelte eine Marken-Website für den neuesten Ferrari und setzte das sportliche Gefährt responsiv und optimiert für Retina-Displays in Szene. In unserem Making-of zeigen wir Ihnen, wie das Team vorging und mit welchen Maßnahmen die Website fast genau so flink läuft wie der italienische Flitzer.
