Geordnete Anzeige auf allen Endgeräten – Responsive Design macht’s möglich!

Die Usability einer Webseite, die Art und Weise der Funktionssteuerung sowie die Darstellung von Elementen ist ein Grundaspekt in der Web Entwicklung. Stillstand steht den meisten Webseiten nicht gut Gesicht, das lässt sich sogar sprichwörtlich übersetzen, denn nicht jede Webseite wird auf jedem möglichen Endgerät auch in der bewährten Form dargestellt. Bis vor Kurzem waren viele Webseiten noch regelrecht verzerrt, insbesondere solche, die einen hohen Anteil an dynamischen Inhalten hatten. Probleme gab und gibt es etwa bei Captcha-Anzeigen oder alten HTML-Seiten, die noch im Frames arbeiten. Das Zauberwert in diesem Umfeld von Darstellungsfehlern lautet „Responsive Webdesign“.

Zur Web Entwicklung

Wir wollen in den folgenden Absätzen näher darauf eingehen und verdeutlichen, welchen praktischen Nutzen dieser Ansatz tatsächlich bringt.

Der Unterschied zwischen „statisch“ und „dynamisch“

Der Wandel in Bezug auf das Nutzerverhalten bei Online-Angeboten ist deutlich spürbar. Während die Digitalisierung weiter fortschreitet, greifen mmer mehr Endverbraucher über mobile Endgeräte auf Online-Plattformen zu. Dort, wo nicht explizit mittels App für Android oder iOS gearbeitet wird, übernehmen spezielle Plattformen den Zugriff über Mobile Web. Das heißt im Klartext, dass ganz andere Anforderungen an die Gestaltung und das Design einer Webseite angelegt werden. Insbesondere führt dies zu umfassenden „Umbaumaßnahmen“, weg vom Adaptive Design und hin zum Responsive Design mit CSS. Adaptive Design bezeichnet dabei die bekannte Form der „statischen“ Webseite, die in diesem Zuge für verzerrte und teilweise nicht nutzbare Webseiten auf mobilen Endgeräten steht. Webseiten auf Basis dessen bleiben statisch, sie passen sich nicht an die jeweilige Browserfenstergröße an. Im Grundsatz gibt es verschiedene Designs für die „klassischen“ Browserfenstergrößen, die mithilfe eines „Fixed Layouts“ optimiert werden.

Im Gegensatz dazu vollzieht sich bei eine Responsive Website eine Anpassung auf die jeweiligen Eigenschaften der Darstellung auf mobilen Endgeräten. Hier wird kein Design in Form eines „Fixed Layouts“ eingebunden, stattdessen basiert dieses Responsive Design auf einem flüssigen Raster. Dies bedeutet, alle wesentlichen Elemente auf der Seite sind in ihrer Größe variabel. Insbesondere Textstrukturen, Bilder und Videos. Möglich wird dies durch eine gezielte Abfrage und den Austausch aller nötigen Informationen zwischen der Responsive Website und dem jeweiligen Endgerät.

Die vorgenannte Abfrage bezieht die Stylesheets mit ein, die dank Media Queries eindeutig zugeordnet werden können. Im Hintergrund existieren also diverse Responsive Designs mit CSS Stylesheets, die auf Abruf zur Anzeige auf dem jeweiligen mobilen Endgerät geladen werden. Die Media Queries sind ab CSS3 implementierbar, wodurch vor allem die klassische Unterscheidung zwischen „screen“ und „print“ durch weitere Eigenschaften erweitert wurde. So kann beispielsweise mittels „orientation:portrait“ eine Einschränkung vorgenommen werden, die Darstellung im Hochformat zu übermitteln.

Wir von evonier software solutions arbeiten nach den Grundsätzen der agilen Softwareprogrammierung. Hierbei finden Elemente des Responsive Design Ansatzes stets Verwendung. Problemlos lassen sich auch bestehende Webanwendungen gemäß dieses Grundsatzes anpassen.

©123rf

Responsive Design Template als Grundlage für Suchmaschinenoptimierung

Vieles im Bereich der Softwareentwicklung ist kein Selbstläufer, sondern notwendige Voraussetzung für einen hohen Qualitätsstandard. Hierbei spielt die direkte Live-Schaltung eine wichtige Rolle, die bei Softwareprogrammierung bzw. individuellen Softwareentwicklung durch evonier software solutions ebenso zum Konzept gehört. Auf diese Weise werden Darstellungsfehler oder Ungereimtheiten in der Funktionalität besonders schnell erkannt und korrigiert. Das ändert aber nichts daran, dass die Konzeptionierung und Realisierung eines Responsive Designs mit komplexen Arbeitsschritten verbunden ist. Je größer eine Webseite ist, desto mehr Schnittstellen müssen bei der Anpassung berücksichtigt werden.

Dieser Aufwand lohnt aber angesichts der Funktionalität einer einmal im Responsive Design vorliegenden Webseite. Die Wartung und nicht zuletzt die Pflege von Seiteninhalten ist danach mit nur wenigen Klicks möglich. Zwangsläufig kommt dies auch Aspekten der Suchmaschinenoptimierung zugute, denn die Vorteile einer responsiv ausgelegten Webseite sind eindeutig.

• Jeder mobile Besucher verweilt durchschnittlich länger auf der Webseite, was positive Effekte auf das Ranking insgesamt nimmt.
• Die Bounce-Rate verringert sich, also der Anteil an „verlorengegangenen“ Besuchern, aufgrund der nun benutzerfreundlich gestalteten Webansicht.
• Die Umsetzung eines Responsive Designs ist aus SEO-Gesichtspunkten sinnvoll, da somit die Optimierung und Pflege einer extra für mobile Endgeräte ausgelegten Webseite entfällt. Rein praktisch gestaltet sich aufgrund der Seitenstruktur und den Problemen, die Mobile-Web-Seiten gegenüber klassischen Desktop-Seiten haben, eine gezielte Besucherführung hin zur Webseite für mobile Endgeräte schwierig.

Weitere Aspekte innerhalb des Themenkomplexes „Responsive Design“

Groß angelegte Untersuchungen geben unabhängig voneinander zu bedenken, dass der Anteil der Besucher über mobile Endgeräte weiter steigen wird. Generell stellet die App Entwicklung für Smartphones und Tablets schon heute einen gewichtigen Anteil am Budget für Softwareprogrammierung. Im Hause evonier software solutions bedeutet dies eine Fokussierung auf interdisziplinäre Ansätze, um für jedes Betriebssystem die nötige Kompetenz zur Entwicklung von Webanwendungen und Co. zu bündeln. Gerade ein Blick in die Zukunft verdeutlicht, weshalb Responsive Design mit Abstand die absolut erste Wahl darstellt.

• Die komplexe Struktur von Webseiten, die nach den Grundsätzen des Responsive Designs erstellt oder angepasst wurden, ermöglicht eine flexible Ausrichtung auch zugunsten zukünftiger Trends. Alle möglichen Zugriffsszenarien werden mit der Anpassung ein und desselben Systems berücksichtigt.
• Relative Größenangaben haben den Vorteil, dass sie eine stufenlose Anpassung an jede Art von Bildschirmdarstellung ermöglichen – auch zwischen den Breakpoints.
• Ein und dieselbe Webseite, die universell gepflegt und für alle möglichen Zugriffsoptionen optimiert ist, stärkt zugleich den Background der hiermit verknüpften Merkmale der Suchmaschinenoptimierung.

Merken

Merken