Responsive Web Design – Teil 1: Warum RWD?

Da das Internet nicht mehr nur auf einem Screen konsumiert wird, muss Design und Inhalt mit Responsive Web Design entsprechend optimiert dargestellt werden.

Vor beinahe einem Jahr habe ich eine interne Schulung (PulpAcademy) zum Thema Responsive Web Design (RWD) gehalten. Deren Inhalt war damals schon nicht mehr neu (viele sehen diesen Blogpost von A List Apart aus 2010 als Ursprung von RWD), aber dennoch brandaktuell. Das ist er meiner Meinung nach noch immer, da nach wie vor Relaunches von Websites vorgenommen werden, ohne auf die verschiedenen Endgeräte Rücksicht zu nehmen.

Was ist Responsive Web Design?

RWD ist im Wesentlichen ein Webdesign, das sich automatisch jenem Endgerät anpasst, auf dem es angezeigt wird. Dabei werden Elemente unterschiedlich angeordnet, anders dargestellt oder auch aus- bzw. eingeblendet.

Wichtig ist es, die Begriffsdefinition des RWD von jener der „Responsive Website“ zu unterscheiden, da es sich bei dieser um eine Website handelt, die schnell Response liefert – es geht also um Ladezeiten und Programmcode-Optimierung.

Steve_Jobs_presents_iPhone

Mit der Einführung des iPhones wurde Webdesign nachhaltig verändert.

Wieso braucht man Responsive Web Design?

Seit der Einführung des iPhones 2007 oder spätestens seit der Vorstellung des iPads 2010 und dem damit eingeläuteten Siegesfeldzug der Mobile Devices ist klar, dass das WWW nicht mehr nur auf e i n e m Screen konsumiert wird. Das bringt natürlich einige Herausforderungen mit sich:

  • Es muss darauf Rücksicht genommen werden, dass MD im Hoch- und Querformat gehalten werden können.
  • Gerade mit Touch-Screens müssen Devices Finger-Friendly sein, denn sie erlauben kein Mouse-Over.
  • Im Gegenzug können Bildschirme, auf denen Websites angezeigt werden auch riesig und extrem hochauflösend sein.

Doppeltippen ist auch keine Lösung

Smartphones haben üblicherweise die Möglichkeit, durch Doppeltippen einen Inhaltsblock heranzuzoomen, was das Problem der unterschiedlichen Bildschirmgrößen zumindest teilweise löst. Dies ist aber wenig benutzerfreundlich und spätestens beim Scrolling auch nicht mehr das Gelbe vom Ei. Des Weiteren ist die Navigation ein großes Problem bei der Darstellung einer Website auf Smartphones. Mit einem Mauszeiger kann ich relativ einfach auch kleinere Objekte anklicken, die Finger versagen dabei oft.

Lösungsansatz 1: Der kleinste gemeinsame Nenner

Als ich begonnen habe, Websites zu kreieren, war eine Auflösung von 800×600 Standard. Bei der Gründung von Pulpmedia 2005 wurde gerade auf 1024×768 umgestellt. Man nahm dies als die kleinste Auflösung an und entwickelte dafür auch das Design.

rwd-ansatz1-kleinster-gemeinsamer-nenner

Der kleinste gemeinsame Nenner wäre heute das Smartphone, aber bald vielleicht die Smartwatch.

Natürlich gab es auch damals schon Websurfer, die auf Geräten mit hoher Auflösung im Internet unterwegs waren. Für diese Nutzer war eine kleine Website nicht ausgelegt, denn sie wurde hier klein angezeigt, entweder seitlich oder in der Mitte des Screens ausgerichtet.

Lösungsansatz 2: Der Designer-Ansatz

Eventuell tue ich mit dieser Bezeichnung einigen Designern Unrecht, aber de facto ist es leider so, dass viele von ihnen – vor allem, wenn sie aus dem klassischen Design kommen – eine Website für ihren eigenen Screen entwickeln. Wenn das ein 27“ iMac ist, können die Schriften – aufgrund der Kombination Auflösung/Bildschirmgröße – durchaus sehr klein ausfallen.

rwd-ansatz2-der-designer-ansatz

Schöne Designs, die nur auf einem großen, hochauflösenden Device gut aussehen, verlieren auf kleineren Screens viel von ihrem Glanz.

Lösungsansatz 3: Jedem das seine

Eine Zeit lang galt es als die richtige Lösung, eine mobile Version und eine Desktopvariante der Website zu machen. Prominentes Beispiel hierfür ist nach wie vor Facebook, denn auf Smartphones wird m.facebook.com aufgerufen. Wer diesen Blogpost nun aber auf einem Desktop liest und auf den angeführten Link klickt, sieht auch schon das Problem dieses Ansatzes: Weitergeleitete Links führen dazu, dass eine Website als hässlich wahrgenommen wird.

pulpmedia-facebook-page-mobile-auf-desktop

Besonders krass: Die Darstellung von Bildern der mobilen Facebook-Variante, wenn diese auf Desktops betrachtet wird.

Wählt man diese Lösung stellt sich die Frage, ob man nicht auch eine für Tablets optimierte Version der Seite programmiert. Und dann eine für Smart-TVs und eine für das Galaxy Note und und und. Letzten Endes sieht man den Wald vor lauter Bäume nicht mehr.

Lösungsansatz 4: Anpassung

Was uns zur wohl besten Lösung bringt: Responsive Web Design. Hier richtet sich das Design dynamisch nach der verfügbaren Auflösung und stellt den Inhalt entsprechend optimiert dar.

rwd-ansatz4-anpassung

Die dynamische Anpassung an die verschiedenen Devicegrößen und –auflösungen, ist die schönste und effektivste Lösung.

Wie geht die Serie weiter?

Welche Variationen es gibt und wie man das Ganze angeht, werde ich in den nächsten Teilen dieser Serie erläutern.

Newsletter abonnieren

    Du willst mit uns moshen, jammen, rocken? Get in touch: Schieb uns deine Challenge in den Briefkasten und wir melden uns mit einer Lösung!

    Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

    Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

    Danke für deine Nachricht

    Wir freuen uns und melden uns asap. Bis bald.

      Du willst moshen, jammen, rocken? Bist du Pulpie, oder was? Schieb uns deine Mappe durch den Türschlitz!

      Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

      Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

      Danke für deine Bewerbung

      Wir melden uns asap. Vielleicht sogar mit einer Einladung zum Kennenlernen. Frisier dich schon mal. Irokese, wallende Mähne oder Seiten auf null – alles Wurscht. Hauptsache die Chemie stimmt.

        Hallo Brieffreund:in!

        Du möchtest gerne mehr von uns lesen? Melde dich für unseren Newsletter an und schon hast du unser Wort!

        Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

        Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

        Danke für deine Anmeldung

        Um die Anmeldung abzuschließen, klicke bitte auf den Link in der E-Mail, die wir soeben an dich gesendet haben.