<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>melon&#124;media Internetagentur Blog &#187; Usability</title>
	<atom:link href="http://blog.melon-media.de/category/usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.melon-media.de</link>
	<description>TYPO3 und Online-Marketing</description>
	<lastBuildDate>Tue, 01 May 2012 10:37:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Usability: Browser Size und Seitenlayout</title>
		<link>http://blog.melon-media.de/usability-browser-size-und-seitenlayout/</link>
		<comments>http://blog.melon-media.de/usability-browser-size-und-seitenlayout/#comments</comments>
		<pubDate>Sat, 27 Feb 2010 14:33:53 +0000</pubDate>
		<dc:creator>Robert Peter</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[Actual Browser Size]]></category>
		<category><![CDATA[Bildschirmauflösung]]></category>

		<guid isPermaLink="false">http://blog.melon-media.de/?p=301</guid>
		<description><![CDATA[Für welche Bildschirmauflösung muss die Website des Kunden optimiert werden? Und welche Browser-Fenstergröße sollte dann berücksichtigt 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üssen. Der Usability-Experte Jacob Nielsen schrieb vor mehr als 3 Jahren in seiner Alertbox über [...]]]></description>
			<content:encoded><![CDATA[<p>Für welche Bildschirmauflösung muss die Website des Kunden optimiert werden? Und welche Browser-Fenstergröße sollte dann berücksichtigt 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üssen.</p>
<p><span id="more-301"></span></p>
<p>Der Usability-Experte Jacob Nielsen schrieb vor mehr als 3 Jahren in seiner Alertbox über das Thema „<a title="Jacob Nielsen" href="http://www.useit.com/alertbox/screen_resolution.html" target="_blank">Screen Resolution and Page Layout</a>&#8220; und stellte hier heraus, dass man „heutzutage“ seine Website für eine Bildschirmauflösung von 1024&#215;768 optimieren sollte. Welche Bildschirmauflösung derzeit die Aktuelle ist, kann sehr gut an öffentliche <a title="W3Counter" href="http://www.w3counter.com/globalstats.php?year=2010&amp;month=1" target="_blank">Statistiken</a> und natürlich an den Web-Statistiken des Kunden abgelesen werden. Letzteres sollte natürlich vorgezogen werden. Die Grundaussage in Nielsen&#8217;s Artikel ist, dass die Website fehlerfrei dargestellt werden muss, auch wenn diese mit einer kleinen Bildschirmauflösung betrachtet wird. Das Layout der Website muss sich also an die Bildschirmauflösung anpassen.</p>
<h2>Kriterien nach J. Nielsen für das Seitenlayout</h2>
<p>Doch allein mit der Wahl der richtigen Bildschirmauflösung ist es nicht getan. Es gibt nach Jacob Nielsen drei wesentliche Kriterien, die für die Darstellung unbedingt sichergestellt werden sollten:</p>
<ul>
<li><strong>Initial visibility</strong>: Dies ist der sichtbare Bereich auf dem Bildschirm des Besuchers, in dem alle Schlüsselinformationen der Website bereitgestellt werden müssen. Das bedeutet im Klartext: Surfen ohne horizontales Scrollen.</li>
<li><strong>Aesthetics</strong>: Ist die Darstellung und das Layout der Website gewahrt, wenn die Auflösung stark variiert? Ist die grundlegende Gestaltungsästhetik sichergestellt? So darf zum Beispiel der Abstand zwischen Bild und Text oder der Abstand zwischen zwei Spalten nicht variieren.</li>
<li><strong>Readability</strong>: Ist der Text, trotz variierender Auflösung noch gut lesbar? Ist beispielsweise bei Spalten der &#8220;width&#8221; Parameter definiert?</li>
</ul>
<h2>Richtige Betrachtung der &#8220;Auflösung&#8221;</h2>
<p>Was Nielsen hier richtigerweise gut ausformulierte, stellt allerdings nicht genügend das eigentliche Problem heraus oder gibt Handlungsempfehlungen, wie die obigen Kriterien sichergestellt werden können. Denn im Grunde muss bei Betrachtung der Auflösung unterschieden werden nach:</p>
<ul>
<li>Bildschirmauflösung,</li>
<li>Browser-Fenstergröße (actual browser size) und</li>
<li>Content Area</li>
</ul>
<p>Jasper Rønn-Jensen formulierte diese wichtige Feststellung in seinem Artikel &#8220;<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 — Not Screen Size</a>&#8220;. Ferner verdeutlicht er, dass für die Gestaltung einer Website die Bildschirmauflösung weniger bedeutend ist (ganz im Gegensatz zu Nielsen). Aus seiner Sicht ist die Browser-Fenstergröße entscheidend, was aus meiner Sicht auch die richtige Betrachtung ist.</p>
<p>Jasper begründet dies damit, dass die Größe des Browserfensters meistens geringer ist als die tatsächliche Bildschirmauflösung 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ösung von 1440&#215;900 px nie maximiert. Weiterhin müssen von der Browser-Fenstergröße die horizontale und vertikale Scrollbar sowie die Symbolleiste des Browsers abgezogen werden. Erst danach erhält man die Content Area, für die die Website gestaltet werden muss.</p>
<h2>Content Area bzw. Actual Browser Size</h2>
<p>Und an diesem Punkt wird es interessant! Wie kann man nun die Content Area bei den vielen verschiedenen Browsern ermitteln? Jasper Rønn-Jensen hat Durchschnittswerte für Scrollbar, Statusleiste und Symbolleiste ermittelt und auf dieser Basis die Content Area berechnet. Die folgende Tabelle zeigt &#8211; neben der Content Area pro Bildschirmauflösung &#8211; dass immer seltener das Browserfenster bei steigender Bildschirmauflösung maximiert wird:</p>
<table border="1" width="450">
<tbody>
<tr>
<th>Bildschirmauflösung</th>
<th>Maximiertes Fenster</th>
<th>Content Area</th>
</tr>
<tr>
<td>640×480</td>
<td>Immer</td>
<td>618×310</td>
</tr>
<tr>
<td>800×600</td>
<td>Immer</td>
<td>778×430</td>
</tr>
<tr>
<td>1024×768</td>
<td>Häufig</td>
<td>1004×598</td>
</tr>
<tr>
<td>1200×1024 oder mehr</td>
<td>Selten</td>
<td>1259×853 oder mehr</td>
</tr>
</tbody>
</table>
<h2>Zusammenfassung</h2>
<p>Im Grunde ist es aus meiner Sicht wichtig sicherzustellen, dass sich eine Website an die Fenstergröße der Browser anpasst und der User nicht nachhelfen muss, um alles lesen zu können (durch Maximieren des Fensters oder durch Scrollen). Um hier das Optimum sicherzustellen, sollte man sich an obige Tabelle von Jasper orientieren.</p>
<!-- Social Bookmarking Reloaded BEGIN --><div class="social_bookmark"><em> </em><br /><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/&amp;title=Usability%3A+Browser+Size+und+Seitenlayout" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Del.icio.us"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/delicious.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Del.icio.us" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Del.icio.us" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Technorati"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/technorati.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Technorati" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Technorati" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/&amp;t=Usability%3A+Browser+Size+und+Seitenlayout" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Yahoo My Web"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/yahoo_myweb.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Yahoo My Web" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Yahoo My Web" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="https://favorites.live.com/quickadd.aspx?url=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/&amp;title=Usability%3A+Browser+Size+und+Seitenlayout" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Live-MSN"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/live.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Live-MSN" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Live-MSN" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/share.php?u=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/&amp;t=Usability%3A+Browser+Size+und+Seitenlayout" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu FaceBook"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/facebook.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu FaceBook" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu FaceBook" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.myspace.com/Modules/PostTo/Pages/?t=Usability%3A+Browser+Size+und+Seitenlayout&amp;c=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu MySpace"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/myspace.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu MySpace" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu MySpace" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home?status=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Twitter"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/twitter.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Twitter" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Twitter" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/addurl/?bm_url=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/&amp;bm_description=Usability%3A+Browser+Size+und+Seitenlayout" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Mister-Wong"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/misterwong.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Mister-Wong" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Mister-Wong" /></a><a class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,border=0,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/reader/link?url=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/&amp;title=Usability%3A+Browser+Size+und+Seitenlayout&amp;srcURL=http://blog.melon-media.de/usability-browser-size-und-seitenlayout/" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Google Buzz"><img src="http://blog.melon-media.de/wp-content/plugins/social-bookmarking-reloaded/googlebuzz.png" title="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Google Buzz" alt="Hinzufügen 'Usability: Browser Size und Seitenlayout' zu Google Buzz" /></a></div>
<!-- Social Bookmarking Reloaded END -->]]></content:encoded>
			<wfw:commentRss>http://blog.melon-media.de/usability-browser-size-und-seitenlayout/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

