TRINIDAT-WIKI
Responsive Webanwendung
Warum die Optimierung für mobile Geräte immer wichtiger wird
Mobile first
Die mobile Internetnutzung wird zum Standard. 55 Prozent aller Seitenaufrufe wurden 2020 in Europa per Smartphone oder Tablet getätigt, in Asien waren es sogar 62 Prozent. Websites und moderne Webanwendungen müssen daher vor allem auf mobilen Endgeräten überzeugen. Der Schlüssel dafür ist Responsive Design. Es garantiert die automatische Anpassung der Webinhalte an die Bildschirmgröße. Responsive Design ist damit die Voraussetzung für die Benutzerfreundlichkeit einer responsiven Webanwendung und entscheidend für eine positive User Experience. Nur wer sich sofort von einer Seite angesprochen fühlt und einfach durch eine Anwendung geleitet wird, bleibt bei der Stange.
Eine responsive Webanwendung stellt auch aus Betreibersicht den größten Nutzen dar. Die einmal entwickelte Webanwendung funktioniert auf Desktop-Systemen ebenso wie auf mobilen Geräten. Die zusätzliche Programmierung einer App ist nicht mehr nötig. Das reduziert den Aufwand für die Anpassung auf verschiedene Endgeräte erheblich. Regelmäßige Software-Updates wie bei nativen Apps üblich, entfallen. Aktualisierungen an der Webanwendung erfolgen zentral über den Server.
Wie funktioniert Responsive Design?
Egal auf welchem Gerät eine Webanwendung geöffnet wird, Inhalt und Aufbau sind immer an die jeweilige Bildschirmauflösung angepasst. Das ist das Prinzip des Responsive Design. Dabei spielt es keine Rolle, ob es sich um ein Tablet oder ein Smartphone handelt. Auch die Größe und das Format haben auf die Qualität der Darstellung keinen Einfluss. Die responsive Webanwendung passt sich automatisch an Hoch- oder Querformat an – unabhängig davon, ob das Display eine Größe von 4,8 oder 7,6 Zoll hat. Der Begriff des Responsive Designs wurde 2010 erstmals von dem amerikanischen Webdesigner Ethan Marcotte verwendet. Zu diesem Zeitpunkt nutzten die meisten Menschen das Internet entweder vom stationären PC oder vom Laptop aus.
Dementsprechend starr war auch das Webdesign. Wer eine Website über das Smartphone aufrufen wollte, kämpfte mit angeschnittenen Bildern, schlecht lesbaren Texten und vielen weißen Flecken auf der Seite. Der von Marcotte geprägte Begriff der „reagierenden Gestaltung“ bedeutete daher einen neuen Ansatz und stellte die mobile Nutzung in den Vordergrund.
Neue Webanwendungen oder Relaunches bestehender Software werden daher häufig auf die mobile Nutzung ausgelegt. Flexible Gestaltungsraster (Grids), flexible Inhalte und relative statt fixe Pixelwerte garantieren eine bestmögliche Bildauflösung. Mehr Informationen finden Sie im WIKI-Beitrag „Vorteile von individuell programmierten Webanwendungen“
Was sind die Vorteile einer responsiven Webanwendung?
Bleiben oder gehen? User entscheiden innerhalb von wenigen Sekunden, ob sie auf einer aufgerufenen Seite bleiben oder nicht. Für den ersten Eindruck ist die Usability entscheidend. Die Voraussetzung dazu ist responsives Webdesign.
Eine positive User Experience ist aus Anbieterseite zunächst einmal eine technische Herangehensweise. Denn je intuitiver und übersichtlicher eine Webanwendung angelegt ist, umso zufriedener sind die User. Bei Webanwendungen, bei denen es auf die Interaktion ankommt, ist responsives Design besonders wichtig. Möglichst einfach und logisch lautet hier die Devise.
Responsive Webdesign: technologische Grundlagen
Die Grundlage für Responsive Webdesign bildet eine Kombination aus HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets). HTML ist die Standardauszeichnungssprache, die Websites eine Struktur gibt. Über den HTML-Code werden beispielsweise Absätze, Textbausteine und Grafiken festgelegt. Das Design der Website wird über CSS erstellt. Die Stylesheet-Sprache definiert das Layout und das Aussehen der HTML-Elemente.
Damit sich die Website automatisch an das jeweilige Endgerät anpasst, greift sie auf sogenannte Medienanfragen (Media Queries) zurück, die ein grundlegender Teil von CSS3 sind. Diese werden in den Website-Code integriert und ermitteln Faktoren wie die Bildschirmgröße und Auflösung. Sie steuern damit die Ausgabe der Website beim User.
Dabei gibt es definierte Grenzen, die auch Breakpoints genannt werden. Diese Pixelwerte geben an, ab welcher Grenze eine neue Layoutansicht gilt. Die meisten in einer Media Query definierten Breakpoints orientieren sich an den gängigen Größen von Endgeräten und haben 480, 800, 1024 und 1280 Pixel.
Flexible Grids arbeiten dabei mit relativen Werten, die Inhalte bei einer veränderten Anzeigefläche automatisch prozentual angleichen. Das funktioniert, indem das flexible Raster die Größe der Inhalte auf die Anzeigefläche herunter rechnet. Der Code wird dazu in Relation gesetzt und der Browser visualisiert dies.
User Experience und Barrierefreiheit
Was ist nötig, um möglichst vielen Nutzern den Zugang zu einer Seite so einfach und angenehm wie möglich zu machen? Geht es um User Experience, taucht immer häufiger der Begriff der Barrierefreiheit auf. Dabei geht es darum, Internetangebote technisch und gestalterisch so umzusetzen, dass sie von allen Menschen genutzt werden können und zwar unabhängig von persönlichen Einschränkungen und technischen Voraussetzungen. Auch hier kommt also das Responsive Design ins Spiel. Dabei gilt: ein barrierefreies Webdesign macht die mobile Internetnutzung grundsätzlich angenehmer, wie diese Beispiele zeigen:
Kontraste:
Menschen mit Seheinschränkungen sind auf gute Kontraste angewiesen. Von klaren Farben und Grafikelementen profitieren User aber auch, wenn sie ihr Smartphone im Dunklen, im Freien oder im Blendlicht nutzen.
Untertitel bei Videos:
Sie sind oft eine praktische Alternative zum Ton, z.B. in einer lauten Umgebung oder wenn man sich ein Video in der Öffentlichkeit ansieht. Websites, die ihre Videos immer mit Untertitel versehen, bieten also deutlich mehr Service.
Seitenstruktur:
Wenige Menüpunkte, eine eindeutige Navigation und eine gute Textstrukturierung geben Orientierung. Sie liefern aber auch einen schnellen Überblick und sind somit eine erste positive User Experience.
Blinde Menschen nutzen auf Websites Screenreader. Diese Software liest die Bildschirmdarstellung vor oder gibt sie taktil über eine Braillezeile wieder. Die Software kann allerdings keine Bilder erkennen oder eine Grafik in Wort oder Schrift „übersetzen“. Dafür ist ein Alternativ-Text nötig, der im CMS der Website ausgefüllt werden muss und auf der Website selbst nicht sichtbar ist. Dieser Alt-Text beschreibt das Bild und wirkt sich gleichzeitig positiv auf die Suchmaschinenoptimierung aus. Denn das Bild kann von Google jetzt auch gelesen werden.
Sie haben Fragen?
Wir haben die Antworten!
Erfahren Sie mehr über die die Vorteile einer responsiven Webanwendung. Unverbindlich und kostenfrei.
Responsive Webanwendung erstellen lassen
Jeder Websitebetreiber ist auch ein privater Nutzer und verfügt daher über unterschiedliche User Experiences. Die Frage wie responsiv der eigene Webauftritt ist, liegt daher nahe. Der einfachste Weg, um die Benutzerfreundlichkeit von Websites und Webanwendungen zu checken, ist der Aufruf mit verschiedenen Endgeräten. Die Seite bzw. Anwendung ist optimiert, wenn bei allen Mobilgeräten, Laptops und Desktop-PCs alle Inhalte angemessen skaliert werden und lesbar sind. Ist das nicht der Fall ist ein Relaunch oder die Erstellung einer neuen responsiven Website oder Webanwendung sinnvoll.
Flexibilität ist dabei die wichtigste Layoutanforderung. Neben flexiblen Layout-Grids für das Raster gehören dazu flexible Schriftgrößen und flexible Bildgrößen. So können Schriften in prozentualen Größen beliebig angepasst werden. Das macht eine mobile Ansicht komfortabel. Bei Bildgrößen ist eine Skalierung besonders sinnvoll. Da Endgeräte unterschiedliche Anforderungen haben, kann das Laden großer Bilddateien sehr langwierig sein. Der Frust bei Usern ist vorprogrammiert. Vermeiden lässt sich das, wenn Bilder von Anfang an in unterschiedlichen Größen angelegt werden. Mit HTML5-Technologie und CSS3 Media Queries wird automatisch eine passende Variante für das jeweilige Endgerät ausgewählt.
Flexibilität ist daher der größte Trumpf des Responsive Design. Es passt perfekt zu einer digitalen Welt, die sich ständig weiterentwickelt und dabei stetig neue Endgeräte hervorbringt. Eine einmal optimierte Webanwendung kann sich dank der relativen Werte an jede beliebige Bildschirmgröße anpassen. Dabei spielt es keine Rolle, ob die Displays der Smartphones weiterhin immer größer werden oder ob sich der Trend irgendwann umkehrt. Responsive Webdesign liefert immer die bestmögliche Seitenansicht. Beste Voraussetzungen also für eine positive User Experience.
Benötigt Ihre Webanwendung ein responsives Design?
Möchten Sie mehr über das Thema Responsive Webdesign erfahren? Rufen Sie uns gerne an oder schreiben Sie uns eine E-Mail für ein kostenloses und unverbindliches Beratungsgespräch.