Responsives Design versus Seite für Smartphones

artsoft schrieb am 18.05.2018 um 10:01 Uhr

Hallo zusammen,

hab mich jetzt durch viele Forum-Einträge durchgewühlt und scheint ja wirklich eines der Top-Themen zu sein: "Responsive Design" heißt das Schlagwort ... bzw. "mobile HTML-Seiten".

Ich arbeite jetzt schon viele Monate mit dem Web-Designer und arbeite momentan an einem Web-Auftritt, der insg. 4 verschiedene Varianten aufzeigt. Export der HTML-Seiten und das Hochladen via FTP ... alles kein Problem.

Solange ich auch auf meinem Desktop-PC bleibe (ob im IE, Firefox, Opera, Chrome) ... sehe ich alle 4 Varianten beim Verkleinern/Vergrößern des Browser-Fensters und alles scheint zu klappen. Schließlich werden ja auch entsprechend Events ausgelöst beim Resizen des Browser-Fensters und darauf reagiert ja auch die Seite bzw. das CSS/Javascript.

Doch nun zum eigentlichen Problem und zum Thema "Smartphone": Hole ich z. B. beim Galaxy S6, starte dort den Browser, rufe die entsprechende URL im Browser auf, sehe ich wiederum nur die Desktop-Version. Obwohl im Browser selbst eingestellt ist, mir immer - bei allen URLs - die mobile Version anzuzeigen, sofern eine solche beim entsprechenden Homepage-Betreiber verfügbar ist.

Da die Auflösung beim Galaxy S6 nicht gerade klein ist, ist die Pixel-Breite dort im Browser groß genug, um eben die letzte Variante mit der größten Breite anzuzeigen. Die Seite passt also prima im Hochkant-Format in den Internetbrowser.

Also nehme ich mal stark an, dass ich in diesem Fall über den User-Agent (--> PHP) herausfinden muss, wer da eigentlich der Requester der Seite ist. Auch dies lässt sich einbauen, die Frage ist nur an welcher Stelle muss ich das tun innerhalb meiner Seiten. Wenn ich dann festgestellt habe, um welchen User-Agent es sich dreht, muss ich ja entsprechend einen Redirect auf eine andere Seite machen. Und genau um diese Seiten geht es ... ich müsste ja wieder mit dem gleichen Spiel anfangen und einen komplett neuen Auftritt für alle mobilen Teile bauen, denn auch dort gibt es je nach Vertikal- bzw. Horizontal-Darstellung andere Pixel-Breiten. Ebenso bei den unterschiedlichen Smartphone-Typen.

Also hier brauche ich wirklich mal Hilfe von Euch, denn so komme ich nicht so richtig weiter.

Danke an alle, die helfen möchten.

LG ARTsoft.

Kommentare

BeRo schrieb am 18.05.2018 um 12:10 Uhr

[...] Also nehme ich mal stark an, dass ich in diesem Fall über den User-Agent (--> PHP) herausfinden muss, [...]

Genau das ist der Punkt.

Leider lässt sich das nicht ohne aufwendige, nachträglich Eingriffe in den HTML Code erreichen, den der WD generiert. Der Aufwand, den Du dafür treiben, müsstest, steht m. E. in keinem vernünftigen Verhältnis zum Ergebnis.

Alternativ kannst Du aber die Seiten der Varianten separieren und sie als eigenständige Sites auf dem Webserver ablegen. Wenn Du dann noch dafür sorgst, dass die Browserweiche, die ich hier beschrieben habe, zum Einsatz kommt, hast Du Dein Ziel erreicht. 😊

Die Browserweiche kannst Du hier online testen.

Ob Du Dich über den damit einhergehenden Mehraufwand bei der Pflege der jetzt mehrfach vorhandenen Seiten freuen kannst, bleibt Dir überlassen. 😇

Gerne viel Erfolg beim Umsetzen

marboe schrieb am 18.05.2018 um 13:21 Uhr

@artsoft

Diese Erscheinung ist mir bisher nicht untergekommen.

Ich hätte jetzt gedacht, dass der Webdesigner die Bildschirmgröße ausliest und nicht die Auflösung. Das sind ja zwei verschiedene paar Schuhe.
Ist es möglich, dass du in deinem Samsung Galaxy diverse Einstellungen vorgenommen hast, die hier Veränderungen erzeugen?
Das S6 liegt mir nicht vor, aber andere Modelle. Dort in Firefox; Chrome, Samsungbrowser bekomme ich immer die mobile Variante angezeigt. Und wenn ich Landscape nutze, dann die Tabletvariante.

Erst bei Klick in den Einstellungen des Browsers "zeige mir die Desktopversion" wird diese entsprechend angezeigt. Ich denke also, dass man solche Klimmzüge nicht machen braucht, sondern es sich um eine Sondereinstellung in deinem Handy/Browser handelt.
Gruß Marboe

artsoft schrieb am 18.05.2018 um 13:42 Uhr

Danke für die Info! Aber was ist denn genau da der Unterschied? Was ist für Dich die Breite des Bildschirms, wenn nicht in Pixels? Ich habe ja beim S6 folgende Pixel-Angaben: 1440 x 2560 Pixels. Dazu kommt noch die Pixel pro Zoll-Angabe: 640 DPI.

Ich habe nun bei meinem S6 4 verschiedene Browser durchgetestet. Es gibt - und da hast Du recht - jeweils 2 Einstellungen: Desktop-Variante anzeigen oder die mobile Variante. Doch egal, welche Einstellungen ich vornehme, es bleibt immer bei der "breiten" Varianten, da ich selbst ja nicht händisch wie auf meinem Desktop-PC das Fenster verkleinern/vergrößern kann.

Ebenso habe ich das Handy nicht gerootet, um quasi den User-Agent zu manipulieren. Es ist ein normales S6 ohne irgendwelche Veränderungen.

Komisch........

marboe schrieb am 18.05.2018 um 14:08 Uhr

Egal mit welcher meiner Dateien ich das ausprobiere; es ist immer gleich.
Hier mal ein Beispiel meiner Varianten aus einem meiner Projekte:

Aber was ist denn genau da der Unterschied? Was ist für Dich die Breite des Bildschirms, wenn nicht in Pixels?

Ich würde es so erklären: Dein Handy ist zB. 10 cm breit / oder px oder sonstwas.
Das ist die Bildschirmbreite. Das sagt aber noch nicht, wie viele Bildpunkte dort in der Breite dargestellt werden. Selbst wenn mein Handy 1200 anzeigen kann, ist die Bildschirmbreite 10 cm/px.
Das eine meint die Breite; das andere die Schärfe der Darstellung.

Ich hoffe, ich konnte es jetzt besser erklären. Bin mir auch gar nicht sicher, ob ich das so richtig interpretiere. Ich weiß nur, dass es bei meinen Projekten nicht zu solchen Erscheinungen kommt. Allerdings habe ich kein S6 zum Testen. Vielleicht ist das extrem speziell? 😋
Gruß Marboe

artsoft schrieb am 18.05.2018 um 17:29 Uhr

@marboe

Danke für Deine/Eure Antwort(en)!

Aber ein Browser kennt ja nicht die Ausmaße (in cm) Deines Smartphones. Was es aber doch nur kennt, ist die aktuelle Bildschirmbreite in Pixel. Dein Browser kümmert sich ja nicht da drum, wie "scharf" die Grafiken oder Texte abgebildet werden.

Ja, Du konntest jetzt besser vermitteln, was Du meintest. Trotzdem muss ich immer davon ausgehen, dass der Browser (egal was ob Firefox, Chrome oder andere Kollegen dieser Zunft) nur die Auflösung kennt bzw. das Javascript, das hinter dem responsiven Design steckt.

@BeRo

Danke Dir auch für Deine Antwort. Ich komme echt wohl nicht drum, das alles redundant dann nochmal alles für die mobiles zu bauen. Obwohl es mich immer noch fuchst, dass an angeblich @marboe doch klappt - ohne irgendwelche Änderungen.

Ich will das endlich hier mal eingetütet wissen, wie man das endlich zu handeln hat hier.

Daher bin ich auf Eure aller Hilfe hier angewiesen und danke deshalb nochmals.

Ich poste gleich mal noch meine Varianten...

artsoft schrieb am 18.05.2018 um 17:36 Uhr

So, hier meine Varianten:

Gruß ARTsoft

artsoft schrieb am 18.05.2018 um 17:42 Uhr

Das steht noch als Hilfe im WD drin:

Gut, das gilt jetzt für die Bilder... Aber im Grunde genommen schweigt sich hier die Hilfe des WD beim eigentlichen Thema hier aus!

_________________________________________________________

Einstellungen für Retina- und HiDPI-Bildschirme

Smartphones und Tablets unterscheiden sich von den meisten normalen Webbrowsern insofern, dass sie wesentlich höhere Auflösungen unterstützen. Web Designer unterstützt dies automatisch und erstellt Bilder sowohl in normaler als auch HiDPI- bzw. Retina-Auflösung. Die Website benutzt dann automatisch die korrekte Version des Bildes, je nach Auflösung des Gerätes, mit dem sie angesteuert wird.

_________________________________________________________

Über Webdesign mit Varianten

Da es immer mehr mobile Geräte mit Internetzugang gibt, wird auch die Nachfrage nach Websites, die speziell auf diese Geräte ausgerichtet sind, immer größer.

Moderne Geräte wie Smartphones haben zwar in der Regel sehr gute Webbrowser, die jede Website anzeigen können, für mobile Geräte optimierte Websites sollten aber kein Zoomen zum Lesen von Text erfordern. In der Regel bedeutet dies, dass die Hauptinhalte sich in einer Spalte mit größerer Schrift befinden, die direkt auf dem Smartphone lesbar ist. Mobile Websites haben in der Regel weniger Inhalte und können mit einem Finger navigiert werden.

Natürlich könnten Sie zwei separate Websites, eine für schmale, mobile Bildschirme und eine für normale Bildschirme, erzeugen, allerdings wäre das Kopieren der Inhalte zwischen den beiden Websites umständlich, vor allem, wenn Sie dies bei jeder Aktualisierung tun müssten.

Ihre Website kann deshalb dynamisch auf die Bildschirmgröße des Benutzers reagieren. Statt zwei Websites mit zwei HTML-Seiten gibt es nur eine Webseite, die ihr Layout an die Bildschirmgröße (Auflösung) des Geräts anpasst, das zur Anzeige der Website verwendet wird.

Es gibt zwei Varianten derselben Website. Die erste für eine Breitbild-Anzeige, die zweite für schmalere Bildschirme, z. B. Smartphones. Die Textspalte ist schmaler und Bilder und Seitenelemente sind so angeordnet, dass sie auf einen schmalen Bildschirm passen.

Und genau darum geht es ........... Wann wird der Bildschirm eigentlich "schmal" auf einem Smartphone, wenn es doch eine so hohe interne Pixel-Auflösung hat.

Bin irgendwie frustriert!