made in nature TYPO3 Agentur - Hilfsnavigation:

Übersicht:

Responsive Webdesign – Hype oder Revolution?

Mobile Nutzung

Informationen plus Hintergrundwissen über Entwicklungen im modernen Webdesign - für Entscheider und Entwickler.

Die Auswertungen von Zugriffsstatistiken auf Internetseiten und die Analyse von Nutzerverhalten zeigen, dass die Nutzung von mobilen Zugangsgeräten wie Smartphones oder Tablets immer weiter zunimmt. Es wird davon ausgegangen, dass die mobile Nutzung von Internetinhalten den Zugang über „normale“ PCs bald übertreffen wird.

Boom

Smartphones und die handlichen Pads sind bei den Internetusern sehr beliebt und haben einen gewaltigen Boom ausgelöst. Die User sind von den einfachen Bedienelementen und Funktionen der trendigen Apps begeistert.
Logisch, dass sie diese Benutzerfreundlichkeit dann auch als Maßstab für die Bedienung von normalen Internetseiten anlegen. Auf vielen modernen Internetseiten sieht man daher Navigationselemente oder Funktionsbereiche, die denen von Apps ähneln.

Neue Herausforderungen

Für die Gestaltung von Webseiten und Webapplikationen entstehen durch diese Entwicklungen neue Herausforderungen.

Wieso?
Zum Beispiel haben die Bildschirme (im Folgenden Screens genannt) der mobilen Geräte unterschiedliche und zum Teil wesentlich kleinere Größen (Smartphones) als ein normaler Schreibtisch-PC.

Auch die Struktur von mobilen Inhalten, also die Positionierung von Bedienelementen wie zum Beispiel Navigationsbuttons, erfordert neue Herangehensweisen und Gestaltungsgrundlagen. Die oben erwähnte Benutzerfreundlichkeit spielt ebenfalls eine wichtige und zentrale Rolle als neue Herausforderung an das Design von Internetapplikationen.

Gerätespezifisches Webdesign - Wie?

Es wird also immer wichtiger, Inhalte von Internetseiten so aufzubereiten und zur Verfügung zu stellen, dass diese auf allen möglichen Ausgabegeräten optimal angezeigt werden.

Die Frage für zeitgemäßes Webdesign ist also nicht, ob man seine Webseite so gestaltet, sondern wie man es macht. Also welche möglichst nutzerfreundliche und budgetschonende Technologie man dabei einsetzt.

Unter anderem gibt es folgende Möglichkeiten:

Gerätespezifische Versionen: Mobilversion

Es werden für die verschiedenen Geräte bzw. Gerätegruppen wie Smarthones, Tablets oder PC, individuelle Gestaltungsvarianten entwickelt. Auf der mobilen Version der Webseite können dabei auch nur bestimmte Inhalte ausgegeben werden. Man setzt dafür eine Weiche ein, die beim Abruf einer Webseite das Gerät erkennt und dann automatisch die passende Version der Webseite ausgibt.

Als Beispiel können Sie die(se) Webseite von made in nature nehmen.

Zur Mobilversion von made-in-nature.

Der Nachteil bei diesem Vorgehen ist der erhöhte Aufwand für die verschiedenen Versionen der Webseite.

Der klassische Weg: ein festes Design für alle Geräte

Auch das ist weiterhin eine mögliche Variante, da die meisten Mobilgeräte in der Lage sind, Inhalte zu skalieren.

Was heißt das?
Trifft ein Smartphone also auf eine klassische Webseite mit fester Breite und festen Bildgrößen, können diese Inhalte auf den meisten Geräten verkleinert oder gezoomt werden.

Nachteil dieser Variante ist, dass „normale“ Webseiten für mobile Geräte wenig benutzerfreundlich sind. Beispiele: die Navigationselemente sind meistens zu klein, der Text ist zu klein, die Struktur ist zu verschachtelt, etc.. Das kann zur Folge haben, dass der User ständig scrollen muss.

Fazit: Die Zugänglichkeit für mobile Geräte ist eingeschränkt und es macht damit einfach keinen Spaß!

Die moderne Variante: Responsive Design

Was bedeutet Responsive Design bzw. Responsive Webdesign?
Hierbei wird eine einzige Version der Webseite entwickelt, die dann unter Verwendung neuer Webtechnologien für die verschiedenen Ausgabegeräte optimiert wird. Mittels flexibler Techniken können so identische Inhalte in verschiedenen Strukturen, Designs und Größen ausgegeben werden.

Wir haben dabei eine Webseite, die „intelligent“ auf die verschiedenen Ausgabegeräte reagiert. Der Browser bzw. das jeweilige Zugriffsgerät zeigen also immer dieselben Inhalte – nur in maßgeschneiderten Strukturen & Designs. Im weiteren Verlauf des Textes schildern wir ein Beispiel.

Die neuen Webtechnologien für Responsive Design

Die beiden wichtigsten Techniken für Responsive Webdesign heißen: HTML5 und CSS3 und sind Weiterentwicklungen bestehender Techniken zur Strukturierung und zum Layout von Internetseiten.

HTML5 wird sich in vielen Jahren (solange wird das zuständige Konsortium brauchen, um die vollständige Spezifikation als Empfehlung zu veröffentlichen) als kommender Standard für Internetseiten etablieren – das steht heute schon fest. Bisher hat es keinen echten Standard gegeben, daher ist diese Entwicklung ein wichtiger (Fort-)Schritt!

Die neuen Webtechnologien: Mitmachen?

Ja, denn wie im vorherigen Absatz beschrieben, ist HTML5 also viel mehr als nur ein Trend, sondern der kommende Standard für Internetapplikationen.

HTML5 ist auch nicht nur einfach eine Auszeichnungssprache. Man kann es eher als Oberbegriff für eine umfangreiche Sammlung moderner Webtechnologien sehen. Ähnliches gilt für CSS3.

Noch längst sind nicht alle Bestandteile in den Browsern implementiert, aber die modernen Browser unterstützen einen großen Teil der neuen Funktionen von HTML5.

Unsere Antwort auf die eingangs gestellte Frage lautet also: Für Webentwickler und Entscheider gilt ein klares Ja! Es sind definitiv die Techniken der Zukunft und sorgen für eine Revolution im Webdesign.

Viele neue Funktionen von HTML5 und CSS3 – u. a. die, die für Responsive Design genutzt werden – sind heute schon in die modernen Browse implementiert.

Was ist CSS?

Was ist CSS?

CSS ist die Abkürzung für Cascading Style Sheets und eine Stilsprache. Damit kann das Aussehen (Layout) von HTML-Dokumenten/-Elementen angepasst werden. Beispiele: Rahmen, Hintergründe, Farben, Höhen, Breiten, etc. 

Revolution

Die neuen Herausforderungen auf die mobile Nutzung von Internetseiten haben mit der Technik des Responsive Designs eine echte Revolution in Sachen Webdesign ausgelöst.

Aber sie erfordern auch ein Umdenken bei Entwicklern und Kunden. Welche das sind, erläutern wir im Folgenden.

Fluid

Responsive Webdesigns werden meistens als Fluid-Layouts angelegt.

Was passiert, wenn ein Fluid-Layout abgerufen wird:
Desktop-PC oder Laptop: Hier wird die Seite beispielsweise in 960 Pixel Breite angezeigt. Die 960 Pixel Breite sind quasi der ungeschriebene Standard der letzten Jahre gewesen. Im Kopfbereich befinden sich das Logo und darunter ein Kopfbild. Im Hauptbereich der Seiten sieht der User dann drei Spalten mit Navigation, Inhalt und rechter Newsspalte. Zum Abschluss der Seite finden sich die Links für Impressum, etc. Also ein klassisches Layout.

Tablet-PC: Kommt jetzt ein User mit einem Tablet (z. B. iPad) auf die Seite, skaliert sich die Größe automatisch auf 768 (die Maße sind hier nur Beispiel) herunter. Auch die Darstellung der Bilder verändert sich automatisch, indem sie sich auf die neue Breite anpassen.

Smartphone: Hier wird die Breite auf 480 Pixel verkleinert. Das Kopfbild wird entsprechende verkleinert und die drei Inhaltsspalten nebeneinander rutschen quasi untereinander.

Alles das passiert auf derselben HTML-Seite mit identischem Inhalt!

Umdenken

Die beschriebene Technik ist optimal, fortschrittlich und darf auch ruhig als genial bezeichnet werden, erfordert aber Umdenken auf mehreren Ebenen vom Entscheider wie vom Entwickler:

Zum Beispiel sollte eine exakte Positionierung von Elementen auf der Seite vermieden werden. Ebenso ist eine feste Aufteilung der Seite nicht mehr zielführend. Das muss im konzeptionellen und gestalterischen Prozess beim Design von beiden Seiten, also von Kunde und Programmierer, genau berücksichtigt bzw. geplant werden.

Baukasten

Die Entwicklung eines Responsive Webdesigns findet von unten nach oben statt. Das heißt, dass man als Erstes ein Konzept/Erscheinungsbild für die Ausgabe auf einem Smartphone entwirft, dann für das Tablet und dann erst für den Desktop.

Man kann sich das dann wie einen Baukasten vorstellen. Jedes Element der Webseite kann flexibel für die Ausgabegeräte angepasst und positioniert werden. Und das alles mit nur einer einzigen Version der Webseite!

Alte Browser

Es gibt leider noch einige alte und technisch überholte Browser im Einsatz bei vielen Usern. Gerade der Internet-Explorer in den alten Versionen (kleiner als Version 8) steht vielen modernen Techniken im Weg, da er noch stark vertreten ist. Hierfür gibt es beim Responsive Webdesign Alternativtechniken, die die Inhalte für die alten bzw. nicht kompatiblen Browser trotzdem in einem ordentlichen und barrierefreien Erscheinungsbild ausgeben.

Webdesign der Zukunft

Hier ist intensives Umdenken aus Kunden- bzw. Entscheidersicht gefordert. Ganz besonders für Kunden, die bisher davon überzeugt waren, dass Webdesigns auf allen Browsern und Geräten gleich aussehen müssen. Davon muss man sich beim Responsive Webdesign verabschieden.

Ebenso sollte man sich von dem Glauben trennen, Webseiten sollten exakt genauso wie die Printobjekte aussehen. Moderne Webseiten passen sich modernen Ausgabegeräten flexibel an - das ist das Webdesign der Zukunft.

Responsive Webdesign – Mitmachen?

Wer vor der Entscheidung steht, eine mittelgroße bis große Webseite zu entwickeln oder einen modernen Relaunch eines erfolgreichen Internetauftritts durchzuführen, sollte Responsive Webdesign ganz klar in Erwägung ziehen. In Sachen Technik und Stabilität steht dem nichts mehr entgegen. Auch die Unterstützung durch moderne Content Management Systeme wie TYPO3 entwickelt sich sehr schnell. Diese professionellen CMS sind durchaus dafür geeignet.

Es kann in Einzelfällen zeitaufwendiger sein, bestehende große Webseiten in ein Responsive Design zu migrieren, also sie in ein klassisches Layout zu übertragen. Aber wenn man einen Relaunch vorhat, sollte man gleich auf die passende und moderne Technologie setzen.

Für kleine Projekte mit kleinen Budgets steht der Faktor Zeit als Nachteil da. Beim Responsive Design hat man zwar einen niedrigeren Entwicklungsaufwand, da man immer am gleichen HTML-Quelltext arbeitet, aber der konzeptionelle und gestalterische Prozess dauert dafür länger. Und Zeit kostet nun mal Geld.

Infoseiten:
Was kostet TYPO3?
Kriterien & Kalkulationsgrundlagen für Webdesign

Fazit für Entwickler

Den Zug "Responsive Webdesign" sollte/darf man als Gestalter/Berater/Programmierer nicht verpassen. Das Umdenken aus Entwicklersicht wird für viele aber eine große Hürde darstellen. Denn es müssen neue Technologien sowie eine gänzlich andere Herangehensweise erlernt, erfahren und trainiert werden.

Wer diese Veränderungsprozesse aber als Chance wahrnimmt und Motivation am Lernen fortschrittlicher Internettechnologien hat, der kann davon nur profitieren!

Fazit für Entscheider

Der klassische, bisherige Weg des Webdesigns mag in einigen Fällen budgetschonender sein. Als Kunde für Webdesign sollte man aber die mobilen Geräte im Fokus haben, egal, welche Zielgruppe man bedient.

Wer sich von veralteten Technologien trennen kann und sich mit den vielen Vorteilen des Responsive Designs etwas näher beschäftigt, der wird viel Freude und Erfolg damit haben!


Diesen Text haben wir verfasst, damit Sie sich einen ersten Einblick in die Webdesign-Technologie der Zukunft verschaffen können.

Für das Auge
Hier finden Sie zahlreiche Beispiele für Responsive Webdesigns: http://mediaqueri.es

Wir stehen für weitere Informationen und Angebot für Ihr individuelles Responsive Webdesign zur Verfügung und freuen uns auf Ihren Kontakt!

Wir hoffen, diese Informationen waren nutzbar und verständlich!

Hat diese Seite weitergeholfen?
Gibt es Ergänzungen, Korrekturen oder Wünsche für andere Tutorials/Infoseiten?

Kontakt:
made in nature - TYPO3 Agentur
Stefan Grothus
05482 - 925480
 info(at)made-in-nature.de 

Support:

zur Webseite: The TYPO3 Association (englisch)

CO2neutral:

Grafiklogo: Co2 neutrale Webseite, made in nature TYPO3 Agentur ist zertifiziert - Zertifikat anzeigen

Kontakt:

Stefan Grothus
Osnabrücker Str. 24
49545 Tecklenburg

+49 (0)5482 925480
+49 (0)172 2334408

 info(at)made-in-nature.de