Responsive Design Whitepaper
0 gefällt mir840 aufrufe
Das Dokument erläutert die Bedeutung und Vorteile von responsive Webdesign, das Webseiten an verschiedene Bildschirmgrößen anpasst, um ein optimales Nutzungserlebnis für mobile Endgeräte zu bieten. Es wird erklärt, dass responsive Designs die gleiche HTML-Grundlage nutzen, aber unterschiedliche Layouts entsprechend der Geräteeigenschaften bereitstellen, wodurch die Lesbarkeit und Benutzerfreundlichkeit verbessert wird. Praktische Beispiele und technische Lösungen verdeutlichen, wie responsive Webdesign implementiert werden kann, um die Pflege und Zukunftssicherheit von Websites zu gewährleisten.
Responsive Design Whitepaper
- 1. © schalk&friends – agentur für neue medien gmbh 1024x768, 1280x1024 oder Responsive Design? Sagen Ihnen die obigen Zahlenkombinationen etwas? Diese Zahlen sind die derzeit gängigen Bild- schirmauflösungen, nach denen sich das Layout von Websites orientiert. Diese Bildschirmauf- lösungen gelten als "Best Practice"-Angabe zur Optimierung von Websites für Desktop-Bildschirme. Status Quo Immer mehr Menschen surfen mobil mit einem Smartphone oder Tablet im Netz. Durch die immer stärkere Nutzung von mobilen Endgeräten kommen bereits seit einiger Zeit zusätzliche Bildschirm- auflösungen ins Spiel. Wiederum gemes- sen an der reinen Verbreitung sollten auch diese Endgeräte mit ihrem jeweili- gen Nutzungserlebnis unterstützt werden. Kann bei den anfangs genannten Bild- schirmauflösungen ein gemeinsamer Nenner in Form eines Bereichs innerhalb der Website definiert werden, der auch mit minimalem horizontalen Scrollen sichtbar ist, wird es bei der zusätzlichen Berücksichtigung gängiger Smartphones schwierig. 320x480 und 1024x768 bieten wenig Fläche für einen gemeinsam definierten Content-Bereich. Eine neue konzeptionelle und entwicklungstechnische Heran- gehensweise schafft Lösungen: Das Responsive Design. Definition Responsive Webdesign Responsive Webdesign könnte ziemlich treffend mit reagierenden Websites übersetzt werden und beschreibt eine konzeptionelle und entwicklungs-technische Herange- hensweise an die Produktion von Websites. Responsive Websites "reagieren" auf die Bildschirmgröße des genutzten Endgeräts und liefern dem Besucher eine optimierte Variante. Ein Smartphone-Nutzer muss dadurch nicht mehr zuerst mit zwei Fingern den Seiteninhalt zoomen, sondern erhält direkt eine lesbare Variante der Website.
- 2. © schalk&friends – agentur für neue medien gmbh Seite 2 von 2 Dabei wird immer dieselbe HTML-Grundlage einer Website genutzt und nur das Layout entsprechend den Geräte-Anforderungen optimiert ausgeliefert. Obwohl das Layout der Website auf einem klassischen Desk- top-Rechner anders aussieht als auf dem Smartphone, handelt es sich um die identische Seite. Möglich machen dies neue Technologien auf Basis von HTML5 und CSS3 die entsprechend der Bildschirmauf- lösungen unterschiedliche Layout-Variationen ausliefern. Praxisbeispiel schalk&friends: ADDISON Anhand der Website www.addison.de können Sie eine mittels Responsive Design umgesetzte Seite in der Praxis testen. Rufen Sie dazu die Seite auf und ziehen Sie das Browserfenster schmaler. Sie sehen, wie sich Struktur der Inhalte und Layout ändern und an die Bildschirmbreite anpassen. Vorteile von Responsive Webdesign Vor allem Nutzer von mobilen Endgeräten profitie- ren von entsprechend optimierten Varianten einer Website. Der Einsatz von Responsive Design be- deutet für diese Zielgruppe eine gesteigerte Lesbarkeit und vor allen Dingen auch eine Berücksichtigung des Nutzungskontext, mit dem das Gerät ver- wendet wird. Dazu zählt auch die unterschiedliche Nutzung von Touch-Geräten (Smartphone, Tablets) und Maus oder Touchpad, auf die entsprechend optimiert werden kann. Sämtliche Layoutvariationen nutzen die identische HTML-Grundlage und vor allem den identischen Content. Eine spezielle mobile Version mit ei- genständigen Templates ist nicht nötig und minimiert den Pflegeaufwand. Neue Endgeräte können durch Integration einer neuen Layout-Variante sehr leicht unterstützt wer- den bzw. profitieren eventuell automatisch von bereits bestehenden Varianten. Ihre Website wird geräteunabhängig und ist zukunftssicher. Technische Lösung Ein Basis-Code und -Content für alle Geräte Inhalte einmalig in einem CMS Ausgabe in einem Design – aber in vielen Layouts Zukunftsfähig: Einfache Erweiterung für weitere separater Seiten und Endgeräte Einheitliche Markendarstellung über alle digitalen Kanäle hinweg Ihr Ansprechpartner Volker Jakob, Senior Consultant, Lindwurmstrasse 124, 80337 München, Telefon: +49-89-442358-26