bitte Design bewerten

[Maxi]

Sehr schön, das dritte gefällt mir gut :-)

 

[fiedel]

Hab mich mal ans Werk gemacht und mein Design umgesetzt:
Webdesign Testgebiet

Die Navigation habe ich jetzt komplett aus Grafiken gemacht, weil das mit dem Ausdehnen, wenn man die Schrift verstellt, nicht funktionieren wollte. Dafür ist aber die Schrift im Content mit em gemacht.

P.S.: Ich weiß, der Quellcode sieht sehr nach Div-Suppe aus. Das ließ sich aber nicht vermeiden.

 

[Maxi]

Ein Hover in der Navigation wäre vielleicht nicht schlecht.

 

[fiedel]

Ok, hab ich gemacht! Halt mit JavaScript, weil ich sonst keine Alt-Attribute mehr hätte, wenn ichs mit CSS realisiert hätte. Und sollte jemand JS deaktiviert haben, gibts halt dann keinen netten Effekt ;-)

 

[Maxi]

Schön, so gefällts mir gut.

ABer unten war doch ein dunkler Streifen, oder?
Wo issn der hin?

 

[fiedel]

ABer unten war doch ein dunkler Streifen, oder?
Wo issn der hin?

Ja, den Streifen habe ich weggemacht, weil ich dachte, dass es ohne diesem besser aussieht. (Edit: dafür habe ich was anderes hingemacht, ich hoffe es sieht auch gut aus ;))

Habe mich gerade auch mal in CSS 3 probiert, wie findet ihr die Textmarkierung? (funktioniert nicht in jedem Browser, aber im FF3 auf jeden Fall)

 

[Efchen]

Die Navigation habe ich jetzt komplett aus Grafiken gemacht, weil das mit dem Ausdehnen, wenn man die Schrift verstellt, nicht funktionieren wollte.

Kann ich so auf Anhieb nicht nachvollziehen, aber auf jeden Fall sieht es schlecht aus, wenn Grafiken deaktiviert sind.

Das, was da nach div-Suppe aussieht, sind halt die runden Ecken. Das lässt sich nunmal nicht vermeiden, stört aber auch nicht wirklich im Code.

Was halt der Perfektion leider noch einen abbricht, ist die fixe Breite des Layouts.
Und ein seltsamer Effekt beim Verkleinern des Fensters: Wenn ich das Fenster so klein mache, dass nur noch der Content reinpasst, hört das Hintergrundbild rechts daneben plötzlich auf und es kommt ein schwarzer Balken (ohne Inhalt, der liegt rechts neben div.container), der dann auch für einen horizontalen Scrollbalken sorgt (obwohl alles, was von Dir als Content gesetzt wurde, vollständig sichtbar ist).

 

[fiedel]

Danke Efchen, für deinen Kommentar.

Kann ich so auf Anhieb nicht nachvollziehen, aber auf jeden Fall sieht es schlecht aus, wenn Grafiken deaktiviert sind.

Wieso sieht es dann schlecht aus? Ich habe das mal zur Probe gemacht, und da wurden dann die Alternativtexte der Grafiken angezeigt. Sah nicht unbedingt schön aus, war aber voll und ganz funktionsfähig. Aber ich denke, diejenigen, die die Grafiken deaktivieren legen sowieso nicht soviel Wert auf das Aussehen...
Frage (damit ich was dazulernen kann ;-)): Wie könntest du es denn nachvollziehen?

Was halt der Perfektion leider noch einen abbricht, ist die fixe Breite des Layouts.

Wie gesagt, das mit "em" hat nicht so wirklich funktionieren wollen, habe auch kaum Erfahrungen damit (wie man bei meiner aktuellen Homepage sehen kann). Oder meinst du ich soll es in Prozent angeben?

Und ein seltsamer Effekt beim Verkleinern des Fensters: Wenn ich das Fenster so klein mache, dass nur noch der Content reinpasst, hört das Hintergrundbild rechts daneben plötzlich auf und es kommt ein schwarzer Balken (ohne Inhalt, der liegt rechts neben div.container), der dann auch für einen horizontalen Scrollbalken sorgt (obwohl alles, was von Dir als Content gesetzt wurde, vollständig sichtbar ist).

Oh, den habe ich gar nicht entdeckt... seltsam...

  div.container {
    background: #501F1A url(../img/red-texture.jpg) scroll repeat 0 0;
    width: 100%;
    border-top: 2px solid #806360;
    margin: 57px 0 0 0;
  }

Hat jemand eine Ahnung, wie ich das ändern könnte, dass keine Balken mehr entstehen, sondern sich das Hintergrundbild über die ganze Breite wiederholt und kein merkwürdiger Abstand neben dem Container mehr ist?

Gruß
fiedel

 

[Loon3y]

Design 2

Design 3

hihi wenn mang anz schnell zwischen 2 und 3 wechselt ist das voll *splatteR* ;D oder *matsch* XD...die überschrift ist bei design 3 etwas weiter nach rechts verschoben..

Ansonsten geil! sofern es sicha uch alles schön vergrößern / -kleinern lässt..

Grüßli
Loon3y


EDIT: ups...war auf Seite 1 noch...sry..änders gliech noch ab ;D

 

[Efchen]

Wieso sieht es dann schlecht aus? Ich habe das mal zur Probe gemacht, und da wurden dann die Alternativtexte der Grafiken angezeigt. Sah nicht unbedingt schön aus

Ist "nicht schön" und "schlecht" bei Dir nicht in etwa das Gleiche oder zumindest ähnlich? :-)
Bei mir waren die Worte aneinandergeklebt ohne Abstand. Das halte ich für nicht schön. Zwischen zwei Worten macht man halt für gewöhnlich einen Abstand.

Aber ich denke, diejenigen, die die Grafiken deaktivieren legen sowieso nicht soviel Wert auf das Aussehen...

Wie viele kennst Du, die das so machen? Wie viele haben Dir schon gesagt, aus welchem Grund sie keine Images angezeigt bekommen?
- Vorlesebrowser, weil blind
- Langsames Modem (heißt das zwangsläufig, man legt keinen Wert auf Aussehen?)
- Lynx (auch da kann eine Site schlecht "aussehen").
- Es ist so vorgeschrieben (An Regeln muss man sich halten, aber legt man deswegen keinen Wert auf Aussehen?)
- Verlinkung von Dir falsch oder Dein Server liefert aus irgendeinem Grund die Images nicht aus (impliziert das, dass man kein Wert auf Aussehen legt?)
Und nur weil man Grafiken abschaltet, legt man kein Wert auf Aussehen? Gerade bei Text gibts nichts schlimmeres, als wenn jemand ohne Punkt, Komma, Absätze und ohne Groß-/Kleinschreibung schreibt.

Wie könntest du es denn nachvollziehen?

Na, gar nicht. Warum soll das nicht funktionieren? Im Zweifellsfalle mehrere Definitionslisten nebeneinander, Image/Text übereinander, jeweils text-align:center; und es ist immer zentriert, auch wenn man die Schriftgröße ändert.

Wie gesagt, das mit "em" hat nicht so wirklich funktionieren wollen, habe auch kaum Erfahrungen damit (wie man bei meiner aktuellen Homepage sehen kann). Oder meinst du ich soll es in Prozent angeben?

Es ist ja tatsächlich nicht immer so trivial, wie es sich anhört, dasmal zu Deiner Verteidigung. Aber fix ist halt fix und wenn die Größe des eigenen Viewports nicht passt, empfindet man (zumindest ich) die Website als minderwertig.
Und ob "em" oder "%" ist doch Wurscht. Da braucht man IMHO auch keine Erfahrung dafür. em macht die Größe halt abhängig vom Text.
Das größte Problem beim flexiblen Layout ist, dass leider nicht jeder Browser min-width/max-width versteht. Sonst wäre es in der Praxis genauso leicht wie in der Theorie.

Oh, den habe ich gar nicht entdeckt... seltsam...

Das ist glaub ich der body außen rum, der die Wolken(?) als Hintergrundbild hat, die nicht in y-Richtung wiederholt werden. Dann ists dahinter natürlich schwarz. Also fehlt dem body wahrscheinlich nur die Hintergrundfarbe wie beim div.container.

 

[fiedel]

hihi wenn mang anz schnell zwischen 2 und 3 wechselt ist das voll *splatteR* ;D oder *matsch* XD...die überschrift ist bei design 3 etwas weiter nach rechts verschoben..

Ansonsten geil! sofern es sicha uch alles schön vergrößern / -kleinern lässt..

Grüßli
Loon3y

EDIT: ups...war auf Seite 1 noch...sry..änders gliech noch ab ;D

Ich weiß, hab ich auch gemerkt, als ichs hochgeladen hab. :grin:

Zitat:
Ist "nicht schön" und "schlecht" bei Dir nicht in etwa das Gleiche oder zumindest ähnlich?
Bei mir waren die Worte aneinandergeklebt ohne Abstand. Das halte ich für nicht schön. Zwischen zwei Worten macht man halt für gewöhnlich einen Abstand.


Wie viele kennst Du, die das so machen? Wie viele haben Dir schon gesagt, aus welchem Grund sie keine Images angezeigt bekommen?
- Vorlesebrowser, weil blind
- Langsames Modem (heißt das zwangsläufig, man legt keinen Wert auf Aussehen?)
- Lynx (auch da kann eine Site schlecht "aussehen").
- Es ist so vorgeschrieben (An Regeln muss man sich halten, aber legt man deswegen keinen Wert auf Aussehen?)
- Verlinkung von Dir falsch oder Dein Server liefert aus irgendeinem Grund die Images nicht aus (impliziert das, dass man kein Wert auf Aussehen legt?)
Und nur weil man Grafiken abschaltet, legt man kein Wert auf Aussehen? Gerade bei Text gibts nichts schlimmeres, als wenn jemand ohne Punkt, Komma, Absätze und ohne Groß-/Kleinschreibung schreibt.

Okay, hast mich überzeugt ;-)

Na, gar nicht. Warum soll das nicht funktionieren? Im Zweifellsfalle mehrere Definitionslisten nebeneinander, Image/Text übereinander, jeweils text-align:center; und es ist immer zentriert, auch wenn man die Schriftgröße ändert.

Also quasi für jeden Punkt eine Liste nach diesem Schema?

<dl>
<dt><img src="img" alt="alt" /></dt>
<dd>Text</dd>
</dl>

Das wird ja dann aber sehr viel Code... Soll ich die einzelnen Definitionslisten dann auch noch in eine "normale" Liste packen, oder ist das dann nicht mehr nötig? Denn theoretisch listet man ja 6 Definitionslisten auf.

Das größte Problem beim flexiblen Layout ist, dass leider nicht jeder Browser min-width/max-width versteht. Sonst wäre es in der Praxis genauso leicht wie in der Theorie.

Eben das ist das Problem... dann bleibt mir also nur noch die "em"-Variante.

Das ist glaub ich der body außen rum, der die Wolken(?) als Hintergrundbild hat, die nicht in y-Richtung wiederholt werden. Dann ists dahinter natürlich schwarz. Also fehlt dem body wahrscheinlich nur die Hintergrundfarbe wie beim div.container.

Ja, so habe ich es auch schon erkannt, aber das ist ja auch nicht das Optimum, da ja ganz unten das Gras auch nicht mehr zur Seite wächst! Geht das auch irgendwie anders?

Edit: Ja geht! Der Rand wird ja nur dadurch verursacht, dass der Header zu breit ist! Habs am Anfang irgendwie nicht gleich geblickt! ;)

 

[Loon3y]

wieso nicht so?

<dl>

<dt><img src="img1" alt="alt" /></dt>
<dd>Text</dd>

<dt><img src="img2" alt="alt" /></dt>
<dd>Text2</dd>

<dt><img src="img3" alt="alt" /></dt>
<dd>Text3</dd>

<dt><img src="img4" alt="alt" /></dt>
<dd>Text4</dd>

</dl>

 

[fiedel]

wieso nicht so?

<dl>

<dt><img src="img1" alt="alt" /></dt>
<dd>Text</dd>

<dt><img src="img2" alt="alt" /></dt>
<dd>Text2</dd>

<dt><img src="img3" alt="alt" /></dt>
<dd>Text3</dd>

<dt><img src="img4" alt="alt" /></dt>
<dd>Text4</dd>

</dl>

Und wie richte ich sie dann nebeneinander aus? Ich mein floaten funktioniert ja da nicht, oder doch?

 

[Efchen]

Also quasi für jeden Punkt eine Liste nach diesem Schema?

Ja, so hatte ich mir das gedacht.

Das wird ja dann aber sehr viel Code

Naja, es kommt ja nicht primär darauf an, dass der Code schlank ist, sondern das er richtig ist und letztlich auch, dass er die richtige Grundlage für das Design schafft.
Und wenn etwas mehr Code die Nutzbarkeit spürbar erhöht, dann ist es das IMHO wert.

Soll ich die einzelnen Definitionslisten dann auch noch in eine "normale" Liste packen, oder ist das dann nicht mehr nötig? Denn theoretisch listet man ja 6 Definitionslisten auf.

Gute Frage...ich würds nach meinem Gefühl weglassen. Man macht ja auch nur 6 Listen draus, weil mit einer die Optik nicht klappt[1]. Sinnvoll wäre wenn dann noch ein div außen rum, zum Gruppieren, aber ob Du das CSS-technisch brauchst, glaube ich eher nicht.

Eben das ist das Problem... dann bleibt mir also nur noch die "em"-Variante.

Ob em oder %, das Problem mit dem min/max löst das natürlich beides nicht.

[1]
Siehe auch:

wieso nicht so?

:-)

 

[fiedel]

Ich hab nochmal drüber nachgedacht, wenn ich das jetzt mit Definitionslisten mache, dann verschwindet mein Hovereffekt und für Text lässt sich so ein Schein nur sehr schwer realisieren. Gäbe es nicht irgendwie ne Möglichkeit (per JavaScript o.ä.) je nach Einstellung der Schriftgröße im Browser größere/kleinere Bilder in der Navigation anzeigen zu lassen? Damit sich das dann so ähnlich wie em verhält.

Die Alt-Texte habe ich übrigens jetzt weiter auseinander gesetzt!

Ob em oder %, das Problem mit dem min/max löst das natürlich beides nicht.

Naja, aber zu mindest ist das Problem mit em nicht so schwerwiegend, denn kleinerer Text kommt auch mit kleineren "Container"-Größen aus. Bei % bleibt die Schriftgröße und der Container wird kleiner.

 

[Efchen]

Ich hab nochmal drüber nachgedacht, wenn ich das jetzt mit Definitionslisten mache, dann verschwindet mein Hovereffekt

Tja, willkommen auf dem Grat zwischen gutem Aussehen und Nutzbarkeit. Ich entscheide mich idR für die Nutzbarkeit.

Gäbe es nicht irgendwie ne Möglichkeit (per JavaScript o.ä.) je nach Einstellung der Schriftgröße im Browser größere/kleinere Bilder in der Navigation anzeigen zu lassen? Damit sich das dann so ähnlich wie em verhält.

Ich wüsste nicht, dass man mit JavaScript die Browser-Schriftgröße auslesen kann. Aber wer weiß? Ansonsten geht das eher in Richtung SVG. Aber das ist ja IIRC auch noch nicht flächendeckend funktionstüchtig.

 

[fiedel]

Tja, willkommen auf dem Grat zwischen gutem Aussehen und Nutzbarkeit. Ich entscheide mich idR für die Nutzbarkeit

Hmm, ich wollte mich eigtl nicht unbedingt davon trennen.

Ich wüsste nicht, dass man mit JavaScript die Browser-Schriftgröße auslesen kann. Aber wer weiß?

Ich habe es mir auch nicht vorstellen können, deshalb hab ichs auch auf "oder ähnliches" ausgeweitet! ^^

Ansonsten geht das eher in Richtung SVG. Aber das ist ja IIRC auch noch nicht flächendeckend funktionstüchtig.

SVG? Hab mal gegooglet, sowas wäre ganz brauchbar, wenns nicht nur für Vektorgrafiken ginge, aber nur die lassen sich ja mathematisch darstellen und somit leicht vergrößern/verkleinern.

 

[Efchen]

SVG? Hab mal gegooglet, sowas wäre ganz brauchbar, wenns nicht nur für Vektorgrafiken ginge, aber nur die lassen sich ja mathematisch darstellen und somit leicht vergrößern/verkleinern.

Ja, das ist der Witz von scalable-vector-grafics. Sie lassen sich stufenlos in der Größe ändern, d.h. damit kann man auch Schrift als Grafik skalieren, wenn man die Größe des Images in "em" angibt. Aber ausprobiert hab ich sowas noch nicht :-)

 

[Bernhard]

Hallo Fiedel,

bei der Gratwanderung zwischen Aussehen und Nutzbarkeit würde ich auch
noch den Aufwand berücksichtigen, den eine eventuelle spätere Änderung
verursachen könnte. Stell Dir mal vor, da kommt eines Tages eine zweite
Sprache dazu: im einen Fall beschriftest Du die Links nur neu, im anderen Fall
fängst Du erstmal an, Bildchen zu basteln...

Mein Lösungsvorschlag:

<ul>
   <li>
      <a href="#" id="link1"><img src="bild1.jpg" alt="" title="" height="100" width="100">Link3</a>
    </li>
   <li>
       <a href="#" id="link2"><img src="bild2.jpg" alt="" title="" height="100" width="100">Link1</a>
    </li>
   <li>
       <a href="#" id="link3"><img src="bild3.jpg" alt="" title="" height="100" width="100">Link3</a>
    </li>
</ul>

CSS:

a {
 color:#0000ff;
}
a:hover {
 color:#ff0000;
}
a#link1 img,a#link2 img,a#link3 img {
 visibility:hidden;
}
#link1 {
 background-image:url(../img/bild1-over.jpg);
 background-repeat:no-repeat;
}
#link1:hover {
 background-image:url(../img/bild1.jpg);
 background-repeat:no-repeat;
}

(die Bilder setze ich als Vordergrundbild ein, um es beim print.css einfacher zu haben,
außerdem werden sie bei hidden vorausgeladen, ohne dass ich weiteren Code brauche)
Edit: hab jetzt erst gesehen, dass Du gar keinen Bildwechsel brauchst...

Den Schrift-Effekt bekommst Du doch fast auch mit dem Schatten hin:
Position: absolute - Anwendungsbeispiele

Grüße
Bernhard

 

[fiedel]

Hallo Fiedel,

bei der Gratwanderung zwischen Aussehen und Nutzbarkeit würde ich auch
noch den Aufwand berücksichtigen, den eine eventuelle spätere Änderung
verursachen könnte. Stell Dir mal vor, da kommt eines Tages eine zweite
Sprache dazu: im einen Fall beschriftest Du die Links nur neu, im anderen Fall
fängst Du erstmal an, Bildchen zu basteln...

Mein Lösungsvorschlag:

<ul>
   <li>
      <a href="#" id="link1"><img src="bild1.jpg" alt="" title="" height="100" width="100">Link3</a>
    </li>
   <li>
       <a href="#" id="link2"><img src="bild2.jpg" alt="" title="" height="100" width="100">Link1</a>
    </li>
   <li>
       <a href="#" id="link3"><img src="bild3.jpg" alt="" title="" height="100" width="100">Link3</a>
    </li>
</ul>

CSS:

a {
 color:#0000ff;
}
a:hover {
 color:#ff0000;
}
a#link1 img,a#link2 img,a#link3 img {
 visibility:hidden;
}
#link1 {
 background-image:url(../img/bild1-over.jpg);
 background-repeat:no-repeat;
}
#link1:hover {
 background-image:url(../img/bild1.jpg);
 background-repeat:no-repeat;
}

(die Bilder setze ich als Vordergrundbild ein, um es beim print.css einfacher zu haben,
außerdem werden sie bei hidden vorausgeladen, ohne dass ich weiteren Code brauche)
Edit: hab jetzt erst gesehen, dass Du gar keinen Bildwechsel brauchst...

Den Schrift-Effekt bekommst Du doch fast auch mit dem Schatten hin:
Position: absolute - Anwendungsbeispiele

Grüße
Bernhard

Es ist zwar wahrscheinlich sehr unwahrscheinlich, dass meine Seite mal zweisprachig wird (zu mindest derzeit), aber deine Argumente klingen sehr überzeugend! Ich werds auf jeden Fall mal ausprobieren!

Gruß
fiedel


EDIT: Habe das jetzt mal so getestet und bin zum Entschluss gekommen, die Grafiken so zu lassen, denn wenn ichs als Text mache, und ihn vergrößere, dann sind die Menüpunkte nicht mehr zentriert, sondern kleben links in dem Navi-Container und der Container weitet sich extrem in x-Richtung aus; verkleinere ich die Schrift, dann passen die Icons nicht mehr nebeneinander!
Sollte die Seite einmal mehrsprachig werden, dann habe ich ja immer noch meine PSD-Dateien, in denen ich rasch den Text ändern kann.

Nochmal EDIT: Was habe ich denn da geschrieben? LOL

wahrscheinlich sehr unwahrscheinlich