IT & Technik
Schreibe einen Kommentar

Responsive Webdesign – dynamische Anpassung von Websites an das Endgerät

Responsive Webdesign
Werbung

Responsive Webdesign – schon mal gehört? Dabei geht es um die dynamische Anpassung von Websites an das Endgerät.

Es gibt unterschiedlichste Browser-Varianten und immer mehr User nutzen Smartphones oder Tablet-PCs, daran sollten sich Layout und Navigation der Website oder des Blogs flexibel angleichen.

Und zwar nicht mit mehreren programmierten Varianten derselben Seite, sondern indem sich das Webdesign der jeweiligen Abrufvariante dynamisch anpasst. So bekommt der Leser immer eine funktionierende und gut aussehende Website gezeigt. Egal wo und wie er darauf zugreift!

Daten & Fakten zur Nutzung des Internet

Um sich ein Bild zu machen, wie unterschiedlich die Abrufvarianten durch potentielle Kunden oder Leser sind, hier ein paar Zahlen:

  • Smartphones vs. „normale“ Handys: 51 Prozent aller genutzten Handys in Deutschland waren im 3-Monatsdurchschnitt endend Dezember 2012 Smartphones (Quelle: Digitales Deutschland). Die Chance, dass ein Kunde sich meine Seite mit einem mobilen Endgerät anschaut wird also immer größer.
  • Laut einer Umfrage des Marktforschungsunternehmens Forsa geht schon heute rund ein Drittel der Internet-Nutzer in Deutschland auch mit dem Handy ins Internet. D.h. der Trend zur mobilen Nutzung des Internet geht weiter.
  • Ein Siebtel der Leser des Unternehmerhandbuchs nutzt bereits ein mobiles Endgerät, um die Seite zu betrachten. Heißt für mich, dass hier dringender Handlungsbedarf besteht, will ich nicht den Anschluss und damit Leser verlieren. Auch ich muss mir Gedanken über ein responsive Webdesign (zu Deutsch „reaktionsfähiges Webdesign“) machen und nach einem entsprechenden WordPress-Theme Ausschau halten.
  • Die fünf gängigsten Browser sind: Internet Explorer, Firefox, Google Chrome, Safari von Apple und der norwegische Browser Opera. Jeder dieser Browser wird in den unterschiedlichsten Versionen auf den unterschiedlichsten Bildschirmgrößen genutzt (Quelle: Web-Barometer Bildschirmauflösung). Aussichtslos für jede der möglichen Kombinationen eine eigene Websiteprogrammierung anzulegen.

Key Facts Responsive Webdesign

Responsive Webdesign ist nicht einfach eine auf mobile Endgeräte und unterschiedliche Browsertypen angepasste jeweilige Variante der Homepage. Das wäre viel zu aufwendig, wenn man die Vielzahl der möglichen Endgeräte und Browser bedenkt.

Responsive Webdesign ist ein umfassendes Konzept, dynamisch auf individuelle Anforderungen zu reagieren. Das Frontend reagiert flexibel auf das Gerät, mit dem die Daten abgerufen werden und passt sich automatisch an. D.h. in der Programmierung werden bereits die Variablen für die mögliche Nutzungsvarianten hinterlegt, so dass sich Look & Usability ganz individuell dem Kunden bzw. Leser anpassen. So müssen nicht mehrere Plattformen gepflegt werden, alles ist in einer „Master“-Programmierung enthalten. Das spart sowohl Zeit als auch Kosten, wenn man die Anfangskosten der Neuprogrammierung hinter sich hat.

Technische Basis für responsive Webdesign sind neuere Webstandards wie HTML5 und CSS3 und JavaScript. Mittels sogenannter Media Queries werden die Eigenschaften und Fähigkeiten des Endgeräts abgefragt, mit dem der Besucher auf die Website zugreifen will: Displaygröße & Auflösung? Hoch- oder Querformat des Bildschirms? Eingabemöglichkeiten wie z.B. Tastatur, Maus, Finger und Sprache? Nur so kann sich das Layout an das jeweilige Endgerät anpassen, in dem z.B. Schriftgrößen skaliert und Bilder gedreht werden.

Vorteile einer Webseite mit responsive Webdesign

  • leichte Handhabung, da nur eine Programmierung
  • unabhängig vom Endgerät sowie der Bildschirmauflösung funktionierende Webseite
  • Inhalte (Texte, Bilder) werden problemlos aufgerufen und passen sich flexibel an das jeweilige Endgerät und die genutzte Browservariante an
  • das responsive Frontend strukturiert die Inhalte automatisch passend, der User hat somit stets eine optimale Nutzungserfahrung

Was muss ich bei einem responsive Design beachten?

Wer nicht wie ich einfach ein passendes Standard-Theme nutzen möchte, der sollte sich gut überlegen, wie die Programmierung der Homepage strukturiert sein sollte:

Welche Elemente können auf kleineren Displays nach unten rutschen? Müssen Bilder gedreht werden wegen Hoch- bzw. Querformat der Ausgabe? Welche „unwichtigen“ Elemente werden auf der mobilen Version gar nicht erst angezeigt? Und und und…

Am besten sucht man sich für so eine Neuprogrammierung der Website einen kompetenten Partner wie z.B. die Nürnberger Agentur RSM (Website: http://www.werbeagentur-rsm.de/). In gemeinsamen Workshops können Kundenanforderungen an die Inhalte und technische Anforderungen des neuen responsive Webdesign miteinander harmonisiert werden. Eine Agentur mit Erfahrung in diesem Bereich hilft bei der Priorisierung der Inhalte und der Anpassung des Layouts an die Anforderungen der mobilen Endgeräte. Da kommt man als Kunde in diesem noch recht neuen Feld der Website-Gestaltung sicher mit professioneller Hilfe besser klar.

Fazit

Für einen ersten Eindruck gibt es keine zweite Chance. Und wenn dieser eben auf einem mobilen Endgerät stattfindet und der Webauftritt dafür leider nicht optimiert wurde, dann wird aus einem Interessenten wohl eher kein Kunde oder Leser…

Ob mobile Browser, Netbooks oder Tablet-PCs, die Benutzer verwenden für den Besuch Ihrer Webseiten eine wachsende Palette von Geräten und Browsern. Wer testen möchte, wie die eigene Website auf den unterschiedlichen Endgeräten aussieht: http://ami.responsivedesign.is/ ist da sehr aufschlussreich. Denn abgesehen von schönem Design sollte ich bei der Gestaltung einer Website auch die Nutzungsgewohnheiten meiner Kunden oder Leser antizipieren und auf deren Bedürfnisse eingehen. So haben die User immer eine qualitativ hochwertige Erfahrung, egal wie groß (oder klein) ihre Anzeige ist.

Ich denke, um responsive Webdesign wird wohl bald keine professionell betriebene Website mehr herum kommen. Dies ist mit ein Grund, warum das Unternehmerhandbuch zum 3. Geburtstag am 31.05.2013 ein neues Kleidchen verpasst bekommt. Denn Kleider machen Leute und ich möchte das Unternehmerhandbuch schließlich noch viele Jahre erfolgreich betreiben.

Lasst euch überraschen!

Und hier noch ein paar responsive Webdesign Beispiele.

Foto: http://www.werbeagentur-rsm.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Wenn Du wissen möchtest, welche Daten wir beim Hinterlassen eines Kommentars speichern, schau bitte in unsere Datenschutzerklärung.