Foto website
Eergisteren domeinnaam aangevraagd en met bestaande classes binnen een paar uur werk een nieuwe site in elkaar gestampt.
- Waarom "/Fotografie" en niet gewoon "Fotografie"?
- Het licht grijs is te licht. Voor slechtzienden, ouderen en mensen met verkeerde scherminstellingen kan het niet leesbaar zijn. Over het algemeen lijkt het net of je hele website te vaak in de wasmachine is geweest. Het contrast is te laag!
- Uitlijning en typografie is niet al te goed. Tekst staat nu nog te dicht op elkaar gepropt wat de leesbaarheid benadeeld. Het komt daardoor opgepropt over. Qua uitlijning mis je 1) consistentie en 2) goede positionering.
- 1) De foto's zijn horizontaal op elkaar gepropt (waarschijnlijk om er alsnog 4 op een rij te kunnen krijgen). Verticaal zit er opeens veel meer ruimte tussen. Als je naar een foto pagina gaat dan zit er meer ruimte boven die hr dan eronder. Enzovoorts. Zorg voor consistentie in margins. Je kan dat ook bereiken met een grid (zie het volgende punt).
- 2) Lijn op de voorpagina de h1 uit met de bovenkant van "Amsterdam" (of doe het menu wat omhoog). Je kan duidelijk zien dat je de website niet met een grid ontworpen hebt. Kijk eens naar het grid van http://www.lessframework.com. Offtopic: als je wil dat je website ook goed zichtbaar is op mobieltjes dan is het ook handig als je dit framework ook implementeert. Anyway: je had vantevoren moeten weten wat je line height zou worden en een vaste blokbreedte moeten hanteren. Je had de thumbnails dan zo groot kunnen maken dat ze niet alleen uitlijnen met bijvoorbeeld de bovenkant van "Amsterdam" maar ook bijvoorbeeld met de onderkant van "Graffiti". Een menu item zou dan 2x de line height van een paragraaf hebben. Een kop moet minimaal 1 line-height aan topmargin hebben (oftewel minimaal 1 regel afstand van de vorige paragraaf). Tekst eronder moet juist meteen op de volgende line height regel. Op die manier associëren mensen dat het kopje bij de onderstaande tekst hoort. Design niet alleen een mooi design maar ook een goede user experience. Dus bouw de volgende keer je website op met behulp van een grid en bepaal vantevoren je line height.
- Waarom is "Zoekfunctie" een h3, "Archief op jaar en maand" een h2 en "Statistieken" een h1? Waarom hebben allen dezelfde opmaak? Met h1 hoor je aan te geven wat de titel is van de pagina. Of je geeft ermee aan wat de titel is van de website en dan met h2 wat de titel is van de pagina.
- Het wordt steeds meer een noodzaak om mobiele platforms als tablets en smartphones een optimale ervaring te geven.
- Waarom is je logo een plaatje en geen tekst? Zodat je de website in een paar uur in elkaar kon kloppen?
- Footer: links zijn vrij lomp. Tekst moet niet groter zijn dan de grootte van tekst in paragraaf stijl. Vaak is het zelfs nog kleiner maar dat raad ik je hier niet aan (omdat de paragraaf stijl al vrij kleine letters kent).
- Waarom geen logo's voor Twitter en Facebook in de footer? Waarom wel bij een plaatje?
- Copyrights zijn eigenlijk helemaal niet nodig. Ook als je het niet vermeld heb je nog steeds copyrights. Wil je een minimalistische website haal het dan weg.
- Als je een perfectionist bent: minimaliseer en gzip je HTML, CSS en javascript voor een snellere laadtijd.
- Algemene uitlijning: waarom is de hele website links uitgelijnd? Als je hem centreert krijgen mensen hem recht voor hun neus te zien. Bovendien is het gecentreerd uitlijnen van de website bij een fixed layout de defacto standaard.
- Een vraagje voor jou: wat is het doel van de hoofdpagina? Zo te zien heb je daar nog niet goed over nagedacht.
Voor zowel de user experience als de usability zou ik je een zes geven. Aan de andere kant denk ik dat als je bovenstaande punten in ogenschouw neemt dat dit een goede website kan worden.
Performance optimalisatie
Bron: YSlow (tab in Firebug addon in Firefox)
Tip: geef je af en toe veranderende elementen (zoals style.css) een versienummer mee (bijv. style_v100.css) en geef ze een verre expiration date. Wil je de bestandsnaam zelf niet aanpassen geef hem dan een GET mee (style.css?v=100). Om te zorgen dat de nieuwe css geladen wordt als je een aanpassing maakt verhoog je gewoon het versienummer. De browser ziet het dan als een nieuw bestand en laadt de nieuwe css in.
Edit: kijk eens naar http://www.smushit.com .
Tot slot: valid XHTML 1.0 Strict. Gefeliciteerd! En daar ben je trots op dat je zonder goed onderzoek een website in elkaar plempt? Ik moet zeggen dat hij beter is dan de gemiddelde reviewwebsite, maar er is zeker ruimte voor verbetering.
Ik heb het contrast versterkt door een donkere acryl te gebruiken als achtergrond en ook heb ik de startpagina doorverwezen naar een foto pagina. Het hoofdmenu was nietszeggend idd.
Heb ook de thumbs uitgelijnd en mijn logo met een h1/p gemaakt wat weer een jpg scheelt.
Ga ook nog verder met de andere punten.
Zeer bedankt voor je kritische mening :) Bedankt @the force voor de zeer kritische punten waar ik zeker een hele hoop uit heb kunnen halen. Inmiddels alweer wat aanpassingen verricht aan de website!
Mooie foto's trouwens. Als je de margin van wrapper op "80px auto" zet, staat hij wel in het midden. Of was dat niet de bedoeling? :P
Notice: Undefined index: HTTP_ACCEPT_ENCODING in /public/sites/www.jderuijter.nl/inc/head.php on line 2
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 3
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 4 Ik krijg onderstaande foutmeldingen in beeld:
Welke pagina ? Ik zie niets.
- Waarom "/Fotografie" en niet gewoon "Fotografie"?
- Het licht grijs is te licht. Voor slechtzienden, ouderen en mensen met verkeerde scherminstellingen kan het niet leesbaar zijn. Over het algemeen lijkt het net of je hele website te vaak in de wasmachine is geweest. Het contrast is te laag!
- Uitlijning en typografie is niet al te goed. Tekst staat nu nog te dicht op elkaar gepropt wat de leesbaarheid benadeeld. Het komt daardoor opgepropt over. Qua uitlijning mis je 1) consistentie en 2) goede positionering.
- 1) De foto's zijn horizontaal op elkaar gepropt (waarschijnlijk om er alsnog 4 op een rij te kunnen krijgen). Verticaal zit er opeens veel meer ruimte tussen. Als je naar een foto pagina gaat dan zit er meer ruimte boven die hr dan eronder. Enzovoorts. Zorg voor consistentie in margins. Je kan dat ook bereiken met een grid (zie het volgende punt).
- 2) Lijn op de voorpagina de h1 uit met de bovenkant van "Amsterdam" (of doe het menu wat omhoog). Je kan duidelijk zien dat je de website niet met een grid ontworpen hebt. Kijk eens naar het grid van http://www.lessframework.com. Offtopic: als je wil dat je website ook goed zichtbaar is op mobieltjes dan is het ook handig als je dit framework ook implementeert. Anyway: je had vantevoren moeten weten wat je line height zou worden en een vaste blokbreedte moeten hanteren. Je had de thumbnails dan zo groot kunnen maken dat ze niet alleen uitlijnen met bijvoorbeeld de bovenkant van "Amsterdam" maar ook bijvoorbeeld met de onderkant van "Graffiti". Een menu item zou dan 2x de line height van een paragraaf hebben. Een kop moet minimaal 1 line-height aan topmargin hebben (oftewel minimaal 1 regel afstand van de vorige paragraaf). Tekst eronder moet juist meteen op de volgende line height regel. Op die manier associëren mensen dat het kopje bij de onderstaande tekst hoort. Design niet alleen een mooi design maar ook een goede user experience. Dus bouw de volgende keer je website op met behulp van een grid en bepaal vantevoren je line height.
- Waarom is "Zoekfunctie" een h3, "Archief op jaar en maand" een h2 en "Statistieken" een h1? Waarom hebben allen dezelfde opmaak? Met h1 hoor je aan te geven wat de titel is van de pagina. Of je geeft ermee aan wat de titel is van de website en dan met h2 wat de titel is van de pagina.
- Het wordt steeds meer een noodzaak om mobiele platforms als tablets en smartphones een optimale ervaring te geven.
- Waarom is je logo een plaatje en geen tekst? Zodat je de website in een paar uur in elkaar kon kloppen?
- Footer: links zijn vrij lomp. Tekst moet niet groter zijn dan de grootte van tekst in paragraaf stijl. Vaak is het zelfs nog kleiner maar dat raad ik je hier niet aan (omdat de paragraaf stijl al vrij kleine letters kent).
- Waarom geen logo's voor Twitter en Facebook in de footer? Waarom wel bij een plaatje?
- Copyrights zijn eigenlijk helemaal niet nodig. Ook als je het niet vermeld heb je nog steeds copyrights. Wil je een minimalistische website haal het dan weg.
- Als je een perfectionist bent: minimaliseer en gzip je HTML, CSS en javascript voor een snellere laadtijd.
- Algemene uitlijning: waarom is de hele website links uitgelijnd? Als je hem centreert krijgen mensen hem recht voor hun neus te zien. Bovendien is het gecentreerd uitlijnen van de website bij een fixed layout de defacto standaard.
- Een vraagje voor jou: wat is het doel van de hoofdpagina? Zo te zien heb je daar nog niet goed over nagedacht.
Voor zowel de user experience als de usability zou ik je een zes geven. Aan de andere kant denk ik dat als je bovenstaande punten in ogenschouw neemt dat dit een goede website kan worden.
Performance optimalisatie
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
There are 7 components with misconfigured ETags
* http://www.jderuijter.nl/css/style.css
* http://www.jderuijter.nl/img/logo.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/afval2-beker_hek.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/afval-DSC_050salad0.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/urbex2-DSC_0894%20copy.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/vis-DSC_0905.jpg
* http://www.jderuijter.nl/favicon.ico
Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser's cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.
There are 7 static components without a far-future expiration date.
* (no expires) http://www.jderuijter.nl/css/style.css
* (no expires) http://www.jderuijter.nl/img/logo.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/afval2-beker_hek.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/afval-DSC_050salad0.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/urbex2-DSC_0894%20copy.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/vis-DSC_0905.jpg
* (no expires) http://www.jderuijter.nl/favicon.ico
Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.
There are 2 plain text components that should be sent compressed
* http://www.jderuijter.nl/
* http://www.jderuijter.nl/css/style.css
Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip.
* http://www.jderuijter.nl/css/style.css
* http://www.jderuijter.nl/img/logo.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/afval2-beker_hek.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/afval-DSC_050salad0.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/urbex2-DSC_0894%20copy.jpg
* http://kiekjes.jderuijter.nl/voorbeeld/vis-DSC_0905.jpg
* http://www.jderuijter.nl/favicon.ico
Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser's cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.
There are 7 static components without a far-future expiration date.
* (no expires) http://www.jderuijter.nl/css/style.css
* (no expires) http://www.jderuijter.nl/img/logo.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/afval2-beker_hek.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/afval-DSC_050salad0.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/urbex2-DSC_0894%20copy.jpg
* (no expires) http://kiekjes.jderuijter.nl/voorbeeld/vis-DSC_0905.jpg
* (no expires) http://www.jderuijter.nl/favicon.ico
Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.
There are 2 plain text components that should be sent compressed
* http://www.jderuijter.nl/
* http://www.jderuijter.nl/css/style.css
Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip.
Bron: YSlow (tab in Firebug addon in Firefox)
Tip: geef je af en toe veranderende elementen (zoals style.css) een versienummer mee (bijv. style_v100.css) en geef ze een verre expiration date. Wil je de bestandsnaam zelf niet aanpassen geef hem dan een GET mee (style.css?v=100). Om te zorgen dat de nieuwe css geladen wordt als je een aanpassing maakt verhoog je gewoon het versienummer. De browser ziet het dan als een nieuw bestand en laadt de nieuwe css in.
Edit: kijk eens naar http://www.smushit.com .
Tot slot: valid XHTML 1.0 Strict. Gefeliciteerd!
Gewijzigd op 21/07/2011 14:06:21 door The Force
Ik heb het contrast versterkt door een donkere acryl te gebruiken als achtergrond en ook heb ik de startpagina doorverwezen naar een foto pagina. Het hoofdmenu was nietszeggend idd.
Heb ook de thumbs uitgelijnd en mijn logo met een h1/p gemaakt wat weer een jpg scheelt.
Ga ook nog verder met de andere punten.
Zeer bedankt voor je kritische mening :)
Geen probleem, dat begint er ook al meer op te lijken. Ben benieuwd naar het eindresultaat!
Gewijzigd op 31/07/2011 19:51:43 door www JdeRuijterNL
Mooie foto's trouwens.
Notice: Undefined index: HTTP_ACCEPT_ENCODING in /public/sites/www.jderuijter.nl/inc/head.php on line 2
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 3
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 4
Wladimir S op 01/08/2011 12:47:37:
Ik krijg onderstaande foutmeldingen in beeld:
Notice: Undefined index: HTTP_ACCEPT_ENCODING in /public/sites/www.jderuijter.nl/inc/head.php on line 2
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 3
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 4
Notice: Undefined index: HTTP_ACCEPT_ENCODING in /public/sites/www.jderuijter.nl/inc/head.php on line 2
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 3
Warning: Cannot modify header information - headers already sent by (output started at /public/sites/www.jderuijter.nl/inc/head.php:2) in /public/sites/www.jderuijter.nl/inc/head.php on line 4
Welke pagina ? Ik zie niets.