Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Michael Sahm 5. August 2009

Weil “Optimiert für 800x600” einfach nicht ausreicht…

Die Erstellung einer Webseite oder eines Templates schließt den Test für ver­schie­de­ne Browser und Monitorauflösungen ein. Zwar kön­nen Onlinedienste wie Browsershots oder Adobes BrowserLab hier unter­stüt­zen, doch sind die­se Angebote auf Grund der teil­wei­se über­wäl­ti­gen­den Wartezeiten für Tests zwi­schen­durch kaum zu gebrau­chen. Um wenigs­tens die Auswirkungen der geläu­figs­ten Monitorauflösungen auf das Layout zu tes­ten, exis­tiert eine Reihe von Möglichkeiten. Im Folgenden eine Übersicht, unter­teilt 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 ent­spre­chen­de Auflösung ver­klei­nert wird. Beachten Sie, dass den meis­ten Seitenbesuchern durch Menüleisten oder Erweiterungen weni­ger Platz zur Verfügung steht, als es ihr Browser in maxi­mier­ter Ansicht zulie­ße.

Firefox-Addons
Für den Firefox exis­tie­ren eine Reihe Addons, die das Browserfenster auf fest vor­ge­ge­be­ne oder frei defi­nier­ba­re Größen ein­stel­len:

  • Window Resizer von Yellowpipe
    Kann über das Kontextmenü auf­ge­ru­fen wer­den. Bietet jedoch nur fest vor­ein­ge­stell­te Werte zur Auswahl an.
  • Firesizer
    Wird über die Statusleiste bedient. Standardmäßig wird die aktu­el­le Fenstergröße ange­zeigt. Durch einen Rechtsklick mit der Maus öff­net sich ein Kontextmenü, in dem zuvor defi­nier­te Fenstergrößen aus­ge­wählt wer­den kön­nen.
  • Web Developer Toolbar (unter der Option “Größe”) von Chris Pederick
    Aufwändiges Addon zum umfang­rei­chen Testen von Webseiten. Über eine Menüleiste kön­nen alle Funktionen auf­ge­ru­fen wer­den, unter ande­rem auch die Änderung der Fenstergröße (Menüpunkt “Größe”).

Für Webentwickler, die mit dem Firefox ihre Templates bau­en, sicher­lich eine prak­ti­ka­ble Lösung, um die Positionierung von Seitenelementen zu tes­ten. In den Addon-Diskussionsforen wird ver­ein­zelt von Ungenauigkeiten bei der Umsetzung der Fenstergrößen berich­tet. Bei pixel­ge­nau­em Layout soll­te also immer auch ein Stück Skepsis ange­bracht sein.

Opera
Für Opera exis­tiert die Web Accessibility Toolbar (WAT) von The Paciello Group. Nach der Installation erscheint wie beim Firefox eine neue Menüleiste, die umfang­rei­che Webseitentests ermög­licht. Über den Menüpunkt “Resize” kann eine vor­de­fi­nier­te oder frei bestimm­te Fenstergröße aus­ge­wählt wer­den. Die WAT öff­net die Seite dann in einem sepa­ra­ten Fenster.

Internet Explorer
Der Internet Explorer kann mit der Internet Explorer Developer Toolbar von Microsoft erwei­tert wer­den. Nach der Installation wird die Toolbar in der Menüleiste über “Ansicht -> Explorer-Leiste -> IE Developer Toolbar” am unte­ren Fensterrand ein­ge­blen­det. Dort ste­hen Ihnen nun umfang­rei­che Testmöglichkeiten zur Verfügung, unter ande­rem auch die Größenänderung des Browserfensters über “Tools -> Resize”. Sie kön­nen dort vor­de­fi­nier­te Werte aus­wäh­len oder eige­ne Werte ange­ben.

Browserfenster per JavaScript anpas­sen
Über JavaScript kön­nen Sie die Fenstergröße des Browsers ver­än­dern. Geben Sie dazu in der Adresszeile des Browsers Folgendes ein:

javascript:window.resizeTo(B,H)

Setzen Sie für B und T die gewünsch­ten Werte ein. Sobald sich das Fenster geän­dert hat, kön­nen Sie die­sen Wert als Lesezeichen spei­chern, um spä­ter schnel­ler dar­auf zuzu­grei­fen. Achten Sie dar­auf, dass Sie in den Sicherheitseinstellungen Ihres Browsers die Ausführungen von JavaScript ein­ge­schal­tet haben. Außerdem darf bei eini­gen Browsern das Fenster nicht maxi­miert sein.

Sizer
Ein klei­nes Tool zur Größenänderung jedes Fensters ist “Sizer” von Brian Apps. Nach der Installation wird es über die Taskleiste mit der rech­ten Maustaste gesteu­ert.

Neben der Größenänderung kann auch die Fensterposition ange­ge­ben wer­den. Im Kontextmenü oben wird ange­zeigt, auf wel­ches Fenster sich die Größenänderung bezieht. Klicken Sie auf die gewünsch­te Auflösung und das ent­spre­chen­de Fenster wird sofort ange­passt.

Programme zum Ändern der Monitorauflösung

Manchmal muss es eben doch der gan­ze Bildschirm sein. Auch dafür exis­tie­ren klei­ne Helferlein, die auf Mausklick die Monitorauflösung ändern; teil­wei­se aller­dings mit uner­wünsch­ten Nebenwirkungen. Nach dem Zurücksetzen auf die Standardauflösung fin­den sich oft die Icons und Fenster nicht mehr an ihrem vor­be­stimm­ten Ort.

Quick Res 2

  • Anbieter: Marko Oette (Kein Download über die Webseite mög­lich, ver­füg­bar bei diver­sen Softwareportalen)
  • Lizenz: Freeware
  • Größe: 1,7MB (gepack­te Setup-Datei), 78KB (instal­liert)
  • Installation: Ja, Programm ist auch durch allei­ni­ges Entpacken mit zum Beispiel UniversalExtractor ohne Installation lauf­fä­hig. Eventuell müs­sen die extra­hier­ten DLLs von Hand ins Windows-Systemverzeichnis kopiert wer­den.
  • 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 aktu­el­len Version aller­dings etwa 3 Jahre alt. Zwischenzeitlich hat der Autor Marko Oette sei­ne Webseite über­ar­bei­tet und bie­tet das Programm dort nicht mehr zum Download an. Die Suchmaschine Ihres Vertrauens wird sicher­lich fün­dig.

Nach dem Start von Quick Res 2 kön­nen Sie das Programm in der Taskleiste mit der lin­ken Maustaste bedie­nen. Es öff­net sich der Einstellungsdialog zur Auswahl der Monitoreinstellungen. Ausgehend von der Farbtiefe öff­net sich in einem Untermenü die Liste der mög­li­chen Auflösungen. Unter “Einstellungen” kön­nen Sie unter ande­rem die Wartezeit bis zur Übernahme der neu­en Einstellungen fest­le­gen.

Die Favoriten las­sen recht ein­fach ver­wal­ten. Unter “Favoriten” akti­vie­ren Sie den Punkt “Bearbeiten” durch einen Mausklick. Jede Einstellung, die Sie nun aus­wäh­len, wird – ohne sie aus­zu­füh­ren – direkt als Favorit gespei­chert. Die Option “Alte Auflösung wie­der­her­stel­len” wird akti­viert, sobald Sie eine ande­re Auflösung ein­ge­stellt haben. Entfernen Sie das Häkchen bei “Bearbeiten” wie­der, um eine neue Auflösung ein­zu­stel­len.

Auch, wenn das Programm seit eini­ger Zeit nicht mehr gepflegt zu wer­den scheint, erfüllt Quick Res 2 sei­ne Aufgabe kom­for­ta­bel und schnell. Je nach Monitor und Grafikkarte soll­ten Sie sich auf die Programmsteuerung über die Favoriten beschrän­ken, da die Liste aller Modi schnell unüber­sicht­lich wird.

Display Changer

  • Anbieter: Stefan Tucker, 12noon
  • Lizenz: Freeware für pri­va­te Nutzung, 499 Dollar für eine Unternehmenslizenz
  • Größe: 503 KB (Setup-Datei), 150–200KB instal­liert
  • Installation: Ja; Programm ist auch durch allei­ni­ges Entpacken mit zum Beispiel UniversalExtractor ohne Installation lauf­fä­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 (ehe­mals Resolution Changer) wird über die Kommandozeile gestar­tet und gesteu­ert. Über eine Vielzahl von Parametern kön­nen in einer Multimonitorumgebung Auflösung, Farbtiefe und Frequenz jedes Monitors bestimmt wer­den. Außerdem kann er Anwendungen mit vor­de­fi­nier­ten Monitoreinstellungen star­ten, die nach Beenden auto­ma­tisch wie­der zurück­ge­stellt wer­den. Eine aus­führ­li­che Liste der Kommandozeilen-Parameter nebst Erläuterungen fin­det sich auf den Seiten von Stefan Tucker.

Wegen der aus­schließ­li­chen Bedienung über die Kommandozeile sicher nur bedingt für Webentwickler zu gebrau­chen. Der Parameterumfang ist aller­dings beein­dru­ckend und spielt bei der Verwendung über Batchdateien sei­ne Stärken aus. Warten wir auf einen ambi­tio­nier­ten Software-Entwickler, der eine anwen­der­freund­li­che GUI dafür pro­gram­miert. Ob aller­dings dem gewerb­li­chen Nutzer allei­ne der Parameterumfang 499 Dollar wert ist, sei dahin­ge­stellt…

MultiRes

  • Anbieter: EnTech, Taiwan
  • Lizenz: Freeware für den pri­va­ten Gebrauch, $1 pro User bei gewerb­li­cher Nutzung
  • Größe: 102 KB (Setup-Datei), 116 KB (instal­liert)
  • Installation: Ja; Programm ist auch durch allei­ni­ges Entpacken mit zum Beispiel UniversalExtractor ohne Installation lauf­fä­hig.
  • Deinstallation: Ja
  • Betriebssystem: Windows 95 bis zu Windows XP

MultiRes aus dem Hause EnTech hat trotz der gerin­gen Größe viel zu bie­ten. Nach der Installation kann das Tool, wie gewohnt, über die Taskleiste bedient wer­den. In der Standardeinstellung (Programmstart ohne Parameter) wer­den alle moni­tor­ver­träg­li­chen Einstellungen zur Auswahl ange­bo­ten, sor­tiert nach Farbtiefe und Auflösung. Die aktu­el­le Einstellung ist mit einem Häkchen mar­kiert.

Mit Kommandozeilen-Parametern kön­nen meh­re­re Monitore gleich­zei­tig umge­schal­tet und die Standardeinstellung wie­der­her­ge­stellt wer­den. Der gleich­zei­ti­ge Programmzugriff meh­re­rer Benutzer wird über sepa­ra­te .ini-Dateien gesteu­ert. In die­sen Dateien kön­nen wei­te­re Optionen defi­niert wer­den (zum Beispiel Beschränkungen der Liste auf bestimm­te Auflösungen). Über Batchdateien kön­nen kom­for­ta­bel Auflösungen ein­ge­stellt, Programme gestar­tet und nach deren Beendigung wie­der die Standardeinstellungen her­ge­stellt wer­den. Die Dokumentation von MultiRes ist kurz und hilf­reich.

Die feh­len­de Möglichkeit, durch einen Klick wie­der auf die Standardeinstellung zurück­zu­schal­ten, trübt das Bild etwas. Diese Funktion kann zwar durch Verwendung einer Batch-Datei rea­li­siert wer­den, was jedoch beim mehr­fa­chen Hin- und Herschalten etwas umständ­lich anmu­tet.

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 aus­reicht, der kann sich SwitchResX instal­lie­ren.

Bis zu 10 Einstellungen kön­nen über “Benutzte Einstellungen mer­ken” vor­ge­merkt wer­den. Das soll­te genü­gen, die geläu­figs­ten Auflösungen durch­zu­tes­ten.

Wer mehr Zugriffsmöglichkeiten auf die Monitoreinstellungen haben möch­te, der ist mit SwitchResX gut bedient. Nach der Installation kann über das Kontextmenü nahe­zu jede Einstellung geän­dert wer­den.

Nähere Informationen bie­tet die mit­ge­lie­fer­te, aus­führ­li­che Dokumentation. Für blo­ße Webseitentests ist SwitchResX sicher­lich zu umfang­reich.

Konfigurationstools der Grafikkartenhersteller
Mittlerweile bie­tet jeder renom­mier­te Grafikkartenhersteller Konfigurationstools an, mit denen die Einstellungen sei­ner Grafikkarten kom­for­ta­bel über die Taskleiste geän­dert wer­den kön­nen; zwar meis­tens nicht über einen son­dern über meh­re­re Mausklicks, doch bis­wei­len ist das Einstellen der Monitorauflösung über Schieberegler ange­neh­mer und völ­lig aus­rei­chend. Sollten Sie ein der­ar­ti­ges Tool im Lieferumfang ver­mis­sen, schau­en 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 simp­le Größenänderung des Browserfensters soll­te in bei­na­he allen Fällen aus­rei­chend sein, um das Webseitenlayout bei unter­schied­li­chen Auflösungen zu tes­ten. Falls tat­säch­lich die Monitorauflösung geän­dert wer­den muss, so ist Quick Res 2 von Marko Oette die Empfehlung. Wer sich die gebräuch­lichs­ten Auflösungen als Favoriten spei­chert, hat ein prak­ti­ka­bles Werkzeug zur Hand.

Etwas umfang­rei­cher, aller­dings fle­xi­bler und für Multimonitor-Umgebungen geeig­net ist MultiRes von EnTech. Sicherlich auch sinn­voll, wenn meh­re­re Kollegen gleich­zei­tig das Template tes­ten sol­len. (tm)

Michael Sahm

Michael Sahm ist technischer Autor für Soft- und Hardwaredokumentation sowie engagierter Blogautor für viele aktuelle und wissenswerte Themen.

19 Kommentare

  1. Ich weis, bin viel­leicht etwas spät und die­ser Artikel ist auch schon alt. Aber mit der heu­ti­gen Smartphone-Generation wird Responsive Design immer wich­ti­ger. Also fast jede Grösse muss unter­stützt wer­den.

  2. @daniel: Genau so sehe ich das auch. Bei gro­ßen Monitoren ist das Browserfenster in der Praxis eher klei­ner als 1024 breit und die schma­le­ren und klei­ne­ren Bildschirme neh­men eher zu. Begonnen beim Fernseher bis zum iPhone. Ich habe kei­ne Lust, für jedes Gerät eine ande­re Version zu machen zumal sich die Geräte falsch “mel­den” und die neue­ren wie iPhone sowie­so aus einer Website machen was sie wol­len.

    Optimiert für 1024px breit – und: es darf klei­ner sein – ist heu­te sicher­lich ide­al. Ich habe eine Website mit Frameset – pfui… – und wenn das Frameset mit einem Bildschirm klei­ner als 500px breit auf­ge­ru­fen wird, kommt nur die Menüleiste in grö­ße­rer Schrift und dann geht es ohne Frames wei­ter. Ansonsten Liquid design auch für Grafik. Das ist so über­all brauch­bar.

    Übrigens gibt es bei Opera die Möglichkeit sich oben in der Leiste die Größe des Browserfensters anzei­gen zu lass­sen. Dann kann man sich das gan­ze Theater mit Tools spa­ren.

  3. Ich ent­wi­ckel ein­fach in einer vir­tu­el­len Umgebung und stel­le die Auflösung vom Gast pas­send ein.
    Das klappt dann wenigs­tens mit allen Browsern ;-)

  4. ich wuer­de eher sagen der trend geht in die ent­ge­gen­ge­setz­te rich­tung, die bild­schirm­groes­se wird ins­ge­samt gese­hen klei­ner. vie­le besu­cher benut­zen lap­tops, net­books oder auch smartphones/pdas wel­che nicht mur klei­ne­re bild­schirm haben, son­dern teil­wei­se ein sei­ten­verha­elt­niss von 16:9 statt der uebli­chen 4:3.

  5. Di emeis­ten Webentwickler benut­zen eh die Webdeveloper Toolbat für Firefox, wo neben vie­lem wei­te­ren nütz­li­chem ein Tool dabei ist, wel­ches genau das neben­bei erle­digt.

  6. Imo spricht nichts dage­gen, auf 1024 x 768 px zu opti­mie­ren. Dass man einen 22-Zoll-Tft hat heißt nicht, dass man die Website auch auf 22 Zoll sehen möch­te. Im Gegenteil, die meis­ten Leute haben wahr­schein­lich drei oder mehr Anwendungen und Tabs gleich­zei­tig geöff­net und wol­len even­tu­ell auch schnell her­um­sprin­gen, ohne zur Taskleiste zu gehen. Was aber wirk­lich blöd aus­sieht, sind gro­ße lee­re Flächen inner­halb einer Website, weil man mit JS oder weiß Gott was ver­sucht, mit drei Spalten den kom­plet­ten Monitor aus­zu­fül­len.

  7. @Helen: Sollte nicht all­zu schwer sel­ber zu pro­gram­mie­ren sein, aber ich sehe da Probleme, wenn jemand die Fenstergröße mal ver­än­dert. Ich zum Beispiel habe einen 24“er und einen 19“er. Und es kommt schon häu­fig ein­mal vor, dass ich das Fenster mal hin und her schie­be. Da wür­de ich lie­ber auf ein gutes fle­xi­bles Layout set­zen. Das macht am Ende weni­ger Probleme.

  8. Sehr schö­ner und wich­ti­ger Artikel! Ich benut­ze auch die Web Developer Toolbar. Wo ich mir nie so ganz sicher bin, ist die Bedeutung von “Window”. Ist das die äuße­re 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 ver­füg­ba­ren Platz beim Laden der Seite aus­mißt und beim Unterschreiten eines gewis­sen Wertes ein alter­na­ti­ves Stylesheet anwen­det oder unwich­ti­ge­re DIVS auf display:none setzt. Und umge­kehrt eine Widescreen-Stylesheet lädt, wenn jemand vor einem Riesenmonitor sitzt. Dem könn­te man auch eine grö­ße­re Version eine Bildes ser­vie­ren.

  9. Wer opti­miert denn noch für eine spe­zi­el­le Auflösung? Noch dazu 800x600? Trotzdem inter­es­san­ter Beitrag.

  10. @#8 Michael Sahm:
    Stimmt, das habe ich doch wirk­lich über­le­sen…
    Dann neh­me ich alles zurück ;)

    @#5 Mudder:
    Normalerwiese wird ja nicht mehr auf 800x600 hin opti­miert aber…
    1) ent­schei­det das der Kunde bzw. die Zielgruppe und
    2) soll­te man zumin­dest mal einen Blick drauf wer­fen, damit man nicht do poten­zi­ell jeman­den etwas nicht nutz­ba­res aus­lie­fert. Und wenn es halt dann zum hori­zon­ta­len Scrollen ist aber auch das will getes­tet wer­den, im Zeitalter der geflo­te­ten Layouts ;)

  11. Hallo,

    Sehr schö­ne und auch inter­es­san­te Aufstellung. Spart sicher­lich in Zukunft etwas Zeit und auch ein paar Nerven.

    bes­te Grüße,
    Lukas

  12. @#2tawenga und #7 Frank:

    Als dritt­ge­nann­tes FF-AddOn wird die Web Developer Toolbar auf­ge­führt. Zugegeben, sie ist unglück­lich unter dem Screenshot vom Firesizer plat­ziert, doch genannt ist sie.

  13. Ich ver­wen­de hier die Boardmittel von Webdeveloper. Diese wären hier in die­ser Liste gut auf­ge­ho­ben wie #2 schon bemerkt hat.

  14. Jetzt muss nur noch was für Chrome kom­men und ich wäre glück­lich!

  15. Mal so aus Neugier: Wer von Euch opti­miert Seiten eigent­lich noch für 800x600?

  16. leicht irre­füh­ren­de Überschrift die nicht zum Thema passt, sonst recht net­ter Beitrag ;-)

  17. Ich selbst benut­ze seit Jahren die Web Developer Toolbar für den FF und für den IE die Internet Explorer Developer Toolbar von MS, die glei­ches dort leis­tet.

    Danke für die Zusammenstellung!

  18. Schöne Auflistung!
    Bei den Firefox Addons wäre noch zu erwäh­nen, dass die “WebDeveloper Toolbar”, die ja auch faßt schon jeder Webdesigner / Web-Entwickler instal­liert hat, dass Feature unter ‘Resize’ ent­hal­ten hat.
    Leider muss man erst die gewünsch­ten Größen selbst hin­zu­fü­gen aber das muss man nur ein­mal machen – dann nie wie­der…

  19. eine schö­ne zusam­men­stel­lung der tools. vie­len dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.