Vier Wege zur Implementierung von Responsive Webdesign

Veröffentlicht in: Webentwicklung, am: | 3 Comments |
Dieser Artikel ist 10 Jahre alt und möglicherweise nicht mehr aktuell.

Wenn in Sachen Internet von Trends gesprochen wird, haben diese meist eine kurze Halbwertzeit. Eines ist jedoch sicher, das Internet wird mobiler und immer mehr User gehen wie selbstverständlich davon aus, dass Websites auch in der Mobilanwendung optimal dargestellt werden und auch funktional sind.

Hier setzt das so genannte Responsive oder Adaptive Webdesign an. Derzeit sind rund 12 % der 100.000 meist besuchten Seiten adaptiv umgesetzt.

Responsive Websites

Responsive Websites

 

IT-Experten gehen davon aus, dass sich die Zahl der Responsive Websites in Zukunft weiter erhöhen wird. Da es auch immer mehr Unternehmen sind, die entweder bereits bestehende Websites dahingehend umstellen oder neue Websites direkt responsive gestalten, haben sich vier Wege dorthin herauskristallisiert.

  • 1. Adaptive Modernisierung.
  • 2. Adaptive mobile Websites.
  • 3. Adaptive Design ursprünglich für mobile Geräte.
  • 4. Phasen-Strategie.

Derzeit sind rund 12 % der 100.000 meist besuchten Seiten adaptiv umgesetzt. Die Zahl der Responsive Websites wird sich in Zukunft weiter erhöhen

1. Adaptive Modernisierung

Die Adaptive Modernisierung baut auf einer bereits vorhandenen Website auf und verändert sie adaptiv für eine bessere Funktionalität auf mobilen Endgeräten.

Adaptive Modernisierung von Websites

Adaptive Modernisierung von Websites. Bildquelle: habrahabr.ru/company/UXDepot/

 

Dabei ist es, insbesondere für die kommerziellen Seiten sehr wichtig, dass nicht alle Bestandteile der Site neu gebaut werden müssen (und können), sondern die Site angepasst wird. Für die meisten Unternehmen ist die adaptive Modernisierung eine optimale Vorgehensweise für die Webseitenanpassung für mobile Geräte.

Vorteile:
– Ein wirklicher Vorteil der adaptiven Modernisierung ist die zeitlich gesehen relativ schnelle Umsetzung der Maßnahmen. Ein Teil der Strategie beinhaltet das einfache Hinzufügen von responsive.css in die Website. Trotz dieser eher groben Maßnahmen, stellt sie für viele Seitenbetreiber aber eine gute Möglichkeit dar.

– User wird nicht verwirrt. Leser und Abonnenten einer Website gewöhnen sich an das existierende Design und machen sich damit vertraut. Eine responsive Modernisierung der Website macht die User Experience einfach besser, ohne etwas kardinal zu ändern.

– Man kann sagen, es lauern weniger Gefahren bei einer adaptiven Modernisierung. Grün bleibt grün, rund bleibt rund. Die adaptive Modernisieren ist daher für viele Unternehmen der schnellste und praktikabelste Weg.

Nachteile:
– Die Nachteile der nachträglichen Modernisierung sind als eher gering einzustufen. Es kommt immer wieder vor, dass bestimmte Elemente des Layouts nicht vollständig in das adaptive Webdesign übertragen werden und nachträglich angepasst werden müssen.

– Ein Webdesign, das ursprünglich nur für PC-Anwendungen gedacht war, kann im Laufe der Zeit viele Bestandteile angesammelt haben, die ebenfalls im adaptiven Design nicht umgesetzt werden können. Das betrifft insbesondere alte oder unsauber erstellte Websites.

– Die ausschließlich für PCs entworfene Websites beinhalten ganz häufig sehr viel unnötiger Inhalte und Datenmüll, welcher jahrelang angehäuft wurde. Die meisten Probleme mit Inhalt werden bei Responsive Modernisierung aus Natur der Sache heraus nicht berücksichtigt.

– Betrachtet man die Möglichkeiten einer adaptiven Modernisierung, muss man immer auch sehen, dass sie nicht alles umgesetzt werden kann, was bei einer neu im Responsive Design aufbauten Website möglich ist. Der Handlungsspielraum ist begrenzter.

Websites beinhalten ganz häufig sehr viel unnötiger Inhalte und Datenmüll, welcher jahrelang angehäuft wurde

2. Adaptive mobilen Websites

Adaptive Websites haben ein eigenes Website-Format, bei dem vor dem eigentlichen Domainnamen ein „m.“ im eigentlichen Sinne der Subdomain vorangestellt ist. Die Möglichkeit, eine extra angepasste mobile Anwendung auf einer Subdomain laufen zu lassen, nutzen beispielsweise Online-Ausgaben vieler bekannter Zeitschriften.

Adaptives Webdesign

Adaptives Webdesign

 

Schaut man sich bei den Großen der Branche um, findet man Responsive Webdesign in den Subdomains von Focus, The BBC, The Guardian und anderer. So können auch in Zukunft die besten adaptiven Inhalte und angepasste Techniken hinzugefügt werden.

Vorteile:
Geringeres Risiko
Viele Unternehmen sehen ein geringeres Risiko in der Variante, die eigene, bestehende Website so zu belassen, wie sie ist und zusätzlich eine zweite Website in Responsive Design zu realisieren. Beide Websites laufen dann unbeeinflusst voneinander und bieten dem Betreiber weiter die Möglichkeit beide besser und unabhängiger, jede für sich zu beurteilen. Viele Unternehmen sehen definitiv weniger Risiko in dieser Art des mobilen Testballons.

Neuland betreten und Erfahrungswerte sammeln
Auch Webdesigner ziehen entsprechende Schlüsse aus Responsive Design. Seitenbetreiber sehen auch, dass bestimmte Zielgruppen sich weg vom heimischen PC in Richtung Mobilanwendungen bewegen.

Überflüssiges entfernen
Ein weiterer Aspekt, der immer wieder angeführt wird, ist der, dass Inhalte auf ihre Wichtigkeit überprüft werden. Werden bisherige Informationen in der Mobilanwendung überhaupt noch benötigt?

Nachteile:
Die Nachteile einer adaptiven mobilen Website ergeben sich aus der Natur der Sache und sind meistens technischer Art. Eine mobile Subdomain ist und bleibt für immer ein Ableger. Probleme mit Umleitungen, Content-Management-System, Duplicate Content und anderen Bereichen sind unvermeidlich.

Weitere Informationen zur Wahl eines CMS:
Auswahl des richtigen CMS
Kommerzielle CMS
Open Source CMS

Viele solcher mobilen Ableger haben die Aufgabe, die Hauptseite von der mobilen Trafficlast zu befreien und bleiben für immer eine temporäre Lösung. Für viele Unternehmen gestaltet sich der Gang ins mobile Webzeitalter schwieriger als gedacht. Diesbezügliche Projekt werden angedacht und kurze Zeit später vertagt. Chancen werden erst gar nicht wahrgenommen.

Beim Design für die kleinen Bildschirme, sollte immer auch bedacht werden, dass sich in Sachen Bildschirmgröße und Auflösung sehr schnelle Veränderungen ergeben. Daher sollte das Design für die sehr kleinen Bildschirme so ausgewählt werden, dass es auch auf größeren Displays stimmig ist.

3. Adaptive Design ursprünglich für mobile Geräte. Mobile first

„Mobile First“ ist das Prinzip zuerst eine Responsive Website für kleinere Bildschirme und dann auf Basis der adaptiven Website die konventionelle zu erstellen. Dieses Vorgehen ist eine gute Möglichkeit für neue Webpräsenzen an den Start zu gehen.

Mobile first

Mobile first

 

Als Vater dieser Methode gilt der amerikanische Webdesigner Luke Wroblewski, der diesen Ansatz bereits 2009 vorgestellt und 2011 ein Buch dazu veröffentlicht hat, welches entsprechend „Mobile First“ heißt.

„Mobile-first“ Sites setzen ganz auf das Zugpferd Mobilanwendung, ist ganz klar. Aus dieser „umgekehrten“ Herangehensweise, können sich aber auch Vor- und Nachteile ergeben.

„Mobile First“: kleinere Bildschirme zuerst

Vorteile:
Die Arbeiten am Webauftritt gehen direkt in die richtige Richtung. Die Entwicklung beschränkt sich auf wenige, aber effiziente Layouts, die auch auf einem kleinen Display funktionieren. Entwickler machen sich keine (oder wenige) Sorgen bezüglich älterer Browser, veralteter Betriebssysteme, Bugs etc.

Bei „Mobile First“ sind die Entwickler in der Lage Probleme die sonst entstehen könnten schon bei der Umsetzung vorausschauend zu vermeiden.
Entwicklung in erster Linie für mobile Geräte, schafft eine solide Grundlage für ein zukunftsorientiertes Design, welches als Grundlage für zukünftiges Wachstum und Veränderung dient.

Nachteile:
Eine Website von Anfang an in Responsive Design zu erstellen, braucht seine Zeit und stellt sich für manche Unternehmen, je nach Art der Site, mal mehr, mal weniger kompliziert dar.

Was man jedoch vermehrt feststellen kann, ist ein Bewusstseinswandel und die Erkenntnis, dass im mobilen Internet die Zukunft liegen könnte. Noch tun sich die Unternehmen schwer auf ihrem Weg ins mobile Internetzeitalter.

Organisatorische Schwierigkeiten können dadurch entstehen, dass sich Gedanken, Pläne und Entwürfe der „Mobile First“-Websites beim Konzipieren nur schwer präsentieren lassen.

Jede Neugestaltung schafft Bereiche, die für User ungewohnt sein können und noch nicht so selbstverständlich angenommen werden. Hier gilt einmal mehr die Devise, die Besucher der Site nicht zu sehr mit Neuerungen zu konfrontieren.

4. Strategie der kleinen Schritte

Hat sich ein Webseitenbetreiber entschlossen den Weg ins mobile Internet zu bestreiten und seine Webpräsenz responsive zu gestalten, kann das auch in kleinen Schritten realisiert werden. Dabei wird Seite für Seite adaptiv gemacht. Häufig beginnt man dabei mit der Startseite.

Firmen wie Microsoft starteten mit adaptiven Schlüsselseiten, dabei blieben die meisten Unterseiten doch nicht responsive. Dieses wurde dann jedoch fortgeführt. Dabei hat es sich bewährt die Seiten als erstes zu nehmen, die für den Seitenbetreiber am wichtigsten erscheinen.

Adaptive Websites. Kleine Schritte

Adaptive Websites. Kleine Schritte

 

Vorteile:
Bei der schrittweisen Umsetzung hin zu den adaptiven Seiten, liegt ein Vorteil darin, dass diese kleinteiligen Schritte kleinere Fehler besser auffangen, die dann folgenden Seiten vermieden werden können. Man konzentriert sich auf einige, wenige Kernseiten.

Ein weiterer Vorteil der wenigen Kernseiten ist der, dass direkter der Erfolg überprüft und Risiken besser eingeschätzt werden können.

Nachteile:
Mangelnde Einheitlichkeit. Nur ein Klick reicht, um von der neuen, schönen, adaptiven Seitenversion zur alten und hässlichen zu gelangen. Das ist schlecht in Bezug auf Homogenität, da Nutzer das Unternehmen und die Unternehmenswebsite als eine homogene Marke und nicht als Sammlung verschiedener Themenbereiche und Schwerpunkte betrachten.

Sehr häufig fehlt ein fester Zeitplan bei solchen Projekten. Man fängt engagiert an, aber die Realisierung gerät, je nach Unternehmenskommunikationsart auf dem halben Weg ins Stocken.

Fazit
So vielseitig die Unternehmen auch sind, so unterschiedlich können auch die unternehmenseigenen Strategien bei der Umsetzung einer adaptiven Website sein. Dabei gibt es kein richtig und kein falsch, Patentrezepte schon mal gar nicht. Diese vier Wege zum Responsive Design verstehen sich also als Anregung bei Projektbeginn und der Überprüfung, wie sehr das eigene Budget und die Organisationsstruktur geeignet sind.

Über den Autor:
Foto von Vitaliy Malykin Vitaliy Malykin CEO von Design4u Köln Tel.: +49 2219753416 E-Mail: webmaster@design4u.org Websites: , , Wikipedia
Vitaliy Malykin (Dipl.-Kfm.) ist seit 2005 in den Bereichen Webentwicklung, Online Marketing, SEO, SEM und SMO unterwegs. Zu seinen Fähigkeiten und Kenntnissen zählen u. a. Suchmaschinenoptimierung, Webentwicklung, Webdesign, WordPress Development, Storytelling, Erstellung und Optimierung von Longreads und conversionsbasierter Landing Pages, Growth Hacking, aber auch Kommunikation, Führung von remote Entwickler Teams, Unternehmensführung, Beratung und Business Development. Malykin realisierte diverse IT-Projekte, plante, implementierte und setzte SEO Strategien und Maßnahmen für mehrere bekannte Unternehmen in Deutschland, Europa, Russland und der Welt um.
Gute Beiträge sind es wert geteilt zu werden!

Hinterlasse als Erster einen Kommentar

Name*
Email*

Kommentar