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.