{"id":301,"date":"2010-02-27T15:33:53","date_gmt":"2010-02-27T14:33:53","guid":{"rendered":"https:\/\/www.melon-media.de\/blog\/?p=301"},"modified":"2010-03-10T14:20:51","modified_gmt":"2010-03-10T13:20:51","slug":"usability-browser-size-und-seitenlayout","status":"publish","type":"post","link":"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/","title":{"rendered":"Usability: Browser Size und Seitenlayout"},"content":{"rendered":"<p>F\u00fcr welche Bildschirmaufl\u00f6sung muss die Website des Kunden optimiert werden? Und welche Browser-Fenstergr\u00f6\u00dfe sollte dann ber\u00fccksichtigt werden, um die Zielgruppe des Kunden nicht zu vergraulen? Dies sind wichtige Web Usability Fragen, die vor der Erstellung einer Website unbedingt beantwortet werden m\u00fcssen.<\/p>\n<p><!--more--><\/p>\n<p>Der Usability-Experte Jacob Nielsen schrieb vor mehr als 3 Jahren in seiner Alertbox \u00fcber das Thema \u201e<a title=\"Jacob Nielsen\" href=\"http:\/\/www.useit.com\/alertbox\/screen_resolution.html\" target=\"_blank\">Screen Resolution and Page Layout<\/a>&#8220;\u00a0und stellte hier heraus, dass man \u201eheutzutage\u201c seine Website f\u00fcr eine Bildschirmaufl\u00f6sung von 1024&#215;768 optimieren sollte. Welche Bildschirmaufl\u00f6sung derzeit die Aktuelle ist, kann sehr gut an \u00f6ffentliche <a title=\"W3Counter\" href=\"http:\/\/www.w3counter.com\/globalstats.php?year=2010&amp;month=1\" target=\"_blank\">Statistiken<\/a> und nat\u00fcrlich an den Web-Statistiken des Kunden abgelesen werden. Letzteres sollte nat\u00fcrlich vorgezogen werden. Die Grundaussage in Nielsen&#8217;s Artikel ist, dass die Website fehlerfrei dargestellt werden muss, auch wenn diese mit einer kleinen Bildschirmaufl\u00f6sung betrachtet wird. Das Layout der Website muss sich also\u00a0an die Bildschirmaufl\u00f6sung\u00a0anpassen.<\/p>\n<h2>Kriterien nach J. Nielsen f\u00fcr das Seitenlayout<\/h2>\n<p>Doch allein\u00a0mit der Wahl der richtigen Bildschirmaufl\u00f6sung ist es nicht getan. Es gibt nach Jacob Nielsen drei wesentliche Kriterien, die f\u00fcr die Darstellung unbedingt sichergestellt werden sollten:<\/p>\n<ul>\n<li><strong>Initial visibility<\/strong>: Dies ist der sichtbare Bereich auf dem Bildschirm des Besuchers, in dem alle Schl\u00fcsselinformationen der Website bereitgestellt werden m\u00fcssen. Das bedeutet im Klartext: Surfen ohne horizontales Scrollen.<\/li>\n<li><strong>Aesthetics<\/strong>: Ist die Darstellung und das Layout der Website gewahrt, wenn die Aufl\u00f6sung stark variiert? Ist die grundlegende Gestaltungs\u00e4sthetik sichergestellt? So darf zum Beispiel der Abstand zwischen Bild und Text oder der Abstand zwischen zwei Spalten nicht variieren.<\/li>\n<li><strong>Readability<\/strong>: Ist der Text, trotz variierender Aufl\u00f6sung noch gut lesbar? Ist beispielsweise bei Spalten der &#8222;width&#8220; Parameter definiert?<\/li>\n<\/ul>\n<h2>Richtige Betrachtung der &#8222;Aufl\u00f6sung&#8220;<\/h2>\n<p>Was Nielsen hier richtigerweise gut ausformulierte, stellt allerdings nicht gen\u00fcgend das eigentliche Problem heraus oder gibt Handlungsempfehlungen, wie die obigen Kriterien sichergestellt werden k\u00f6nnen. Denn im Grunde muss\u00a0bei Betrachtung der Aufl\u00f6sung unterschieden werden nach:<\/p>\n<ul>\n<li>Bildschirmaufl\u00f6sung,<\/li>\n<li>Browser-Fenstergr\u00f6\u00dfe (actual browser size) und<\/li>\n<li>Content Area<\/li>\n<\/ul>\n<p>Jasper R\u00f8nn-Jensen formulierte diese wichtige Feststellung in seinem Artikel &#8222;<a title=\"Browser Size vs. Screen Size\" href=\"http:\/\/justaddwater.dk\/2006\/08\/17\/design-for-browser-size-not-screen-size\/\" target=\"_blank\">Design for Browser Size \u2014 Not Screen Size<\/a>&#8222;. Ferner verdeutlicht er, dass f\u00fcr die Gestaltung einer Website die Bildschirmaufl\u00f6sung weniger bedeutend ist (ganz im Gegensatz zu Nielsen). Aus seiner Sicht ist die Browser-Fenstergr\u00f6\u00dfe entscheidend, was aus meiner Sicht auch die richtige Betrachtung ist.<\/p>\n<p>Jasper begr\u00fcndet dies damit, dass die Gr\u00f6\u00dfe des Browserfensters meistens geringer ist als die tats\u00e4chliche Bildschirmaufl\u00f6sung des Users. Mac-User wissen, was er meint, denn auf dem Mac gibt es keine Funktion zum Maximieren der Fenster, wie bei Windows. Somit ist zum Beispiel mein Browser Fenster beim Surfen bei einer Aufl\u00f6sung von 1440&#215;900 px nie maximiert. Weiterhin m\u00fcssen von der Browser-Fenstergr\u00f6\u00dfe die horizontale und vertikale Scrollbar sowie die Symbolleiste des Browsers abgezogen werden. Erst danach erh\u00e4lt man die Content Area, f\u00fcr die die Website gestaltet werden muss.<\/p>\n<h2>Content Area bzw. Actual Browser Size<\/h2>\n<p>Und an diesem Punkt wird es interessant! Wie kann man nun die Content Area bei den vielen verschiedenen Browsern ermitteln? Jasper R\u00f8nn-Jensen hat Durchschnittswerte f\u00fcr Scrollbar, Statusleiste und Symbolleiste ermittelt und auf dieser Basis die Content Area berechnet. Die folgende Tabelle zeigt &#8211; neben der Content Area pro Bildschirmaufl\u00f6sung &#8211; dass immer seltener das Browserfenster bei steigender Bildschirmaufl\u00f6sung maximiert wird:<\/p>\n<table border=\"1\" width=\"450\">\n<tbody>\n<tr>\n<th>Bildschirmaufl\u00f6sung<\/th>\n<th>Maximiertes Fenster<\/th>\n<th>Content Area<\/th>\n<\/tr>\n<tr>\n<td>640\u00d7480<\/td>\n<td>Immer<\/td>\n<td>618\u00d7310<\/td>\n<\/tr>\n<tr>\n<td>800\u00d7600<\/td>\n<td>Immer<\/td>\n<td>778\u00d7430<\/td>\n<\/tr>\n<tr>\n<td>1024\u00d7768<\/td>\n<td>H\u00e4ufig<\/td>\n<td>1004\u00d7598<\/td>\n<\/tr>\n<tr>\n<td>1200\u00d71024 oder mehr<\/td>\n<td>Selten<\/td>\n<td>1259\u00d7853 oder mehr<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Zusammenfassung<\/h2>\n<p>Im Grunde ist es aus meiner Sicht wichtig sicherzustellen, dass sich eine Website an\u00a0die Fenstergr\u00f6\u00dfe der Browser anpasst und der User nicht nachhelfen muss, um alles lesen zu k\u00f6nnen (durch Maximieren des Fensters oder durch Scrollen). Um hier das Optimum sicherzustellen, sollte man sich an obige Tabelle von Jasper orientieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr welche Bildschirmaufl\u00f6sung muss die Website des Kunden optimiert werden? Und welche Browser-Fenstergr\u00f6\u00dfe sollte dann ber\u00fccksichtigt werden, um die Zielgruppe des Kunden nicht zu vergraulen? Dies sind wichtige Web Usability Fragen, die vor der Erstellung einer Website unbedingt beantwortet werden m\u00fcssen.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[34],"tags":[42,43],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.9.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Usability: Browser Size und Seitenlayout - melon|media Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usability: Browser Size und Seitenlayout - melon|media Blog\" \/>\n<meta property=\"og:description\" content=\"F\u00fcr welche Bildschirmaufl\u00f6sung muss die Website des Kunden optimiert werden? Und welche Browser-Fenstergr\u00f6\u00dfe sollte dann ber\u00fccksichtigt werden, um die Zielgruppe des Kunden nicht zu vergraulen? Dies sind wichtige Web Usability Fragen, die vor der Erstellung einer Website unbedingt beantwortet werden m\u00fcssen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/\" \/>\n<meta property=\"og:site_name\" content=\"melon|media Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/melonmedia\" \/>\n<meta property=\"article:published_time\" content=\"2010-02-27T14:33:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-03-10T13:20:51+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@melonmedia\" \/>\n<meta name=\"twitter:site\" content=\"@melonmedia\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\">\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#organization\",\"name\":\"melon|media\",\"url\":\"https:\/\/www.melon-media.de\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/melonmedia\",\"https:\/\/twitter.com\/melonmedia\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#logo\",\"inLanguage\":\"de\",\"url\":\"https:\/\/www.melon-media.de\/blog\/wp-content\/uploads\/2016\/01\/2L0JROF6.png\",\"width\":250,\"height\":250,\"caption\":\"melon|media\"},\"image\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#website\",\"url\":\"https:\/\/www.melon-media.de\/blog\/\",\"name\":\"melon|media Blog\",\"description\":\"TYPO3 und Online-Marketing aus Hamburg\",\"publisher\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.melon-media.de\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/#webpage\",\"url\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/\",\"name\":\"Usability: Browser Size und Seitenlayout - melon|media Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#website\"},\"datePublished\":\"2010-02-27T14:33:53+00:00\",\"dateModified\":\"2010-03-10T13:20:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/\",\"url\":\"https:\/\/www.melon-media.de\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/\",\"url\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/\",\"name\":\"Usability: Browser Size und Seitenlayout\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#\/schema\/person\/abee9501380d2bc6bc77326084b2f983\"},\"headline\":\"Usability: Browser Size und Seitenlayout\",\"datePublished\":\"2010-02-27T14:33:53+00:00\",\"dateModified\":\"2010-03-10T13:20:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/#webpage\"},\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#organization\"},\"keywords\":\"Actual Browser Size,Bildschirmaufl\\u00f6sung\",\"articleSection\":\"Usability\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.melon-media.de\/blog\/usability-browser-size-und-seitenlayout\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#\/schema\/person\/abee9501380d2bc6bc77326084b2f983\",\"name\":\"melonmedia Team\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#personlogo\",\"inLanguage\":\"de\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/330a87875b87208793e5210dd17cff4d?s=96&d=mm&r=g\",\"caption\":\"melonmedia Team\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts\/301"}],"collection":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/comments?post=301"}],"version-history":[{"count":30,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts\/301\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts\/301\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/media?parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/categories?post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/tags?post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}