nicht angemeldet
Was versteht man unter liquid design?
0 0 0 0 0 0 0 0 0 0 0 Nur mal so
0
0 0
Was versteht man unter liquid design?
Hallo zusammen,
im Bereich CSS-HTML-WebDesign allgemein bin ich noch ein Newbie. Kann mir jemand sagen was man unter liquid design versteht?
Was sind da die Vor- und Nachteile?
Wo finde ich weiterführende Informationen zu diesem Thema?
Ich danke Euch schon mal im Voraus.
Gruss
Struppi
-
Man spricht von Liquid-Design, wenn eine WebSite nicht nur für eine Auflösung absolut erstellt wurde, sondern die Site mittels relativer Angaben (%,em) aufgeteilt wurde, sodass sie auf allen Auflösungen bildschirmfüllend zu betrachten ist.
Greetings MrS
Ein Beispiel (von mir *fg*):
-
Hi,
Ein Beispiel (von mir *fg*):
ein typisches Beispiel, das mMn gut zeigt, was eben nicht als liquid design bezeichnet werden kann.
Die Anordnung der Seitenbereiche ist hier bei kleinen Fenstern nicht sinnvoll. Die Inhalte der rechte Spalte müssen nämlich nicht zwangsläufig rechts platziert sein und dadurch der Anzeigebereich für den Inhalt unnötig verkleinern. Dasselbe gilt für die linke Spalte. Zugunsten der besseren Lesbarkeit in (sehr) kleinen Fenstern sollten diese Bereiche "fliessen" und keine starre (Tabellen-)Position haben.Außerdem läßt sich der Schriftgrad im IE nicht ändern.
Übrigens war mein IE hier beim Verkleinern des Fensters gerade abgestürzt...
freundliche Grüße
Ingo-
Hallo Ingo,
Übrigens war mein IE hier beim Verkleinern des Fensters gerade abgestürzt...
Meiner auch!
Mit freundlichen Grüßen
André
--
http://forum.de.selfhtml.org/archiv/2003/10/60651/
Und denkt dran - lieber um fünf zuhause als um halb im Zinksarg ...-
Der neue nicht, aber jetzt mein alter auch....
Zufällig jemand 'ne Ahnung warum das sein könnte?
GreetZ MrS
-
Moin!
... IE Abstürze
Zufällig jemand 'ne Ahnung warum das sein könnte?
Vermutlich weil der IE mit validem HTML/CSS nicht so gut klar kommt. Ein neuer Angriff der Gatianer auf die Standards?
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Development. Auch für seriöse Agenturen.-
Hallo!
Ein neuer Angriff der Gatianer auf die Standards?
^^^^^^^^
Der was? ... Und Du wirst zugeben: googlen bringt nichts ;-)Beste Grüße
Viennamade-
Hallo Viennamade.
Ein neuer Angriff der Gatianer auf die Standards?
^^^^^^^^
Der was? ... Und Du wirst zugeben: googlen bringt nichts ;-)<psst>
Er meint die Billyboys...
</psst>Freundschaft!
Siechfred--
Wissen bedeutet zu wissen, wo es steht.-
Hallo Siechfred!
Ein neuer Angriff der Gatianer auf die Standards?
^^^^^^^^
Der was? ... Und Du wirst zugeben: googlen bringt nichts ;-)<psst>
Er meint die Billyboys...
</psst>:-) Ja schon, aber meine Frage zielte ja auf die Etymologie des Wortes.
Beste Grüße
Viennamade-
Moin!
Ein neuer Angriff der Gatianer auf die Standards?
^^^^^^^^
Der was? ... Und Du wirst zugeben: googlen bringt nichts ;-)http://www.it-schule.de/gatianer_or_gatesianer_ist_hier_die_frage.html
:))
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Development. Auch für seriöse Agenturen.-
Hallo!
Ein neuer Angriff der Gatianer auf die Standards?
^^^^^^^^http://www.it-schule.de/gatianer_or_gatesianer_ist_hier_die_frage.html
Jetzt gehts!
^^^^^Alles klar & :-)))
Viennamade -
Moin
<img src="http://www.it-schule.de/images/logo4.gif" border="0" alt="">
Ist Dir eigentlich noch nie aufgefallen, daß nach dem letzten Anstrich ein Leerzeichen fehlt?Thomas J.
-
Moin!
<img src="http://www.it-schule.de/images/logo4.gif" border="0" alt="">
Ist Dir eigentlich noch nie aufgefallen, daß nach dem letzten Anstrich ein Leerzeichen fehlt?Was heisst aufgefallen? Das ist Absicht!-)
Etwas muss es doch zu meckern geben :) Das schafft schließlich Kundenbindung. Außerdem ist das Blueboard nicht ordentlich abgewischt. Das soll den Seminarsuchen nahebringen, dass es überhaupt nicht schlimm ist, etwas nicht zu wissen oder zu können. Der da vorn kann ja nicht mal richtig schreiben und Tafel abwischen. So ist das. So!Außerdem ist das moderne Kunst. Erstmal wird geschmiert und sich dann seitens des Künstlers diebisch gefreut, wenn die Kritiker drei Seiten mit jenem füllen den sie aus dem "Werk" als Aussage herauslesen.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Development. Auch für seriöse Agenturen.-
Hi,
Außerdem ist das moderne Kunst.
Was mich aber nochmal zu der bislang unbeantworteten Frage bringt, was die gewerbliche Verwendung eines "Bart Simpson"-Bildes denn so an Lizenzgebühren kostet?
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! -
Moin
Was heisst aufgefallen? Das ist Absicht!-)
Etwas muss es doch zu meckern geben :) Das schafft schließlich Kundenbindung.Wow!
Geniale Strategie, muß ich mir merken.Der da vorn kann ja nicht mal richtig schreiben
Wieso nicht?
Ich kenne jedenfalls niemanden, der die Courier als Handschrift so perfekt beherrscht.Thomas J.
-
-
-
-
-
-
-
-
-
Hallo Ingo,
Übrigens war mein IE hier beim Verkleinern des Fensters gerade abgestürzt...
Meiner auch!
Mein Test-IE (Version 6.0.2800.1106.xpsp2.030422-1633) auch gerade
Besonders interessant fand ich, dass mein Maus-Cursor der für Horizontal-Größe-ändern war ( <--> ) und das auch blieb, und ich kam mit dem nicht mehr in meine Task-Leiste (der Cursor blieb brav davor stehen)..xpsp2.
Das steht doch eigentlich für die Windows-Version, oder irre ich mich da. Ich habe Windows XP mit Service Pack _1_, SP2 kommt mir so schnell nicht auf die Platte...
Thats all Folks
eb4--
Rettet die Wälder
Esst Biber und Spechte!
-
-
-
-
Hi,
eigentlich keine schlechte Frage, denn hier gehen die Meinungen wohl doch ziemlich auseinander; jedenfalls habe ich schon einige recht unterschiedliche Auffassungen gelesen.
Meinem Verständnis nach müssen 3 Kriterien erfüllt sein:
1. Der Inhalt der Seite muß den zur Verfügung stehenden Raum ausnutzen, sich also an unterschiedliche Fenstergrößen anpassen.
2. Die Darstellung der Seite sollte bei jeder gängigen Anzeige(größe) sinnvoll sein, insbesondere die Anordnung der Seitenbereiche muß logisch bleiben und sollte sich nicht ausschließlich dem Designwunsch unterordnen.
3. Die Schriftgrößen müssen sich problemlos ändern lassen, ohne daß es z.B. zu Überlagerungen kommt.In den meisten Fällen dürfte FLOAT hierzu die Grundlage sein, denn diese Eigenschaft impliziert das Fliessen ja bereits und ermöglicht in der Tat, daß sich die Seitenbereiche je nach Fenstergröße unterschiedlich anordnen können.
Unter bestimmten Bedingungen würde ich aber auch Tabellen als (einzig) sinnvolle Umsetzung sehen. Nämlich dann, wenn der logische Aufbau der Seite eine Mehrspaltigkeit voraussetzt. Dies sogar dann, wenn es sich nicht tabellarische Daten handelt (auch wenn mir jetzt spontan kein solches Beispiel einfällt;-)
Denn nur Tabellen ermöglichen eine variable Spaltenbreite.freundliche Grüße
Ingo-
Hallo,
Denn nur Tabellen ermöglichen eine variable Spaltenbreite.
Du meinst eine sich an den Inhalt anpassende Spaltenbreite?
Eine variable, sich der View-Port-Breite anpassende Spaltenbreite bekommt man auch ohne Tabelle hin:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltig</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
h1 {font-size:2em; text-align:center; border:1px solid black; min-width:400px;}
#dreiSp {position:relative; min-width:400px;}
#lSp, #mSp, #rSp {position:absolute; top:0; width:32%; border:1px solid black;}
#lSp {left:0;}
#mSp {left:50%; margin-left:-16%;}
#rSp {right:0;}
p {padding:.5em; margin:0;}
-->
</style>
</head>
<body>
<h1>Überschrift</h1>
<div id="dreiSp">
<div id="lSp">
<p>Das ist irgendein Text, der sich in der linken Spalte des Zeitungslayouts befinden soll. Das ist irgendein Text, der sich in der linken Spalte des Zeitungslayouts befinden soll.</p>
<p>Das ist irgendein Text, der sich in der linken Spalte des Zeitungslayouts befinden soll. Das ist irgendein Text, der sich in der linken Spalte des Zeitungslayouts befinden soll.</p>
</div>
<div id="mSp">
<p><img src="b01.gif" width="32" height="32" border="0" alt="bild" style="float:right;">Das ist irgendein Text, der sich in der mittleren Spalte des Zeitungslayouts befinden soll. Das ist irgendein Text, der sich in der mittleren Spalte des Zeitungslayouts befinden soll. Auch andere Elemente können hier stehen.</p>
</div>
<div id="rSp">
<p>Das ist irgendein Text, der sich in der rechten Spalte des Zeitungslayouts befinden soll. Das ist irgendein Text, der sich in der rechten Spalte des Zeitungslayouts befinden soll.</p>
</div>
</div>
</body>
</html>viele Grüße
Axel
-
Hi,
Denn nur Tabellen ermöglichen eine variable Spaltenbreite.
Du meinst eine sich an den Inhalt anpassende Spaltenbreite?Ja - bzw. eigentlich generell eine Definition von Spalten (die auch von den gängigen Browsern unterstützt wird); also insbesondere auch die Abhängigkeit voneinander.
Eine variable, sich der View-Port-Breite anpassende Spaltenbreite bekommt man auch ohne Tabelle hin:
nunja, prinzipiell schon, allerdings macht Dir bei diesem Beispiel der IE einen Strich duch die Rechnung;-)
freundliche Grüße
Ingo-
Hallo,
nunja, prinzipiell schon, allerdings macht Dir bei diesem Beispiel der IE einen Strich duch die Rechnung;-)
Wegen min-width? Das ist, meiner Meinung nach, zu verschmerzen. IE-Nutzer machen Ihre Fenster nicht _so_ schmal ;-))
viele Grüße
Axel
-
Hallo,
IE-Nutzer machen Ihre Fenster nicht _so_ schmal ;-))
^Ich meine natürlich ihre Fenster, nicht Deine. ;-))
viele Grüße
Axel
-
Hi,
Wegen min-width? Das ist, meiner Meinung nach, zu verschmerzen. IE-Nutzer machen Ihre Fenster nicht _so_ schmal ;-))
Extensiver Einsatz von Blind-GIFs! ;)
Daß man allerdings nicht scrollen kann, nun gut: Muß man halt ggf. die Buchstaben kleiner machen ... ;->
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
-
Das sind ja schon mal brauchbare Informationen. Vielen Dank.
Habt Ihr vielleicht noch Links wo ich weiterführende Infos finden kann?Gruss
struppi-
Hallo!
http://www.google.de/search?hl=de&ie=UTF-8&q="liquid+design"&btnG=Google-Suche&meta=
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations -
Hallo,
Habt Ihr vielleicht noch Links wo ich weiterführende Infos finden kann?
hier sind ein paar Beispiele zu Tableless Layout:
http://www.lipfert-malik.de/webdesign/tutorial/bsp/3spaltenxhtml2.html
http://www.lipfert-malik.de/webdesign/tutorial/bsp/3spaltenxhtml4.html
http://www.lipfert-malik.de/webdesign/tutorial/bsp/drei-spalten-liquid-layout-xhtml.html
(Hier ist die Anpassung für den Netscape 4 allerdings für ältere 4er etwas anspruchsvoll)
http://www.lipfert-malik.de/webdesign/tutorial/bsp/3spaltenxhtml3.html
http://www.lipfert-malik.de/webdesign/tutorial/bsp/dreispaltenxhtml.htmlGrüsse
Cyx23
-