Schoolopdracht
Ik moet school een po maken (prakitsche opdracht) en omdat ik al thuis ben in html/css moet ik de inhoud laden uit de database.
Ik heb nu als eerst een layout gemaakt en zou graag jullie mning erover horen.
Link: http://school.jseubring.nl/po/
De subtext onder het logo die moeilijk te lezen is moet ik nog weghalen. En verder staat er ergens dat er een blok geel zou zijn dat klopt dus ook niet meer.
Alvast bedankt voor jullie reacties. Ik sta open voor kritiek
Je tekst is niet goed leesbaar.
Achtergrondplaatje is leuk, rest is.... veel te simpel. Dat kan veel beter.
En waarom is je logo een plaatje met alleen tekst? Gebruik dan gewoon font-face van CSS.
Je formulier bovenin werkt niet (ik mis ook een verzend-knop).
Het gele vlak (voor developen) is wit....?
@Eddy met het menu ben ik nog aan het stoeien, wat ik wil is dat ie bij het hoveren iets hoger wordt en dus iets uitsteekt tegenover de rest.
En welke tekst is slecht leesbaar?
Zoals ik zei is het alleen een layout, de functies moeten nog komen, zoals het zoekformulier. En,... simpelheid heeft ook wat!
In ieder geval bedankt voor jullie feedback
Paar puntjes:
- <!doctype html> even voor je <html> zetten
- <div class="article"> kan <article> worden en <div class="navigatie"> <nav> dacht ik.
- Je bent <meta charset="UTF-8"> vergeten
- "website ontwerp en realisatie" is té licht
- Bij een hover je menu kopjes kleiner maken vind ik niet echt passend.
- De achtergrond is veel te druk
- Het grijs van je zoekbar past niet bij het grijs van de transparantie.
2 punten die mij echt in 1 ogenblik opvallen:
1) Afleiding
Het lezen van de tekst/content die op een pagina staat is het hoofddoel van elke site ter wereld. Als designer moet je daaraan denken en meer leren omgaan, je moet doorkrijgen dat niet jou design het belangrijkst is maar hoe je de tekst in jou design plaatst.
Er staan nu ong. 10 woorden op je site, ik heb er nog 0 van kunnen lezen. Of mijn ogen gaan uit naar de veel te drukke achtergrond, of ze dwalen af wat er nou allemaal in de header staan of ik kan de tekst niet lezen (kom ik straks op). Hoe je dit makkelijk en snel kunt oplossen:
- Haal de opacity weg, dit is vaak (eigenlijk nooit) een goed idee om te gebruiken in secties waar tekst instaat. Maak de achtergrond van de tekst egaal en het liefst wit of iets wat er net tegenaan hangt (#eee bijv.).
- Vaak hoef je nu niet eens meer iets aan de achtergrond van de pagina te doen, maar misschien is dat wel nodig en dan zul je de kleuren in de afbeelding wat meer doorzichtig moeten maken, waardoor ze allemaal wat meer naar de oranje achtergrond toegaan.
2) Typografie is gewoon slecht
Sorry dat ik het zeggen moet, maar je typografie is slecht. Je font is niet een echt leesbaar font voor het web. Je kan duidelijk zien dat het een gratis font is, want per font-size verschilt het lettertype. De ene keer is hij rond en de andere keer bijna vierkant.
Tevens is het ook een font die weer veel te veel afleid. Kijk eens naar fonts als PT sans of Open sans (allebei op google webfonts te verkrijgen) dat zijn echte goede gratis fonts.
Bedenk als je opzoek gaat naar een font ook erg goed dat je 2 verschillende soorten fonts hebt op het web: Display- en Text fonts. Display fonts zijn voor headers en text fonts voor de tekst. Text fonts kun je ook voor headers gebruiken, maar display fonts niet voor tekst. wat jij nu hebt lijkt me meer in de categorie display fonts dan tekst fonts.
Als laatste zit er niet echt veel verschil tussen een heading of de normale tekst. Mijn oog wordt niet naar de headings getrokken en onbelangrijke dingen zie ik als even belangrijk als de normale tekst. Probeer verschil te maken, maak de normale tekst wat groter; de headings nog groter (en eventueel bold (niet fault bold)); en onbelangrijke tekst kleiner.
Code
- Ik mis een doctype, dit is verplicht op regel 1
- meta charset hoort als eerste element in het head element
- Er bestaan 101 meer elementen dan div en span. Verdiep je eens in de elementen en ga na wat hun betekenis is. Met HTML probeer je wat wij zien, dus wat belangrijk is en wat niet, uit te beelden voor de bot (van google of het browser bijv.). Denk bijv. aan kopjes in heading elementen (<h1> t/m <h6>) waarbij H1 uniek en belangrijk is en H6 compleet onbelangrijk (gebruik je bijna nooit) is.
Tekst zien wij bijv. in een alinea, een bot kan dat niet zien, die heeft daarvoor de paragraph element (<p>) nodig. Of bijv. de datum, wat denk je van een time element?
- Voor achtergrond kleuren of je geen afbeeldingen te gebruiken. Een kleur opgeven is 100 keer beter.
Contrast
Je site heeft erg weinig contrast in de zin van kleurverschil tussen achter- en voorgrond. De header bijv. niet leesbaar, zowel de slogan als de zoekbar. Zelfs in het menu heb ik er moeite mee.
Verder: ik mocht van m'n docent geen speciale html5 tags gebruiken voor me layout (moest met divs en spans). Zoals ik al zei wordt de webdesign en realisatie er nog afgeknipt ;). Hover is al aangepast, die zoekbar ga ik nog mee bezig.
@Wouter J: Weer een probleem met de docent: "Maak dat doorzichtig". Verder ga ik kijken naar een ander lettertype. Verder de code: Zie bovenaan..
PS: Mijn docent heeft volgens mij les gehad in het HTML 1.0 tijdperk
Gewijzigd op 23/09/2012 20:23:51 door Jelle Hi
Jelle Seubring op 23/09/2012 20:23:01:
PS: Mijn docent heeft volgens mij les gehad in het HTML 1.0 tijdperk
Iedereen heeft het geleerd toen het nog minder geëvolueerd was als nu. Of dat nu 2 jaar geleden is of 15; de tijd staat niet stil.
en als je met IT bezig bent, weet je dat je moet mee evolueren.
Anders moet je maar geschiedenis gaan doen, of zo...
Maar ja, hier kan jij niet aan doen en die docent ken ik ook niet.
Jelle Seubring op 23/09/2012 20:23:01:
Verder: ik mocht van m'n docent geen speciale html5 tags gebruiken voor me layout (moest met divs en spans). Zoals ik al zei wordt de webdesign en realisatie er nog afgeknipt ;). Hover is al aangepast, die zoekbar ga ik nog mee bezig.
Mag je wel electriciteit gebruiken? Of alleen een stoommachine?
Wat een onzin: HTML 5 is er: gebruik het.
't Kan ook prima zonder die tags, maar 't is veel mooier/beter met.