php-homepage.com

Was sind mobile Webseiten?

Kurz gesagt geht es hier um die Tauglichkeit einer Webseite für mobile Geräte.
Viele Systeme, Joomla usw. bieten mittlerweile schon diverse option zur Optimierung der Darstellung einer Seite auf mobilen Endgeräten. Joomla, Wordpress usw., ein passendes Template vorausgesetzt.

Google mobile test
Der Test für Mobiltauglichkeit von Google

Deshalb muss man sich nicht gleich mit allen Details dieses Themas auseinandersetzen, vielleicht passt ja schon alles:-) Google bietet hierfür gleich ein schnelles online-tool: mobile-ready?

Wer sich aber gerne selbst mit der Materie beschäftigen will, ist hier genau richtig. Beginnen wir mit den Grundlagen:

Welche Möglichkeiten, eine Webseite mobile-friendly zu machen gibt es?

  1. Seperate Seite für Mobilgeräte eigene "Kopie" der Seite für Mobilgeräte, wie es eine zeitlang praktiziert wurde;
    Die Nachteile hierbei überwiegen, Google hat dies anno dazumal aufgeführt, aber mittlerweile wurden die Seiten aktualisiert.
    Fazit:Webseiten a la "mobile.beispiel.de" sind Schnee von gestern und waren nicht der optimale Weg, Webseiten mobilfreundlich zu machen
  2. Apps - Mag für bestimmte (interaktive) Seiten eine gute Idee sein,
    aber will xxx Apps auf seinem Gerät für jede alltägliche Webseite oder einen x-beliebigen Blog
  3. Responsive Design - Ist und war immer schon das beste Mittel, um eine Webseite für diverse Geräte bzw. Auflösungen zu entwerfen.
  4. Adaptives Design - meist in Verbindung mit Responsive Design, ist wohl die beste Kompromisslösung

Responsive Design

Keine vorübergehende Modeerscheinung,
denn so schnell wie sich die mobilen Geräte und die Verfügbarkeit von mobilem Internet in den letzten Jahren verbreitet haben, wird die Nutzung dieser noch weiter ansteigen, oder zumindest nicht merklich zurückgehen. Zu diesem Thema habe ich aber schon genug geschrieben, beschäftigt es mich doch schon einige Jahre: responsives Design,
bzw. nicht mehr so aktuell, aber die Grundlage von Responsive:fluid layout.

Adaptives Design

Hinter diesem Begriff verbirgt sich im Grunde nichts weiter als media queries, sprich jeder Auflösungsbereich bekommt ein eigenes CSS/Template, wenn dann die einzelnen templates noch responsive sind, hat man die eierlegende Wollmilchsau des Webdesigns:-)

Bilder und Resposive Design

Viele skalieren hier einfach mittels CSS,
ich arbeite momentan aber gerade an einer (möglichst unkomplizierten) Variante mittels media queries, derer es schon einige gibt (Einbindung mittels PHP,...)

Adaptive Images - automatisch Bilder in richtiger Auflösung generieren

Wie versprochen nun die Lösung für responsive Photos/Bilder: adaptive images