Design bewerten (EDITOR)

[Leustich]

Bitte bewertet mal eines meiner ersten Designs..
Ist recht simpel..

Caff Pazzo Bleiburg

thx

 

[ky_fr34k]

Logo find ich super!
Farben sind auch gut.
Schlecht:
- Statische Höhe / Breite
- Contentbereich geht weiter runter als Navigationsbereich sieht irgendwie komisch aus

Gruß KY

 

[Efchen]

Moin,

ich bin selbst kein Design-Kenner, weiß aber, was man mir an den Kopf wirft, wenn ich sowas abliefere: Das ist kein Design. Das sind zwei Boxen in grüber Farbe und ein Logo.

Ganz von der Hand weisen kann man das nicht.

Ich finde aber alles, was Du da hast, nicht WWW-gerecht. Warum?
1. Der HTML-Code ist derzeit eine div-Suppe, die wenigen Inhalte, die Du drin hast, hast Du jetzt schon falsch ausgezeichnet. Die Gefahr besteht, dass Du Dich nicht um die Semantik kümmern wirst, und so die Seite kein richtiges HTML bekommt.
2. Das Layout ist pixelgenau. Es passt sich weder an die Größe des Viewports noch an die Größe der Schrift an. Schon bei der ersten Schriftvergrößerung schieben sich die Öffnungszeiten aus der Box und bei noch ein bisschen mehr Vergrößerung schieben sich auch die Links aus ihrem Käfig.
3. Der Alternativtext zu Deinem Logo fehlt.

Bevor Du weiter machst, solltest Du Dir darüber im Klaren sein, was es im WWW alles an Variablen gibt, die Du berücksichtigen solltest, damit Deine Website ein Erfolg werden kann. Und das soll sie ja wohl, denn es geht hier um ein Cafe, und da sollte die Website einen guten Eindruck hinterlassen und nicht potenzielle Kunden verschrecken.

 

[Tomm]

Efchen,

ich weiss nicht was du hast, wenn ich die Schrift oder die Seite vergrößere, dann tut sich bei mir gar nichts ;)

 

[Gilles]

Efchen,

ich weiss nicht was du hast, wenn ich die Schrift oder die Seite vergrößere, dann tut sich bei mir gar nichts ;)

nehme mal an du zoomst alles :)
Efchen hat nur text zoomen an.
(Unter Firefox unter: Ansicht->Zoom->nur text zoomen)

 

[Efchen]

ich weiss nicht was du hast, wenn ich die Schrift oder die Seite vergrößere, dann tut sich bei mir gar nichts ;)

Darauf kommt es ja nicht an, was sich bei Dir tut oder nicht tut. Bei mir siehts grausam aus, und deswegen könnte es passieren, dass ich Deine Site nicht nutzen werde. Und das musst Du verhindern.

Woran es liegt, hat Gilles ja schon gesagt :-)

 

[Tomm]

Darauf kommt es ja nicht an, was sich bei Dir tut oder nicht tut. Bei mir siehts grausam aus, und deswegen könnte es passieren, dass ich Deine Site nicht nutzen werde. Und das musst Du verhindern.

Woran es liegt, hat Gilles ja schon gesagt :-)

Ich habs ausprobiert, beim IE7 tut sich nichts, wenn man Text oder Seite
vergrößert, beim Firefox verschiebt sich der Text

 

[Efchen]

Ich habs ausprobiert, beim IE7 tut sich nichts, wenn man Text oder Seite
vergrößert

Das wird der Bug sein, dass bei der Angabe der Schriftgröße in "px" das nicht skalierbar ist. Oder aber es liegt daran, dass IE IMMER zoomt.

beim Firefox verschiebt sich der Text

Na also. Dann weißt Du ja, wie Du es testen kannst, dass das nicht mehr auftritt.

Text sollte man übrigens besser in der Einheit "em" angeben (Fließtext immer "1em"), diese Einheit kann man auch bei anderen Elementen verwenden.

 

[Tomm]

Ich geb meinen Text immer in px an, ist das falsch ?

Zumindest verschiebt sich dann nichts

 

[Körnerbrötchen]

em ist teilweise sinnvoller.

Mach deinen Hintergrund doch mal bitte fixed, sonst flimmert das bei mir beim Scrollen ganz furchtbar.

 

[Tomm]

Wenn ich bei unserem HTML-Forum (www.html.de) die Textgröße (beim IE7 ) veränder, dann tut sich auch gar nichts
Die Schrift ist genauso groß wie vorher

 

[Leustich]

Danke für eure ehrlichen Bewertungen..
Ich seh ein, neben den Kleinigkeiten mit den alt-Tags gibt es noch große Verbesserungsmöglichkeiten...

Hat jemand Lösungsansätze für's div-Problem..?

 

[Efchen]

Ich geb meinen Text immer in px an, ist das falsch ?

Jein.

1. Der IE hat einen Bug. Schrift in "px" angegeben lässt sich nicht in der Größe verändern. Dadurch können Menschen mit Sehschwäche solche Seiten womöglich nicht nutzen.

2. "px" ist eine absolute Größenangabe. Browser bieten ihren Nutzern aber die Möglichkeit, die Default-Schriftgröße einzustellen, eben zum Beispiel wenn jemand eine Sehschwäche hat. Der hätte es ganz einfach, indem er in seinem Browser die Größe auf z.B. 36px stellt.
Das geht aber nur, wenn die Webmaster darauf auch Rücksicht nehmen und ihre Schriftgrößen immer in "em" angeben und Fließtext immer in der Größe "1em", denn das ist dann die Schriftgröße, die jeder in seinem Browser als "optimal" eingestellt hat.
Nutzt Du "px" und setzt die Schrift dann z.B: auf 9px, zeigst Du eine gewisse Rücksichtslosigkeit den Sehbehinderten gegenüber. Und das muss ja nicht sein.

 

[Tomm]

Danke für eure ehrlichen Bewertungen..
Ich seh ein, neben den Kleinigkeiten mit den alt-Tags gibt es noch große Verbesserungsmöglichkeiten...

Hat jemand Lösungsansätze für's div-Problem..?

Ersetz die divs durch p oder span

 

[Gilles]

Ersetz die divs durch p oder span

Das kommt doch auf den Inhalt an
Man kann ja nicht pauschal sagen Ersetz alle Divs durch p und span ^^

Ersetze die divs (wenn div denn nicht angebracht ist) durch ein inhaltlich korrektes Element (Oder nehm sie ganz raus wenn hier kein Element angesgat ist) :)
Denn wenn du Elemente gruppieren willst, dann brauchst du auch ein Div.

als Beispiel: Dein Header. Wieso gibt es ein Div Logo? Denn verschieben kannst du auch das Image-Tag selbst. Ergänze außerdem hier das Bild mit h1, da es sich ja um eine Überschrift handelt.

<h1><img../></h1>

(Das Header Div ist eigentlich auch nicht richtig, aber ich wüsste auch nicht wie man es sonst auszeichnen würde, da man mit height und width ja das bild selber größer und kleiner machen würde.)

dein Div: open beinhaltet nur br als Element. innerhalb eines Div müssen sich Unterelemente befinden und der text sollte nicht direkt dort reingeschrieben werden. Dafür nimmst du dann Beispielsweise einen Absatz (p).

 

[Körnerbrötchen]

Magst du mir dennoch den Gefallen tun? ;)

Zu den DIVs. Ein Anfang wäre:

<div id="header">
<div class="logo"><img src="[URL="http://www.html.de/view-source:http://www.medien-labor.at/daniel/pazzobleiburg.jpg"]pazzobleiburg.jpg[/URL]" /></div>

</div>

zu

<div id="header"><h1><img src="[URL="http://www.html.de/view-source:http://www.medien-labor.at/daniel/pazzobleiburg.jpg"]pazzobleiburg.jpg[/URL]" /></h1></div>

Das div#header ist sehr wohl korrekt. ;) Schließlich kommt in so ein Header manchmal noch eine Menge anderer Sachen hinein und besteht nicht nur aus einem Logo.
Vielleicht machst du dir selbst auch einmal Gedanken, Leustich? Denn div#logo verwendest du nicht einmal im CSS. Wieso dann in der HTML-Seite?

Grüße

 

[Efchen]

Das div#header ist sehr wohl korrekt. ;) Schließlich kommt in so ein Header manchmal noch eine Menge anderer Sachen hinein und besteht nicht nur aus einem Logo.

Aber im Moment steht nur ein Element drin, und dann ist es überflüssig.
Anfänger tendieren dazu, daraus abzuleiten, dass sie alle Tags nochmal in divs packen müssen, manchmal glauben sie, dass man CSS nur auf divs anwenden kann.

Daher ist es in so einem Forum GEFÄHRLICH, solche Beispiele zu machen. Man sollte hier deutlich differenzieren und nicht davon ausgehen, was ein Fortgeschrittener/Experte sich für Gedanken machen kann.

Wenn es nicht so gefährlich wäre, würde es keine Menschen geben, die div-Suppe kochen.

 

[Gilles]

als Beispiel: Dein Header. Wieso gibt es ein Div Logo? Denn verschieben kannst du auch das Image-Tag selbst. Ergänze außerdem hier das Bild mit h1, da es sich ja um eine Überschrift handelt.

<h1><img../></h1>

(Das Header Div ist eigentlich auch nicht richtig, aber ich wüsste auch nicht wie man es sonst auszeichnen würde, da man mit height und width ja das bild selber größer und kleiner machen würde.)

Tja ich Depp sage oben noch, dass da noch ein h1 Tag fehlt
Dieses kann man dann wieder super designen :)

 

[speedone]

Finde das Logo und die Farben gut.

Mich stört die Unterschiedliche Höhe der Navigation und der Seite an sich

Lieben Gruß
Christian