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

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

Responsive_Webdesign_Strategie_Projekt

Welche Responsive-Strategie für welches Projekt?

7 Anhaltspunkte für die richtige Strategie …

mehr

Teaserbild_eDossier_Moduale_Gestaltung

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

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

Anzeige

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

pickmeup2

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

Portrait_Bild_Lars_Richter_Webdesigner

Adieu, Webdesign!

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

mehr

TE_151001_upwardly-near-ninjup0

Websites für große Displays gestalten

Upwardly-Responsive-Tutorial für Flexbox und Bootstrap

mehr

Anzeige

Teaserbild_eDossier_Parallax_Scrolling

Parallax Scrolling – Basics und Projekte

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

mehr

Teaserbild_eDossier_Responsive_Webdesign

Responsive Webdesign Tutorials

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

mehr

Website Deutsches Weininstitut

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

content_size_TY_201404_RCLP_Online_Fonts

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

KR_Website_Relaunch_Stereohype_03

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

BI_150411_scenery_app

Schnell schicke Mockups erstellen

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

TE_e_mail_template_tipps_150216

Templates für responsives Mail-Design

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

mehr

Anzeige

TE_Newsletter_Tipps_150215

Tipps und Tricks für erfolgreiche Newsletter

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

mehr

content_size_TE_20141031_Mauer-App

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