Das Problem der Pixel

Früher war die Sache mit den Websites noch recht einfach. Man hatte eine recht fixe Breite, musste nicht viel beachten und designte drauf los. Aber jetzt kommen plötzlich die Smartphones mit ihren krassen PPI Zahlen und machen alles viel komplizierter.

Im Grunde ist das erstmal gar nicht so schlimm wenn man Mobile Websites designed. Man erstellt ja so gesehen eine komplett neue Seite für eine komplett neue Auflösung. Doppelte Arbeit, aber die hat man ja trotzdem. Passt.

Allerdings fangen jetzt auch die Tablets, Laptops und Desktop Bildschirme an immer mehr Pixeldichte zu bekommen. In der Realität hat man dann das Problem, dass die Website nur noch einen Bruchteil des Bildschirms einnimmt oder gar verzweifelt klein erscheint. Beispielsweise hat Intel eine kleine Grafik veröffentlicht, die die Entwicklung der nächsten 1-2 Jahre darstellen soll. Danach sollen alle Handhelds und Tablets ihre 300 PPI bekommen und sogar 21″ Bildschirme bei 220 PPI landen. Wie gesagt – in 1-2 Jahren!

Wenn man jetzt allerdings einen typischen aktuellen 22″ Bildschirm anschaut, hat dieser eine Auflösung von 1680×1050. Wenn man die selbe Website nun auf einen 15″ Laptop mit einer Auflösung von 3840×2160 anschaut, erkennt sogar der Laie auf den ersten Blick wie winzig eine 1000 Pixel breite Website hier vergleichsweise aussehen muss.

Wie löst man dieses Problem nun? Findige Experten empfehlen dann immer Websites mit relativen Größenangaben zu designen. Klingt auf den ersten Blick ganz logisch. Wer gerne Grafiken in seiner Website verwendet, bekommt hier aber ein Problem. Denn Wenn man eine Grafik mit einer festen Pixelanzahl versucht um das 1,2654-fache zu vergrößern sieht das relativ bescheiden aus. Insbesondere wenn es etwas darauf zu lesen gibt, dann verschwimmt die Schrift und wird unscharf. Überhaupt nicht nett wenn es sich hierbei um das Logo mit Slogan handelt.

Also gibt es jetzt zwei mögliche Punkte wo man ansetzen kann:

  1. An den Grafiken und der Websitetechnik
  2. An der Hardware

Wenn man an den Grafiken ansetzt und den Ansatz verfolgt alles relativ anzugeben, dann muss man auch Vektorgrafiken verwenden. In dem Fall wären wir dann bei SVG angelangt. Das Problem ist hier, dass es nicht so einfach ist, eine komplexe Grafik im SVG Format zu erstellen. Auf der anderen Seite kommt man da recht schnell an Dateien die mehrere MB groß sind. Hier müsste die Erstellung also vereinfacht werden. Da auf Dauer Bandbreiten und Rechenleistung sowieso zunehmen, dürfte sich dieses Problem mit der Zeit von alleine lösen. Trotz allem muss hier das Format und die Erstellung dazu noch um einiges weiter entwickelt werden, dass sie durchgehend eingesetzt werden kann.

Wenn man an der Hardware ansetzt, müsste man sich auf bestimmte PPI Werte pro „X Zoll Bildschirmdiagonale® einigen. Bedingung allerdings ist, dass die PPI Anzahl so hoch ist, dass keine Pixel mehr erkennbar sind – somit hat man einen Wert für die Zukunft gesetzt. Dieser PPI Wert pro X Zoll Bildschirmdiagonale muss dann relativ so gesetzt werden, dass eine Website mit einer fixen Breite überall „gleich gut“ aussieht. Es sollte eine geeignete Breite und Größe haben um sie auf demjenigen Gerät ordentlich betrachten zu können. Auf einem 7″ Tablet muss die Website also immer noch genauso gut aussehen und gut lesbar und erkennbar sein wie auf einem 27″ großen Desktopbildschirm.

Was von beiden jetzt die bessere Lösung sei, sei erstmal dahingestellt. Es ist auch fraglich ob sich Bildschirmhersteller „nur“ wegen dem Internet auf so etwas einigen sollen und dafür Standards entwickelt werden sollen die auch eingehalten werden sollten. Auf der anderen Seite wird die Herstellung solcher Geräte langfristig so günstig, dass die Produktionskosten hier kaum einen unterschied machen sollten.  Allerdings fallen diese Kosten dann dauerhaft an. Bei der Entwicklung des SVG-Formats würden die Entwicklungskosten nur einmal anfallen und dann kann es soweit ewig genutzt werden.

Amüsant wird es in der aktuellen Übergangsfrist. Entweder man kann sich damit abfinden, dass Websites zu breit oder zu schmal wirken und Grafiken unscharf sind, oder man erstellt mehrere Websites für mehrere Auflösungen und Bilschirmgrößen die dann automatisiert erkannt werden und man dann jeweils weitergeleitet wird.

In jedem Fall wird die Entwicklung interessant.