Mobile Website. Ein paar Tipps und Erfahrungen.

Es gibt so Sachen die man gern mal machen möchte aber diese eben nicht sonderlich hoch in der Priorität stehen. Bei mir war so eine Sache, dass ich meine Website mit einem Mobile Theme ausstatten wollte. Irgendwie schwirrte der Gedanke schon seit Wochen, vielleicht sogar schon seit Monaten in meinem Kopf herum aber es hat immer der letzte Anreiz bzw. die nötige Zeit gefehlt. Klappen sollte es dann doch irgendwann und so setzte ich mich vor ein paar Wochen mal an das Thema...

Ja im Grunde ganz einfach. Für alle mit Mobilen Geräten mit kleinen Bildschirmen und begrenztem Datenvolumen. Kurz gesagt für Smartphone User. Meine Seite ist glaube ich schon recht Grafik intensiv und da hätte man mit dem Smartphone einiges zu laden. Die Mobile Variante kommt mit deutlich weniger Grafiken aus. Die Ressourcenverschwendung wird deutlich reduziert :)

Aktuell automatisch. Die Website fragt den Useragent des Gerätes ab und zeigt dann ein anderes Theme an. Was ich nicht wollte ist das ganze über eine Subdomain zu machen. Also m.davidhellmann.com wollte ich nicht. Irgendwie erscheint mir das als die unsauberere Lösung. Ich kann das aber auch nicht so richtig begründen :) Es sollte nach außen hin einfach nichts zu sehen sein von der Umleitung zur mobilen Version.

Wer ein iPhone 4 hat dem wird auffallen, dass gewisse Grafiken einfach etwas weich bzw. unscharf aussehen. Es fehlt einfach an Details. Das liegt daran, dass die Auflösung beim iPhone 4 deutlich höher ist. Normale Grafiken legt man ja in 72dpi an. Ich hoffe ich erzähle jetzt nichts falsches :D Naja jeden Falls legt man dann die Grafiken für das iPhone 4 in doppelter Größe an. Man könnte diese jetzt einfach hochskalieren. Doch dann kann mann auch gleich die normalen Grafiken nutzen und spart sich die Arbeit. Die Grafiken habe ich also neu erstellt. Hatten wir vorher eine Hintergrund Grafik "background.jpg" mit 300px x 100px dann brauchen wir jetzt quasi eine Grafik "background_x2.jpg" mit 600px x 200px. Doppelte Größe eben. Das eigentlich lustige an der Sache ist ja aber, dass man ja versucht für Mobile Endgeräte die Grafikgröße zu verkleinern aber hier im Grunde genau den anderen Weg geht. Sei es drum. Man sieht einen deutlichen Unterschied und das weiß dann schon zu gefallen. Und wir haben doch eh alle Flatrates für das mobile surfen. Tränen weggewischt und weiter Grafiken erstellen mit doppelter Größe :)

Die mobile Version hatte ich ja schon vor ein paar Wochen online. Bei der - nennen wir Sie mal Version 1 - habe ich mit Media Queries die Auflösung abgefragt. Das ist im Grunde auch gar nicht so schlecht. Doch Klappt das bei einem iPhone ganz gut da es da aktuell nur zwei verschiedene Auflösungen gibt, ist bei Android Geräten die Sache schon wieder ganz anders. Da gibt es so viele Geräte mit unterschiedlichen Auflösungen das die ganze Sache schon etwas umfangreicher wird. Also musste die Sache anders gelöst werden. Am naheliegendsten ist das Arbeiten mit %-Angaben aber damit hatte ich bisher eher Probleme als Freude. Ich sag nur Box-Modell... Wenn man einem DIV die breite von 100% gibt dann ist alles gut. Gibt man dem DIV aber eine Breite von 100% und ein Padding von 20px hat der DIV nun eine Breite von 100% + 40px. Und was passiert? Richtig, horizontale Scrollbalken und das ist etwas was man sicher nicht will. Doch das Internet steckt ja voller Lösungen und somit gab es auch für dieses Problem eine. Ein wenig per Twitter geweint und prompt kam ein Tipp. Der @antpaw schrieb mir das hier (https://twitter.com/#!/antpaw/status/74928523395072001) was wiederum auf den Artikel "Schönes neues CSS: box-sizing", von Peter Kröner, verlinkte. Ja der Artikel ist von 2009 und ich glaube, dass ich ihn auch schon gelesen hatte aber man vergisst ja so schnell. Egal, danke an beide. Sowohl für den Tipp als auch für den Artikel.

Wer den Link oben angeklickt hat weiß schon worum es geht und wer nicht dem erklär ich es ganz kurz. Problem wurde ja oben schon beschrieben. Das Padding (auch Border) kommen zu den 100% dazu. Das ist schlecht. Aber jetzt kommt "box-sizing" zum Einsatz. Man gibt dem DIV mit den 100% einfach noch die Zeile "box-sizing:border-box;" mit und - oh Wunder - das Padding wird nicht mehr zu den 100% dazu addiert. Die Box bleibt also bei 100% und das Padding geht, einfach ausgedrückt, nach innen. Für mich auch irgendwie die Logischer Sache aber egal. Das gute ist, dass man das ganze ohne groß Nachzudenken voll einsetzen kann wenn, ja wenn man nicht auf den ie6 / ie7 angewiesen ist. Alle anderen Unterstützen den Spaß. Bei Firefox muss zwar wieder ein -moz und bei webkit ein -webkit davor (Gott wie ich das hasse!!!) aber damit kann und muss man wohl leben.

Was auch Toll ist, das man weniger rechnen muss :) Im Grunde könnte man das schon in den CSS Reset für alle Elemente mit einbinden. Spricht was dagegen? Mir fällt nichts ein.

Gute Gute Frage die ich mir auch gestellt habe. Aber mein Theme Funktioniert nicht als Responsiv Theme bin ich der Meinung. Und wie oben schon geschrieben ist es recht Grafik lastig. Von daher hab ich mich dagegen entschieden. Auch bin ich noch nicht 100% positiv gestimmt gegenüber solcher Seiten. Es macht sicher hier und da Sinn eine Website so anzulegen, dass sie komplett responsiv ist und von Smartphone bis 30" Monitor was tolles, auf die Auflösung angepasstes, anzeigt. Aber irgendwie haben die Seiten oft wenig eigenes. Sie wirken auf mich oft sehr ähnlich, sind grafisch eher zurückhaltent. Eine recht bekannte dürfte Hicksdesign sein. Was mir da auffällt ist, dass mir die Seite besser gefällt je kleiner der Viewport ist. Ich bin gerade nicht im Bilde wie er die Seite angelegt hat. Es gibt ja die Aussage "mobile first" und ein wenig hat es den Anschein, als ob genau das Prinzip hier zum Einsatz kam. Ob ich die Seite gut finde? Gute Frage. Für mich ist eine mobile Website eine nette Zugabe aber keinenfalls das, worauf sich mein Fokus richtet. Mobile Websites heißt für mich Websites für Smartphones und nicht für Tablets wie das iPad. Diese können problemlos und super gut die meisten Websites darstellen und da braucht man nicht wirklich viel zu optimieren. Das ist dann eher eine kleine Zugabe wenn hier noch speziell etwas angepasst wurde.

Für das Smartphone optmierte Websites sind für mich deshalb eher eine Zugabe, da ich nicht davon ausgehen, dass Leute wirklich intensiv mit ihrem Smartphone auf diesen surfen. Vielleicht geh ich jetzt auch zu sehr von mir aus. Aber ein Smartphone, in meinem Fall das iPhone, nutze ich um mal eben etwas anzuschauen oder zu lesen aber ich würde damit kein Surfverhalten an den Tag legen wie ich es an einem Notebook/Desktop mache. Dafür ist es einfach nicht gemacht bin ich der Meinung. Die Ladevorgänge sind trotz 3G / W-Lan recht träge. Die kleine Tastatur und die vielen langen URL's die damit eingegeben werden müssen, lassen mich auch nicht zu Ausbrüchen der Freude verleiden. Das Surfvergnügen ist einfach keins, was mich glücklich macht. Steh ich mit der Meinung alleine da? Selbst auf dem iPad ist für mich das eine Surfen auch nicht das Gelbe vom Ei. Da häng ich zu sehr an Maus und Tastatur. Mit denen fühle ich mich einfach sicher im Umgang und deutlich effektiver.

Irgendwie bin ich recht weit von der Überschrift und dessen Frage abgewichen. Kurz gesagt finde ich es besser eine wirklich optimierte mobile Version der Website zu erstellen was wiederum heißt, dass Sie ein eigenes Theme bekommt. Ich möchte bei meiner "großen Version" der Website einfach keine Kompromisse machen was das Design angeht. Sie steht für mich einfach im Vordergrund und darauf liegt der Fokus. "non-mobile first" quasi ;) Und sind wir mal ehrlich... eine normale Website ist meist auch ohne Anpassungen am iPhone schön zu nutzen. Wie das bei anderen Smartphones ist kann ich nicht sagen.