Website-Versionen - Erkennung mobiler Geräte

[foo_on_air]

Hallo

Es gibt Webseiten, die automatisch auf die mobile Version weiterleiten, wenn sie erkennen, dass man auf einem Mobilgerät surft. Wie lässt sich verbergen, mit welcher Art Gerät man surft? Ich möchte manchmal verhindern, auf die mobile Seite umgeleitet zu werden. Oder aber die Wahl haben, welche Version mir angezeigt wird.

Funktioniert die Erkennung technisch über ein Script? Ist das Browser-abhängig? Ich glaube einmal gelesen zu haben, dass man mit dem Safari diese Erkennung gar nicht verhindern kann. Auf meinem Android Smartphone bietet der Browser die Option, entweder die mobile oder die Standard-Website anzufordern.

mfg
foo-on-air

 

[dflt]

Mit der Menü- oder Einstellungstaste von dem Smartphone kann man im Browser idR sowas wie "Desktop-Version anfordern" auswählen.

 

[Xanta]

Android: Einstellungen im Browser und Häckchen bei "Desktop Version" setzen.

 

[foo_on_air]

und wie ist das mit iOS auf einem iPad?

die technische erkennung würde mich auch interessieren. ob man durch das deaktivieren von scripting einfluss nehmen kann.

 

[Daaron]

Du musst schlicht und ergreifend den User Agent ändern. Ob und wie das möglich ist, vor allem bei geschlossenen Systemen wie iOS,.... das steht auf einem anderen Blatt.

 

[cumulonimbus8]

In der Tat, nach der selben Methode quälen wir uns rum einfache volldynamische, maschinengenerierte Seiten in solche für PC und Tragbar zu dividieren.
Apple greifen wir per Agent-Abfrage, und vor geraumer Zeit peilten wir die Schirmauflösung an um unauffällig zu prüfen was der User da vor sich hat. Das hat effektiv mit schierer Fläche zu tun… Hier vom Browser im SP anzufordern Desktopversionen darzustellen - da brauchts eine Lupe mit Sternchen.
Persönlich hätte ich nichts gegen eine Rückfrage beim Aufruf, aber dann sollte da auch nach Zeit ein Default ausgelöst werden.
CN8

 

[Daaron]

Gute Webentwickler verwenden so einen User Agent - Quatsch eh nicht, sondern setzen auf Responsive Design mit Media Queries... und zwar in nem Mobile First - Ansatz, weil der deutlich weniger Probleme nach oben hin erzeugt.

Was alles gegen User Agent Selektion spricht:
- Das System braucht permanente Pflege, wenn neue mobile UAs auf den Markt kommen
- Das System benötigt teilweise extrem komplexe Fallbacks
- Im schlimmsten Fall muss man 2 verschiedene Contents pflegen... ganz großer Dreck
- Unterschiedliche Inhalte pro UA? Sowas wird ganz schnell von Suchmaschinen abgestraft
- Will man auf einem 10" FullHD Tablet im Querformat wirklich die Mobile-Version sehen?
- Wie reagiert die Auswahl auf andere Devices, die eben mein Smartphone oder Tablet sind? Was ist mit SmartTVs? Was ist mit Beamern? Was ist mit sehr kleinen PC-Bildschirmen? Was ist mit Smart Watches?

Vorteile von UA-Selektion:
- man spart sich und dem User im Idealfall etwas Bandbreite, weil man kleinere Bilder verschickt... aber hier reden wir meist von höchstens ein paar Dutzend kByte pro Aufruf.

 

[DaVian]

Gute Webentwickler verwenden so einen User Agent - Quatsch eh nicht, sondern setzen auf Responsive Design mit Media Queries... und zwar in nem Mobile First - Ansatz, weil der deutlich weniger Probleme nach oben hin erzeugt.

Was alles gegen User Agent Selektion spricht:
- Das System braucht permanente Pflege, wenn neue mobile UAs auf den Markt kommen
- Das System benötigt teilweise extrem komplexe Fallbacks
- Im schlimmsten Fall muss man 2 verschiedene Contents pflegen... ganz großer Dreck
- Unterschiedliche Inhalte pro UA? Sowas wird ganz schnell von Suchmaschinen abgestraft
- Will man auf einem 10" FullHD Tablet im Querformat wirklich die Mobile-Version sehen?
- Wie reagiert die Auswahl auf andere Devices, die eben mein Smartphone oder Tablet sind? Was ist mit SmartTVs? Was ist mit Beamern? Was ist mit sehr kleinen PC-Bildschirmen? Was ist mit Smart Watches?

Vorteile von UA-Selektion:
- man spart sich und dem User im Idealfall etwas Bandbreite, weil man kleinere Bilder verschickt... aber hier reden wir meist von höchstens ein paar Dutzend kByte pro Aufruf.

Kann dir da nur zustimmen. Die Wartbarkeit einer Webseite mit mobile first Ansatz und media queries ist um einiges geringer als nei Webseiten mit UA Abfrage.

 

[foo_on_air]

was ist eine media query?

ich möchte als anwender selbst die wahl haben welche seite ich aufrufe. ganz krass ist es, als ich eine newsmeldung gelesen habe, dass shop-seiten auf mobile-seiten andere (höhere) preise anzeigen!

 

[WhiteShark]

Mit Mediaqueries prüfst du über CSS die Auflösung des Browserfensters und passt die Seite entsprechend an.
Es wird also immer exakt die gleiche Webseite geladen, nur mit anderer Darstellung.

Ob man jetzt Mobile-First oder Desktop-First entwickelt spielt eigentlich weniger eine Rolle.
Ich persönlich baue immer erst die Desktop-Version auf und passe am Ende alles per Mediaqueries an.

- man spart sich und dem User im Idealfall etwas Bandbreite, weil man kleinere Bilder verschickt... aber hier reden wir meist von höchstens ein paar Dutzend kByte pro Aufruf.

Auch das lässt sich per Mediaqueries umgehen, indem man Bilder als background-image einbindet und per Query ein kleineres Bild läd.

ob man durch das deaktivieren von scripting einfluss nehmen kann.

Eine UserAgent-Abfrage läuft meist serverseitig und lässt sich daher nicht durch deaktiviertes Javascript umgehen.
Und die Mediaqueries arbeiten mit der Fenstergröße per CSS, da sind Scripts egal.

 

[Daaron]

was ist eine media query?

Kurz gesagt: Das Stylesheet enthält Abfragen für verschiedene Parameter des Browsers. Die einfachsten sind Breite und Höhe des Sichtbereiches. Der Browser führt dann eben das aus, was auf ihn zu trifft... läuft komplett Client-seitig

ich möchte als anwender selbst die wahl haben welche seite ich aufrufe.

Nicht bei Media Queries. Da entscheidet der Browser selbsttätig, welche CSS-Deklarationen für ihn jetzt greifen und welche nicht. Hier kann man schlichtweg dem Webentwickler vertrauen, dass er sich dabei was gedacht hat.

ganz krass ist es, als ich eine newsmeldung gelesen habe, dass shop-seiten auf mobile-seiten andere (höhere) preise anzeigen!

Das kommt davon, wenn man User Agent Switches verwendet und dabei die Datenbestände nicht synchron hält.
ABER: Anzeige != Berechnung. Keiner der Shops bucht dir da wirklich mehr ab.

Wie gesagt, Media Queries verhindern solche Ungereimtheiten sehr wirkungsvoll.

Ob man jetzt Mobile-First oder Desktop-First entwickelt spielt eigentlich weniger eine Rolle.
Ich persönlich baue immer erst die Desktop-Version auf und passe am Ende alles per Mediaqueries an.

Ich hab beides probiert, und Mobile-First ist wirklcih angenehmer und kürzer. Du fängst schmal an und setzt deine Break Points einfach da, wo es anfängt beschissen auszusehen. Das heißt, dass dein CONTENT die Breiten bestimmt, nicht wie bei Desktop-First obskure Auflösungen von in 2 Jahren nicht mehr verwendeten Devices.
Vor allem kannst du leichter nach oben raus skalieren.

Auch das lässt sich per Mediaqueries umgehen, indem man Bilder als background-image einbindet und per Query ein kleineres Bild läd.

Diese Methode hat große Nachteile.
1.) Barrierefreiheit: background-image hat keine Semantik, keine alt- und title-tags. Wenn das Bild nicht nur Gestaltung sondern Content ist, verlieren deine sehbehinderten Besucher schon mal ordentlich inhaltlichen Zusammenhang
2.) SEO: Bilder mit alt- und title-tags sind für Suchmaschinen ein gefundenes Fressen und tragen allgemein positiv zum Ranking bei. Den mal groß, denk an einen Shop. Willst du dir die Leute entgehen lassen, die über die Google Bildersuche sonst bei dir landen würden, bloß weil du das Produktfoto als Background eingebettet hast?

Dann doch lieber den Usern 20-50kByte mehr pro Bild rüber schubsen...

 

[WhiteShark]

Das kommt davon, wenn man User Agent Switches verwendet und dabei die Datenbestände nicht synchron hält.
ABER: Anzeige != Berechnung. Keiner der Shops bucht dir da wirklich mehr ab.

Die Datenbestände sind wohl die gleichen, nur wird für die mobile Version ein anderes Template verwendet, wo der Rabatt bzw die Preissenkung anders dargestellt wird.
Während auf der Desktop-Version direkt 479€ steht, steht auf der Mobile erstmal 499 in der Übersicht. In der Einzelansicht wird dann aber der Rabatt richtig angezeigt.

Wobei es da wohl auch ein paar schwarze Schafe gibt, bei denen die Preise auf der Mobile wirklich höher sind.

Ich hab beides probiert, und Mobile-First ist wirklcih angenehmer und kürzer. Du fängst schmal an und setzt deine Break Points einfach da, wo es anfängt beschissen auszusehen. Das heißt, dass dein CONTENT die Breiten bestimmt, nicht wie bei Desktop-First obskure Auflösungen von in 2 Jahren nicht mehr verwendeten Devices.
Vor allem kannst du leichter nach oben raus skalieren.

Die meisten Kunden wollen als grafischen Entwurf aber immer erst die Desktopversion sehen (die wirkt ja auch mehr).
Das setze ich dann auch 1:1 um und passe danach auf kleinere Geräte um. Wobei ich natürlich schon von Anfang an die Mediaqueries einplane.
Aber bleibt natürlich jedem selbst überlassen. Am Ende kommt ja an sich das gleiche raus.

Diese Methode hat große Nachteile.
1.) Barrierefreiheit: background-image hat keine Semantik, keine alt- und title-tags. Wenn das Bild nicht nur Gestaltung sondern Content ist, verlieren deine sehbehinderten Besucher schon mal ordentlich inhaltlichen Zusammenhang
2.) SEO: Bilder mit alt- und title-tags sind für Suchmaschinen ein gefundenes Fressen und tragen allgemein positiv zum Ranking bei. Den mal groß, denk an einen Shop. Willst du dir die Leute entgehen lassen, die über die Google Bildersuche sonst bei dir landen würden, bloß weil du das Produktfoto als Background eingebettet hast?

Da hast du natürlich recht, es kommt immer darauf an für was dieses Bild ist. Für reine Design-Elemente sollte man natürlich background-images nehmen.
Für Bilder die inhaltlich relevant sind, sieht das anders aus.

 

[Daaron]

Reine grafische Design-Elemente sind aber weitestgehend ausgestorben. Was hast du da groß noch? N Haupt-Hintergrund und evtl. kleine Icons für Warenkorb, "nächstes/vorheriges Item" - Pfeil,... Vieles löst man über Icon Fonts, über SVG oder der Kram ist so oder so nur ~24x24px groß.