Responsive Webdesign

Responsive heißt »reaktionsfähig« und bedeutet, dass ein Layout zum Beispiel einer Website nicht mehr statisch, sondern dynamisch so erstellt wird, dass es sich an äußere Einflüsse wie Displaygröße und weitere Geräteeigenschaften wie Touchdisplays anpasst.

Responsive Design ermöglicht eine optimale User Experience. Durch skalierbare Bilder, variierende Textgrößen, das Fluid Grid und die veränderlichen Inhaltspositionen kann sich das Layout einer Website oder einer Applikation auf allen Bildschirmgrößen anpassen – egal ob am Computer oder einem Mobilgerät.

Responsive Design erfordert daher sowohl ein konzeptionelles Umdenken des Gestalters als auch eine veränderte Herangehensweise. Der grafische Aufbau einer responsiv gestalteten Webseite erfolgt dabei nach den Anforderungen des jeweiligen Geräts, mit dem sie betrachtet wird, und berücksichtigt zum Beispiel die Größe des Geräts, seine Bildschirmauflösung, Hoch- (Portrait) oder Querformat (Landcape) sowie Eingabemöglichkeiten wie Tastatur, Sprachsteuerung, Mausklick oder Gestensteuerung. Technische Basis dafür sind die Webstandards HTML5, CSS3 (Media Queries) und JavaScript.

Dieses Designsystem ist aufgrund der zunehmenden Anzahl mobiler Endgeräte entstanden und ermöglicht uns, eine optimale User Experience und die Konsistenz eines Markenauftritts auf alle Bildschirmgrößen zu übersetzen. Obwohl native Apps auf den Geräten häufig flüssiger laufen als Web Apps und einen freieren Umgang mit dem Interface Design erlauben, ist Responsive Design meist die bessere Lösung, wenn man Kosten und Nutzen abwägt. Ein weiterer Vorteil ist, dass man lediglich eine einzige Version einer Applikation oder Website aufsetzen muss. Langfristig spart man dadurch auch Zeit bei der Pflege von Inhalten und der technischen Wartung.

mehr

Website erstellen, Webdesign Inspiration, Screendesign, Modernes Webdesign, Responsive Webdesign, SapientNitro, 1und1

Webdesign heute – standardisiert oder individuell?

Fast jeder kann heute mittels Design-Templates und Instant-Site-Buildern eine eigene responsive Website erstellen. Was bedeutet das für die Webdesign-Profis? mehr

UX Design, UI Design, Website Prototyping, Webdesign, Webdesigner, Entwickler, Responsive Webdesign

Goldstandards im User Experience Design

Noch immer lösen viele Websites und Apps einfach nur Frust aus. In unserem eDossier erläutern User-Experience-Experten die Dos und Don’ts im UX Design. mehr

Webdesign, Trends, Google, Mobile, SEO, Template, Typografie, Freelancer, Webdesigner, Entwickler

Die neue PAGE ist da! Mit den Dos & Don’ts fürs Webdesign 2017

In dieser Ausgabe geht’s um die Zukunft des Webdesigns. Wie hauchen wir ihm angesichts von Themes & Templates, SEO-Anforderungen und Mobile First die nötige Individualität ein?
mehr

Welche Responsive-Strategie für welches Projekt?

7 Anhaltspunkte für die richtige Strategie …

mehr

Anzeige

Modulare Gestaltung – neue Designansätze für komplexe Webprojekte

Atomic Design, Micro-UX, Algorithmic Design, Aggregator Apps … mehr

Pick Me Up: Mit Typo spielen auf schicker Website

Zum siebten Mal findet das britische Graphic Arts Festival im April statt – und dessen Website stimmt mit einem Typo-Spiel auf das Event ein. mehr

Adieu, Webdesign!

Lars Richter war lange Jahre als Webdesigner tätig. Damit ist jetzt Schluss. Im PAGE-Interview erklärt er, warum.

mehr

Websites für große Displays gestalten

Upwardly-Responsive-Tutorial für Flexbox und Bootstrap

mehr

Anzeige

Parallax Scrolling – Basics und Projekte

Erfahren Sie im PAGE eDossier »Parallax Scrolling – Basics, Cases, Tutorials« hilfreiche Tipps zum Thema Bewegungsparallaxen.

mehr

Responsive Webdesign Tutorials

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

mehr

Wie bringt man 22.000 Detailseiten auf einer Website unter?

22.000 Detailseiten auf eine übersichtliche und emotionale Website herunter gebrochen: Für die Deutsche Weinwirtschaft stemmte Heine/Lenz/Zizka ein riesiges Projekt. Welche Lösungen hat das Designbüro gefunden? mehr

Web Fonts für Kreative

Alles rund um Web Fonts und App Fonts …

mehr

Anzeige

Website, Webdesign, Relaunch, comma

superReal gestaltet Relaunch für Fashionlabel

Neuer Onlineshop von »comma« feiert Grand New-Opening.

mehr

Website Relaunch von Grafik Art Label »Stereohype«

Easy to browse und responsive – auf dieser Website finden 1000 Buttons und viele andere Designprodukte ein angemessenes Plätzchen.

mehr

Schnell schicke Mockups erstellen

Schön und praktisch: die Mac-App Scenery für Mockup-Templates mehr

Templates für responsives Mail-Design

Welche Templates eignen sich am besten für eine responsive E-Mail-Gestaltung?

mehr

Anzeige

Tipps und Tricks für erfolgreiche Newsletter

Wir geben Tipps für erfolgreiche E-Mail-Newsletter.

mehr

App Design: Die Berliner Mauer

Responsive Webdesign und Parallax Scrolling: Eine responsive HTML5-Web App für Smartphone, Tablet und PC, mit der die Geschichte der Berliner Mauer aufgerollt wird, erstellte die Digitalagentur Moccu im Auftrag des Rundfunks Berlin-Brandenburg.

mehr