Crashkurs in Mobile: Responsive Design und Mobile Seiten mit WordPress

|

[lightgrey_box]
Gastautor Boyan Sabev schreibt in diesem Artikel über die Unterschiede zwischen Responsive Design und Mobilen Websites sowie die Möglichkeiten, die WordPress momentan dazu bietet.
[/lightgrey_box]

Go Mobile oder „go mo“

Desktop Webseiten haben oft versteckte Nachteile für mobile Anwender, die meist nur ersichtlich werden, wenn die Seite auf einem echten Gerät getestet wird. Viele Webmaster neigen dazu, die Anzahl an mobilen Clients sträflich zu unterschätzen. Spätestens nachdem man einen Blick in Google Analytics wagt, wird eines klar: Eine mobile Seite muss her, für die durchschnittlich 10-20 % der Besucher, die über Smartphones und Tablets ins Internet gehen.

5 Herausforderungen im Mobile Web:

  • Klassische DOM Events wie „Klick“ und „Hover“ funktionieren auf mobilen Geräten oft nicht einwandfrei. Hierzu sollte ein Script verwendet werden, das die mausbasierten Events auf Touch übersetzt.
  • Bilder, die toll auf dem Desktop aussehen, sehen oft schlecht auf einem mobilen Gerät aus. Hintergrund ist die höhere Pixeldichte (DPI), die moderne Smartphones bieten.
  • Ladezeiten sind bei mobilen Seiten ein entscheidender Faktor. Benutzer, die von unterwegs surfen, haben verständlicherweise weniger Geduld als Nutzer, die am Desktop sitzen.
  • Komplexe Javascript Animationen können manche Geräte zum Absturz bringen.
  • Touchscreens brauchen große Buttons und ein einfaches Layout.

Der neue Internet Explorer 6: Mobile Browser

Eine Weile sah es so aus, als wäre der Browserkrieg vorüber. HTML und CSS zu schreiben war nie einfacher. Trotz größtenteils standardkonformer Browser ist die Problematik der Crossbrowser-Kompatibilität wieder zurück in Form der Cross Device Kompatibilität. Früher konnte man sich mit einfachen CSS Hacks helfen. Bei Devices ist allein das Testen einer Seite oft nur denjenigen vorbehalten, die 15 verschiedene Geräte im Büro haben.

Die Bugs, die auf Stackoverflow beschrieben werden erinnern stark an das finstere Internet Explorer 6 Zeitalter:

Fakt ist, die mobile Welt ist voller Herausforderungen. Um diese Probleme zu lösen, haben sich zwei Lösungsansätze entwickelt:

  • Responsive Design (die Seite passt sich an die Browserbreite an)
  • Mobile Seite (User werden zu einer speziell für mobile Endgeräte entwickelten Seite weitergeleitet)

Bevor man sich blind für eine Variante entscheidet ,sollte man mit den Vor- und Nachteilen beider Lösungsansätze vertraut sein.

Responsive Design

Bei Responsive Design passen sich die Inhalte an das Medium an. Es wird viel mit flexiblen Layouts gearbeitet und Prozente werden als Größenangabe bevorzugt.

Die wichtigsten Eckdaten:

  • Die Webseite ist über eine einzige URL erreichbar
  • Keine User Agent Weiterleitungen notwendig
  • Mobile Nutzer und Desktop Nutzer sehen den gleichen Content
  • Suchmaschinen sehen den gleichen Content
  • Die Seite lädt meistens gleich schnell auf Mobile und Desktop
  • Keine spezielle SEO Maßnahmen notwendig
  • Content ist für Mobile und Desktop Benutzer größtenteils gleich

Mit Hilfe von CSS Media Queries, wird das Verhalten des Layouts mit Hinblick auf das Medium gesteuert.

Ein gutes Bespiel wäre ein Layout, das sich aus drei nebeneinander positionierten Containern zusammensetzt. Auf dem Desktop würde das Ganze dann so aussehen:

boxen-nebeneinander

Um dem mobilen Anwender unnötiges Zoomen zu ersparen, wollen wir diese drei Container auf allen Mobilen Endgeräten nacheinander positionieren:

boxen-untereinander

Der Code für dieses Bespiel könnte so aussehen:

HTML:

Box 1
Box 2
Box 3

CSS:

div {
  width:30%;
  float:left;
}

@media only screen and (min-device-width : 321px) and (max-device-width : 640px) {
  div {
    float:none;
    width:100%;
  }
}

Wie wir hier sehen, wird nur ein Satz an HTML und CSS benötigt. Worauf es ankommt ist die Angabe

and (min-device-width : 321px) and (max-device-width : 640px)

Hier definieren wir, wie das Layout für mobile Geräte mit einer bestimmten minimalen und maximalen Pixelbreite aussehen soll. In unserem Beispiel entfernen wir die float Anweisung für mobile Nutzer, um die Container untereinander darzustellen.

Da sich die mobile Welt sehr schnell weiterentwickelt, sind hier immer wieder Anpassungen notwendig.

Prinzipiell wäre es ratsam, das CSS der eigenen Webseite bei jedem iPhone (oder auch Samsung Galaxy) Release zu überprüfen. Die Angabe in Pixel könnte nämlich bei neuen Geräten, die eine erhöhte Pixeldichte anbieten (DPI) nicht mehr wie gewünscht funktionieren.

Eigene Mobile Seite

Für größere Portale oder Seiten mit komplexen Benutzeroberflächen bietet Responsive Design meist nicht genug Flexibilität. In manchen Fällen ist es oft besser eine eigene Seite speziell für mobile Endnutzer zu betreiben.

Dabei werden Benutzer Clients abhängig vom User Agent auf die mobile Seite weitergeleitet.

Einen Vorteil bei dieser Umsetzung ist, dass die mobile Benutzeroberfläche vollkommen frei gestaltet werden kann. Kompliziertes Javascript wird nicht benötigt und gewisse Inhalte, die für einen mobilen Nutzer keinen Mehrwert bieten, können gänzlich entfernt werden. Wiederum können Inhalte und Funktionen, die hauptsächlich unterwegs Sinn machen (wie z.B. die HTML5 geolocation API) nur in die mobile Seite eingebaut werden.

Die wichtigsten Eckdaten:

  • Die Mobile Seite muss separat entwickelt werden
  • Die Mobile Seite befindet sich auf einer eigenen URL
  • Die Seite lädt meist schneller als eine Responsive Site
  • Spezielle SEO Maßnahmen sind meist notwendig
  • Größere Anpassung an die Bedürfnisse eines mobilen Benutzers ist einfacher als mit Responsive Design
  • Ein anspruchsvolles Framework wird benötigt, das das Frontend HTML einmal für die mobile und einmal für die Desktop Version generiert, um die Inhalte nicht doppelt bearbeiten zu müssen

Im Gegensatz zu Responsive Design, das im Frontend mit CSS umgesetzt wird, funktionieren mobile Webseiten meist mit serverseitiger Programmierung um die richtigen Benutzer zur richtigen Seite weiterzuleiten.

Die Umsetzung einer eigenen mobilen Webseite ist dabei weitaus anspruchsvoller als die Umsetzung eines Responsive Designs mit CSS.

Bei einer mobilen Webseite ist die URL Struktur sowohl für User als auch für Suchmaschinen entscheidend!

Obwohl es technisch durchaus möglich ist je nach User Agent eine mobile oder Desktop Version der Seite auf der gleichen URL wiederzugeben, ist es sauberer, getrennte URLs zu verwenden.

Eine mögliche Strukturierung könnte so aussehen:

www.example.com/page1/ – Desktop Version

www.example.com/mobile/page1/ – Mobile Version

Ob man ein Unterverzeichnis verwendet oder aber eine Subdomain, ist einem selbst überlassen.

In diesem Fall könnte die speziell dafür geschaffene .mobi TLD eine Sinnvolle Anwendung finden.

Beispiel:

www.example.com/page1/

www.example.mobi/page1/

Wer eine eigene mobile Seite betreiben möchte sollte unbedingt einen Blick auf das jQuery mobile Framework werfen.

SEO Best Practice

Für Suchmaschinen ist es wichtig, dass mobile Geräte, die auf page1 landen, immer auf die jeweilige relevante Seite auf der mobilen Version weitergeleitet werden. Ein oft angetroffener Fehler ist es, mobile Benutzer, die die Desktop Version aufsuchen, automatisch auf die Homepage der mobilen Site weiterzuleiten.

Für User ist das sehr frustrierend. Es ist oft schwierig den Inhalt, nachdem eigentlich gesucht wird, nochmal über die interne Navigation zu finden.

Um das zu testen betreibt Google einen eigenen „Mobile Crawler“ mit dem User Agent String Googlebot-Mobile. Diesen sollte man genauso wie ein Smartphone via 301 auf die mobile URL weiterleiten.

Damit ist gewährleistet, dass Google die Seite richtig erkennt und nicht als Duplicate Content einstuft.

Desweiteren sehen mobile Nutzer die mobile Seite in den Suchergebnissen von Google, anstatt die Desktop Seite.

Ist WordPress bereit für das Mobile Zeitalter?

Auf der Front der mobilen Content-Erstellung ist WordPress sehr fortschrittlich. Was viele nicht wissen ist, dass es bereits seit geraumer Zeit eine WordPress App gibt, die die Arbeit mit WordPress auch am Handy vereinfachen soll:

Das ist zwar gut für den Editor, doch für die Umsetzung einer Mobilen Seite bietet der Core von WordPress noch keine Funktionalität. Da sich noch keine klaren Best Practices für Mobile etabliert haben ist native Funktionalität in naher Zukunft auch nicht zu erwarten.

Eine Reihe an Plugins bietet jedoch viele Möglichkeiten, dennoch eine professionelle mobile Seite zu realisieren.

Responsive Design in WordPress Themes

Wer nur ein Responsive Design haben möchte, das sich an der Bildschirmbreite orientiert, ist mit einem kommerziellen Theme gut bedient. Die meisten Theme Frameworks, wie das Genesis Framework, bieten schon seit langem Responsiveness. Wer seine Themes lieber ohne Framework entwickelt, sollte ein CSS Grid in Erwägung ziehen. Eine gute Wahl hier ist das Bootstrap CSS Framework.

Ein Problem, bei vielen Themes ist die Ladezeit. Die meisten kommerziellen Themes bieten eine Reihe an verschiedenen Funktionen und inkludieren die dazugehörigen Frameworks und Skripte oft unabhängig von den Themeeinstellungen.

Selbst wenn man keinen Slider oder Portfolio im Masonry Stil auf der Seite hat, werden oft trotzdem alle Skripte auf jeder Seite geladen.

Ein möglicher Fix für dieses Problem bietet die Modernizr.js Library. Obwohl es kontra intuitiv wirkt eine weitere Library einzusetzen um die Ladezeit zu verbessern, ist es in manchen Fällen durchaus sinnvoll.

So könnte der modernizr Script aussehen, um Javascript konditionell zu laden:

if (Modernizr.mq('only all and (min-width: 641px)')) {
  Modernizr.load(javascript.js');
}

In diesem Besipiel laden wir javascript.js nur auf Geräte die eine minimale Breite von 641px haben.

Responsive Design mit Theme Switching

Eine elegante Lösung, die sich in WordPress anbietet, ist das Theme, abhängig vom User Agent String, zu wechseln. In diesem Fall hat man zwei Themes in WordPress, eines für Desktops und eines für mobile Geräte. Das mobile Theme kann zu 100% an mobile Geräte angepasst und nur für solche verwendet werden. Per Default ist für diesen Lösungsansatz keine separate URL notwendig. Falls es separate URLs sein sollen, ist unbedingt auf die korrekten Weiterleitungen zu achten.

In der functions.php könnte das Ganze so aussehen:

add_filter('template', 'theme_switcher');
add_filter('option_template', 'theme_switcher');
add_filter('option_stylesheet', 'theme_switcher');

function theme_switcher($theme) {
    if(
      strpos($_SERVER['HTTP_USER_AGENT'], 'Apple-iPhone') == true) {
        $theme = 'iphone_theme';
        } else {
        $theme = 'desktop_theme';
        }
      return $theme;
}

Natürlich gibt es dafür auch Plugins:

2 Gedanken zu “Crashkurs in Mobile: Responsive Design und Mobile Seiten mit WordPress”

  1. Hey,

    generell bevorzuge ich Responsive Webdesign. Grund dafür: schlechte Erfahrungen mit fürchterlichen mobilen Versionen von guten Seiten. Dass Ladezeiten schneller sind klingt zwar logisch, jedoch habe ich das immer andersrum erlebt.

    Zudem kommt man meist auf eine Seite, wo ausgewählt werden muss, ob die Normale oder die Mobile Version geladen werden soll. Das ist wieder eine Seite mehr, wodurch der Nutzer länger braucht, wodurch er wiederrum abspringen könnte.

    Noch ein ganz großer Vorteil von Responsive Webdesign: Nicht nur für Smartphones, sondern auch für Tablets wird es eingestellt.

Schreibe einen Kommentar

TYPO3 9 LTS Videotraining

Das Videotraining zu TYPO3 9 LTS

Momentan in Vorbereitung

Klicke hier für weitere Infos zum neuen Videotraining!

close-link

YouTube aktivieren?

Auf dieser Seite gibt es mind. ein YouTube Video. Cookies für diese Website wurden abgelehnt. Dadurch können keine YouTube Videos mehr angezeigt werden, weil YouTube ohne Cookies und Tracking Mechanismen nicht funktioniert. Willst du YouTube dennoch freischalten?