Internet-Surfen auf mobilen Geräten wird immer beliebter, immer leistbarer und immer verbreiteter. Eine mobile Version für Webseiten ist heute keine nice-to-have-Funktion mehr. Heutzutage ist eine mobile Version ein Feature, auf das in Zeiten von Smartphones und Internet-Handys keiner mehr so leicht verzichten kann. Wie aber schenk ich meiner Homepage eine mobile Ansicht?

Anzeige

Der einfache Weg – Plugins

Am einfachsten gehts natürlich für alle, die eines der bekannten CMS‘ einsetzen, wie WordPress, Drupal und Co. Dafür gibt es eine Menge von Plugins, die die Installation um eine mobile Ansicht erweitern. Für WordPress gibt es beispielsweise WPtouch, das auch hier im Blog zum Einsatz kommt. Das Plugin ist in wenigen Sekunden installiert und eingerichtet. Das Ganze ist sehr einfach und funktioniert auf Anhieb. Dementsprechend eingeschränkt ist die Lösung aber. Design: Einheitsbrei. Einstellungsmöglichkeiten: Kaum welche. Trotzdem: In den meisten Fällen reichen die wenigen, von Plugins angebotenen Funktionen durchaus aus.

Bildquelle: opera.com

Oder von Hand

Das obige Verfahren ist einfach und funktioniert. Trotzdem gibt es Situationen, in denen es sinnvoll ist, die mobile Seite per Hand anzupassen; beispielsweise wenn die Seite von Hand geschrieben wurde oder größere Anpassbarkeit verlangt wird.

Doch auch hier gibt es kein Patentrezept. Es gibt verschiedene Wege, eine mobile Seite zu realisieren. Prinzipiell kann man zwischen einer eigenständigen Mobilseite, auf die automatisch umgeleitet wird oder einer mit Media Queries angepassten Seite unterscheiden.

m.domain.tld

Auf Seiten dieser Art wird man oft umgeleitet, wenn man über ein Smartphone oder ein Handy domain.tld aufruft. Wie hier deutlich ersichtlich ist, wird man komplett auf eine neue Seite umgeleitet. Die Umleitung kann beispielsweise über JavaScript erfolgen. Etwas eleganter gehts noch mittels HTTP_USER_AGENT und .htaccess-Weiterleitung (siehe hier).

Der Vorteil an der Methode: Man erstellt eine komplett neue Seite und verzichtet auf alles, das nicht unbedingt notwendig ist. Beispielsweise können kleinere Bilder angezeigt werden, die geringeren Traffic verursachen oder Spielereien komplett weggelassen werden, die man auf einem Smartphone einfach nicht benötigt.

Der Nachteil: Werden nur Kleinigkeiten geändert, schießt man mit Kanonen auf Spatzen. Es muss nämlich eine komplett neue Seite gewartet und gepflegt werden. Das zahlt sich nur aus, wenn es auch wirklich signifikante Unterschiede zwischen den beiden Versionen geben soll und nicht, wenn mal eine Leiste in der einen Version ein paar Pixel schmaler sein soll als in der anderen.

Media Queries

Besonders praktisch bei Anpassungen, wenn nur das Design via CSS verändert werden soll, sind CSS 3 Media Queries. Media Queries bietem dem Webdesigner viele Möglichkeiten, das Design, abhängig von Auflösung, Browserfenstergröße, Seitenverhältnis und vielen weiteren Eigenschaften zu manipulieren.

So können beispielsweise Layouts realisiert werden, die bei Fenster-Breiten von über 1000 Pixeln dreispaltig sind. Verkleinert man das Fenster in der Breite, schiebt sich aber die dritte Spalte in den Fußbereich, da sie auf der Seite keinen Platz mehr hat und vertikales Scrollen notwendig werden würde. Möglich ist mit Media Queries Vieles. Der Kreativität sind bei dieser Methode eigentlich keine Grenzen gesetzt, Nachteile gibt es aber auch hier:

Beispielsweise lässt sich mit Media Queries kein Traffic sparen. Verschiedene Elemente können zwar mit CSS, z.B. über display: none; ausgeblendet oder verkleinert werden, heruntergeladen werden sie vom Gerät aber trotzdem.

Sogenannte responsive Designs passen sich automatisch an Bildschirmauflösung und Größe des verwendeten Gerätes an. Falls du selbst einen WordPress-Blog betreibst, möchte ich hier kurz auf die von mir erstellten, responsiven Themes für WordPress hinweisen: picolight und picochic.

Fazit

Der Webdesigner muss sich also genau darüber Gedanken machen, was er überhaupt will. Betreibt er einen WordPress-Blog und will die mobile Seite nur als Notlösung anbieten, sind Plugins das richtige Mittel. Entscheidet er sich dazu, die Arbeit selbst zu erledigen um auch seiner mobilen Seite das gewisse Extra zu verleihen, muss er wieder abwägen. Eine 1,5 MB-Seite bleibt nämlich auch, wenn mit Media Queries viel ausgeblendet wird, eine 1,5MB-Seite. Auf der anderen Seite kann mit einer separaten mobilen Seite zwar viel Traffic gespart werden, trotzdem schafft eine extra Version wieder extra Arbeit.

Anzeige


12 Kommentare

  1. Ich bin auch den einfach Weg über WPtouch gegangen. Es ist schnell installiert und funktioniert.

  2. Ja, ich hab selbst lange Zeit einfach nicht dran gedacht. Sollte man heutzutage aber … und WPtouch ist echt einfach, simpler geht nicht.

    Gruß Valentin

  3. DJ-Windows2020

    Gibt es irgendein Freeware programm mit dem man die Eigene Website zu einer Mobilen Version komprimieren kann?

  4. Hallo DJ-Windows!

    Um dir helfen zu können, würd ich ein paar genauere Angaben benötigen. Um welche Website gehts? Handelt es sich um ein CMS, wie Drupal oder WordPress oder um eine selbst geschriebene Seite?

    Gruß Valentin

  5. DJ-Windows2020

    Es handelt sich um eine ganz normale selbstgeschriebene internetseite wie zum beispiel Spieletipps.de und ich habe das problem das ich es einfach nicht schaffe (meine kenntnisse sind auch nicht besonders^^) die internetseite manuell auf Mobile geräte zu portieren.
    Gibt es irgendein Tool mit dem ich die Seite auf Mobile geräte portieren kann?

  6. Wie bereits oben geschrieben: Du könntest eine Umleitung z.B. via JavsScript veranlassen und eine ganz eigene zweite kleine Seite erstellen.

  7. DJ-Windows2020

    Das is mir zu viel arbeit^^
    gibts kein kleines wunderprogramm? :/

  8. Ich glaube nicht. Für fertige CMS gibts Plugins. Ich hab für den Blog (WordPress) zum Beispiel WPtouch installiert. Das ist innerhalb von Sekunden eingerichtet. Für selbstgemachte Seiten wird einem nichts über bleiben, als das Ganze auch selber zu machen …

    … zumindest, soweit ich weiß.

  9. DJ-Windows2020

    hmm….schade :/
    trotzdem danke 🙂

  10. Pingback: Tester gesucht: Mobile Version von UbuntuNews.de | picomol.de

  11. Gibt es auch eine deutsche Anleitung für die Möglichkeit der Weiterleitung per HTTP_USER_AGENT und .htaccess?

    Konnte selber leider keine finden.

  12. per php mach ich das so wie hier beschrieben: http://www.easy-coding.de/wiki/php/mobile-browser-in-php-erkennen.html

    trotzdem, guter Blog hier! 🙂

  13. Vielen Dank für den Tipp, Valentin. Ich bin gerade dabei, einen Service für HP Betreiber zu installieren, zugegeben benötige ich aber selber noch Hilfe … die mobilen seiten sollen dann auf Facebook dargestellt werden, mir fehlt nur neben dem gewissen Etwas (know-how) oft einfach die Zeit. Wenn Du Zeit & Lust hast, melde Dich doch mal, vielleicht können wir uns ergänzen?!

  14. Pingback: Mobile Internetseiten sind im Trend – So geht ihr mobile | SEO Trainee - Ab hier geht´s nach oben

  15. Pingback: Wie wichtig ist die Webseiten-Optimierung für mobile Geräte? › picomol.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.