Veraltete Browser

[heinetz]

Hallo Forum,

mich würde mal intressieren, wie Ihr damit umgeht.

Die Site wird bspw. auf dem IE9 nicht richtig dargestellt (bspw. keine Placeholder), was man mit entsprechendem Aufwand hinbekäme.

Ich könnte es ignorieren, einen Hinweis auf den veralteten Browser einblenden oder dem Kunden raten, Geld in die Hand zu nehmen, damit es auch im IE9 richtig läuft.

gruss, heinetz

[Fred]

Hallo heinetz

MS hat zum 12.01. den Support für alte IEs eingestellt, siehe z.B. Heise. Somit dürfte es den IE9 nur noch für Vista User geben, doch nutzt noch jemand freiwillig Vista?

Ich kämpfe gerade mit flexbox und behandel nur noch den IE11, leider, denn der neue Edge von Windows 10 kann das...

Gruß

Fred

[MrMurphy1]

Hallo

Hinweis auf einen veralteten Browser ist unnötig.

Ältere Browser interessieren nur insofern, dass auf produktiven Seiten für alle ein Standard-Fallback eingebaut wird. So werden die Inhalte in einfacher Form problemlos angezeigt.

Gruss

MrMurphy

[Auge]

Hallo

mich würde mal intressieren, wie Ihr damit umgeht.

Ohne Hektik.

Die Site wird bspw. auf dem IE9 nicht richtig dargestellt (bspw. keine Placeholder),

Benutzer alter Browser haben HTML5-Platzhalter in ihrem Browserfenster nie gesehen. Sie werden sie also auch nicht vermissen. Das gilt natürlich nicht nur für Platzhalter und nicht nur Benutzer alter IEs. Ein vollkommen zerstörtes Layout oder eine nicht benutzbare Seite sollte man diesen Benutzern nicht vorsetzen. Aber wenn der Platzhalter oder die Radien der Rahmen (in sehr alten Browsern) oder Farbverläufe fehlen, gilt: Who cares?

Zudem stellt sich natürlich die Frage nach der Zahl der Betroffenen. Auch im von Fred erwähnten Windows Vista kann man durchaus andere, updatefähige Browser betreiben. Man muss auch dort nicht bei IE9 stehen bleiben.

was man mit entsprechendem Aufwand hinbekäme.

Ich bin nicht der Meinung, dass man da allzuviel Energie hineinstecken muss.

Tschö, Auge

[Linuchs]

Benutzer alter Browser haben HTML5-Platzhalter in ihrem Browserfenster nie gesehen. Sie werden sie also auch nicht vermissen.

Habe gerade heute auf einer Login-Seite wieder beschreibenden Text wie "Kennwort" und "Passwort" vor die Eingabefelder gesetzt, weil mir einfiel, dass die placeholder "Kennwort" und "Passwort" vielleicht nicht gesehen werden können. Da waren nur zwei leere Felder und ein Absende-Button.

Das gilt natürlich nicht nur für Platzhalter und nicht nur Benutzer alter IEs.

Stimmt nicht ganz, die Benutzer alter IEs habe ich vermisst und bin ins Grübeln gekommen. Da ruft ja keiner an oder schreibt eine Mail. Er bleibt einfach weg.

Zudem stellt sich natürlich die Frage nach der Zahl der Betroffenen.

Schon klar, aber zähle mal die Autos, die an deinem Haus nicht mehr vorbeikommen.

Linuchs

[Auge]

Hallo

Benutzer alter Browser haben HTML5-Platzhalter in ihrem Browserfenster nie gesehen. Sie werden sie also auch nicht vermissen.

Habe gerade heute auf einer Login-Seite wieder beschreibenden Text wie "Kennwort" und "Passwort" vor die Eingabefelder gesetzt, weil mir einfiel, dass die placeholder "Kennwort" und "Passwort" vielleicht nicht gesehen werden können. Da waren nur zwei leere Felder und ein Absende-Button.

Die Platzhalter werden ja nicht nur nicht gesehen, ihr Inhalt ist weg, sobald der Cursor im betreffenden Feld steht.

Das gilt natürlich nicht nur für Platzhalter und nicht nur Benutzer alter IEs.

Stimmt nicht ganz, die Benutzer alter IEs habe ich vermisst und bin ins Grübeln gekommen. Da ruft ja keiner an oder schreibt eine Mail. Er bleibt einfach weg.

Der IE-Benutzer bleibt weg, weil ein Platzhalter nicht da ist? Was hast du denn für Benutzer?

Zudem stellt sich natürlich die Frage nach der Zahl der Betroffenen.

Schon klar, aber zähle mal die Autos, die an deinem Haus nicht mehr vorbeikommen.

Dass sowas nur Vermutungen sein können, ist klar. Die vielen Statistiken von vielen Seiten, die ja nicht alle mit den Bleeding-Edge-Funktionen daherkommen, die nur in den neu4esten Browsern funktionieren, vermitteln das Bild, dass sich der IE9 in die Bedeutungslosigkeit verabschiedet hat. Und nicht sichtbare Platzhalter tun auch IE9-Benutzern nicht weh.

Tschö, Auge

[Matthias Apsel]

Hallo Linuchs,

Habe gerade heute auf einer Login-Seite wieder beschreibenden Text wie "Kennwort" und "Passwort" vor die Eingabefelder gesetzt, weil mir einfiel, dass die placeholder "Kennwort" und "Passwort" vielleicht nicht gesehen werden können. Da waren nur zwei leere Felder und ein Absende-Button.

Placeholder sind kein Ersatz für Beschriftungen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@heinetz

Die Site wird bspw. auf dem IE9 nicht richtig dargestellt (bspw. keine Placeholder), was man mit entsprechendem Aufwand hinbekäme.

Ich könnte es ignorieren, einen Hinweis auf den veralteten Browser einblenden oder dem Kunden raten, Geld in die Hand zu nehmen, damit es auch im IE9 richtig läuft.

Ich würde eher dazu raten, Grips in den Kopf zu nehmen, damit es auch im IE9 richtig läuft.

Auch im IE6.

Was nicht heißt, dass es in alten Browsern genauso läuft.

IE9 zeigt Placeholder nicht an? Schade. Aber die Seite ist trotzdem vollständig benutzbar. (Placeholder sollten niemals Label ersetzen.)

Progressive enhancement: Grundfunktionalität für alle Browser, Verbesserungen je nach Fähigkeiten des jeweiligen Browsers.

“I support every browser. I optimize for none.” —Jeremy Keith

LLAP 🖖

[heinetz]

@@heinetz

Die Site wird bspw. auf dem IE9 nicht richtig dargestellt (bspw. keine Placeholder), was man mit entsprechendem Aufwand hinbekäme.

Ich könnte es ignorieren, einen Hinweis auf den veralteten Browser einblenden oder dem Kunden raten, Geld in die Hand zu nehmen, damit es auch im IE9 richtig läuft.

Ich würde eher dazu raten, Grips in den Kopf zu nehmen, damit es auch im IE9 richtig läuft.

Und sogar mit Grips bedeutet es einen gewissen Aufwand, sich darum zu kümmern.

Auch im IE6.

Und nochmal Aufwand

Was nicht heißt, dass es in alten Browsern genauso läuft.

Und genau dieses genauso kann man so oder so auslegen.

IE9 zeigt Placeholder nicht an? Schade. Aber die Seite ist trotzdem vollständig benutzbar. (Placeholder sollten niemals Label ersetzen.)

In meinem Layout wurden statt Labels Placeholder verwendet. Sicher gibt es trotzdem Labels. Nut sind die für Screenreader und deshalb versteckt. Die müsste man dann für den IE9 einblenden, dann könnte man sich noch darum kümmern, wie sie dargestellt werden. Aber tut man das auch? Und wenn nicht weist man den User darauf hin, dass die Seite ja eigentlich ganz anders aussieht.

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Ich würde eher dazu raten, Grips in den Kopf zu nehmen, damit es auch im IE9 richtig läuft.

Und sogar mit Grips bedeutet es einen gewissen Aufwand, sich darum zu kümmern.

Auch im IE6.

Und nochmal Aufwand

Nein. Das ist „ein verbreiteter Irrglaube“. Befreie dich davon!

Was nicht heißt, dass es in alten Browsern genauso läuft.

Und genau dieses genauso kann man so oder so auslegen.

Die Antwort auf die Frage „Do websites need to look exactly the same in every browser?“ lässt wenig Raum für Auslegungen.

(Placeholder sollten niemals Label ersetzen.)

In meinem Layout wurden statt Labels Placeholder verwendet. Sicher gibt es trotzdem Labels. Nut sind die für Screenreader und deshalb versteckt.

Placeholder anstelle von Labels sind auch für sehende Nutzer eine Qual. Placeholder sind nur dann zu sehen, wenn das Eingabefeld leer ist; wenn es ausgefüllt ist, fehlt die Beschriftung.

“Label-less is okay for musicians, not for forms.” – “It’s quite obvious.”

Also nochmal ohne Klammern: Placeholder sollten niemals Label ersetzen.

LLAP 🖖

[1unitedpower]

Placeholder anstelle von Labels sind auch für sehende Nutzer eine Qual. Placeholder sind nur dann zu sehen, wenn das Eingabefeld leer ist; wenn es ausgefüllt ist, fehlt die Beschriftung.

ACK! Das ist mir in letzter Zeit häufig negativ aufgefallen wenn meine automatische Formular-Vervollständugung mir unter die Arme greifen wollte und ich dann anschließend jedes Feld wieder leeren musste, um zu kontrollieren ob sie auch richtig ausgefüllt waren. Nur um sie dann wieder manuell zu befüllen. UX level: scheiß auf alles.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Also nochmal ohne Klammern: Placeholder sollten niemals Label ersetzen.

Man könnte aber Label bei nicht ausgefüllten Eingabefeldern wie Placeholder darstellen.

LLAP 🖖

[Klawischnigg]

Hallo Forum,

mich würde mal intressieren, wie Ihr damit umgeht.

Wer den IE verwendet ist Kummer gewöhnt. Eine Berücksichtigung alter IEs könnte bei den Anwendern der selben sogar eine Art Kulturschock auslösen, wenn sie plötzliche eine aktuelle Seite halbwegs korrekt dargestellt bekommen. Daher - Finger weg von solchen Ideen...

(Ausserdem, den Mehraufwand bezahlt keiner. Damit ist die Frage, ungeachtet möglicher anzurichtender Schäden bei Nichtbefolgung, ohnehin schon beantwortet...)

[stareagle]

Hallo heinetz,

unser Verfahren ist wie folgt: e

• wenn möglich Zugriffsstatistiken auswerten (Piwik, Google Analytics)
• wenn der Anteil der problematischen alten Browser gering ist: Wenn das Design für moderne Browser fertiggestellt ist mit IE 8 usw. testen, sicherstellen dass alle Informationen zugänglich sind.
• wenn der Anteil älterer Browser hoch ist (oder der Kunde bezahlt): Browserprefixes nutzen, sofern möglich. Für IE ggf. per Condential Comment extra Stylesheet einbinden

Was sich meines Erachtens als sinnvoll erwiesen hat: Die Styles für kleine Bildschirme (Mobile) stehen ohne Media Query in der CSS-Datei. Über Media Queries werden dann am einer bestimmten Breite bestimmte Bereiche nebeneinander dargestellt. Da der IE 8 keine Media Queries beherrscht, ignoriert er diese Styles, und stellt die Seite in der Mobilansicht dar. Die anderen IE (9, 10) haben einen sehr geringen Marktanteil (hängt natürlich von der Zielgruppe ab), und können meines Erachtens daher vernachlässigt werden. Was man sicherstellen sollte ist, dass alle Informationen verfügbar sind.

Beste Grüße

Stareagle

[pl]

In einem der ungezählten Tutorials zu Responsive Design hab ich gelesen, dass im Default das Design fürs Mobile sein sollte (mobiles first). Das hab ich gemacht und dann gesehen dass der IE8, der keine Media-Queries kennt, die Seite stets im mobile-Modus darstellt.

Da hab ich mir gedacht, dass mobiles first irgendwie blödsinnig ist, wo doch Browser, die CSS3 nicht kennen, gar nicht auf mobilen Geräten installiert sind. Also hab ich meine Media-Queries rumgedreht und dafür gesorgt, dass auch ohne MediaQueries ein paar definierte Styles vorliegen.

So zeigen Browser, die keine MediaQueries können, also nicht auf Mobilgeräten installiert sind, die Desktop-Variante (irgendwie logisch).

[Camping_RIDER]

Aloha ;)

In einem der ungezählten Tutorials zu Responsive Design hab ich gelesen, dass im Default das Design fürs Mobile sein sollte (mobiles first). Das hab ich gemacht und dann gesehen dass der IE8, der keine Media-Queries kennt, die Seite stets im mobile-Modus darstellt.

Da hab ich mir gedacht, dass mobiles first irgendwie blödsinnig ist, wo doch Browser, die CSS3 nicht kennen, gar nicht auf mobilen Geräten installiert sind. Also hab ich meine Media-Queries rumgedreht und dafür gesorgt, dass auch ohne MediaQueries ein paar definierte Styles vorliegen.

Nein, mobiles first ist nicht blödsinnig. Tatsächlich hast du das wahrscheinlich sogar angewendet, obwohl du dachtest, es zu missachten. Mobiles first muss nicht unbedingt bedeuten, dass die MediaQueries in dieser Reihenfolge aufeinander aufbauen, sondern dass beim Designvorgang dein Augenmerk erst auf mobiles liegt - weil es im Allgemeinen immer einfacher ist, zunächst für kleine Bildschirme zu bauen und dann für große Bildschirme mit mehr Platz entsprechend umzustellen und auseinanderzuziehen, als zunächst für große Bildschirme zu bauen und dann nicht zu wissen, wo du das auf kleinen Bildschirmen um Himmels willen alles anzeigen sollst.

So zeigen Browser, die keine MediaQueries können, also nicht auf Mobilgeräten installiert sind, die Desktop-Variante (irgendwie logisch).

Es bleibt eine Abwägungsfrage. Die Argumentation ist dann so sinnvoll, wenn du sicher sein kannst, dass es keine veralteten Mobilbrowser gibt. Kann man mit gewisser Vorsicht annehmen, wenn man das möchte. Es gibt aber auch Gründe, anders ran zu gehen: Ein mobiles Design auf dem Desktop-Browser mag nicht das Gelbe vom Ei sein, ist aber benutz- und bedienbar. Ein Desktop-Design auf dem veralteten Mobil-Browser hingegen ist nicht benutzbar.

Du musst also schon sehr sicher sein, dass es keine veralteten Mobilbrowser gibt - und das heist, dass du nichts im Vergleich zu früher gewonnen hast, denn du musst weiterhin mit Argusaugen verfolgen, ob alle Mobilbrowser auch alle wichtigen Features unterstützen.

Wenn du deine Media-Queries auch "von klein nach groß" aufbaust, hast du etwas gewonnen: du musst dir keine Gedanken machen, dass deine Seite auf irgendeinem (egal welchem) Browser nicht bedienbar sein könnte, egal was passiert und was du einsetzt. Progressive Enhancement eben.

Das einzige, was dir daran dann vielleicht Kopfzerbrechen bereitet ist, dass die Seite nicht für den veralteten Desktop-Browser optimiert ist. Aber warum auch? Es ist besser, sagen zu können "ich habe nicht für dich optimiert" (dem veralteten Desktopbrowser) als sagen zu müssen "du kannst mich leider nicht bedienen" (dem veralteten Mobilbrowser, den du gerade nicht auf dem Schirm hast^[1]).

Grüße,

RIDER

---

1. Und glaub mir, da gibts immer mindestens einen. Schon allein deshalb, weil die Android-/iOS-Inkarnationen der "großen Browser" auch gelegentlich andere Bugs und Unterstützung bieten als ihre Desktop-Pendants, und genau diese mobil-spezifischen Problemchen verschwinden oft unter dem Radar. ↩︎

[pl]

Du musst also schon sehr sicher sein, dass es keine veralteten Mobilbrowser gibt

Hast Recht, das hab ich nicht bedacht. Aber ich denke schon, wer heut mobil unterwegs ist, hat keinen IE8 mehr drauf ;)

Und ich denke, so einfach wie ich das jetzt auf meinen Seiten gelöst habe, ist es egal ob mobile oder desktop die Defaultvariante ist und wenn es Beschwerden geben sollte, ist das in geschätzten 20 Sekunden rumgedreht.

[Camping_RIDER]

Aloha ;)

Aber ich denke schon, wer heut mobil unterwegs ist, hat keinen IE8 mehr drauf ;)

Nein, das ist aber leider nicht der einzige Halunke ;) Mir fällt da postwendend der Android 2.x-System-Browser ein. Und gerade mit Android 2.x (am Aussterben, aber in Form von 2.1-2.3 immer noch gelegentlich anzutreffen) gibt es leider App-technisch im Browser-Bereich nur die Wahl zwischen Pest und Cholera, was veraltete Browser angeht - Chrome und Firefox bspw. gibts für Android 2.x nicht.

Zwar mögen die genannten Android-Browser nicht so eklatant viel falsch bzw. nicht machen wie der IE8 - aber ich würde meine Hand nicht für diese Browser ins Feuer legen.

Grüße,

RIDER

[pl]

Aloha ;)

Genau! Bei meinen täglich Streifzügen durchs Indernett sehe ich soviele Seiten die sowas von Scheise aussehen, die werden nie den Weg auf mobile Geräte finden, zumal sich denen ihre Ladezeiten trotz haischpied-DSL ins unendliche verlängert haben. Was denken die sich eigentlich? Richtig: Nix! Und das unterscheidet uns ;)

[Gunnar Bittersmann]

@@pl

Du musst also schon sehr sicher sein, dass es keine veralteten Mobilbrowser gibt

Hast Recht, das hab ich nicht bedacht. Aber ich denke schon, wer heut mobil unterwegs ist, hat keinen IE8 mehr drauf ;)

Und wer heut desktop unterwegs ist, auch nicht.

Can I use sagt über IE8-Verbreitung in Deutschland: 0.58%. Also welche relevanten Browser nochmal verstehen keine media queries?

LLAP 🖖

[Gunnar Bittersmann]

@@Camping_RIDER

Mobiles first muss nicht unbedingt bedeuten, dass die MediaQueries in dieser Reihenfolge aufeinander aufbauen, sondern dass beim Designvorgang dein Augenmerk erst auf mobiles liegt

Wobei „Design“ nicht nur visual design ist. Das Augenmerk auf mobile first beginnt viel früher: mit Dingen wie content strategy und information architechture.

Mobile first? — Content first!

weil es im Allgemeinen immer einfacher ist, zunächst für kleine Bildschirme zu bauen und dann für große Bildschirme mit mehr Platz entsprechend umzustellen und auseinanderzuziehen, als zunächst für große Bildschirme zu bauen und dann nicht zu wissen, wo du das auf kleinen Bildschirmen um Himmels willen alles anzeigen sollst.

Brad Frost hat das anschaulich gemacht. (Quelle)

LLAP 🖖

[Gunnar Bittersmann]

@@pl

… (mobiles first). Das hab ich gemacht und dann gesehen dass der IE8, der keine Media-Queries kennt, die Seite stets im mobile-Modus darstellt.

Dass es keine™ Browser gibt, die keine media queries kennen, hatten wir schon.

Also hab ich meine Media-Queries rumgedreht …

Letztens erst einen Artikel drüber gelesen (den ich jetzt natürlich nicht wiederfinde).

Wierum man media queries verwendet (min-width vs. max-width), hängt auch von der Defaultdarstellung in Browsern ab. Blöcke (section, article, div etc.) werden untereinander dargestellt – so wie man es für kleine Viewports haben möchte. Wenn man auf größeren Viewports Blöcke nebeneinander haben möchte, dann ändert man das Defaultverhalten nur für größere Viewports – mit '@media (min-width: …)'.

Für responsive Tabellen bspw. wäre es aber unsinnig, erst

table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block }

zu setzen und dann mit

@media (min-width: …)
{
  table    { display: table }
  caption  { display: table-caption }
  colgroup { display: table-column-group }
  col      { display: table-column }
  thead    { display: table-header-group }
  tbody    { display: table-row-group }
  tfoot    { display: table-footer-group }
  tr       { display: table-row }
  th, td   { display: table-cell }
}

mühsam den Ursprungszustand wiederherzustellen.

Stattdessen ändert man die Defaultdarstellung eben nur für kleine Viewports – mit max-width:

@media (max-width: …)
{
  table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block }
}

So stehen dann '@media (min-width: …)'- und '@media (max-width: …)'-Regeln in friedlicher Koexistenz im selben Stylesheet.

LLAP 🖖