Bildschirm-Auflösung wichtig beim designen ?

Xenet

Aktives Mitglied
Thread Starter
Dabei seit
03.09.2006
Beiträge
157
Reaktionspunkte
2
hallo macuser!

mal ne frage, ich beschäftige mich schon seit etwas längerem mit dem thema webdesign. nun bin ich seit einem halben jahr auf mac umgestiegen (und begeistert natürlich).

Vorher war meine aufloesung auf dem monitor 1024 x 768. In photoshop website layouts erstellt und online gestellt. alles ok und fuer die meisten user auch im browser ansehbar.

nun arbeite ich aber in 1600 x 1050. Wenn ich aber nun ein website layout erstelle ist das doch viel zu groß und ich selber kann nicht einschätzen in wie weit ich das design quetschen kann so das es fuer jemanden der 1024 x 768 eingestellt hat noch gut aussieht.

nun meine frage wie macht ihr das ? ich habe hier ne seite fertig aber die ist viel zu groß geraten. arbeitet ihr sofort mit nem layer der 1024x xy groß ist damit ihr das hinterher nicht verändern muesst ?
 
*ernst.neh.grinsen.verkneif.und.ernsthafte.antwort.geb* ;)

http://www.webdesignerstoolkit.com/ ist u.a. bei mir im Einsatz…
Hauptsächlich geh ich immer noch auf eine 1024x...-Auflösung,
allerdings immer unter Beachtung auch kleinerer und größerer
Auflösungen, d.h. flexibel…

lea :)

Achja, ich schieb dich mal ins Web Page Design, da bist du besser aufgehoben…
 
das kann ich auch nur be"ja"n. Du kannst selbstverstaendlich dein Dokument rastern und so dein Design an 1024x768 anpassen, allerdings wuerde ich dir auch empfehlen gleich ein Dokument in der Groesse zu erstellen.
Auch wenn dir 1600x1200 momentan zu gross ist, wirst du spaeter dankbar dafuer sein eine so hohe Aufloesung zu haben, der Uebersicht wegen, und wenn du flexible Layoute etc. erstellen moechtest (e.g. 800x600 + )...
 
Die 1024 x 768px voll auszunutzen ist nicht so gut. Unter der Voraussetzung, dass diese Auflösung der beste Kompromiss ist, sollte man den Platz der Scrollbalken, Toolbars und Adresszeichenleisten der jeweiligen Browser einrechnen. So bleiben maximal ca. 950 x 650-700px.

Ferner bietet es sich an, die Blocklevel-Elemente und Schriftgrössen eines XHTML-Dokumentes mittels relativer Grössen per CSS definieren, also em statt px. So skaliert die gesamte Seite schön mit der verwendeten Schriftgrösse des Benutzers mit.

Was heisst das nun konkret? Gehe ich von 960px Breite als definierte Breite des Dokuments in Photoshop aus, kann ich folgendermassen die Webseite "elastisch" machen:

Code:
body {
   font-family : Verdana, Helvetica, sans-serif;
   font-size: 62.5%; 
   color: #000;
   background-color: #fff;
}

Mit der 62.5% Methode für die Schriftgrösse setze ich für den body des XHTML-Dokuments Browser- und OS-übergreifend die darzustellende Schriftgrösse auf 10px ein. Die Standardgrösse der Browser sind 16px = 100%, also sind 10px = 62.5% (die Rechnung stimmt ;)).

Nun habe ich die Möglichkeit, via em pixelgenau zu arbeiten: 1em = 10px, 1.5em = 15px. EM ist eine relative Grössenangabe und bezieht sich immer auf die Grösse des Elternelements.

Sprich, ich kann meinen Inhaltscontainer (z. B. ein DIV) mit folgender Breite definieren:

Code:
div.content {
   width: 96em;
}

Damit habe ich 960px festgelegt, da 1em = 10px, also 96em * 10px = 960px.

Vorteil dieser Methode ist, dass das Layout mit benutzerdefinierten Schriftgrösse gut mitskaliert (wenn das Konzept und Layout der Seite konsequent durchgezogen wurde) und die Seite in allen Browsern anschlagsgenau gleich aussieht (Zeichen pro Zeile).

Ich habe ganz gute Erfahrungen mit der EM-Methode in meinen letzten Projekten gemacht.

Hier gibt es noch ein paar mehr Meinungen zum Thema "Auflösung von Webseiten": https://www.macuser.de/forum/showthread.php?t=236048

2nd
 
Zurück
Oben Unten