AW: Homepage für alle Bildschirmgrössen
hi
zwar haben sich hier ja mittlerweile alle auf das thema RWD (Responsive WebDesign) eingeschossen, obwohl du schon sagtest, dass dich das nicht wirklich interessiert und du es auch nicht benötigst, ich hätte da aber noch eine andere "alternative" für dich: fluid webdesign. fluid webdesign ist ein teil von rwd. der unterschied liegt darin, dass du keine media queries dabei nutzt. i. d. r. gibt es dabei auch keine änderungen am layout der seite/elemente/etc. ich gehe davon aus, dass du eher ein anfänger bist in dem bereich (zumindest lese ich das zwischen den zeilen raus, sorry falls unzutreffend). damit wäre fluid webdesign für dich warscheinlich auch zunächst einfacher umzusetzen als rwd, dein problem bekämst du damit aber ebenfalls gelöst.
es geht im prinzip darum, keine fixen größenangaben innerhalb deines CSS stehen zu haben, sondern verhältnisse. das hört sich zunächst verwirrend an, deshalb hier ein beispiel:
angenommen das wäre dein markup (html):
HTML:
...
<body>
<div id="page">
...
<ul id="navigation">
...
</ul>
...
</page>
</body>
...
in deinen stylesheets stünden angaben wie
Code:
#page {
width: 960px;
}
#navigation {
width: 320px;
}
um diese angaben fluid zu bekommen, gibt es eine einfache formel:
elementbreite / kontext * 100 = fluid angabe
als kontext wird das elternelement bezeichnet, in dem ein element liegt. bei #page beispielsweise wäre dass das body-element. nehmen wir mal spaßeshalber an, dein monitor hätte eine breite von 1920px und dein browser läuft im vollbild (noch mit browserleiste und so, also nicht richtig vollbild wie beispielsweise "vollbild youtube videos"). dann würde deine formel also so ausssehen:
#page / browserbreite * 100 = fluidbreite von #page
mit konkreten werten:
960 / 1920 * 100 = 50
fünfzig was? prozent! im verhältnis hätte deine seite dann eine breite von 50%. wo liegt der vorteil? nun, du bist damit unabhängig von größe und auflösung des monitors, mit dem die seite angeschaut wird. 50% auf einem 4:3 monitor sind – im verhältnis – genauso viel wie 50% auf einem 16:9 monitor.
dummerweise kommst du für echtes rwd an fluid webdesign nicht vorbei, weil es einer der integralen bestandteile von rwd ist. du kannst echtes fluid webdesign aber vollkommen ohne einen rwd ansatz implementieren.
dein verändertes stylesheet würde dann so ausschauen:
Code:
#page {
width: 50%; /* 50% of body-width */
}
#navigation {
width: 33.333333%; /* 1/3rd of #page */
}
noch ein wort zum schluss: ich möchte hier keinesfalls aussagen, dass fluid webdesign dem responsive webdesign ansatz vorzuziehen ist. als endziel solltest du dir eine responsive page setzen, weil dass die einzige möglichkeit ist die dir bleibt, um sicher zu stellen dass jeder deine seite nutzen kann. du kannst ja schlecht ausschließen, dass jemand der deine page besucht das nicht mit einem smartphone macht. oder sich ausnahmslos mit einem tablet im www bewegt. oder mit einem webbook. oder einer spielekonsole. oder, oder, oder...
fakt ist aber, dass, wenn deine seite schon fluid ist, es dir wesentlich einfacher fallen dürfte, einen responsive ansatz zu implementieren, weil du einen der dafür wesentlichen grundpfeiler schon fertig hast.
hoffe das hilft
).
)
