Streckbares Layout oder fixe Grösse?

Josh

Legendäres Mitglied
Hallo alle

Ich wollte mal die Frage in die Runde stellen, wie wichtig ihr es findet, ob eine Website streckbar ist, also keine fixe Grösse aufweist.

Wie ist z.B. das allgemeine Surfverhalten? Wenn jemand einen breiten Bildschirm hat bzw. eine hohe horizontale Auflösung - erwartet er dann auch, dass die verwendeten Programme / Seiten dafür optimiert sind? Oder wird er eher gar nicht im Vollbildmodus surfen?

Wie seht ihr das? Ist die Streckbarkeit einer Website für euch ein erstrebenswertes Ziel, oder optimiert ihr für eine bestimmte Auflösung?

Grüsse
Josh
 
Hallo,
also ich nehme erstmal an, dass die meisten Surfer eine Auflösung von 1024*768 haben.
Es wäre aber möglich, dass jemand noch mit 800*600 surft.
Deshalb würde ich es so machen (und es machen auch viele andere so, z.B. web.de oder ebay.de), dass man den Inhalt zentriert und an den Seiten soviel Platz lässt, dass es bei beiden Auflösungen keine horizontalen Leiste geben wird.
 
Die Diskussion läuft seit zirka Ende 1996, als Projectcool liquid Layouts forderte. Das war dann eine Zeitlang erstrebenswert und zehn Jahre später geben nicht mehr Websites, sondern Blogs den Layout-Trend an.
Bloglayouts sind aber meistens fix zentriert und nicht liquid, das erleichert auch brauchbare Printout-Layouts (mit oder ohne Print Stylesheet). Ich sehe zwei gleichzeitige Entwicklungen. Einerseits wird in den vielen bisherigen Webdesign-Trendlisten für 2006 vorausgesagt (bei Anil Dash, 37signals etc.) dass es mehr liquid Layouts geben wird. Doch andererseits entschieden sich die stärksten Autoritäten in dem Bereich (ALA und Zeldman - seit einiger Zeit auch 9rules) bei ihren aktuellen Redesigns für fixe Layouts. Hmm. Dies wurde natürlich sofort kritisiert, aber es wurde teilweise damit begründet dass erst CSS 3 vernünftige liquid Layouts ermöglichen wird, zum Teil wegen dem max-width Attribut.
Vieles wird wohl davon abhängen, wie gut der IE7 jetzt noch CSS-mässig repariert und weiter an die Standards angepasst wird. Je nachdem braucht es dann mehr oder weniger CSS Hacks, und dies wird auch den Trend bei den Site-Layouts beinflussen. Zudem gibt es immer mehr Firmen, die statt einer Website lieber gleich eine Blog-Lösung installieren, weil diese einfacher zu managen ist, ein brauchbares CMS drin hat, und ausserdem bereits SuMa-optimiert ist.
Zirka 50% der Webuser surfen gemäss WebHits auf 1024x768, nur noch 4% auf 800x600 (okay in den USA noch mehr als in Europa) - aber zirka 30% sind bereits auf 1280x1024 unterwegs und genau das ist das Problem mit den liquid Layouts. Auf grossen Monitoren und Breitformat-Laptops sehen liquid Layouts oft verzogen aus und die Textzeilen werden viel zu breit. Klar kann man das limitieren mit CSS oder Javascript, aber ich sah bislang selten gute Lösungen dafür. Und ich beobachte, dass immer mehr Websites ganz einfach aussehen wie Blogs: Fix zentriert, oben Masthead, links oder rechts die Side-Menus und unten der Footer. Dies scheint den Usern zu passen und wird langsam zum Standard.
Mir ists grundsätzlich egal ob es nun ein "streckbares" Design ist oder nicht, es muss zur jeweiligen Site passen. Für kleine Sites mit wenigen Side-Menus passt meistens ein fixes Layout am besten, für Portale mit variablen Inhalten ein liquides. Hauptsache das Ding fällt auch auf Breitformat-Laptops nicht visuell auseinander und ist vernünftig ausdruckbar.
Whitespace schrieb übrigens schon im 2003 unter dem Titel "Death of Liquid Layouts": "I saw two articles this week discussing fixed layouts at NotesTips.com and elementary. The final coincidence occurred when StopDesign and SimpleBits went fixed in the same week..." Die Entwicklung läuft also so, dass tonangebende Websites sich für "fixed" statt "liquid" entscheiden. Wie auch ALA und Zeldman, weil es der beste Kompromiss ist (ausser bei Portalen). Vielleicht ändert das mit CSS 3 aber ich bezweifle es, die Zukunft gehört erstmal dem fixen Blog-Layout. (ja - nicht alle Blogs haben dieses Layout, schon klar
wink.gif
 
Ciao Josh,

Diese Frage beschäftigt mich auch schon sehr lange.
Ich habe in meiner "Werkstatt" Auflösungen von 800x600 bis 3072x1590.

Ich habe gerne ein fixiertes Layout (dh. ohne die ollen Scrollbalken. Damit habe ich 2 Lösngsansätze:
1) Gummi-Layout, welches alles relativ anzeigt
-- Vorteil: Man programmiert ein Layout und fast alle sind glücklich
-- Nachteil: Die Cinemascope Bildschirme verzerren alles.

2) Mehrer Versionen für verschiedene Auflösungen, Abrage auf der index Page
-- Vorteil: Jeder Besucher hat das Layout, welches seiner Auflösung entspricht.
-- Nachteil: Du machst einen riesen Haufen Mehrarbeit.

Hier die aktuellen Statistiken von www.lafouly.net

1. 1024x768 59,46%
2. 1280x1024 23,42%
3. 800x600 7,21%
4. 1600x1200 2,70%
5. 1280x854 2,70%
6. 1280x800 1,80%
7. 1280x960 0,90%
8. 1680x1050 0,90%
9. 1920x1200 0,90%

Cheers, Boo
 
Ich nutze 'Gummi-Layout' - mit einer Ergänzung:

Den mittleren Teil, der ansonsten zu breit zu werden droht, mit

max-width

zumindest für FireFox / Opera einschränken, IE6 berücksichtigt dies noch nicht. Das reduziert für diese Browser die Folgen eines sehr breiten Bildschirms.
 
QUOTE (jAuer @ So 19.2.2006, 15:54) max-width

Mittels JavaScript liesse sich die Fülle der IE User bestimmt relativ einfach auch in den Genuss eines nicht zu breiten Layouts kommen.
 
Wenn ich mit Adobe GoLive arbeite. Wie würde das dann gehen das anzupassen? Also wenn ich da einen Hintergrund mache ist automatisch der ganze Bildschrim damit bedeckt, oder weiß ich nur nicht wie man das da anpasst?
 
QUOTE Wenn ich mit Adobe GoLive arbeite. Wie würde das dann gehen das anzupassen? Also wenn ich da einen Hintergrund mache ist automatisch der ganze Bildschrim damit bedeckt, oder weiß ich nur nicht wie man das da anpasst?


Mehrere Möglichkeiten:

- Breite vom body einschränken
- beim body einen breiten Rand (margin) festlegen
- div-Container definieren, der eine gewisse Breite hat

In CSS ist das alles kein Problem. Aber wie das in GoLive geht? Keine Ahnung, ich schreibe meine Seiten per Hand bzw. per Xml/Xsl.
 
Geht mal auf Beepworld und dann auf HTML und dann steht da die Bildschirmauflösung wird festgestellt, wie funktioniert denn sowas? Haben die da eine HTML Code generiert?

Viele Grüße
 
Ein kleiner Blick in den Quellcode lehrt:

CODE
<script language="JavaScript1.2" type="text/javascript">
<!--
function Umleitung()
{
var FBreite = 0;
var FHoehe = 0;

FBreite = screen.width;
FHoehe = screen.height;

if (FBreite <= 800 || FHoehe <= 600)
self.location.href = 'http://www.beepworld.de/main.pl?t=800_600_index&l=1';
else
self.location.href = 'http://www.beepworld.de/main.pl?t=1024_768_index&l=1';
}
// -->
</script>
</head>
<body bgcolor='#FFFFFF' onLoad="Umleitung()">
<P align="center">
Ihre Bildschirmauflösung wird festgestellt ... bitte warten!<br />

<br /><a href="main.pl?t=800_600_index">800x600</a>
<br /><a href="main.pl?t=1024_768_index&l=1">1024x768</a>
<br /><a href="800x600/index.htm">800x600</a>
<br /><a href="1024x768/index.htm">1024x768</a>


Einfach mit JavaScript ermitteln und auf die entsprechende hartcodierte Version weiterleiten.
Allerdings ist das Script etwas blöde, falls man eine Auflösung von 900 zu 700 hätte.

Halte ich aber für schlecht, da man dann zwei (oder mehrere) Versionen parallel pflegen muß. Dann lieber Gummi-Layout.

PS: Mein schon ziemlich altes Download.exe von 2003 leistet in solchen Fällen gute Dienste.
 
Zurück
Oben