Neu geschrieben

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.

Box-sizing

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.

Warum keine "Responsive Website"?

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.

Native guidelines – between conformity and rebellion

Mobile Website. Ein paar Tipps und Erfahrungen.