Responsive Webdesign Tutorials

Im PAGE eDossier »Responsive Webdesign: Basics, Cases, Workshops» erfahren Sie alles über die Grundlagen des Responsive Webdesign.



Bild1_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.


Responsives Webdesign mit Adobe Edge Reflow

Edge Reflow ist Adobes Antwort auf die Erfordernisse des responsiven Webdesigns. Entwickler Simon Widjaja zeigt Ihnen in unserem PAGE eDossier »Responsive Webdesign: Basics, Cases, Workshops«, wie Sie das Developer-Tool am besten einsetzen.


Making-of: HTML5-Webapp für Lufthansa

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.

PAGE_Download_Button_Vorlage

Das PAGE eDossier »Responsive Webdesign: Basics, Cases, Workshops« gibt es in unserem Shop.




Kommentieren

Einfach mit dem PAGE Account anmelden oder Formular ausfüllen

Name *

Email *

*Pflichtfeld

Ihr Kommentar *

 
 

Das könnte Sie auch interessieren