Noch nicht viel geschrieben
Die Internetseite http://www.freelance-market.de wurde so aufgebaut, dass sie sich optimal an dar entsprechende Endgerät und anpasst. So passen sich Fontgrößen und Spaltenanzahl in Abhängigkeit der Bildschirmbreite des Endgerätes an um eine optimale Lesbarkeit zu erzielen.
Mit der Einführung des iPhone 6 / iPhone 6plus ist dies nicht mehr möglich, da ALLE nur die Useragents “Iphone” ohne Version übermitteln. Lediglich das Betriebs-System, beispielsweise “iOS 8…” wird mitgeteilt. Somit lässt sich anhand des Useragents nur erkennen, ob es sich um ein Iphone oder um ein iPad oder Ipod handelt, jedoch nicht, welche Iphone-Version oder Ipad-Version vorliegt. Die Übermittlung des iOS bringt hier auch nicht allzu viel, da auch ein Iphone 4S sowie auch ein Ipad das aktuelle iOS 8.x verwenden kann. Natürlich ist eine auf iPhone 6 optimierte Darstellung für ein Ipad völlig ungeeignet (zu große Buchstaben auf dem Ipad sind das Resultat).
Weiß hierzu jemand eine Lösung? Gerne spendiere ich eine Flasche guten Wein aus meiner Heimat, wenn ich hier weiterkomme.
Hier noch die genauen technischen Details: Die Seite http://www.freelance-market.de basiert auf einem YAML-Template-Framework, das nach besten Möglichkeiten in Sachen Responsitivität umgesetzt wurde. Im Hintergrund agiert hier übrigens eine Applikation, welche auf dem Zend-Framework basiert. Da es sich bei Zend bekanntermaßen um ein System handelt, welches nicht durch freie oder kostenpflichtige Templates zu gestalten ist (wie die meisten bekannten CM-Systeme), sondern auf einzelne View-Dateien setzt, muss für jede Unterseite eine eigene View-Datei bereit gestellt werden.Trotzdem ist das Layout für die Startseite mit „Header“, „Top-Navi“ und einem darunter folgenden 3-spaltigen Layout, sowie bei allen Unterseiten mit einem 2-spaltigen Layout und einem vertikal verkürzten Headerbild relativ überschaubar. Generell werden ausschließlich DIV-Container (keine Tabellen-Tags) zur Strukturierung des Templates eingesetzt! Ein Problem stellen die mobilen Endgeräte der Apple-Reihe dar. Während die Webseite bis zum Iphone 4S noch optimal dargestellt wird, erscheint ab dem Model Iphone 5 bis hin zu Iphone 6 Plus ein immer mehr zunehmender weißer Freiraum auf der rechten Seite. Aktuell setzen wir neben dem Einsatz von Media-Queries insbesondere für die Gesamt-Breite der Webseite vier Useragent-Sammlungen ein, welche dann jeweils eine unterschiedliche CSS-Datei für den vertikalen und horizontalen Viewport laden. Somit kann ein Iphone der Versionen 5 – 6 Plus entweder in die Klasse mit den zu kleinen Smartphone-Displays (anhand der Useragent-Kennung „Iphone“) oder in die Klasse mit den zu großen Tablet-Displays (beispielsweise anhand der Useragent-Kennung „iOS 8“) eingeordnet werden. Wollte man dieses System weiter spezialisieren, müsste man mit weiteren Useragent-Sammlungen und jeweils 2 CSS-Dateien arbeiten. Das wären dann alleine für das Iphone 5, Iphone 6 und Iphone 6 Plus 3 weitere Useragent-Sammlungen und insgesamt 6 weitere CSS-Dateien. Das ist sicherlich nicht sehr zweckmäßig, zumal es ja noch zig weitere Endgeräte mit unterschiedlichen Viewports gibt. Somit entsteht bei den drei neueren Iphones entweder weißer Freiraum auf der rechten Seite oder aber die Webseite fließt deutlich über den Displayrand hinaus! Seht ihr eine andere Möglichkeit zumindest die Geräte der Versionen 5 – 6 / 6 Plus separat zu erfassen?
Mit der Einführung des iPhone 6 / iPhone 6plus ist dies nicht mehr möglich, da ALLE nur die Useragents “Iphone” ohne Version übermitteln. Lediglich das Betriebs-System, beispielsweise “iOS 8…” wird mitgeteilt. Somit lässt sich anhand des Useragents nur erkennen, ob es sich um ein Iphone oder um ein iPad oder Ipod handelt, jedoch nicht, welche Iphone-Version oder Ipad-Version vorliegt. Die Übermittlung des iOS bringt hier auch nicht allzu viel, da auch ein Iphone 4S sowie auch ein Ipad das aktuelle iOS 8.x verwenden kann. Natürlich ist eine auf iPhone 6 optimierte Darstellung für ein Ipad völlig ungeeignet (zu große Buchstaben auf dem Ipad sind das Resultat).
Weiß hierzu jemand eine Lösung? Gerne spendiere ich eine Flasche guten Wein aus meiner Heimat, wenn ich hier weiterkomme.
Hier noch die genauen technischen Details: Die Seite http://www.freelance-market.de basiert auf einem YAML-Template-Framework, das nach besten Möglichkeiten in Sachen Responsitivität umgesetzt wurde. Im Hintergrund agiert hier übrigens eine Applikation, welche auf dem Zend-Framework basiert. Da es sich bei Zend bekanntermaßen um ein System handelt, welches nicht durch freie oder kostenpflichtige Templates zu gestalten ist (wie die meisten bekannten CM-Systeme), sondern auf einzelne View-Dateien setzt, muss für jede Unterseite eine eigene View-Datei bereit gestellt werden.Trotzdem ist das Layout für die Startseite mit „Header“, „Top-Navi“ und einem darunter folgenden 3-spaltigen Layout, sowie bei allen Unterseiten mit einem 2-spaltigen Layout und einem vertikal verkürzten Headerbild relativ überschaubar. Generell werden ausschließlich DIV-Container (keine Tabellen-Tags) zur Strukturierung des Templates eingesetzt! Ein Problem stellen die mobilen Endgeräte der Apple-Reihe dar. Während die Webseite bis zum Iphone 4S noch optimal dargestellt wird, erscheint ab dem Model Iphone 5 bis hin zu Iphone 6 Plus ein immer mehr zunehmender weißer Freiraum auf der rechten Seite. Aktuell setzen wir neben dem Einsatz von Media-Queries insbesondere für die Gesamt-Breite der Webseite vier Useragent-Sammlungen ein, welche dann jeweils eine unterschiedliche CSS-Datei für den vertikalen und horizontalen Viewport laden. Somit kann ein Iphone der Versionen 5 – 6 Plus entweder in die Klasse mit den zu kleinen Smartphone-Displays (anhand der Useragent-Kennung „Iphone“) oder in die Klasse mit den zu großen Tablet-Displays (beispielsweise anhand der Useragent-Kennung „iOS 8“) eingeordnet werden. Wollte man dieses System weiter spezialisieren, müsste man mit weiteren Useragent-Sammlungen und jeweils 2 CSS-Dateien arbeiten. Das wären dann alleine für das Iphone 5, Iphone 6 und Iphone 6 Plus 3 weitere Useragent-Sammlungen und insgesamt 6 weitere CSS-Dateien. Das ist sicherlich nicht sehr zweckmäßig, zumal es ja noch zig weitere Endgeräte mit unterschiedlichen Viewports gibt. Somit entsteht bei den drei neueren Iphones entweder weißer Freiraum auf der rechten Seite oder aber die Webseite fließt deutlich über den Displayrand hinaus! Seht ihr eine andere Möglichkeit zumindest die Geräte der Versionen 5 – 6 / 6 Plus separat zu erfassen?
Davon ab man eine Website nicht speziell an ein Device anpasst. Einzig und allein die Einbindung des Apple-Touch-Icons ist bezieht sich auf Apple Devices. Freunde dich mit Media Queries an und kauf dir entsprechende Fachlektüre zum Thema responsive Webdesign. Alternativ ein Videotraining oder die im Internet frei abrufbaren Ressourcen nutzen.
Mich dem auch vorbehaltlos anschließe.
. Back to school!
.
