[Review] Wouter J
Na heel wat sitechecks hier gedaan te hebben, heel wat mensen een berg -onderbouwde- kritiek gegeven te hebben is het nu tijd om mijn met de grond gelijk te maken ;-)
Tijd om de url te geven en kom maar op met de kritiek over het design, code, snelheid, SEO, enz: http://wouterj.nl/
Merk wel op dat ik de icoontjes boven elk bericht nog niet echt geslaagd vind, maar dan kan je mijn idee zien. Als je nog een geweldige oplossing voor mooie icoontjes hebt hoor ik het graag.
Even kort het doel van die site: Een blog waar ik mijn mening kwijt kan over de dev. wereld en waarop zonder toestemming en 7 dagen aanpas gedoe mijn tutorials kan plaatsen.
Gewijzigd op 13/03/2012 16:10:34 door Wouter J
Twee punten waar ik niet zo enthousiast over ben:
- de oplopende lijn boven aan de pagina en de aflopende lijn onderaan de pagina. Ik zou hier altijd de twee lijnen parallel laten lopen. Op de een of andere manier klopt het niet als de een oploopt en de ander afloopt.
- de link buttons onderaan vallen uit de toon door alle verschillende kleurtjes. Daarbij is het contrast ook niet erg groot bij sommige (zwart op donkere kleuren). Ik zou kiezen voor een standaard lay out voor all knoppen die meer in de stijl is van de rest
En dan een paar punten die ik wel kan waarderen:
- de grote header geeft een rustig beeld (hoewel het op blog pagina's wat kleiner mag).
- de knoppen in de header, het effect geeft ook weer rust omdat het langzaam verandert. Daarnaast loopt de animatie ook niet achter bij de muisbeweging, iets wat je vaak wel tegenkomt. Als ik heel snel eroverheen ga zie ik alleen het effect bij de laatste knop.
- de bijna "lege" opmaak, geen drukke site met veel te veel info in elkaar gepropt.
Bedankt voor je review! Even een reactie:
>> de oplopende lijn boven aan de pagina en de aflopende lijn onderaan de pagina. Ik zou hier altijd de twee lijnen parallel laten lopen. Op de een of andere manier klopt het niet als de een oploopt en de ander afloopt.
Ik heb het in het begin ook geprobeerd met parallelle lijnen, maar dat vond ik ook niet echt kloppen. Het lijkt dan niet alsof de content in een soort van band staat die schuin over de pagina gelegd is, dat effect wil ik niet creëren. Ook denk ik dat het niet heel veel opvalt, want er staat nu nog weinig content in, maar als er meer content in staat weet je denk ik na wat scrollen echt niet meer hoe die andere lijn eruit zag.
>> de link buttons onderaan vallen uit de toon door alle verschillende kleurtjes. Daarbij is het contrast ook niet erg groot bij sommige (zwart op donkere kleuren). Ik zou kiezen voor een standaard lay out voor all knoppen die meer in de stijl is van de rest
Je hebt waarschijnlijk niet gemerkt dat die kleuren de basis kleuren van de site waarna je gelinkt wordt is?
Ik snap wat je bedoelt en je hebt ook wel gelijk. Maar ik vond het wel leuk, omdat je een site vaak wel herkent aan de kleuren. Ik denk dat als ik jou nu een vierkantje met een #c33 (de rood op mijn website) laat zien je dit snel associeert met mijn site. Daarom heb ik ook die kleuren gebruikt.
Maar het valt inderdaad wel een beetje uit de toon, misschien dat ik het wel zo ga doen dat je eerst gewoon hetzelfde te zien krijgt als de menu items (dan heb je ook weer een beetje terug keer erin) en dan op een hover de kleur die bij de site hoort. Ik zal er eens mee puzzelen.
Bedankt ook voor de plus punten! (die menu hover die niet achterloopt komt door het geweldige CSS3 transition systeem)
ik had je website al bekeken voordat ik erwins berichtje gelezen had en zag daarna dat hij het ook gezien had.
de header en de footer die lopen niet parallel dat stoort me op de een of ander manier misschien komt het omdat ik nu op mijn macbook zit maar misschien denk ik hetzelfde op een groter scherm,
verder is me opgevallen dat de voorbeeldjes die je erop gezet hebt qua hoogte verschillen. in eerste instantie stoort het niet en het valt eigenlijk nauwelijks op maar misschien als ze allemaal dezelfde H x B verhouding hebben dat het toch iets strakker eruitziet.
de footer stoort me eigenlijk niet integenstelling tot wat erwin zegt maar ik denk dat dat gewoon een kwestie van smaak is.
wel vind ik het een beetje simpel alles achter elkaar gekwakt. als je daarvan kleine thumbnails zou maken en netjes neer zou zetten zou het meer tot zijn recht komen,
voorbeeld zoals hier maar dan kleinere thumbnails 80x80px bijv,, en anders zou ik de gekleurde links gewoon in rijen zetten onder elkaar bij 3 rijen van 7 onder elkaar ofzo
voor de rest ziet het er heel aardig uit! het oogt zoals erwin al zei heel rustig maar toch weer lekker strak.
heb je dit als template voor wordpress gemaakt of ook alles zelf gescript?
en ik keek even trouwens in je broncode en je bodytag en html tag afsluitingen zijn foetsie ligt dat aan mij of is er iets mis gegaan?
verder vindt ik de header en de footer wat te hoog. ik denk dat je deze alletwee wat kunt inkorten, waardoor de aandacht meer is gevestigd op de content van de site, terwijl het idee van deze header en footer gelijk blijven
verder de title (wat er tussen de <title> staat) vindt ik wat saai. de hele site speelt met je, en dan die titel, te zakelijk. ik zou een meer pakkende title pakken
dit is mijn mening, de rest vind ik er zeer netjes uitzien!
>> heb je dit als template voor wordpress gemaakt of ook alles zelf gescript?
Dit is volledig een wordpress template, maar natuurlijk wel een zelf gemaakt template. Dus WP heb ik niet zelf gescript, de rest wel.
>> en ik keek even trouwens in je broncode en je bodytag en html tag afsluitingen zijn foetsie ligt dat aan mij of is er iets mis gegaan?
Ja, dit heb ik 'expres' niet gedaan. Deze body en html sluittags zijn optioneel en niemand, behalve die domme validator, klaagt erover. Daarom ben ik het niet meer gewent en hier ook weg gelaten.
>> verder vindt ik de header en de footer wat te hoog.
Hier heb je opzich wel een puntje, al is het tegenwoordig bijna in om de header een half scherm en de footer bijna een heel scherm te maken. Maar de footer kan inderdaad wel wat kleiner, de grootte header creëert wat rust dus die hou ik denk ik zo.
>> de hele site speelt met je, en dan die titel, te zakelijk.
Ja, ook een punt. Ik was al aan het denken over een goede titel.
Even wat aanpassingen gedaan:
- Als de som van de background kleiner is dan 300 wordt color: #fff; gebruikt, ik hoop dat dit het contrast probleem dynamisch oplost
- footer is kleiner gemaakt, staat stukken beter!!
- piwik analytics toegevoegd, kan ik jullie ten minste in de gaten houden ;)
Nog te doen:
- Comment systeem toevoegen
- Microformat toevoegen
Gewijzigd op 13/03/2012 18:08:46 door Wouter J
Afgezien van dat vind ik het een mooie site Wouter. Misschien dat je HTML5 nog meer kan doorvoeren? Denk aan verschillende effecten. Ik vind dat bij blogs altijd wel mooi staan.
Daarnaast is het niet leuk als de 'detailpagina' van een nieuwsbericht 'in fade'? Dat lijkt het nog meer op een WEB 2.0 / 3.0 blog.
Goed werk Wouter.
Niels
Quote:
Ik denken 'Yeaah' eindelijk een website over 'cars' gaat het ineens over 'Ruby on rails'... ;-)
Die afbeeldingen zijn natuurlijk slechts voor de test. Dan gebruik ik graag wallpapers van tekenfilms ;)
Quote:
Denk aan verschillende effecten.
Welke effecten denk je aan met HTML5? Want met HTML kun je niet veel meer dan de text semantisch weergeven. Of bedoel je CSS3 of de nieuwe JS? Ook in dat geval ben ik wel benieuwd naar welke effecten.
Dat infaden zou ik eens naar kijken hoe ik dat mooi krijg.
@Reshadd, zou je misschien een screen print kunnen maken? Want hoe ik hier mijn scherm verklein/vergroot ik krijg het niet voor elkaar ;)
Gewijzigd op 13/03/2012 19:10:40 door Wouter J
Mooi te zien dat je gelijk de wel verdiende prijs in gebruik hebt genomen.
De site ziet er mooi strak uit eigenlijk weinig op aan te merken op dit moment.
Het is wel een layout wat ik niet van jou het verwacht. Het iets meer speelse dingen verwacht op html en css gebied. Want krijg bij jou het gevoel dat daar de krachten wel licht. Daar had ik persoonlijk ook iets meer in verwacht.
Maar dit kan natuurlijk ook een verkeerde inschatting zijn en is daarom ook een persoonlijke mening.
Verder wat mij opvalt is:
Als ik onder aan bij de footer op die linken druk. Dan opent hij hem niet in een nieuwe table of window. Maar hij opent in de zelfde scherm. Is dit bewust of?
Verder netjes.
- Kijk her-en-der naar je margins en paddings. Sommige elementen staan erg dicht op elkaar. Zie bijvoorbeeld je navigatie bovenaan; de knop 'Contact'. Daar heeft het overigen te maken met de vaste breedte die je aan de li-tag geeft. Haal die weg en verander de padding in '5px 10px' en de linker marge in 15px. Dit geldt ook voor je footer.
- In de links in de footer zou ik de text-decoration op none zetten.
- Het volgende gaat 'klinken' als beetje overbodig, maar probeer de grote tekst in de header eens met een PNG-afbeelding waarin de tekst een anti-alias heeft. Hierdoor zal je de pixels van de grote letters minder (of niet) zien. Je kan de PNG als achtergrond doen op de elementen die je nu hebt staan en dan met text-indent: -1000px de tekst wegtoveren. Dan maakt het voor je SEO ook niet uit.
- De datums bij de posts zou ik centreren, of anders de notatie van de datum een kwart slag draaien.
- De datum valt meer op dan de 'Lees meer' knop. Dat zal niet de bedoeling zijn. Ook kan het voorkomen dat de knop wat dicht op de tekst staat, zoals op de index bij de post 'Semantiek en HTML5'.
- De grijze blokken zijn nog wat saai. Daarin niet iets van ronde hoeken en/of schaduws, zoals de knoppen in het menu?
- Je footer sluit niet aan op de onderkant van de browser als de content kleiner is dan de viewport. Misschien helpt deze daarmee.
- Nog een zeikerige en puur persoonlijke voorkeur: ik vindt het niet mooi als een patroon precies op het begin begint, zoals je 'ruitje' op de achtergrond. Ik laat ze altijd halverwege of op 1/3 van het patroon beginnen. Zeg maar zoals een tegelwand in de badkamer. Die begin je ook vaak op de helft zodat je aan beide kanten een halve tegel hebt, in plaats van links een hele tegel een aan de rechter kant van de wand een stripje van een centimeter. Ik zou in dit geval dus werken met deze afbeelding.
Quote:
Het is wel een layout wat ik niet van jou het verwacht. Het iets meer speelse dingen verwacht op html en css gebied. Want krijg bij jou het gevoel dat daar de krachten wel licht. Daar had ik persoonlijk ook iets meer in verwacht.
Leuk dat je dit zegt en ik kan me daar ook wel in vinden. Maar meer speels kon ik hier niet echt in maken. Opzich heb ik hier al heel wat nieuwe CSS dingen in gestopt als transitions, border radius, transforms, pseudo elements, box shadow. Je kunt het misschien niet zien aan het design, maar onder de code zit behoorlijk wat nieuw werk. De schaduw onder de slider bijv. dat is totaal CSS. Eigenlijk is alles behalve de tumbnails en slider afbeeldingen CSS.
@fratseloos, bedankt voor je vele punten! Ik zal eens kijken hoe en wat ik kan doen, heb nu niet de beschikking tot stylus (waarmee ik de CSS geschreven heb) dus kan nu niks aan passen, maar morgen wel.
Ik vind de ruime opzet prettig. Dat geeft wel rust. Enige puntje van kritiek vind ik de links onderin met al die verschillende background kleurtjes. Dat zou ik anders doen. Dat deel van de site vind ik als enige "onrustig?". Ik zou de achtergrondkleuren weghalen (zodat de achtergrond dus weer rood wordt) en de (tekst)kleur van de links wit maken. Ik denk dat het dan allemaal wat "strakker" wordt. Ik zou dat in ieder geval zeker even proberen. Succes!
Ik ben even iets verder gaan kijken dan alleen de layout.
Maar idd als je iets dieper kijken dan kom je wel leuke dingen tegen.
Alleen toen je dat in jou reactie kwam ik daar op om het te doen.
toen kwam ik er namelijk ook achter dat in crome de footer en header weg vallen.
Ik zie daar dus geen rode achtergronden. Dit heb ik wel weer in ie9.
Ik zal hier even wat screens van maken die post ik zo even voor jou.
Edit:
Hierbij even de screens van crome en ie9 hoe ik ze zie.
Crome:
http://imageshack.us/photo/my-images/841/37741135.jpg/
IE9:
http://imageshack.us/photo/my-images/805/50544537.jpg/
Opera en Safari is het zelfde als IE9.
Alleen in Opera is de fader in het Menu zeer traag. Ook zie ik in Opera, Crome en IE9 wel over de witte achtergrond een blokjes raster maar in safari niet.
Hierbij even mijn bijdrage van de bevindingen. Hoop dat je hier wat mee kunt en voor jou nuttige informatie is.
Gewijzigd op 13/03/2012 23:42:14 door Frank WD
Dat in Chrome de background verdwijnt vind ik zeer vreemd. Ik werk hier altijd in Chrome en daar heb ik geen problemen. Misschien dat het ligt dat ik in de dev. channel werk? Welke versie heb jij?
Van de fout in de footer in IE en bij reshadd ben ik me nu ook bewust. Dit kan ik zo oplossen, die in Chrome en Safari vind ik wel even apart.
Ik kan even niet zo snel vinden welke versie Google Chrome ik draai.
Maar ik heb net even de alle nieuwste versie gedownload en geinstalleerd.
Deze versie werd aangeboden op: http://www.google.de/chrome/?hl=nl
Maar hier hou ik het zelfde probleem.
In IE ondervind ik overigens geen problemen. Enige wat ik hier ondervind is dat hij in de zelfde browser table word geopent, waar jij denk voor ogen hebt dat dit in een nieuwe wilt hebben.
Gewijzigd op 14/03/2012 09:18:00 door Frank WD
Ik heb, zoals je kunt zien, even primitief de footer links hetzelfde gemaakt als de navigatie links. Ik vind het zelf niet heel mooi staan, wat vinden jullie?
De saaie grijze blokken heb ik aangepast en de kleuren van datum en read more om gedraaid, nu valt de read more wel op.
Doormiddel van yepnope heb ik geprobeerd wat compabiliteit problemen op te lossen, hier ga ik mee verder.
Met media queries zijn er nu aparte stijlen voor tablets, smartphones en printers. Dus dat is ook opgelost.
De problemen die ik niet heb opgelost is het background probleem in stable chrome en het er moet nog een comment systeem en slider in komen. Dan ben ik, wat mij betreft, klaar.
Gewijzigd op 15/03/2012 15:51:21 door Wouter J