STERN.de still asks if you want to read mobile

screenshot_20161017-101712

Just took this screenshot with my Android smartphone (up-to-date version).

STERN.de notices that I am using a Smartphone to look at it and is still asking me if I really want to use the mobile view. This was common a few years ago. Still I do not know why this even was a thing.

One of the most common plus points of mobile views for websites is the decreased size to load faster. Thanks to STERN.de, you have to load the website two times.

But I am still really curious about why the website notices that the user is using a smartphone to look at the website and still loads the desktop version with an option to switch over to a view for smartphones. Every technology is there, they just do not redirect to the mobile page, but instead implemented something completely new. Even neglecting the technological part, this is a logical disaster.

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.

Windows 8 Logo

Microsoft hat ihr neues Logo zu Windows 8 veröffentlicht. Der nette Sam Mureau (“Principal Director of User Experience for Windows”) hat sich darüber im Blog von den Windows Jungs ausführlicher geäußert.

(missing picture)

Erstellt wurde das nicht von Microsoft selbst, sondern von Pentagram. Ein Schwergewicht in der Branche, das auch regelmäßig für Großkonzerne arbeitet, ihren Hauptsitz in London hat und dazu noch weitere Büros in New York, Austin und Berlin.

Als Paula Scher ihre ersten Skizzen und Entwürfe Microsoft vorlegte, fragte sie:

Your name is Windows. Why are you a flag?

Eine Berechtigte Frage. Deshalb sieht das neue Logo auch jetzt weniger wie ne lustige, bunte Flagge aus, sondern vielmehr wie ein Fenster. Zudem ist natürlich noch der Zusammenhang zu den sogenannten Tiles vom Microsofts neuen Metro Design herzustellen.

Als kleines Extra gibt es in dem Beitrag auch noch die bisherige Logovergangenheit präsentiert und kurz erklärt.

Android Design – Wow!

Die Apps aus den Stores von Android, iOS, WP7 haben meist ein Problem: Design.

Viele Apps haben grauenhafte Oberflächen. Unübersichtlich, überladen, falsch angeordnet, etc. Auch die User die mit Design nichts am Hut haben bemerken das sofort.

Andererseits sind die meisten Apps auch nicht von großen Weltkonzernen die sich Designschulungen leisten können und die gute Designer anheuern können, sondern von kleinen Entwicklern die das zuhause basteln aus Langeweile oder weil sie ein Bedürfnis danach haben.

Deswegen zieht Google jetzt die Reißleine und veröffentlicht einen Guide. Einen Guide für besseres Design. So viel vorweg: Das hat Bibelqualität!

(missing picture)

Der Name der Geschichte: Android Design

Jeder Designer oder Designbegeisterte wird eine riesen Freude daran haben.

Wenn man davon ausgeht, dass Google die wahrscheinlich eine besten Designer der Welt hütet, dann kann man sagen, dass einige der besten Designer der Welt sich hier zusammengesessen haben, über Designgrundsätze gesprochen haben, das veranschaulicht und aufbereitet haben und nun kostenlos der Öffentlichkeit bereitstellen. Obendrauf gibts noch die hochkarätige Android Schrift Roboto kostenlos dazu.

Wer denkt hier gehts nur um App Oberflächen hat sich gewaltig getäuscht. Die meisten “Glaubensgrundsätze” sind recht grundlegend und allgemein gehalten. Man kann sie mindestens noch auf Webdesign übertragen!

Wer sich für Oberflächen, GUIs, Webdesign, Appdesign, Mobile Design oder ähnliches interessiert:

Def must read!