Mittlerweile verzeichnet Google mehr Zugriffe von Mobilgeräten als von Desktop-PCs. Es ist schon lange Stand der Webtechnik, Webseiten sowohl für Desktop- als auch für Mobilgeräte bereit zu stellen.
Dabei gibt es 2 Möglichkeiten:
- Die Webseite ist sowohl für große als auch kleine Bildschirme geeignet. Neudeutsch nennt man dieses Seiten "responsiv". Sie passen sich dem Gerät an. Man braucht also nur eine Version einer HTML-Seite.
- Es gibt unterschiedliche Versionen für Desktop- und Mobilgeräte.
Beide Ansätze haben ihre Vor- und Nachteile. Responsive Seiten benötigen keine Weiche, schleppen aber für die Mobilgeräte unnötige Last mit. Bilder werden, auch wenn Sie per CSS mit visibily:hidden ausgeblendet werden (in der Regel) trotzdem vom Browser heruntergeladen. Das verschwendet Datenvolumen und macht die Seite effektiv langsamer. Bei getrennten Versionen kann man die Mobilseite besser optimieren, so dass unnötiges HTML und unnötige Bildeinbindungen garnicht erst über die Leitung gehen. Nachteil: Wir benötigen eine Mobilweiche, die auf die passende Version lenkt.
Für mein Bautagebuch habe ich die responsive Variante gewählt.
Für dieses Blog gibt es 2 Versionen für Desktop und Mobil. Jede HTML-Seite ist sowohl unter dateiname.html (Desktop) als auch unter dateiname.m.html (Mobil) erreichbar.
Häufig sieht man Nachfragen von Webseiten, wie "Möchten Sie zur Mobilversion wechseln?" - das ist die schlechteste alle Lösungen, hier wird angefangen, die Desktop-Version zu laden und erhält dann das Angebot, nochmal die Mobilversion zusätzlich zu laden. Das ist Verschwendung von Volumen, ist langsam und für den Anwender nicht optimal. Ich verwende stattdessen ein HTTP-Redirect, was anhand der Browsererkennung direkt zur passenden Seite umlenkt. Trotzdem lässt sich auf Wunsch die andere Version erreichen.
RewriteRegeln für den Apache-Webserver
Die Konfiguration des Apache für die virtuelle Domain sieht wie folgt aus:
RewriteEngine on
# Verzeichnisaurufe auf index.html umleiten (damit danach weitere Umleitung erfolgen kann)
RewriteRule ^(.*)/$ $1/index.html [R,L]
# Bei Aufruf mit "?noredirect" Sessioncookie setzen
RewriteCond %{QUERY_STRING} noredirect
RewriteRule ^ - [CO=noredirect:1:www.jandankert.de,L]
# Wenn Cookie gesetzt, keine Umleitung machen
RewriteCond %{HTTP_COOKIE} noredirect
RewriteRule ^ - [L]
# Desktopbrowser zur Desktopversion .html umleiten
RewriteCond %{HTTP_USER_AGENT} !(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino [NC]
RewriteCond %{HTTP_USER_AGENT} !^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-) [NC]
RewriteRule ^(.*).m.html$ $1.html [R,L]
# Mobilbrowser zur Mobilversion .m.html umleiten
RewriteCond %{HTTP_USER_AGENT} (android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-) [NC]
RewriteRule ^(.*/[a-z0-9_-]+).html$ $1.m.html [R,L]
Funktionsweise
- Wenn eine Seite mit dem Parameter ?noredirect aufgerufen wird, wird ein Sessioncookie mit dem Namen "noredirect" gesetzt.
- Ist dieser Cookie vorhanden, wird keine Umleitung erzeugt. Dadurch kann der Anwender zur jeweils anderen Version springen, ohne wieder umgeleitet zu werden. Bei Tablets kann dies sinnvoll sein, hier ist manchmal die Mobil, manchmal die Desktop-Version sinnvoller.
- Anderenfalls wird anhand des Browserkennung entschieden, ob eine Umleitung zur jeweils anderen Version sinnvoll ist.
Diese Umleitung ist performant, nervt den Besucher nicht mit Nachfragen aber ermöglicht es trotzdem, bewusst zur anderen Version zu wechseln.
Die User-Agent-Strings finden sich übrigens unter detectmobilebrowsers.com.