• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[Design] code+design [Keine Fertige Website]

Shrax

Mitglied
Ich hab auf mein Webspace jetzt mal mein neues Design hochgeladen. Ich bin kein Webdesigner, also mach das rein hobbymäßig also bitte nicht zu sehr lästern. Für richtige kritik bin ich allerdings offen! Hab ca. 9 Stunden dafür gebraucht. In photoshop bin ich leider noch überhauptnicht begabt^^

Habs unter Showcase weil die Seite noch nicht, mit inhalt fertig ist. Wenn das falsch ist bitte verschieben.



Framework Testseite


Bitte bewerten:
- Design
- HTML
- CSS
- Ladezeit/Schnelligkeit
- Barreriefreiheit /semantik

Edit: zu semantik, 2-3 divs über die ganze seite sind zu viel, bitte die als einziges nicht beachten.
 
Zuletzt bearbeitet:
Moin.
Jetzt liefer ich dir mal eine Kritik :)

Design:
Die Farbwahl ist ok, haut mich jedoch nicht vom Hocker :)
Das Design ist recht schlicht gehalten was die Ladezeiten natürlich senkt, jedoch wirkt das ganze ohne Bilder ein wenig trist und öde.
Die Navigationsbar ist dir ganz gut gelungen. Zu mindest können auch Farbenblinde bei dem krassen Kontrastwechsel erkennen, das sie über dem Link hovern.
Die Überschrift des Contents ist mir etwas zu gequetscht an die Navigationsbar. Da könnte man eventuell noch einen kleinen margin-top reinhauen :P
Der Footer ist mir etwas zu groß in der Höhe. Und ich fände das Ganze irgend wie besser wenn du du wie in der Navigation mit weiß zu schwarz hover Effekten bei den Footer Links gearbeitet hättest. Und vor allem wenn das ganze Zeugs nicht noch in ner extra Box wäre sähe es bestimmt noch besser aus :)

Fazit Design: Alles in allem ganz gut, aber noch verbesserungsfähig

HTML:
Der Aufbau ist recht solide. Wobei ich nicht weiß wozu du den div mit der id page UND den mit der id container benötigst. Sind aber bestimmt die 2-3 divs, die man nicht beachten sollte :P
Gut finde ich die eingehaltene Reihenfolge der Überschriften.
Auch das menü wurde mit einer Liste umgesetzt.
Ob jetzt jedes Listen-Element eine eigene Id braucht wag ich zu bezeweifeln, aber vielleicht ist da ja noch was mit javascript vorgesehen :D
Es ist ja nett gemeint, dass du den selten genutzten adress-Tag benutzt, jedoch sehe ich da nirgends eine Adresse :) Vielleicht solltest du dir den für deine Kontakt Seite aufheben den Tag :)
Die Meta tags sind auch nicht zu Verachtung. Sehr schön.

Fazit HTML: recht solide mit kleinen unstimmigkeiten

CSS:
style.css
Wow. Sehr schön gegliedert dein CSS (Zumindest das was man sieht. Wenn deine anderen CSS Dateien auch so gut kommentiert sind, hast sag ich nur: "Hut ab" :D
Solch geordneten CSS Dateien findet man nicht oft.

druckversion.css
Vielleicht reichen da meine CSS Kenntnisse nicht, aber da befindet sich HTML und Javascript drin. Deswegen lasse ich das aus meiner Kritik raus :D

Fazit CSS: Das was ich bewerten konnte war gut :)

Ladezeit:
Auf Grund von nur 3 Bildern ist diese sehr gering.

Barrierefreiheit:
Du hats probiert darauf zu achten und hast wohl dabei eine Kleinigkeit vergessen. Blinde können deine Bilder nicht sehen :D Da fehlt ein alt text. Ansonsten so weit ganz in ordnung
 
Das Design ist recht schlicht gehalten was die Ladezeiten natürlich senkt, jedoch wirkt das ganze ohne Bilder ein wenig trist und öde.
Leider habe ich hier meine Probleme. Die Ideen Bilder einzubauen wären da, allerdings möchte ich keine kaufen, und direkt lizentzfreie kostenlose zu nehmen liegt mir fern, da diese jeder nehmen kann. Und mit Photoshop bin ich "noch" nicht gut genug. Aber dies ändert sich mit der Zeit.

Die Überschrift des Contents ist mir etwas zu gequetscht an die Navigationsbar. Da könnte man eventuell noch einen kleinen margin-top reinhauen :P
Hab ich geändert, Abstand ist nun 1em. Sollte besser aussehen.

Der Footer ist mir etwas zu groß in der Höhe. Und ich fände das Ganze irgend wie besser wenn du du wie in der Navigation mit weiß zu schwarz hover Effekten bei den Footer Links gearbeitet hättest. Und vor allem wenn das ganze Zeugs nicht noch in ner extra Box wäre sähe es bestimmt noch besser aus
Gut, mit der Box war ein versuch mit ein paar unterschieden und Verläufen mehr Abwechslung rein zubringen. Aber da hast du recht. Habe alles geändert, address durch eine liste und ein p ersetzt, das ganze zentiert und den links den entsprechenden :hover zugewiesen.

Fazit Design: Alles in allem ganz gut, aber noch verbesserungsfähig
Vielen dank, die Verbesserungen werden noch kommen :D

Der Aufbau ist recht solide. Wobei ich nicht weiß wozu du den div mit der id page UND den mit der id container benötigst. Sind aber bestimmt die 2-3 divs, die man nicht beachten sollte :P
Genau diese meinte ich. Diese werden letztendlich noch entfernt. Sind nur noch drinnen ob verschiedene Sachen auszuprobieren.

Gut finde ich die eingehaltene Reihenfolge der Überschriften.
Auch das menü wurde mit einer Liste umgesetzt.
Vielen dank, habe mich hier bemüht die semantik so gut wie es ging zu beachten.

Ob jetzt jedes Listen-Element eine eigene Id braucht wag ich zu bezeweifeln, aber vielleicht ist da ja noch was mit javascript vorgesehen :D
Richtig, Javascript kann ich noch nicht und mir ist es wichtig das die Website ohne JavaScript 100% funktioniert. Doch sobalt ich mich in JavaScript bzw. Ajax eingearbeitet habe werden hier noch ein paar dinge verschönert.


Fazit HTML: recht solide mit kleinen unstimmigkeiten
Gut zu hören Und diese unstimmigkeiten werden noch behoben

CSS:
style.css
Wow. Sehr schön gegliedert dein CSS (Zumindest das was man sieht. Wenn deine anderen CSS Dateien auch so gut kommentiert sind, hast sag ich nur: "Hut ab"
Solch geordneten CSS Dateien findet man nicht oft.
Mir macht es Spaß Websites zu machen. Doch jedes mal jedes Stylesheet komplett neu zu schreiben möchte ich nicht, und diese frameworks finde ich nicht so toll. Deswegen habe ich alle .css Dateien sorgfältig geschrieben und so gut es ging auskommentiert um diese immer wieder nutzen und bearbeiten zu können. Es sind eigentlich alle Stylesheets so auskommentiert.


druckversion.css
Vielleicht reichen da meine CSS Kenntnisse nicht, aber da befindet sich HTML und Javascript drin. Deswegen lasse ich das aus meiner Kritik raus
Oho, da haste was entdeckt Diese Datei, druckversion.css gibt es noch gar nicht, deswegen wird von bplaced eine Fehlerseite eingeblendet von der du den code gesehen hast. Danke das du mich darauf aufmerksam gemacht hast, hatte ganz vergessen diese Datei zu schreiben. Werde dies gleich nachholen.



Danke dir für die Kritik. Ich würde mich über mehr Kritik, auch von anderen Leuten freuen!
 
Schön schlicht gehalten, mir gefällst, denke aber eher dass das Geschmackssache ist.

Zum Code:
Nur ein Fehler ;) Hier der Link.
Ansonsten muss ich ganz ehrlich sagen der Code ist gut aus Kommentiert ;)
Möcht ich bei meinem Code eigentlich auch immer machen, halte es aber nie wirklich durch. :mrgreen:

Ich finde übringens wenn der Gummibär-Artikel von dir ist muss ich sagen, kannst schön schreiben hat sich gut gelesen ;)


Macht weiter so!


T02
 
Schön schlicht gehalten, mir gefällst, denke aber eher dass das Geschmackssache ist.
Ja, nur ich denke damit spreche ich aufjedenfall ein größeres Puplikum an als mit einen vollgepackten Design^^ Außerdem mag ich diese schlichten Designs ^^


Zum Code:
Nur ein Fehler :wink: Hier der Link.
Und zack, schon behoben :)

Ansonsten muss ich ganz ehrlich sagen der Code ist gut aus Kommentiert :wink:
Möcht ich bei meinem Code eigentlich auch immer machen, halte es aber nie wirklich durch. :mrgreen:
Nun mir macht das Spass den code so übersichtlich wie möglich zu gestalten. Erst das grundgerüst, danach auskommentieren und danach immer weiter machen und wenn beispielsweise der div #body perfekt funktioniert wieder auskommentieren.

Ich finde übringens wenn der Gummibär-Artikel von dir ist muss ich sagen, kannst schön schreiben hat sich gut gelesen :wink:
Ich muss gestehen dieser ist nicht von mir^^ Hab den im netz gefunden, ist ne Altanative zu den Langweiligen Lorem Ipsum text, und diese tolle beschreibung von gummibärchen fand ich einfach so geil das ich den text einfach beim Layout designen nehmen MUSSTE^^

Vielen Dank für die Kritik! Für weitere bin ich gerne offen, und auch für Verbesserungs vorschläge jeder art.
 
Mir gefält diese Seite auf jeden Fall es muss ja eine Website sein die möglichst wenig Ladezeiten verbraucht:

-DER HAMMER:
--Sehr Übersichtlich bis jetzt
--Farbenkombination gelungen

-NICHT SO GUT:
--Favicon würde dir diesen empfehlen: Favinator, der Favicon Generator
--English und Teil Deutsch vermischt(bei der Navigation)
--würde dir eine klein grössere Schrift empfehlen
--Icons nicht so schön :mrgreen: aber macht nix

CSS hast du schön formatiert und Html auch mit div's gestaltet:mrgreen:
Auch der HTML-validator zeigt keinen Fehler mehr an!

GesamtNate:

78%
eine Skala von 1-10 = 8
 
So, ich habe das jetzt alles nochmal Überarbeitet. Dürfte nun noch schneller
(ein paar zentel Sekunden schneller) laden, da ich den Code nochmal Optimiert und verkürtzt habe.

Habe jetzt folgendes noch verbessert:

  • Favicon angepasst (Noch nicht perfekt, aber mir fällt noch nichts besseres ein
  • Meta Tags geordnet.
  • Googles "Einführung in SEO" gelesen und den Description meta Tag verbessert, sowie den Title tag.
  • IE Stylesheets eingebunden (ie6 macht noch kleine Probleme)
  • tabindex="", title="", alt="" attribute eingefügt.
  • handheld.css eingebunden (wird demnächst noch Optimiert)
  • ö, ü, ä, ß und & codiert
  • Aria-Landmarks eingebaut (find ich ne tolle sache :))
  • Ohne content braucht das HTML gerüst jetzt 5kb
  • Navigationspunkte jetzt ganz in Englisch mit title tags
  • CSS Dateien nochmal alle Validiert (keine fehler) und Optimiert(Sortiert)

So. Ich denke das grundlayout ist jetzt soweit fertig.
Noch Verbesserungsvorschläge?

Ansonsten schau ich noch, was ich mit AJAX bzw. Javascript noch als Gimmik einbauen kann (denke da an evtl. code syntaxhighlight oder das sich der Text schöner läd. Natürlich alles ohne die barreriefreiheit zu gefährden, wenn js ausgeschaltet ist muss es natürlich auch funktionieren)
 
Hab gestern mit php und include gebastelt^^

Hab jetzt die navigation, den footer und alle meta tags außer die oberen die sich aufjeder seite ändern zentral auf jeder seite eingebunden.


Jetzt müsste alles wieder funktionieren^^
 
Zurück
Oben