Mobile Version des LB-Themes

2

Momentan arbeite ich an einer mobilen Version meines WordPress-Themes, die immer dann angezeigt werden soll, wenn der User über ein mobiles Endgerät, sprich ein Smartphone oder einen Tablet-PC, auf meine Webseite zugreift. Primäres Ziel bei der Entwicklung eines mobilen Themes ist die höchstmögliche Nutzerfreundlichkeit. Bedingt durch die geringere Breite des Ausgabemediums im Gegensatz zum Desktop-Computer steht den anzuzeigenden Elementen einer Webseite weniger Platz zur Verfügung, weshalb es Sinn macht, diese umzustrukturieren. Weiterhin bringt die Bedienung mittels eines Touchscreens bei den meisten Smartphones und Tablets weitere Probleme mit sich. So zum Beispiel können Elemente nicht wie am PC durch Überfahren mit dem Mauszeiger geöffnet werden.

Eine mobile Version des Themes behebt diese Probleme und optimiert die Darstellung aller Elemente für die geringere Breite des mobilen Gerätes.

1) Technische Umsetzung

Technisch gesehen ist ein solches mobiles Theme sehr einfach zu realisieren, indem man auf sogenannte Media Queries zurückgreift, um die aktuelle Breite des Viewports, also des Browserfensters, respektive die Breite des Bidlschirms des Ausgabemediums, abzufragen. Dieses Verfahren kommt auch beim “Responsive Webdesign” zum Einsatz, wo sich die Elemente dynamisch an die Größe des Browserfensters anpassen. Ein Beispiel für die Umsetzung von Responsive Webdesign finden Sie auf dieser Webseite. Verändern Sie zum Testen einfach die Breite Ihres Browserfensters.
Zur Realisierung von Mediaqueries gibt es verschiedene Methoden. Zwar unterscheiden sich diese in ihrer praktischen Umsetzung, der Effekt ist jedoch immer der gleiche. Sobald das Medium (in diesem Fall das Browserfenster) den in der Media Query festgelegten Wert (die Breite) erreicht, können alle im Stylesheet vorgenommenen Änderungen für jegliche Elemente auf der Seite durch neue Werte überschrieben werden. Zum besseren Verständnis werde ich nun die verschiedenen Ansätze anhand eines anschaulichen Beispiels näher betrachten.

a) Media Queries innerhalb des Stylesheets

Bei der ersten Methode wird direkt im Haupt-Stylesheet gearbeitet, das bei einem WordPress-Blog meist den Namen style.css trägt und sich im Hauptverzeichnis des Themes befindet. In diesem Beispiel soll die Hintergrundfarbe auf einem mobilen Gerät anders dargestellt werden als auf einem Destop-PC. Um dies zu erreichen, können mithilfe des @media Befehls Eigenschaften für das Ausgabemedium festgelegt werden. Im unten stehenden Code wird die Bildschirmbreite des Gerätes in Pixeln bestimmt. Erreicht diese einen maximalen Wert von 320 Pixeln, liegt also im Bereich zwischen 0 und 320 Pixel, so werden die innerhalb der Klammern stehenden Style-Eigenschaften berücksichtigt. Zu beachten ist, dass die Medien-Abfrage am Ende des Haupt-Stylesheets stattfinden muss, damit die früher defininierten Werte ausßerhalb der Query überschrieben werden. Im nachstehenden Beispiel würde so die ursprüngliche Hintergrundfarbe rot durch die Farbeigenschaft blau überschrieben werden, wenn die Webseite auf einem Smartphone aufgerufen wird.

.body {
    background-color: red;
}

/* ###### Media Query für Smartphones ####### */
@media screen and (max-device-width: 320px) {
    .body {
        background-color: blue;
    }
}

b) Import eines Stylesheets über das Haupt-Stylesheet

Eine weitere Möglichkeit zum Hinzufügen von CSS-Eigenschaften für das mobile Theme bietet das Importieren eines zweiten Stylesheets innerhalb des Haupt-Stylesheets. Hierbei wird mittels des @import Befehls das Stylesheet mobile.css geladen, sofern die Eigenschaft für das Ausgabemedium auf das verwendete Gerät zutrifft, der Bildschirm also eine Maximalbreite von 320 Pixeln hat.

@import url("mobile.css") screen and (max-device-width: 320px);

Inerhalb das Stylesheets mobile.css können nun neue Eigenschaften für bestimmte Elemente festgelegt werden. Trifft die Medien-Abfrage zu, werden die im Haupt-Stylesheet durch diejenigen in der mobile.css überschrieben. An welcher Stelle der @import Befehl im Haupt-Stylesheet ausgeführt wird, spielt in diesem Fall keine Rolle.

c) Import eines Stylesheets über den Dokumentenheader

Die dritte und letzte Methode für den Einsatz von Media-Queries, die ich in diesem Artikel behandeln möchte, ist die Einbindung eines eigenen Stylesheets für das mobile Theme mithilfe des <style>-Tags im Header des HTML-dokuments. Der Effekt ist letztendlich derselbe wie bei der zweiten Methode, nur dass das Stylesheet hier nicht über den @import Befehl, sondern direkt im HTML eingebunden wird. Soll beispielsweise das Sytelsheet mobile.css für Geräte mit einer maximalen Bildschirmbreite von 320 Pixeln eingebunden werden, könnte der Code wie folgt aussehen.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 320px)"
  href="mobile.css" />

3) Welche Methode ist am besten?

Welche der drei Methoden man nun bevorzugen sollte, hängt ganz davon ab, wie weitreichend die Änderungen des Designs auf mobilen Geräten sein soll. Für kleinere Anpassungen weniger Elemente, ist die Verwendung der ersten Möglichkeit mittels des @media Befehls sinnvoll, da so direkt innerhalb des Haupt-Stylesheets Änderungen vorgenommen werden können. Sobald jedoch die Anzahl der zu verändernden Elemente und die Komplexität der Anpassungen steigt, ist auf jeden Fall ein separates Stylesheet für die mobile Version des Themes vorzuziehen.
Besonders Nutzern von WordPress empfehle ich die Umsetzung der dritten Möglichkeit (Media Query im Dokumentenheader), anstatt der zweiten Methode (Import eines Stylesheets über das Hauptstylesheet). Dies liegt darin begründet, dass Stylesheets innerhalb eines WordPress-Themes mithilfe der Funktion wp_enqueue_style() in eine Wartschlange aufgenommen werden. Somit werden Konflikte der verschiedenen Stylesheets innerhalb eines Themes verhindert.
Praktisch würde die Umsetzung der dritten Methode mithilfe der Enqueuing-Funktion folgendermaßen aussehen. Wahlweise kann die unten stehende Funktion direkt in der header.php des Themes eingetragen oder mithilfe des passenden Action-Hooks (wp_enqueue_scripts) in der functions.php des Themes hinzugefügt werden.

wp_enqueue_style('smartphone-style', get_template_directory_uri() .
'/mobile.css', array(), false, 'screen and (max-device-width: 320px)');

Nun wird bei Geräten mit einer Bildschirmbreite von 320 Pixeln und weniger das Stylesheet mobile.css geladen – dieses muss sich im Haupt-Verzeichnis des Themes befinden – und in die Warteschleife für Stylesheets eingefügt. Somit ist sichergestellt, dass es zu keinerlei Konflikten unter den verschiedenen Stylesheets kommt.

3) Hinweise zum Testen des Themes

Nicht jeder, der ein mobiles Theme entwickeln möchte, verfügt über ein entsprechendens mobiles Gerät zum Testen (mich eingeschlossen). Nichtsdestotrotz gibt es einige Möglichkeiten, die Funktion des mobilen Themes dennoch zu testen. So zum Beispiel kann man den Wert für die Medien-Abfrage von max-device-width in max-width ändern und die Breite seines Browser-Fensters auf die Breite eines Smartphones, also 320 Pixel, reduzieren. Alternativ gibt es im Internet zahlreiche Webapplikationen zur Simulation von Smartphones, beispielsweise TestiPhone.com.

4) Umsetzung innerhalb des LB-Projects Themes

Bisher habe ich bereits einige erste Experimente mithilfe der oben erklärten Media Queries durchgeführt, die mobile Version des Themes ist jedoch noch nicht fertiggestellt. Dies wird auch noch einige Tage Arbeitszeit in Anspruch nehmen, da ich auch an die mobile Version des Themes hohe Qualitätsanforderungen stelle. Immerhin ist die Zahl der Smartphone-Nutzer bereits heute sehr groß und wird voraussichtlich in Zukunft weiter steigen.
Nichtsdestotrotz habe ich bereits zwei Screenshots vm aktuellen Entwicklungsstand des mobilen Themes unter Verwendung des oben verlinkten Smartphone-Emulators erstellt. Bitte beachten Sie, dass sich das Aussehen zur Darstellung des finalen Themes unterscheiden kann.

Vorläufige Startseite des mobilen Themes

Vorläufige Ansicht eines einzelnen Artikels

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

2 Kommentare zu "Mobile Version des LB-Themes"

  • Felix sagt:

    Bei einer Angabe muss ich dich verbessern: Im ersten Absatz schreibst du, dass man mit einem Touchscreen nicht die Möglichkeit hat Elemente wie am Pc durch das Überfahren mit dem Mauszeiger zu öffnen.
    Als ich mit meinem Handy auf die Webseite ging drückte ich konnte ich die Menüs oben problemlos öffnen!

    • Lukas Bommes sagt:

      “Drücken” entspricht aber nicht dem Hover-Event, sondern nur einem Anklicken. Hovern ist soweit ich weiß bisher mit keinem Mobilgerät möglich. Es gibt allerdings CSS-Pseudoselektoren für “ontouch”-Events, die ich bei mir aber momentan nicht verwende.