Weil „Optimiert für 800×600“ einfach nicht ausreicht…
Die Erstellung einer Webseite oder eines Templates schließt den Test für verschiedene Browser und Monitorauflösungen ein. Zwar können Onlinedienste wie Browsershots oder Adobes BrowserLab hier unterstützen, doch sind diese Angebote auf Grund der teilweise überwältigenden Wartezeiten für Tests zwischendurch kaum zu gebrauchen. Um wenigstens die Auswirkungen der geläufigsten Monitorauflösungen auf das Layout zu testen, existiert eine Reihe von Möglichkeiten. Im Folgenden eine Übersicht, unterteilt nach Größenänderung des Browserfensters und Umschalten der Monitorauflösung.
Das Browserfenster an die Auflösung anpassen
Prinzipiell genügt es, wenn das Browserfenster auf die entsprechende Auflösung verkleinert wird. Beachten Sie, dass den meisten Seitenbesuchern durch Menüleisten oder Erweiterungen weniger Platz zur Verfügung steht, als es ihr Browser in maximierter Ansicht zuließe.
Firefox-Addons
Für den Firefox existieren eine Reihe Addons, die das Browserfenster auf fest vorgegebene oder frei definierbare Größen einstellen:
- Window Resizer von Yellowpipe
Kann über das Kontextmenü aufgerufen werden. Bietet jedoch nur fest voreingestellte Werte zur Auswahl an.
- Firesizer
Wird über die Statusleiste bedient. Standardmäßig wird die aktuelle Fenstergröße angezeigt. Durch einen Rechtsklick mit der Maus öffnet sich ein Kontextmenü, in dem zuvor definierte Fenstergrößen ausgewählt werden können.
- Web Developer Toolbar (unter der Option „Größe“) von Chris Pederick
Aufwändiges Addon zum umfangreichen Testen von Webseiten. Über eine Menüleiste können alle Funktionen aufgerufen werden, unter anderem auch die Änderung der Fenstergröße (Menüpunkt „Größe“).
Für Webentwickler, die mit dem Firefox ihre Templates bauen, sicherlich eine praktikable Lösung, um die Positionierung von Seitenelementen zu testen. In den Addon-Diskussionsforen wird vereinzelt von Ungenauigkeiten bei der Umsetzung der Fenstergrößen berichtet. Bei pixelgenauem Layout sollte also immer auch ein Stück Skepsis angebracht sein.
Opera
Für Opera existiert die Web Accessibility Toolbar (WAT) von The Paciello Group. Nach der Installation erscheint wie beim Firefox eine neue Menüleiste, die umfangreiche Webseitentests ermöglicht. Über den Menüpunkt „Resize“ kann eine vordefinierte oder frei bestimmte Fenstergröße ausgewählt werden. Die WAT öffnet die Seite dann in einem separaten Fenster.
Internet Explorer
Der Internet Explorer kann mit der Internet Explorer Developer Toolbar von Microsoft erweitert werden. Nach der Installation wird die Toolbar in der Menüleiste über „Ansicht -> Explorer-Leiste -> IE Developer Toolbar“ am unteren Fensterrand eingeblendet. Dort stehen Ihnen nun umfangreiche Testmöglichkeiten zur Verfügung, unter anderem auch die Größenänderung des Browserfensters über „Tools -> Resize“. Sie können dort vordefinierte Werte auswählen oder eigene Werte angeben.
Browserfenster per JavaScript anpassen
Über JavaScript können Sie die Fenstergröße des Browsers verändern. Geben Sie dazu in der Adresszeile des Browsers Folgendes ein:
javascript:window.resizeTo(B,H)
Setzen Sie für B und T die gewünschten Werte ein. Sobald sich das Fenster geändert hat, können Sie diesen Wert als Lesezeichen speichern, um später schneller darauf zuzugreifen. Achten Sie darauf, dass Sie in den Sicherheitseinstellungen Ihres Browsers die Ausführungen von JavaScript eingeschaltet haben. Außerdem darf bei einigen Browsern das Fenster nicht maximiert sein.
Sizer
Ein kleines Tool zur Größenänderung jedes Fensters ist „Sizer“ von Brian Apps. Nach der Installation wird es über die Taskleiste mit der rechten Maustaste gesteuert.
Neben der Größenänderung kann auch die Fensterposition angegeben werden. Im Kontextmenü oben wird angezeigt, auf welches Fenster sich die Größenänderung bezieht. Klicken Sie auf die gewünschte Auflösung und das entsprechende Fenster wird sofort angepasst.
Programme zum Ändern der Monitorauflösung
Manchmal muss es eben doch der ganze Bildschirm sein. Auch dafür existieren kleine Helferlein, die auf Mausklick die Monitorauflösung ändern; teilweise allerdings mit unerwünschten Nebenwirkungen. Nach dem Zurücksetzen auf die Standardauflösung finden sich oft die Icons und Fenster nicht mehr an ihrem vorbestimmten Ort.
Quick Res 2
- Anbieter: Marko Oette (Kein Download über die Webseite möglich, verfügbar bei diversen Softwareportalen)
- Lizenz: Freeware
- Größe: 1,7MB (gepackte Setup-Datei), 78KB (installiert)
- Installation: Ja, Programm ist auch durch alleiniges Entpacken mit zum Beispiel UniversalExtractor ohne Installation lauffähig. Eventuell müssen die extrahierten DLLs von Hand ins Windows-Systemverzeichnis kopiert werden.
- Deinstallation: Ja
- Betriebssystem: Windows XP, Windows Server 2003, Windows 2000, Windows NT, Windows ME, Windows 98
Quick Res 2 ist klein und fein, in der aktuellen Version allerdings etwa 3 Jahre alt. Zwischenzeitlich hat der Autor Marko Oette seine Webseite überarbeitet und bietet das Programm dort nicht mehr zum Download an. Die Suchmaschine Ihres Vertrauens wird sicherlich fündig.
Nach dem Start von Quick Res 2 können Sie das Programm in der Taskleiste mit der linken Maustaste bedienen. Es öffnet sich der Einstellungsdialog zur Auswahl der Monitoreinstellungen. Ausgehend von der Farbtiefe öffnet sich in einem Untermenü die Liste der möglichen Auflösungen. Unter „Einstellungen“ können Sie unter anderem die Wartezeit bis zur Übernahme der neuen Einstellungen festlegen.
Die Favoriten lassen recht einfach verwalten. Unter „Favoriten“ aktivieren Sie den Punkt „Bearbeiten“ durch einen Mausklick. Jede Einstellung, die Sie nun auswählen, wird – ohne sie auszuführen – direkt als Favorit gespeichert. Die Option „Alte Auflösung wiederherstellen“ wird aktiviert, sobald Sie eine andere Auflösung eingestellt haben. Entfernen Sie das Häkchen bei „Bearbeiten“ wieder, um eine neue Auflösung einzustellen.
Auch, wenn das Programm seit einiger Zeit nicht mehr gepflegt zu werden scheint, erfüllt Quick Res 2 seine Aufgabe komfortabel und schnell. Je nach Monitor und Grafikkarte sollten Sie sich auf die Programmsteuerung über die Favoriten beschränken, da die Liste aller Modi schnell unübersichtlich wird.
Display Changer
- Anbieter: Stefan Tucker, 12noon
- Lizenz: Freeware für private Nutzung, 499 Dollar für eine Unternehmenslizenz
- Größe: 503 KB (Setup-Datei), 150-200KB installiert
- Installation: Ja; Programm ist auch durch alleiniges Entpacken mit zum Beispiel UniversalExtractor ohne Installation lauffähig.
- Deinstallation: Ja
- Betriebssystem: Windows Vista (32-bit und 64-bit), XP Home und Professional (32-bit and 64-bit), Windows Server 2003 und 2008 (32-bit and 64-bit), Windows 2000, Me und NT
Der Display Changer (ehemals Resolution Changer) wird über die Kommandozeile gestartet und gesteuert. Über eine Vielzahl von Parametern können in einer Multimonitorumgebung Auflösung, Farbtiefe und Frequenz jedes Monitors bestimmt werden. Außerdem kann er Anwendungen mit vordefinierten Monitoreinstellungen starten, die nach Beenden automatisch wieder zurückgestellt werden. Eine ausführliche Liste der Kommandozeilen-Parameter nebst Erläuterungen findet sich auf den Seiten von Stefan Tucker.
Wegen der ausschließlichen Bedienung über die Kommandozeile sicher nur bedingt für Webentwickler zu gebrauchen. Der Parameterumfang ist allerdings beeindruckend und spielt bei der Verwendung über Batchdateien seine Stärken aus. Warten wir auf einen ambitionierten Software-Entwickler, der eine anwenderfreundliche GUI dafür programmiert. Ob allerdings dem gewerblichen Nutzer alleine der Parameterumfang 499 Dollar wert ist, sei dahingestellt…
MultiRes
- Anbieter: EnTech, Taiwan
- Lizenz: Freeware für den privaten Gebrauch, $1 pro User bei gewerblicher Nutzung
- Größe: 102 KB (Setup-Datei), 116 KB (installiert)
- Installation: Ja; Programm ist auch durch alleiniges Entpacken mit zum Beispiel UniversalExtractor ohne Installation lauffähig.
- Deinstallation: Ja
- Betriebssystem: Windows 95 bis zu Windows XP
MultiRes aus dem Hause EnTech hat trotz der geringen Größe viel zu bieten. Nach der Installation kann das Tool, wie gewohnt, über die Taskleiste bedient werden. In der Standardeinstellung (Programmstart ohne Parameter) werden alle monitorverträglichen Einstellungen zur Auswahl angeboten, sortiert nach Farbtiefe und Auflösung. Die aktuelle Einstellung ist mit einem Häkchen markiert.
Mit Kommandozeilen-Parametern können mehrere Monitore gleichzeitig umgeschaltet und die Standardeinstellung wiederhergestellt werden. Der gleichzeitige Programmzugriff mehrerer Benutzer wird über separate .ini-Dateien gesteuert. In diesen Dateien können weitere Optionen definiert werden (zum Beispiel Beschränkungen der Liste auf bestimmte Auflösungen). Über Batchdateien können komfortabel Auflösungen eingestellt, Programme gestartet und nach deren Beendigung wieder die Standardeinstellungen hergestellt werden. Die Dokumentation von MultiRes ist kurz und hilfreich.
Die fehlende Möglichkeit, durch einen Klick wieder auf die Standardeinstellung zurückzuschalten, trübt das Bild etwas. Diese Funktion kann zwar durch Verwendung einer Batch-Datei realisiert werden, was jedoch beim mehrfachen Hin- und Herschalten etwas umständlich anmutet.
SwitchResX (Mac)
- Anbieter: Stéphane Madrau
- Lizenz: Shareware (14 €), Testzeitraum 10 Tage
- Größe: 4,2 MB (zip-Datei), 6,4 MB (Installer)
- Installation: Ja
- Deinstallation: Ja
- Betriebssystem: Mac OS X
Wem beim Mac OS X die Bedienung der Monitoreinstellungen über die Menüleiste nicht ausreicht, der kann sich SwitchResX installieren.
Bis zu 10 Einstellungen können über „Benutzte Einstellungen merken“ vorgemerkt werden. Das sollte genügen, die geläufigsten Auflösungen durchzutesten.
Wer mehr Zugriffsmöglichkeiten auf die Monitoreinstellungen haben möchte, der ist mit SwitchResX gut bedient. Nach der Installation kann über das Kontextmenü nahezu jede Einstellung geändert werden.
Nähere Informationen bietet die mitgelieferte, ausführliche Dokumentation. Für bloße Webseitentests ist SwitchResX sicherlich zu umfangreich.
Konfigurationstools der Grafikkartenhersteller
Mittlerweile bietet jeder renommierte Grafikkartenhersteller Konfigurationstools an, mit denen die Einstellungen seiner Grafikkarten komfortabel über die Taskleiste geändert werden können; zwar meistens nicht über einen sondern über mehrere Mausklicks, doch bisweilen ist das Einstellen der Monitorauflösung über Schieberegler angenehmer und völlig ausreichend. Sollten Sie ein derartiges Tool im Lieferumfang vermissen, schauen Sie auf der Webseite Ihres Grafikkartenherstellers, ob er eines im Download- oder Supportbereich zur Verfügung stellt.
Auflösung ändern per Rechtsklick mit dem ATI Catalyst Control Center (unter Windows)
Fazit
Die simple Größenänderung des Browserfensters sollte in beinahe allen Fällen ausreichend sein, um das Webseitenlayout bei unterschiedlichen Auflösungen zu testen. Falls tatsächlich die Monitorauflösung geändert werden muss, so ist Quick Res 2 von Marko Oette die Empfehlung. Wer sich die gebräuchlichsten Auflösungen als Favoriten speichert, hat ein praktikables Werkzeug zur Hand.
Etwas umfangreicher, allerdings flexibler und für Multimonitor-Umgebungen geeignet ist MultiRes von EnTech. Sicherlich auch sinnvoll, wenn mehrere Kollegen gleichzeitig das Template testen sollen. ™
Ich weis, bin vielleicht etwas spät und dieser Artikel ist auch schon alt. Aber mit der heutigen Smartphone-Generation wird Responsive Design immer wichtiger. Also fast jede Grösse muss unterstützt werden.
@daniel: Genau so sehe ich das auch. Bei großen Monitoren ist das Browserfenster in der Praxis eher kleiner als 1024 breit und die schmaleren und kleineren Bildschirme nehmen eher zu. Begonnen beim Fernseher bis zum iPhone. Ich habe keine Lust, für jedes Gerät eine andere Version zu machen zumal sich die Geräte falsch „melden“ und die neueren wie iPhone sowieso aus einer Website machen was sie wollen.
Optimiert für 1024px breit – und: es darf kleiner sein – ist heute sicherlich ideal. Ich habe eine Website mit Frameset – pfui… – und wenn das Frameset mit einem Bildschirm kleiner als 500px breit aufgerufen wird, kommt nur die Menüleiste in größerer Schrift und dann geht es ohne Frames weiter. Ansonsten Liquid design auch für Grafik. Das ist so überall brauchbar.
Übrigens gibt es bei Opera die Möglichkeit sich oben in der Leiste die Größe des Browserfensters anzeigen zu lasssen. Dann kann man sich das ganze Theater mit Tools sparen.
Ich entwickel einfach in einer virtuellen Umgebung und stelle die Auflösung vom Gast passend ein.
Das klappt dann wenigstens mit allen Browsern ;-)
ich wuerde eher sagen der trend geht in die entgegengesetzte richtung, die bildschirmgroesse wird insgesamt gesehen kleiner. viele besucher benutzen laptops, netbooks oder auch smartphones/pdas welche nicht mur kleinere bildschirm haben, sondern teilweise ein seitenverhaeltniss von 16:9 statt der ueblichen 4:3.
Di emeisten Webentwickler benutzen eh die Webdeveloper Toolbat für Firefox, wo neben vielem weiteren nützlichem ein Tool dabei ist, welches genau das nebenbei erledigt.
Imo spricht nichts dagegen, auf 1024 x 768 px zu optimieren. Dass man einen 22-Zoll-Tft hat heißt nicht, dass man die Website auch auf 22 Zoll sehen möchte. Im Gegenteil, die meisten Leute haben wahrscheinlich drei oder mehr Anwendungen und Tabs gleichzeitig geöffnet und wollen eventuell auch schnell herumspringen, ohne zur Taskleiste zu gehen. Was aber wirklich blöd aussieht, sind große leere Flächen innerhalb einer Website, weil man mit JS oder weiß Gott was versucht, mit drei Spalten den kompletten Monitor auszufüllen.
@Helen: Sollte nicht allzu schwer selber zu programmieren sein, aber ich sehe da Probleme, wenn jemand die Fenstergröße mal verändert. Ich zum Beispiel habe einen 24″er und einen 19″er. Und es kommt schon häufig einmal vor, dass ich das Fenster mal hin und her schiebe. Da würde ich lieber auf ein gutes flexibles Layout setzen. Das macht am Ende weniger Probleme.
Sehr schöner und wichtiger Artikel! Ich benutze auch die Web Developer Toolbar. Wo ich mir nie so ganz sicher bin, ist die Bedeutung von „Window“. Ist das die äußere Kontur des Browsers, also der Anzeigebereich plus Menüleisten und Scrollbar etc. oder der Platz, der der Webseite zur Verfügung steht.
Wonach ich schon seit Ewigkeiten suche, ist ein jQuery- oder JS-Script, das den verfügbaren Platz beim Laden der Seite ausmißt und beim Unterschreiten eines gewissen Wertes ein alternatives Stylesheet anwendet oder unwichtigere DIVS auf display:none setzt. Und umgekehrt eine Widescreen-Stylesheet lädt, wenn jemand vor einem Riesenmonitor sitzt. Dem könnte man auch eine größere Version eine Bildes servieren.
Wer optimiert denn noch für eine spezielle Auflösung? Noch dazu 800×600? Trotzdem interessanter Beitrag.
@#8 Michael Sahm:
Stimmt, das habe ich doch wirklich überlesen…
Dann nehme ich alles zurück ;)
@#5 Mudder:
Normalerwiese wird ja nicht mehr auf 800×600 hin optimiert aber…
1) entscheidet das der Kunde bzw. die Zielgruppe und
2) sollte man zumindest mal einen Blick drauf werfen, damit man nicht do potenziell jemanden etwas nicht nutzbares ausliefert. Und wenn es halt dann zum horizontalen Scrollen ist aber auch das will getestet werden, im Zeitalter der gefloteten Layouts ;)
Hallo,
Sehr schöne und auch interessante Aufstellung. Spart sicherlich in Zukunft etwas Zeit und auch ein paar Nerven.
beste Grüße,
Lukas
@#2tawenga und #7 Frank:
Als drittgenanntes FF-AddOn wird die Web Developer Toolbar aufgeführt. Zugegeben, sie ist unglücklich unter dem Screenshot vom Firesizer platziert, doch genannt ist sie.
Ich verwende hier die Boardmittel von Webdeveloper. Diese wären hier in dieser Liste gut aufgehoben wie #2 schon bemerkt hat.
Jetzt muss nur noch was für Chrome kommen und ich wäre glücklich!
Mal so aus Neugier: Wer von Euch optimiert Seiten eigentlich noch für 800×600?
leicht irreführende Überschrift die nicht zum Thema passt, sonst recht netter Beitrag ;-)
Ich selbst benutze seit Jahren die Web Developer Toolbar für den FF und für den IE die Internet Explorer Developer Toolbar von MS, die gleiches dort leistet.
Danke für die Zusammenstellung!
Schöne Auflistung!
Bei den Firefox Addons wäre noch zu erwähnen, dass die „WebDeveloper Toolbar“, die ja auch faßt schon jeder Webdesigner / Web-Entwickler installiert hat, dass Feature unter ‚Resize‘ enthalten hat.
Leider muss man erst die gewünschten Größen selbst hinzufügen aber das muss man nur einmal machen – dann nie wieder…
eine schöne zusammenstellung der tools. vielen dank!