[review] www.vleesenbeekbouw.nl
Goed, de opdracht was een simpele site met informatie zonder al te veel poespas en
alleen ik ben er nog niet achter wat die horizontale balk is boven en onder de content, maar het is wel een leuke opvulling ziet er leuk en professioneel uit!
Ziet er strak uit verder Die balk boven en onder de content ziet er leuk uit, maar ga je eens verdiepen in de mogelijkheden van CSS hiervoor -> Een afbeelding repeaten in CSS is vele malen sneller dan dezelfde afbeelding tig keer laden..
Als ik je pagina door de W3C validator haal, geeft hij 84 errors, en dat is veel te veel. Die moet je even netjes wegwerken. Het design oogt lekker simpel en strak, daar hou ik wel van. Het contrast tussen je tekst en je achtergrond zou wat hoger mogen. De verzendbutton in je formulier staat op disabled, waarom is dat?
dit moet wel ander kunnen.
@jan, het is 80 dezelfde error dankzij bovenstaande code. heeft er niemand even naar de code gekeken,
Enkel moet denk ik de home op 1 pagina en niet met een scrollbar maar dat vergeef ik je :) Mooi , rustig , normaal...
@ jan: het formulier werkt nog niet, daarom staat hij nog off. Met het constrast zal ik wat experimenteren. (y)
@ allemaal: bedankt! Oeps ja, dat moet ik nog aanpassen. Het is de bedoeling dat ik daar nog even 1 plaatje van maak ipv zoveel. :D
Wat ik trouwens erg leuk vind (detail) is dat als je in het contactformulier op een radiobutton die actief is klikt, hij inactief wordt en de andere actief. Dat is wel handig ;) Ziet er leuk uit. Je hoeft overigens niet één groot plaatje te maken voor die balk, je kunt ook gewoon met CSS een plaatje herhalen (als achtergrond moet je hem dan instellen)
Hoe bedoel je dat precies?
Hij bedoelt dit stukje JavaScript:
@ jan: pagina valideert nu vlekkeloos. ;) Oké! Ja, als de opdrachtgever met zo'n idee komt is dat prima uit te voeren nietwaar? ;)
Had ook mijn post even goed gelezen, ik zei al dat het herhalen van een afbeelding in CSS (repeat) veel sneller/ effectiever is dan een afbeelding tig keer herhalen.
Het was me al opgevallen zonder in de broncode te kijken, omdat je gewoon meteen ziet dat de afbeeldingen niet in 1 keer geladen zijn/ worden.
Ik moet de eerste website nog tegenkomen waar ik niet welkom ben en tevens ligt het redelijk voor de hand dat ik op een website beland wanneer ik met m'n browser een beetje aan het rondsurfen ben. Zowel 'welkom' als 'website' zeggen dus helemaal niks.
Offtopic en hopelijk niet relevant:
Ik zou zelf de padding wat verhogen, zodat er meer ruimte is tussen de tekst en de rand. Ook de line-height heel iets. Dit leest prettiger. Je moet ervoor zorgen dat tekst prettig leesbaar is, anders haakt het grootste gedeelte van de bezoekers af.
Ik zou de css in een aparte stylesheet stoppen en niet bij elke pagina er hard in zetten.
En zorg ervoor dat je in het menu kan zien op welke pagina je je bevindt Leuke simpele site. Je kan nog wel wat verbeteren, maar het ziet er al goed uit.
Zo?
Dat is de snelste en efficiëntste methode. Ik zie dat je wel wat met die afbeeldingen van die randen hebt gedaan, maar eigenlijk nog niet zo efficiënt mogelijk, je hebt elke keer een "kleine steen, tussenruimte, grote steen, tussenruimte" dit patroon herhaalt zich steeds, als je een div maakt van de juiste breedte, en je geeft dit als achtergrond en geeft er bij aan (allemaal in css) dat die repeat-x (horizontaal herhalen) moet doen, en hezelfde onderaan, dan hoeft je pagina alleen maar 1 keer de afbeelding/ het herhalende deel van het patroon te laden en voor de rest wordt het door CSS herhaald.
alleen ik ben er nog niet achter wat die horizontale balk is boven en onder de content, maar het is wel een leuke opvulling
Ziet er strak uit verder
Ziet er netjes, simpel en proffesioneel uit.
ziet er goed uit! zo zie je maar dat professioneel niet ingewikkeld hoeft te zijn!
Als ik je pagina door de W3C validator haal, geeft hij 84 errors, en dat is veel te veel. Die moet je even netjes wegwerken.
dit moet wel ander kunnen.
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?
<div id="content">
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
?>
<div id="content">
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
<img src="img/blok25x18.gif"/>
<img src="img/half-blok12x18.gif"/>
?>
@jan, het is 80 dezelfde error dankzij bovenstaande code.
Gewijzigd op 01/01/1970 01:00:00 door bart van der veen
Enkel moet denk ik de home op 1 pagina en niet met een scrollbar maar dat vergeef ik je :)
@ jan: het formulier werkt nog niet, daarom staat hij nog off. Met het constrast zal ik wat experimenteren. (y)
@ allemaal: bedankt!
Wat ik trouwens erg leuk vind (detail) is dat als je in het contactformulier op een radiobutton die actief is klikt, hij inactief wordt en de andere actief. Dat is wel handig ;)
Herjan schreef op 13.09.2007 23:13:
Wat ik trouwens erg leuk vind (detail) is dat als je in het contactformulier op een radiobutton die actief is klikt, hij inactief wordt en de andere actief. Dat is wel handig ;)
Hoe bedoel je dat precies?
Gewijzigd op 01/01/1970 01:00:00 door Marnix
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function swapFields()
{
if(document.getElementById("particulier").style.visibility == 'hidden')
{
document.getElementById("particulier").style.visibility = 'visible';
document.getElementById("particulier").style.height = 'auto';
document.getElementById("particulier").style.display = 'block';
document.getElementById("zakelijk").style.visibility = 'hidden';
document.getElementById("zakelijk").style.height = 0;
document.getElementById("zakelijk").style.display = 'none';
document.form.soort_z.checked = false;
document.form.soort_p.checked = true;
}
else
{
document.getElementById("zakelijk").style.visibility = 'visible';
document.getElementById("zakelijk").style.height = 'auto';
document.getElementById("zakelijk").style.display = 'block';
document.getElementById("particulier").style.visibility = 'hidden';
document.getElementById("particulier").style.height = 0;
document.getElementById("particulier").style.display = 'none';
document.form.soort_z.checked = true;
document.form.soort_p.checked = false;
}
}
{
if(document.getElementById("particulier").style.visibility == 'hidden')
{
document.getElementById("particulier").style.visibility = 'visible';
document.getElementById("particulier").style.height = 'auto';
document.getElementById("particulier").style.display = 'block';
document.getElementById("zakelijk").style.visibility = 'hidden';
document.getElementById("zakelijk").style.height = 0;
document.getElementById("zakelijk").style.display = 'none';
document.form.soort_z.checked = false;
document.form.soort_p.checked = true;
}
else
{
document.getElementById("zakelijk").style.visibility = 'visible';
document.getElementById("zakelijk").style.height = 'auto';
document.getElementById("zakelijk").style.display = 'block';
document.getElementById("particulier").style.visibility = 'hidden';
document.getElementById("particulier").style.height = 0;
document.getElementById("particulier").style.display = 'none';
document.form.soort_z.checked = true;
document.form.soort_p.checked = false;
}
}
Edit:
Aanvulling: het is niet echt efficiënt om elke keer document.getElementById aan te roepen. Je kunt hem beter 1 keer aanroepen en het resultaat in een var stoppen.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
@ jan: pagina valideert nu vlekkeloos. ;)
bart van der veen schreef op 13.09.2007 22:33:
Had ook mijn post even goed gelezen, ik zei al dat het herhalen van een afbeelding in CSS (repeat) veel sneller/ effectiever is dan een afbeelding tig keer herhalen.
Het was me al opgevallen zonder in de broncode te kijken, omdat je gewoon meteen ziet dat de afbeeldingen niet in 1 keer geladen zijn/ worden.
Quote:
Welkom op de website van
Ik moet de eerste website nog tegenkomen waar ik niet welkom ben en tevens ligt het redelijk voor de hand dat ik op een website beland wanneer ik met m'n browser een beetje aan het rondsurfen ben. Zowel 'welkom' als 'website' zeggen dus helemaal niks.
Quote:
Dit is wat ik horen wil! Met 1 korte krachtige zin wordt mij verteld wat het bedrijf in huis heeft. In een fractie van een seconde beslis ik dus of ik hier aan het juiste adres ben of juist niet. Dat is dus heel wat anders dan de kansloze openingszin 'Welkom op de website van ...'.Ons bedrijf is gespecialiseerd in het bouwen van muren met kalkzandstenen
Ik zou zelf de padding wat verhogen, zodat er meer ruimte is tussen de tekst en de rand. Ook de line-height heel iets. Dit leest prettiger. Je moet ervoor zorgen dat tekst prettig leesbaar is, anders haakt het grootste gedeelte van de bezoekers af.
Ik zou de css in een aparte stylesheet stoppen en niet bij elke pagina er hard in zetten.
En zorg ervoor dat je in het menu kan zien op welke pagina je je bevindt
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
tis volgensmij trouwens 'Built by' en niet 'Build by'. Past tense and all.
aangepast, maar ik weet het nog niet zeker van het menu. Of ik het zo wel goed vorm gegeven heb. Misschien hebben jullie nog wat ideeën?
@ Niek, bedankt voor de feedback. Ik heb het allemaal Kan idd beter. Als je deze style wilt aanhouden, zou ik sowieso die dubbele lijnen wijzigen in enkele lijnen
Niek schreef op 14.09.2007 11:11:
Kan idd beter. Als je deze style wilt aanhouden, zou ik sowieso die dubbele lijnen wijzigen in enkele lijnen
Zo?
Gewijzigd op 01/01/1970 01:00:00 door Marnix
Dat is de snelste en efficiëntste methode.