Responsive Design oder separate Mobilwebsite

Zusammenfassung der Google Developer Live Session mit Brad Frost. Warum responsive Design vorzuziehen ist und worauf man bei Mobile Websites achten sollte.

Mittlerweile dürfte den meisten klar sein, dass mobile Web auf dem Vormarsch ist und es wichtig ist, Websites mobile accessible zu machen. Sobald man etwas in das Thema eintaucht, stellt man schnell fest, dass es grundsätzlich zwei Möglichkeiten dafür gibt: Eine separate Mobilewebsite (die z.B. unter der Subdomain m.mydomain.com liegt) oder eine Responsive Design Website (das Layout bzw. Design der Website passt sich an die Größe des Screens dynamisch an). Übrigens: dieser Blog ist responsive! Besucher, die dies auf einem Desktop oder Laptop lesen, können zum Test jetzt das Browserfenster kleiner und größer machen und sehen, wie sich das Layout verändert.

Vor kurzem gab es zu diesem Thema bei Google Developers Live eine Session mit Brad Frost – seines Zeichens Webdevelopment Pro und Spezialist für mobile Websites. Das Video ist diesem Blogpost angehängt (oder vielmehr übergestellt). Wem die knapp 70 Minuten jedoch zu lange sind (obwohl sie sehr kurzweilig sind), hier die wesentlichen Inhalte (Die Slides gibts übrigens auch auf Slideshare; um genau zu sein hier).

Auch wenn Responsive Design meist aufwendiger ist als eine separate Website hat sie vor allem zwei große Vorteile:

  • Durch dynamische Anpassung an Auflösungen werden automatisch mehr Devices bedient
  • Die URL von einzelnen Seiten ist die selbe, egal ob die Seite auf einem Tablet, Mobiltelefon oder Desktop aufgerufen wird

Angelehnt an die Maslow’sche Bedürfnispyramide stellt Frost außerdem eine „Hierachy of mobile needs“ auf (siehe Grafik). Webdeveloper und -designer (die beim Responsive Design immer enger zusammenwachsen) sollen sich diese gut einprägen und sich immer erst dann um die nächst höhere Ebene Gedanken machen, wenn die darunter liegende bedient ist.

Anforderungen an responsive Design

  • Zugriff: Inhalte müssen mobil zugänglich gemacht werden. Das klingt zwar selbstverständlich, aber besonders, wenn die mobile Variante einer Website nicht sämtliche Inhalte der „normalen“ Website abdeckt, können Querverlinkungen schnell ins Leere führen
  • Interaktion: Die wichtigste Form der Interaktion ist die Navigation. Bei Mobile Websites scheinen sich hier zwei Versionen heraus zu christallisieren: Akkordeonartige Menüs oder das von Facebook Mobile bekannte „Seitenmenü“.
    Des weiteren sollte man für Scrolling darauf achten, immer nur einen Inhaltsblock anzuzeigen. Versucht man meherere unterschiedliche Inhalte auf eine Seite zu packen, muss der Besucher durch einen Block durchscrollen um zu den Inhalten zu kommen, den er eigentlich aufrufen wollte.
  • Performance: Eine Website sollte in 5 Sekunden aufgebaut sein. Das ist natürlich abhängig von der Geschwindigkeit des jeweiligen Netzwerks, als Faustregel wird deshalb eine maximale Seitengröße von 1MB empfohlen.
  • Optimierung: Frost empfielt eine „Mobile first“ Strategie beim Webdesign. Also anstatt eine Desktop-Seite zu designen und dann zu versuchen, die Elemente in einer mobile Variante unterzubringen, soll man mit der mobilen Version beginnen und die andere Richtung wählen.
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.