{"id":2129,"date":"2012-01-30T15:48:59","date_gmt":"2012-01-30T14:48:59","guid":{"rendered":"http:\/\/kopfprojekt.de\/wordpress\/?p=2129"},"modified":"2012-01-30T15:48:59","modified_gmt":"2012-01-30T14:48:59","slug":"weblayouts-im-wandel-der-zeit-oder-responsive-layouts-fur-die-zukunft","status":"publish","type":"post","link":"https:\/\/www.kopfprojekt.de\/blog\/weblayouts-im-wandel-der-zeit-oder-responsive-layouts-fur-die-zukunft\/","title":{"rendered":"Weblayouts im Wandel der Zeit oder Responsive Layouts f\u00fcr die Zukunft"},"content":{"rendered":"

Bin ich froh jetzt keine Pr\u00fcfung zum Mediengestalter mehr machen zu m\u00fcssen.
\nIn den letzten 2 Jahren und gerade in letzter Zeit ver\u00e4ndert sich das Netz ungemein. Wo bis vor 10 Jahren noch Pixelschriften und \u201eHightechimitierende\u201c Monstergrafiken das Web durchfluteten sind wir langsam am anderen Ende angekommen. Mobile Ger\u00e4te ver\u00e4ndern den Umgang mit Websites ebenso wie die immer gr\u00f6\u00dfer werdende Flut an sozialen Diensten, Apps und Web 2.0 Spielereien.<\/p>\n

\"\"
Meine erste Website anno 2000 ist noch in der "Waybackmachine" zu finden. Hach...<\/figcaption><\/figure>\n

 <\/p>\n

Da es nun auch auf Arbeit soweit gekommen ist, dass eine neue, bessere, die Welt in sich ver\u00e4ndernde Website gefordert wird, muss man sich fragen – \u201eWohin zur H\u00f6lle entwickelt sich der Hupatz?\u201c
\nDa ich keine gro\u00dfen 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\u00df \u00fcberzeugt davon, dass die jetzigen Ans\u00e4tze zur Darstellung auf allen Ger\u00e4ten ausgereift sind.<\/p>\n

Hier mal meine Recherche (PS: Textpassagen bei Elmastudio.de<\/a> geklaut<\/span>borgt):<\/p>\n

Rubrik: Layout<\/h2>\n

Thema: Responsive Layouts: Ein Theme f\u00fcr alle Endger\u00e4te<\/h3>\n

Heute haben wir eine extreme Bandbreite von sehr schmalen Ger\u00e4ten wie Smartphones hin zu Wide-Screen-Monitoren. Optimierungen f\u00fcr Bildschirmgr\u00f6\u00dfen sind damit endg\u00fcltig 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\u00e4nzt. Ein Responsive Layout arbeitet mit einer Mischung aus Prozentwerten bei Gr\u00f6\u00dfenangaben f\u00fcr Layoutboxen und Bildern sowie einem CSS-Selector, der daf\u00fcr sorgt, dass bei unterschiedlichen Bildschirmgr\u00f6\u00dfen unterschiedliche Styles Anwendung finden (hier als vereinfachtes Beispiel):<\/p>\n

\u00a0@media screen and (max-width: 500px) {<\/pre>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 nav ul{font-size: 0.75em;}}<\/pre>\n
 <\/p>\n
@media screen and (max-width: 800px) {<\/pre>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 body { font-size: 95%; }}<\/pre>\n
 <\/p>\n
@media screen and (min-width: 1024px) {<\/pre>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 body { font-size: 105%; }}<\/pre>\n
Gute Beispiele findet man bei Elmastudio.de<\/em><\/p>\n
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\u00e4t aufw\u00e4rts zu entwickeln \u201emobile-first\u201c.<\/p>\n
Thema: Bildschirmaufl\u00f6sungen und Gliederung<\/h3>\n
F\u00fcr welche Aufl\u00f6sungen sollte die neue Website optimiert sein. Wohin geht die Entwicklung?<\/p>\n
Die derzeit g\u00e4ngigsten Aufl\u00f6sungen in Pixel habe ich hier mal herausgesucht:<\/p>\n
    \n
  • 320px<\/li>\n
  • 480px<\/li>\n
  • 800px<\/li>\n
  • 1024px<\/li>\n
  • 1280px<\/li>\n
  • 1440px<\/li>\n
  • 1920px<\/li>\n<\/ul>\n
    Je nachdem welche der aufgelisteten Aufl\u00f6sungen vorliegt, sollten die Darstellung der Website angepasst sein.\u00a0 Es muss nicht f\u00fcr jede Aufl\u00f6sung im Gleichen ma\u00dfe optimiert werden, jedoch sollte man zwischen den 2-3 gr\u00f6\u00dfeng gliedern. Die Gruppen ergeben sich aus den am h\u00e4ufigsten vorkommenden Ger\u00e4ten, die diese Aufl\u00f6sungen nutzen.<\/p>\n
    Gruppe 1 Smartphones und MIDs<\/strong><\/h4>\n
      \n
    • 320px<\/li>\n
    • 480px<\/li>\n
    • (800px)<\/li>\n<\/ul>\n
      Die Aufl\u00f6sungen der Smartphones wird immer gr\u00f6\u00dfer, bei jedoch sehr kleiner Oberfl\u00e4che. Daraus ergibt sich eine hohe PPI-Dichte (pixel per inch). Es muss darauf geachtet werden, dass Kn\u00f6pfe und Schriften vergr\u00f6\u00dfert dargestellt werden, da wir hier von einer Touch-Bedieung ausgehen m\u00fcssen.<\/p>\n
      Gruppe 2 Tablets, MIDs, Laptops, Alte Computer<\/strong><\/h4>\n
        \n
      • 800px<\/li>\n
      • 1024px<\/li>\n
      • 1280px<\/li>\n
      • (1440px)<\/li>\n<\/ul>\n
        Die wichtigste Gruppe sind die Haushaltsger\u00e4te und gerade bei den meisten normalanwendern werden h\u00e4ufig auch \u00e4ltere Computer anzutreffen sein. Diese Ger\u00e4te werden in den n\u00e4chsten Jahren durch neue oder aber durch einfach zu benutzende Tablets o.\u00e4. ersetzt. Die Darstellung der oben geannten Aufl\u00f6sungen reicht f\u00fcr mehrspaltige Layouts, Kn\u00f6pfe und Schriften. Es bleibt platz f\u00fcr Bilder und Wei\u00dfraum weiterhin Optimierung auf Maus und Touchbedienung.<\/p>\n
        Gruppe 3 High Definition, TV, Moderne Computer (bald auch Tablets und Konsorten!)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><\/h4>\n
          \n
        • 1440px<\/li>\n
        • 1600px<\/li>\n
        • 1920px<\/li>\n<\/ul>\n
          Die dritte Gruppe besteht wieder aus verschiedenen Ger\u00e4teklassen. Die HD-Aufl\u00f6sung ist vor allem im TV Bereich Standard geworden aber auch im PC-Monitor-Bereich. F\u00fcr eine Optimierung am TV m\u00fcsste die Darstellung \u00e4hnlich wie beim Smartphone ausfallen, da die Entfernung beim TV eine wichtig Rolle spielt. Bei der Optimierung f\u00fcr PC ist weniger zu beachten dort ist es eher der ungenutzte Platz jedoch nicht die Lesbarkeit. PC-Optimierung bei sehr hohen Aufl\u00f6sungen m\u00fcsste in Mehrspaltigkeit der Texte und vergr\u00f6\u00dferung der Bilder resultieren. Eine Vergr\u00f6\u00dferung des Textes ist vielleicht ganz gut, speziell f\u00fcr \u00e4ltere Kundschaft und auch kleinere Ger\u00e4te die eventuell mit Full-HD Aufl\u00f6sungen auf den Mark kommen – ich denke da an Tablets mit Full-HD Aufl\u00f6sung. Ein Mittelweg ist hier erstrebenswert so haben alle Ger\u00e4teklassen ein optimales Bild.<\/p>\n
          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\u00f6chte. Der Kunde soll sp\u00e4ter also zwischen einer Mobile-Version und einer Desktop-Version w\u00e4hlen k\u00f6nnen. Es bleibt somit nur noch die Klasse der \u201eFull HD+\u201c-Ger\u00e4te welche vielleicht von einer Anpassung via \u201e@media screen \u2026<\/em>\u201c Profitieren.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Bin ich froh jetzt keine Pr\u00fcfung zum Mediengestalter mehr machen zu m\u00fcssen. In den letzten 2 Jahren und gerade in letzter Zeit ver\u00e4ndert sich das Netz ungemein. Wo bis vor 10 Jahren noch Pixelschriften und \u201eHightechimitierende\u201c Monstergrafiken das Web durchfluteten sind wir langsam am anderen Ende angekommen. Mobile Ger\u00e4te ver\u00e4ndern den Umgang mit Websites ebenso […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2129","post","type-post","status-publish","format-standard","hentry","category-technik"],"_links":{"self":[{"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/posts\/2129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/comments?post=2129"}],"version-history":[{"count":0,"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/posts\/2129\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/media?parent=2129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/categories?post=2129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kopfprojekt.de\/blog\/wp-json\/wp\/v2\/tags?post=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}