Bin ich froh jetzt keine Prüfung zum Mediengestalter mehr machen zu müssen.
In den letzten 2 Jahren und gerade in letzter Zeit verändert sich das Netz ungemein. Wo bis vor 10 Jahren noch Pixelschriften und „Hightechimitierende“ Monstergrafiken das Web durchfluteten sind wir langsam am anderen Ende angekommen. Mobile Geräte verändern den Umgang mit Websites ebenso wie die immer größer werdende Flut an sozialen Diensten, Apps und Web 2.0 Spielereien.

Meine erste Website anno 2000 ist noch in der "Waybackmachine" zu finden. Hach...

 

Da es nun auch auf Arbeit soweit gekommen ist, dass eine neue, bessere, die Welt in sich verändernde Website gefordert wird, muss man sich fragen – „Wohin zur Hölle entwickelt sich der Hupatz?“
Da ich keine großen Erfahrungswerte mit der jetzigen MID (Mobile Internet Device) Szene habe, kann ich mich also nur in das Thema einlesen. Genau das habe ich die letzte Zeit auch getan und bin immer noch nicht groß überzeugt davon, dass die jetzigen Ansätze zur Darstellung auf allen Geräten ausgereift sind.

Hier mal meine Recherche (PS: Textpassagen bei Elmastudio.de geklautborgt):

Rubrik: Layout

Thema: Responsive Layouts: Ein Theme für alle Endgeräte

Heute haben wir eine extreme Bandbreite von sehr schmalen Geräten wie Smartphones hin zu Wide-Screen-Monitoren. Optimierungen für Bildschirmgrößen sind damit endgültig obsolet geworden. Die Antwort ist Response Layout, ein Konzept des Webdesigners Jon Hicks. Der wesentliche Inhalt wird immer angezeigt und je nach Breite des Ausgabemediums um weitere Spalten ergänzt. Ein Responsive Layout arbeitet mit einer Mischung aus Prozentwerten bei Größenangaben für Layoutboxen und Bildern sowie einem CSS-Selector, der dafür sorgt, dass bei unterschiedlichen Bildschirmgrößen unterschiedliche Styles Anwendung finden (hier als vereinfachtes Beispiel):

 @media screen and (max-width: 500px) {
            nav ul{font-size: 0.75em;}}

 

@media screen and (max-width: 800px) {
            body { font-size: 95%; }}

 

@media screen and (min-width: 1024px) {
            body { font-size: 105%; }}

Gute Beispiele findet man bei Elmastudio.de

Bei einer Neugestaltung sollten man unbedingt darauf achten, dass Layout funktional und einfach zu gestalten. Eine neue Herangehensweise ist zum Beispiel das Layout vom kleinsten Mobilen gerät aufwärts zu entwickeln „mobile-first“.

Thema: Bildschirmauflösungen und Gliederung

Für welche Auflösungen sollte die neue Website optimiert sein. Wohin geht die Entwicklung?

Die derzeit gängigsten Auflösungen in Pixel habe ich hier mal herausgesucht:

  • 320px
  • 480px
  • 800px
  • 1024px
  • 1280px
  • 1440px
  • 1920px

Je nachdem welche der aufgelisteten Auflösungen vorliegt, sollten die Darstellung der Website angepasst sein.  Es muss nicht für jede Auflösung im Gleichen maße optimiert werden, jedoch sollte man zwischen den 2-3 größeng gliedern. Die Gruppen ergeben sich aus den am häufigsten vorkommenden Geräten, die diese Auflösungen nutzen.

Gruppe 1 Smartphones und MIDs

  • 320px
  • 480px
  • (800px)

Die Auflösungen der Smartphones wird immer größer, bei jedoch sehr kleiner Oberfläche. Daraus ergibt sich eine hohe PPI-Dichte (pixel per inch). Es muss darauf geachtet werden, dass Knöpfe und Schriften vergrößert dargestellt werden, da wir hier von einer Touch-Bedieung ausgehen müssen.

Gruppe 2 Tablets, MIDs, Laptops, Alte Computer

  • 800px
  • 1024px
  • 1280px
  • (1440px)

Die wichtigste Gruppe sind die Haushaltsgeräte und gerade bei den meisten normalanwendern werden häufig auch ältere Computer anzutreffen sein. Diese Geräte werden in den nächsten Jahren durch neue oder aber durch einfach zu benutzende Tablets o.ä. ersetzt. Die Darstellung der oben geannten Auflösungen reicht für mehrspaltige Layouts, Knöpfe und Schriften. Es bleibt platz für Bilder und Weißraum weiterhin Optimierung auf Maus und Touchbedienung.

Gruppe 3 High Definition, TV, Moderne Computer (bald auch Tablets und Konsorten!)      

  • 1440px
  • 1600px
  • 1920px

Die dritte Gruppe besteht wieder aus verschiedenen Geräteklassen. Die HD-Auflösung ist vor allem im TV Bereich Standard geworden aber auch im PC-Monitor-Bereich. Für eine Optimierung am TV müsste die Darstellung ähnlich wie beim Smartphone ausfallen, da die Entfernung beim TV eine wichtig Rolle spielt. Bei der Optimierung für PC ist weniger zu beachten dort ist es eher der ungenutzte Platz jedoch nicht die Lesbarkeit. PC-Optimierung bei sehr hohen Auflösungen müsste in Mehrspaltigkeit der Texte und vergrößerung der Bilder resultieren. Eine Vergrößerung des Textes ist vielleicht ganz gut, speziell für ältere Kundschaft und auch kleinere Geräte die eventuell mit Full-HD Auflösungen auf den Mark kommen – ich denke da an Tablets mit Full-HD Auflösung. Ein Mittelweg ist hier erstrebenswert so haben alle Geräteklassen ein optimales Bild.

Wie man sieht ist es derzeit nicht so einfach. Ich bin vorerst zu dem Entschluss gekommen den Kunden entscheiden zu lassen welche Art von Website er benutzen möchte. Der Kunde soll später also zwischen einer Mobile-Version und einer Desktop-Version wählen können. Es bleibt somit nur noch die Klasse der „Full HD+“-Geräte welche vielleicht von einer Anpassung via „@media screen …“ Profitieren.