Mobile Seite für Tablet-Computer?

[Hallo-Welt]

Hallo,

erstmal will ich mich dafür entschuldigen, dass ich die Frage in dieser Rubrik stelle, es gibt denke ich mal keine passende für, wüsste auf jeden Fall nicht welche.

Ich wollte wissen, ob Tablets wie z.B. der iPad oder der Kindel Fire eig. eine mobile Seite oder eine ganz normale Seite angezeigt bekommen sollten. Ich denke nämlich, dass durch die doch eher großen Bildschirme, welche bei Bedarf auch noch waagerecht gehalten werden können, es übertrieben werden, eine absolut minimalistische mobile Seite anzuzeigen. Andererseits bin ich mir nicht sicher, ob die doch eher schlicht gehaltenen (?) Browser der Tablet-Computer komplexe, mit CSS und JS vollgestoppte Seiten überhaupt darstellen können.
Wie macht ihr es bei euren Seiten?

 

[Chronos]

Bei uns im landscape also das Tablet quer: Desktop-Seite
im portrait also hochkant gehalten: mobile-Seite.

Je nach dem wie man es besser aufteilen kann und es vom Seitenverhältnis passt :)

"Komplexe" Seiten gehen schon klar, Dinge die sich sehr stark bewegen würde ich vllt. etwas verringern

 

[Hallo-Welt]

Danke erst mal für die schnelle Antwort. ;)
Um herauszufinden, welcher Weg das Tablet gehalten wird, müsste man doch JS verwenden, oder? Bisher mache ich die gesammte Erkennung nämlich mit PHP (durch User-Agent String). Ich nehme an, dass diese Information nicht im UA-String mitgegeben wird, und somit ich alles weitere mit JS machen müsste, oder?

 

[Banana_Jones]

Die Verzweigung auf verschiedene Seitenversionen aufgrund des Useragents bringt neben einigen Vorteilen umso mehr Nachteile mit sich. Einen hast du gerade entdeckt.
Deshalb (spätenstens für die nächste Seite): responsive Design mit media queries. Dann stellt sich die Frage nämlich gar nicht mehr.

Wenn die Seite aber jetzt nunmal so ist wie sie ist, würde ich das über JS lösen (da sich ja die Orientierung auch während dem Betrachten der Seite ändern kann). Dann kannst du gleich die ganze Verzweigung über JS machen.

 

[Hallo-Welt]

Ich habe mal schnell nach "media queries" gegooglet und fand nur Erläuterungen zur Einbindung von CSS-Style dateien. Kann man nur mithilfe von CSS verschiedene CSS's verschiedenenen Endgeräten anbieten, oder hab ich da was noch nicht ganz verstanden? ->Verweis

 

[Banana_Jones]

Ja, die Seite hat auf Desktop wie mobil den selben HTML-Markup, dieser wird aber abhängig von Viewport (media queries) anders dargestellt

 

[Flemli200]

Das ist immer so ne sache...
An sich kann man nu auch Argumentieren, das ein Browser ja auch JS abschalten kann...
Und dann is des auch murks

Ich gehe über den Useragent und lade je nach dem wie er zugreift unterschiedliche CSS und JS dateien...
wenn der user eine Dektopansicht haben möchte, dann kann er ja auch auf seinem Mobilgerät den Haken bei "als Desktopversion anzeigen" ;)

 

[scbawik]

Ich habe mal schnell nach "media queries" gegooglet und fand nur Erläuterungen zur Einbindung von CSS-Style dateien. Kann man nur mithilfe von CSS verschiedene CSS's verschiedenenen Endgeräten anbieten, oder hab ich da was noch nicht ganz verstanden? ->Verweis

Ich würde nicht in Handy/Tablet/Desktop-Version denken, sondern erstmal eine Version programmieren. Dann machst du das Browserfenster einfach immer kleiner und änderst fortlaufend alles so ab dass das Ergebnis in der aktuellen Größe gut aussieht.
Mittlerweile gibt es zu viele Endgeräte/Bildschirmgrößen, dass man noch zwischen Featurephone/Smartphone/Phablet/Tablet/Netbook/Laptop/Desktop/Fernseher (du siehst was ich meine) unterscheiden könnte.

Mit media-queries kannst du übrigens auch die "orientation" abfragen.

Und deswegen sind auch UA checks schlecht, du müsstest nämlich von jedem Gerät auf der Welt die richtige Bildschirmgröße kennen.

 

[Banana_Jones]

Ich würde nicht in Handy/Tablet/Desktop-Version denken, sondern erstmal eine Version programmieren. Dann machst du das Browserfenster einfach immer kleiner und änderst fortlaufend alles so ab dass das Ergebnis in der aktuellen Größe gut aussieht.

Besser noch: klein anfangen und das Fenster immer größer machen ;)

Nochmal zum UserAgent: Das macht für mich nur Sinn, wenn man Content hat, der wirklich nur für eine Device-Gruppe bestimmt ist, beispielsweise ein App-Link (iTunes vs. Playstore).
Darüber hinaus ist es nur sinnvoll, Viewport-Größen abzufragen (ob man das jetzt über JS macht oder MediaQuerys nutzt, sei jetzt man dahingestellt). Wieso sollte es auch einen Unterschied machen, ob man die Seite mit einem 768px-Android-Tablet oder mit einem 768px-iPad anschaut...

 

[Hallo-Welt]

Okay, ich sehe ein, sich alleine auf den UserAgent zu verlassen ist eine ganz dumme Idee. Das heißt aber, man könnte z.B. in der CSS-Dateie die Klassen auf zwei unterschiedliche Methoden definieren, also z.B.

@media (max-device-width: 16cm){
/* hier Code für Mobilgeräte */
}
@media (min-device-width: 16.1cm){
/* hier Code für alle anderen*/
}

Wäre es klug, das ganze mit cm zu definieren? Was mich an pt stört ist, dass die Bildschirme immer hochauflösender werden (und auch ganz unterschiedlich hohe Auflösungen haben) und somit dann je nachdem ein Tablet eine höhere Auflösung als ein Computer-Bildschirm hat.

 

[scbawik]

Besser noch: klein anfangen und das Fenster immer größer machen ;)

Also auf so ein Projekt (bzw. content first) warte ich schon lange vergeblich.
Soweit sind Kunden und besonders die Designer in meinem Umkreis leider noch nicht.

Außerdem finde ich es extrem einfach, ein kompliziertes Desktop Layout auf ein kleineres Design herunter zu brechen:
Ein bisschen float:none da, ein bisschen width: auto dort, Schriftgröße anpassen - fertig ist der erste Breaking Point …

Umgekehrt stelle ich mir das schon etwas schwerer vor?
Ich habe mobile-first immer eher als Design-, nicht Code-Guideline gesehen.
Versuchen würde ich es jedenfalls mal gerne.

 

[Trüffelkrieger]

@Hallo-Welt,

ich nehme meist em als Einheit für die media-queries. Oder Pixel. Zentimeter ist glaube ich keine gute Idee.

 

[Hallo-Welt]

Vermutlich hast du recht. Ich bin mir auch gar nicht sicher, ob der Browser immer genau weiß, was einem cm entspricht. Praktisch wäre es aber auf jeden Fall.

Ich schaue dann, die Seite so "responsive" wie möglich zu gestalten. Ich danke euch allen für eure Antworten :)

 

[Trüffelkrieger]

Den Mobile First Ansatz finde ich allerdings nur notwendig und sinnvoll, wenn die Seite wirklich sehr umfangreich und groß wird, es also viele Elemente gibt, die auf der mobilen Seite besser wegfallen, oder wenn da tatsächlich sehr viel hin und her geschoben wird. Da bei vielen Projekten lediglich die Sidebars ausgeblendet und die Navigationen neu aufgebaut werden, wenn ein Bildschirm zu klein wird, kann man auch einfach von der Desktop-Seite zur mobilen Seite herunterarbeiten. Außerdem halte ich separate mobile Seiten bei größeren Projekten für technisch sicherer und für den Nutzer besser nachvollziehbar, als wenn eine einzige Seite mit viel JavaScript versucht, sich an die jeweilige Bildschirmbreite anzupassen. Ich bin bei sehr großen und umfangreichen Projekten für mobile Subdomains oder Unterordner (natürlich trotzdem responsive, aber eben reduziert).

Einspruch!

Es sollte beim responsive Webdesign nicht darum gehen, Nutzern auf mobilen Geräten Inhalte vorzuenthalten, die Desktop-Nutzer sehen (jedenfalls in den meisten Fällen nicht). Denn warum sollte das gut sein? Und das Argument, dass man ja mit einem Smartphone meist gehetzt ist und kaum Zeit hat, zieht nicht ;)
Deshalb ist der mobile-first-Ansatz auch interessant. Man lernt, sich auf das wesentliche zu fokussieren. Nicht hier noch ein Bild und da noch etwas sinnfreier Inhalt, weil der Platz irgendwie ausgefüllt werden muss, sondern nur das, was den Nutzer interessiert. Und ein weiterer Vorteil ist natürlich, dass man dem Nutzer dekorative Grafiken (also in CSS festgelegte) anbieten kann, die auf die Dimensionen seines Viewports passen, und dann immer größer wird.
Und wieso sollte bei größeren Projekten versucht werden, sich "mit viel JavaScript" an die jeweilige Viewport-Breite anzupassen?

 

[pax]

Es gibt sinnvolle Anwendungen für die Abfrage des UA. Zum Beispiel um Touch-Funktionalitäten nur für die entsprechenden Geräte zu laden. Ich nutze zu dem Zweck http://mobiledetect.net/. Das ist eine regelmäßig gepflegte PHP Klasse, die gefühlte 99,9% aller Geräte richtig erkennt.