Bitte Design und Code bewerten! [EDITOR]

[Palla92]

Hallo Leute :mrgreen:,

ich hab mich mal wieder dran gesetzt und ein neues Design gebastelt!
Den Link findet ihr hier Follow-designs.de
[Ich werde mit der Seite umziehen, daher der andere Name im Header]

Mich interessiert jetzt natürlich wie ihr die Seite findet bzw. wie sie bei euch ankommt!
Meine zweite Frage wäre dann ob die Grüntöne zu hell / grell sind und was euch sonst noch verbesserungswürdig erscheint?

Es wäre auch wirklich nett, wenn sich jemand meinen Code angucken würde, denn ich befürchte, dass der semantisch (immer noch) nicht korrekt ist :?
Irgendwie habe ich das noch nich ganz geblickt :cry:

Schon mal vielen Dank für eure Mühen :)

 

[vitus37]

Zum Design: Gefällt mir eigentlich ganz gut.
Was mir weniger gefällt ist dieser schwarze Balken als Navigation, das zerstört ein wenig das Wohlfühlgefühl auf der Seite, finde ich.
Den Footer finde ich etwas zu grell.

Zum Code: Zwei Divs könntest/solltest du weglassen, da sie zum gruppieren mehrerer Elemente sind, du aber in ihnen nur eines hast. Zum einen das um der Navigation und zum anderen das des Footers (dort könntest du auch ein <p> nutzen).
Bei deinen Bildern hast du häufig das Pflichtattribut "alt" vergessen, das solltest du nachtragen.
Der HTML-Validator ([Invalid] Markup Validation of http://follow-designs.de/mich.html - W3C Markup Validator) meint du hättest irgendwo noch ein DIV-Tag zu gemacht, welches nicht offen ist. (konnte aber nicht finden welches :S )

Meiner Meinung nach kann sich die Site wirklich blicken lassen.

 

[Palla92]

Danke für dein Feedback vitus37!
Die Divs in der Navi hab ich jetz entfernt und die Alt-Tags gesetzt!
Das Div im Footer hab ich drin gelassen, da ich wenn ich <p> einsetze so einen unschönen Absatz rein kriege.
Der überflüssige </div> tag sollte jetzt auch beseitigt sein ^^
Und jetzt wo du es sagst, finde ich auch, dass der Footer zu grell ist: werds also gleich ändern!

 

[Efchen]

ich befürchte, dass der semantisch (immer noch) nicht korrekt ist

Du benutzt <p>, um zwei Zeilenumbrüche einzufügen. <p> zeichnet aber einen Textabsatz aus. Dazu gehört auch immer ein schließendes Tag.

<p>Herzlich willkommen auf <span>DP Fotografie.com</span>, dem Internet Projekt von Diana Palavandishvili.</p>

Ich hab aus dem <b> (das weil es physische Inhaltsauszeichnung ist und keine Semantik beschreibt, nichts im HTML-Code zu suchen hat) mal in ein <span> geändert, weil ich nicht weiß, welche Bedeutung Du mit der Fettschrift vermitteln willst. Wenn es nur fett sein soll ohne Bedeutung, dann bleibt <span> und Du nutzt CSS zum fett machen. Wenn es wichtig sein soll, dann nutzt du <em>, wenn es sehr wichtig sein soll <strong>.
<br> ist physische Inhaltsauszeichnung und hat daher hier auch nichts verloren.
Wenn Du unbedingt willst, dass Dein Textabsatz nur eine bestimmte Breite hat, dann gib für das <p> eine fest Breite (width) an.

div#foot wäre als <p> besser ausgezeichnet, es handelt sich immerhin um Text und nicht um eine Gruppe ("Gruppe" ist die Bedeutung von <div>).

div#grafik sollte wohl auch keine Gruppe sein (enthält ja auch nur ein Element), sondern eine Überschrift. Wahrscheinlich ersten Grades, also ersetze das <div> durch ein <h1>.

Die Adresse im Impressum kannst Du auch als <address> auszeichnen, da sind die <br> erlaubt, weil sie eine logische Einteilung bedeuten. Aber das <b> muss natürlich auf allen Seiten weg.

IGuG ist das Ergebnis ganz gut, nur die Bedeutung von <p> hat sich Dir bisher wohl nicht erschlossen. Ich hoffe, das ist jetzt klar.

Wenn nicht, fragen!

 

[Palla92]

Efchen:

die Bedeutung von <p> hat sich Dir bisher wohl nicht erschlossen

Kann man durchaus so sagen
Ich hab jetzt alles so gemacht, wie du es gesagt hast, nur bei dem Footer will ich eigentlich nicht aufs div verzichten, weil ich den Absatz (den p nun mal erzeugt) nicht rauskriege :-?
Ich danke dir auf jeden Fall für deine Tipps :mrgreen: ich versteh das nach deiner Erklärung auf jeden Fall schon besser :mrgreen:

Vielleicht kann ja jemand noch ein Feedback zum Design geben?
Vielen lieben Dank -
Diana

 

[vitus37]

Du benutzt <p>, um zwei Zeilenumbrüche einzufügen. <p> zeichnet aber einen Textabsatz aus. Dazu gehört auch immer ein schließendes Tag.

Das dachte ich mir auch, aber der Validator hat keine Fehlermeldung gegeben. Weshalb?

 

[mermshaus]

Das dachte ich mir auch, aber der Validator hat keine Fehlermeldung gegeben. Weshalb?

Wahrscheinlich, weil die HTML-Syntax kompliziert ist.

 

[Efchen]

nur bei dem Footer will ich eigentlich nicht aufs div verzichten, weil ich den Absatz (den p nun mal erzeugt) nicht rauskriege

Das ist aber sinnfrei. Das wäre so, wie wenn Du sagst, dass Du zum Briefkasten um die Ecke lieber mit dem Auto fahren willst, weil Du nicht weißt, wie Du Deine Schuhe putzen kannst.
Und: <p> erzeugt nicht "nunmal" einen Absatz. Es gibt in CSS keine Vorschriften, wie ein Browser ein Element darzustellen hat, also mit welchen Default-Eigenschaften es belegt ist. Es gibt zwar eine Empfehlung, und in diesem Falle halten sich bisher auch alle dran. Aber wissen kann man das nicht.
Wenn Du den Absatz nicht willst, dass musst Du den Absatz entfernen. Wenn Du stattdessen ein anderen HTML-Tag nimmst, änderst Du ja die Bedeutung Deines Inhalts (hier zu etwas völlig sinnfreiem).

Abstände setzt eman über die CSS-Eigenschaften "margin" (Außenabstand) und "padding" (Innenabstand).

 

[Palla92]

Danke Efchen, habs jetzt hingekriegt!
Ist der Code denn jetzt komplett richtig?

 

[Efchen]

Das kann man nie so genau sagen :-)
Letztendlich musst Du wissen, ob die Bedeutung, die Du vermittelst, das ist, was Du damit vermitteln möchtest.
Zum Beispiel, ob der Footer wirklich als "wichtig" ausgezeichnet sein soll.
Und ob Der Sitename nach "Herzlich willkommen" wirklich als "sehr wichtig" und Dein Name kurz danach als "wichtig" ausgezeichnet sein soll. Das würde ich vermutlich nicht so auszeichnen, ich habe dabei so ein bisschen das Gefühl, dass Du die Namen einfach nur irgendwie hervorheben willst. Stelle Dir einen Vorlesebrowser vor, der bei <em> eine Betonung auf den Inhalt legt und bei <strong> eine starke Betonung. Wenn das Ergebnis das ist, was Du Dir vorstellst, dann ist der Code wohl semantisch richtig.

 

[Loon3y]

Das kann man nie so genau sagen :-)
Letztendlich musst Du wissen, ob die Bedeutung, die Du vermittelst, das ist, was Du damit vermitteln möchtest.
Zum Beispiel, ob der Footer wirklich als "wichtig" ausgezeichnet sein soll.
Und ob Der Sitename nach "Herzlich willkommen" wirklich als "sehr wichtig" und Dein Name kurz danach als "wichtig" ausgezeichnet sein soll. Das würde ich vermutlich nicht so auszeichnen, ich habe dabei so ein bisschen das Gefühl, dass Du die Namen einfach nur irgendwie hervorheben willst. Stelle Dir einen Vorlesebrowser vor, der bei <em> eine Betonung auf den Inhalt legt und bei <strong> eine starke Betonung. Wenn das Ergebnis das ist, was Du Dir vorstellst, dann ist der Code wohl semantisch richtig.

Aus deiner Sicht 100% richtig argumentiert, allerdings würde ich gerne noch dazuerwähnen, dass leider momentan kein Vorlesebrowser zwischen <em>, <strong>, <b>, <i>, <span>, ...unterscheidet. Es wird nichts was als wichtig oder sehr wichtig ausgzeichnet ist, anders betont oder vorgelesen.

Irgendwie schade, aber sollte man vllt mal erwähnt haben. :(

Dennoch muss der Inhalt semantisch und schematisch korrekt sein.


Grüßli und schönen Feierabend
Loon3y

 

[Palla92]

Ich werds so lassen wie es ist, danke an euch beide!

Leider hab ich so gut wie garkein Feedback zum Design gekriegt..
Da die Seite ja in gewisserweise auch sowas wie ein Portfolio ist, interessiert mich das eigentlich am meisten

Vielen Dank
Diana

 

[Efchen]

Irgendwie schade, aber sollte man vllt mal erwähnt haben.

Ist gut zu wissen, auch wenn ich sehr stark (sozusagen <strong> ;-)) befürchte, dass Deine Aussage jetzt von den Anti-Semantikern häufig als Grund hergenommen wird, nicht semantisch auszuzeichnen, weil es ja egal ist.

Leider hab ich so gut wie garkein Feedback zum Design gekriegt.

Ich bin kein Designer, daher kann ich nur meine Eindrücke kund tun und nicht wirklich Verbesserungsvorschläge machen.
- Ich finde die Hintergrundfarbe zu grell
- Ich finde die Seite ziemlich minimalistisch, aber das gefällt mir
- Den Header finde ich ganz schön
- Die Fotos auf der rechten Seite gefallen mir, ich bin selbst dafür zu doof ;-)
- Ich könnte mir vorstellen, dass die Seite in einem extrem breiten Browser mit den beiden Balken irgendwie doof aussieht
- Wenn der Viewport klein wird, rutschen die Menüpunkte in die nächste Zeile, der Hintergrund bleibt aber auf eine Menüzeile ausgerichtet
- Es gibt leider schnell horizontale Scrollbalken. Die Fotos rechts könnten doch unter den Text rutschen, wenn der Platz nicht ausreicht
Aber alles in allem finde ich das Design eigentlich eher positiv, schön ruhig und nicht so überladen, wie so manche Portale und TV-Seiten, wo man gar nicht weiß, wo man zuerst hingucken soll.

 

[Loon3y]

Ist gut zu wissen, auch wenn ich sehr stark (sozusagen <strong> ;-)) befürchte, dass Deine Aussage jetzt von den Anti-Semantikern häufig als Grund hergenommen wird, nicht semantisch auszuzeichnen, weil es ja egal ist.

Jein, sicherlich ist dies zu befürchten. Aber anderseits sollte, wie schon erwähnt, dennoch die semantische Auszeichnung korrekt sein. Wer weiß wie sich html-tags von wegen <strong> und <em> auf Suchmaschinen o.ä. auswirken. Man kann nur erraten und kalkulieren. Fakt ist, dass <strong> etwas sehr wichtiges und <em> etwas wichtiges auszeichnet. So steht es in der Spezifikation und so sollte es auch angwandt werden. Nicht anders. Das ist ja schließlich der Sinn von html.

Dennoch sollte man eventuell, wenn man von Screenreadern redet auf WAI-ARIA (role, landmark, ...) hinweisen und so dinge wie :focus bzw focus() (ja, Screanreader können JS verstehen) und und und... ;)

Wobei ich befürchte, sobald sich wer mit dem Thema "role" beschäftigt, es nur so von <div>-Suppen regnet... *irks*

@Topic
Das Design ist nicht spektakulär. Tips bzgl HTML / CSS könnte ich dir noch geben, dass man class=""- und id="" - namen sinnvoll vergibt und eventuell mit Selektoren u.ä arbeitet. (Beispiel, wieso gibst du deinen <h1> eine id="", wenn es das einzigste <h1> im dokument ist? kannst es doch auch direkt ansprechen).


Gruß
Loon3y

 

[mermshaus]

@Palla92: Ich finde das Design sehr ordentlich und grundsolide. Die letzten 20 % fehlen vielleicht noch. Falls da nicht mehr Inhalt kommen soll, könntest du mal andenken, alles auf eine Seite zu setzen.

[google]single page portfolio[/google]

Offtopic:

Ist gut zu wissen, auch wenn ich sehr stark (sozusagen <strong> ;-)) befürchte, dass Deine Aussage jetzt von den Anti-Semantikern häufig als Grund hergenommen wird, nicht semantisch auszuzeichnen, weil es ja egal ist.

Vielleicht ist es generell nicht geschickt, das Semantik/Barrierefreiheit-Thema argumentativ (gefühlt) vor allem am Beispiel Screenreader/Sehbehinderte festzumachen. Logische Auszeichnung ist eine der Voraussetzungen für Barrierefreiheit. Und...

"Barrierefreies Internet bezeichnet Web-Angebote, die von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können." (Wikipedia)

Sehr schöner Post zum Thema: Javascript ein oder aus - Seite 7 - php.de

Das schließt Menschen mit Behinderungen ein, aber auch denjenigen, der von seinem Handy aus eben Informationen von der Seite holen will oder denjenigen, der während seiner Linux-Installation auf die Konsole angewiesen ist und über einen Textbrowser Informationen aus dem Internet braucht, genauso wie denjenigen, der zwangsweise auf einem uralten System mit einem vorsintflutlichen Netscape unterwegs ist.

[...]

Also, bitte merken: Barrierefreiheit = JEDER an JEDEM Ort zu JEDER Zeit unter JEDEN Bedingungen mit JEDEM Benutzeragenten.

 

[mr.mordan]

finde die seite sehr ordentlich gemacht... einzigst die hintergrundfarbe ist nicht so mein fall... vll solltest da besser mit stribes arbeiten. aber das ja geschmackssache. ansonsten ganz solide. besonders die bilder gallerie ist dir gelungen

 

[hokage555]

Also im Grunde wurde ja schon alles gesagt

Noch ein paar Tipps zum Code:
Ich würde den Klassen und IDs Namen geben, die Sinn machen. Bei h1 die id "Grafik" zu wählen, halte ich nicht für wirklich aussagekräftig und erschwert nur die Wartung der Seite. Nehme da lieber so etwas wie, "header", "titel", oder was weiß ich

Des weiteren gibst du deinem Footer eine Klasse. In deinem Fall "foot". Eine ID wäre hier aber die richtige Wahl gewesen, denn Klassen verwendet man nur, wenn man selbige Formatierungen noch auf andere Objekte der gleichen Seite anwenden möchte. Bei einem Menü würde man den Listenpunkten zum Beispiel eine Klasse zuweisen, da es davon ja mehr als nur einen gibt.

Ändere also das class="" zu einem id="" ;-)

Zum Design:
Gut dieses grün als Hintergrund ist jetzt nicht so mein Fall, aber das ist ja Geschmackssache Du könntest deinem Inhalt vielleicht mit einem Rahmen noch etwas Struktur geben und den Hintergrund z.B. weiß machen. Mit ein bischen Kreativität könnte man daraus vll. so eine Art Blatt Papier machen. Das würde dem ganzen einen hübschen Kontrast geben und den Inhalt ein bischen mehr in den Vordergrund stellen. Dann wirkt die Seite auch nicht so leer. Wenn du künstlerisch begabt bist, kannst du das Design natürlich auch noch durch andere Feinheiten aufpoppen. Da deine Farbe grün (ich verbinde damit Natur, Gras, Wald, Pflanzen, Frische, etc) ist, könnten vll. so ein paar dunkelgrüne Ranken eine schöne Verzierung sein. Diese könntest du dann z.B. an den Seiten, von deinem Blatt Papier mit dem Inhalt platzieren (sollte dir die Idee gefallen). Oder vielleicht an den Seiten deiner Header-Grafik.
Den Balken deiner Navigation finde ich jetzt nicht zu schlecht, muss ich sagen. Der Kontrast zum grün gefällt mir recht gut. Wie das ganze bei einem 30'' Display aussieht, weiß ich nicht, aber da der balken wohl auf 100% Breite ist, könnte das etwas komisch aussehen^^ Vll. wäre also eine feste Breite in diesem Fall besser...

Beim Footer gilt im Grunde das Gleiche, nur dass mir dieses grün überhaupt nicht gefällt haha. Die weiße Schrift macht das ganze übrigens nicht ungedingt lesbarer ;-)

Ich würde glaube ich beim Footer sogar den Balken ganz weglassen; und solltest du die Papieridee umsetzen würde ich diesen kurzen Text dann einfach darunter setzten.

Da Design aber immer Geschmacksache ist, liegt das letztendlich bei dir ;-) Das waren alles nur Anregungen und sollten dir einige gefallen, dann freut mich das. Spiele halt mal mit allem ein wenig rum, probier Sachen aus und dann lässt du es so, wie es dir am besten gefällt

grüße hokage

 

[Efchen]

Ich würde den Klassen und IDs Namen geben, die Sinn machen.

Genau. HTML ist für die Semantik. Man verwendet Tags gemäß der Bedeutung. Das kann man bei IDs und Klassen genauso fortführen. Semantische Bezeichnungen. Niemals Dinge wie "rechts", "links" oder "grün". Dafür "Überschrift", "Sidebar" oder "SonderAbsatz".

Des weiteren gibst du deinem Footer eine Klasse. In deinem Fall "foot". Eine ID wäre hier aber die richtige Wahl gewesen, denn Klassen verwendet man nur, wenn man selbige Formatierungen noch auf andere Objekte der gleichen Seite anwenden möchte.

Das muss nicht sein. Man kann auch eine Klasse verwenden, wenn man diese auf verschiedenen Seiten mehrmals nutzt. Man benutzt eigentlich immer nur dann eine ID, wenn man sicher weiß, dass man diese ID maximal einmal auf jeder Seite braucht. Es wäre denkbar, mehrere Elemente mit "foot" zu bezeichnen und diese übereinander am unteren Viewport-Rand anzuordnen.

Bei einem Menü würde man den Listenpunkten zum Beispiel eine Klasse zuweisen, da es davon ja mehr als nur einen gibt.

Da würde ich dem Menü womöglich eine ID geben und den Listenpunkten gar nichts, weil ich dann sagen kann "ul#meineID li" und das viel kürzer ist. :-)

 

[Gimli]

Stimme efchen zu, da es dann auch leichter ist sich in seinem Code zurecht zu finden, wenn er mal etwas größer wird

 

[hokage555]

Gut ich habe mich jetzt auf meine eigene Erfahrung bezogen und bin in diesem Fall von mir ausgegangen.
Ich vergebe meinen li immer Klassen, einfach weil ich mit so einem Namen in meinem CSS mehr anfangen kann ;-) ul#navi li haette da zwar den gleichen Effekt, aber so etwas wie, #navi .navilink gefaellt mir besser.
Das ist allerdings wohl auch Geschmackssache.

Da mein Footer immer aus mehreren Elementen, wie einem Link zum Impressum, zum Kontaktformular, einem Copyright, etc. besteht, zeichne ich das ganze als ul aus und vergebe diesem dann die id footer. Man kann natuerlich auch 3 <p> elemente haben, denen man allen die Klasse footer zuteilt ;-)

gruesse