Layout
Ik heb een nieuwe layout gemaakt voor mijn website.
Toevoeging op 15/09/2012 18:42:21:
ohh een deel van de site was iets later geladen als de rest vandaar dat het er een beetje raar uit zag. dus dat kan je vergeten :). mooi gedaan ik vindt het een mooi design , alleen ik bekijk het op een 31" tv (dat is mijn monitor) en daar ziet het er een beetje raar uit. maar je ziet wel in 1 oog opslag wat de bedoeling is, wat je er kunt en hoe je aan de slag kunt.
of een dropdown menu(functies kan vanalles zijn)
als inloggen essentieel is mss tekstvak en password op home page zetten beter. en dan heb je ruimte voor belangrijkere zaken in menu
contact vind ik persoonlijk beter in footer, maar dat is smaak natuurlijk.
960 breedte is zowat standaard, ik zie dat je 900 gebruikt hebt.
heeft te maken met gulde snede.
pagina die geselecteerd is ander kleur en niet klikbaar maken, gebruiksvriendelijker zo.
mss veel commentaar, maar kies eruit wat je mee eens bent.
hopelijk ben je er iets mee. mss een andere naam voor functies verzinnen, het is zo alles en niets zegend.
De rest ga ik kijken hoe en wat.
Bedankt voor je reactie! Wat voor een andere naam zou jij voor functies doen dan?
wat is de bedoeling eigenlijk van je website?
ps die image woobie.nl doe je best met image replacement en klikbaar als homepage maken==> gebruiksvriendelijker zo de vraag die je jezelf moet stellen is "wat is de bedoeling van de website en wat is het belangrijkste lijst van zaken die je wilt voor tonen.
image replacement?? De bedoeling is natuurlijk dat mensen een webshop kunnen maken. Wat ik onder de knop functies wil laten zien zijn de dingen die je kan doen/krijgt met/bij een webshop.
mss snap ik het beter als je die pagina eens maakt. bedoel je dan de mogelijkheden die je hebt met webshop aan te passen of code?
Maar toch voor je SEO is het beter dit in een h2 element te zetten, zoiets kan makkelijk met zo'n simpel logo.
Ook die slider, is vreselijk makkelijk te maken met HTML en JS. Daarvoor moet je geen afbeeldingen gebruiken. Al zou ik wel afstappen van NivoSlider, vreselijk goede plugin maar niet echt voor wat jij wilt en als je alleen het fade effect gebruikt kan je veel kleinere vinden.
Nog meer over je code (ik doe het vandaag eens in omgekeerde volgorde...):
- probeer altijd logisch in te springen, ook in de head
- ik raad altijd aan script elementen vlak boven </body> te plaatsen voor een snellere pagina laadtijd.
- gebruik geen inline CSS
- vul altijd alt attributen in, een leeg attribuut is niks en dus kun je die beter gewoon leeglaten.
- een kop staat altijd boven een alinea, niet erin, dit is dus fout:
- is 'in 10 minuten uw eigen webshop online' nou echt de belangrijkste titel van de pagina?
- zet de nieuwsberichten in een lijst
- section in een section resulteert in een lage prioriteit van de tekst in het 2e section element. Maak van 1 van de 2 een div ofzo (of gewoon meteen een lijst)
- een anchor (link) element kan nooit een heel item zijn. Maak hier mooie items van een geef de datum geen link mee, maak de link met CSS gewoon 100% hoog en breed
- footer tekst hoort ook in een element te staan, ik gebruik hier vaak het small element voor.
- voeg properties samen voor een snellere CSS sheet:
- herbedenk je selectors. De meeste kunnen makkelijk sneller gemaakt worden. Bijv `section#slider`. Een ID is uniek en die tag ervoor zorgt alleen voor meer denktijd voor het browser, gebruikt dus gewoon `#slider`.
Of `nav ul li a.current`. Die is veel te specifiek terwijl `nav a.current` precies dezelfde elementen selecteert en een stuk sneller is.
- gooi je CSS eens door http://prefixr.com/ zodat je de goede prefixen hebt. Je gebruikt hier bijv. de oude webkit syntax uit 2011 terwijl die allang dezelfde syntax als mozilla hebben.
En include altijd de standard versie, zonder prefix. En ook alle prefixen die nodig zijn, nu vergeet je Opera...
Pagina's
Een normale pagina verschilt vaak van de homepagina. Zo wil ik op een andere pagina echt niet die enorme slider zien en die enorme balk van nieuws-/twitterberichten ook niet.
Denk goed na waar een gebruiker nou voor op die pagina komt en toon alleen dat en niet allemaal andere dingen waardoor hij alleen maar wordt afgeleid van het doel.
Design
Ik ben zelf niet echt liefhebber van het design, het lay-out is wel goed overigens. Het is een beetje saai en heeft niet echt een 'spannend' element. Probeer eens een heel klein en vaag patroontje in de achtergrond van je pagina, of een kleine gradient in de rode slider.
Menu
Een menu moet opvallen, mensen moeten makkelijk kunnen navigeren. In jou geval heeft een menu item dezelfde font size als overal, maak het net 1 of 2 pixels groter en je zult zien dat het meer opvalt. Alisio, image replacement 'gebeurd' al (soort van). De screenreader zal de alt text lezen.
Toevoeging op 16/09/2012 00:48:37:
Wouter, ik heb volgens mij de meeste puntjes aangepast. Ziet het er zo beter uit? Wouter, bedankt voor je zeer uitgebreide review! Ik ga met deze punten zeker wat doen.
- De header is wel erg aanwezig en erg rood (iets te knallend)
- Ik zou de actieve button (in het menu) niet rood laten kleuren, eerder donker grijs. Anders wordt alles zo rood.
- De afbeeldingen in de header volgen elkaar wel heel snel op
Verder vind ik het geheel iets te rood.
Succes! Ik heb eventjes gekeken naar je website, er vielen me een aantal dingen op:
Maar :
- Je slideshow gaat wel snel voor mensen met bv. dislexie of andere problemen is dit minder makkelijk om zo snel te lezen, laat dus je foto's iets trager gaan.
- Je header ik vind hem te fel, te rood, ... Het valt iets TE hard op, maak hem wat donkerder ofzo.
- De balk onderaan die tevoorschijn komt ( die cookie balk ) hij irriteert me daar wat, zet hem misschien aan de zijkant dat zou al veel beter zijn.
- De pagina's, klopt het dat je alleen nog maar een Home hebt ?
Verder vind ik je Layout fantastisch, je hebt meteen door wat de bedoeling is van je website *Thumbs Up!*
Doe zo voort zou ik zeggen! In 1 woord over je Layout : Zeer mooi gedaan !
Toevoeging op 15/09/2012 18:42:21:
ohh een deel van de site was iets later geladen als de rest vandaar dat het er een beetje raar uit zag. dus dat kan je vergeten :). mooi gedaan
Dankje!
ik zie maar 1 pagina? klopt dit?
Ja, klopt. Moet nog ff kijken hoe ik die andere pagina's indeel. Heb je misschien tips?
hmm als je nou zelf wat in elkaar steekt kan ik en alle anderen wel even verbeter tips geven maar zo uit m'n hoofd zou ik nu niets kunnen bedenken heb de hele dag in Java geprogrammeerd dus ben niet meer zo creatief :p
Haha, ok ik laat het weten als de andere pagina's klaar zijn ;)
of een dropdown menu(functies kan vanalles zijn)
als inloggen essentieel is mss tekstvak en password op home page zetten beter. en dan heb je ruimte voor belangrijkere zaken in menu
contact vind ik persoonlijk beter in footer, maar dat is smaak natuurlijk.
960 breedte is zowat standaard, ik zie dat je 900 gebruikt hebt.
heeft te maken met gulde snede.
pagina die geselecteerd is ander kleur en niet klikbaar maken, gebruiksvriendelijker zo.
mss veel commentaar, maar kies eruit wat je mee eens bent.
hopelijk ben je er iets mee.
Gewijzigd op 15/09/2012 22:32:32 door alisio putman
De rest ga ik kijken hoe en wat.
Bedankt voor je reactie!
wat is de bedoeling eigenlijk van je website?
ps die image woobie.nl doe je best met image replacement en klikbaar als homepage maken==> gebruiksvriendelijker zo
image replacement??
http://en.wikipedia.org/wiki/Fahrner_Image_Replacement
image replacement is voor mensen die een screen reader gebruiken.
dan wordt je image ook tekst.
meta tags zijn handig voor hogerop in google te komen.
title zou webshop naam moeten zijn ook beter voor google
je bent beter af met object detectie dan met browser detectie.
dan voor functies
2 delen
1) voorbeelden ==> kan ook in 2 delen beginners en gevorderden
1) aan de slag
image replacement is voor mensen die een screen reader gebruiken.
dan wordt je image ook tekst.
meta tags zijn handig voor hogerop in google te komen.
title zou webshop naam moeten zijn ook beter voor google
je bent beter af met object detectie dan met browser detectie.
dan voor functies
2 delen
1) voorbeelden ==> kan ook in 2 delen beginners en gevorderden
1) aan de slag
Gewijzigd op 15/09/2012 22:52:52 door alisio putman
Ok, maar voorbeelden en aan de slag is meer om te laten zien hoe het kan worden of om te beginnen. En niet om alle "functies" te laten zien?
mss snap ik het beter als je die pagina eens maakt.
Gewijzigd op 15/09/2012 23:01:04 door alisio putman
Ok, pagina functies heb ik aangemaakt.
Maar toch voor je SEO is het beter dit in een h2 element te zetten, zoiets kan makkelijk met zo'n simpel logo.
Ook die slider, is vreselijk makkelijk te maken met HTML en JS. Daarvoor moet je geen afbeeldingen gebruiken. Al zou ik wel afstappen van NivoSlider, vreselijk goede plugin maar niet echt voor wat jij wilt en als je alleen het fade effect gebruikt kan je veel kleinere vinden.
Nog meer over je code (ik doe het vandaag eens in omgekeerde volgorde...):
- probeer altijd logisch in te springen, ook in de head
- ik raad altijd aan script elementen vlak boven </body> te plaatsen voor een snellere pagina laadtijd.
- gebruik geen inline CSS
- vul altijd alt attributen in, een leeg attribuut is niks en dus kun je die beter gewoon leeglaten.
- een kop staat altijd boven een alinea, niet erin, dit is dus fout:
Code (php)
1
2
3
4
2
3
4
<p>
<h1>In 10 minuten uw eigen webshop online!</h1>
<a href="#" class="register-button">Start uw gratis webshop</a>
</p>
<h1>In 10 minuten uw eigen webshop online!</h1>
<a href="#" class="register-button">Start uw gratis webshop</a>
</p>
- is 'in 10 minuten uw eigen webshop online' nou echt de belangrijkste titel van de pagina?
- zet de nieuwsberichten in een lijst
- section in een section resulteert in een lage prioriteit van de tekst in het 2e section element. Maak van 1 van de 2 een div ofzo (of gewoon meteen een lijst)
- een anchor (link) element kan nooit een heel item zijn. Maak hier mooie items van een geef de datum geen link mee, maak de link met CSS gewoon 100% hoog en breed
- footer tekst hoort ook in een element te staan, ik gebruik hier vaak het small element voor.
- voeg properties samen voor een snellere CSS sheet:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
padding: [top] [right] [bottom] [left];
padding: [top] [right/left] [bottom];
padding: [top/bottom] [right/left];
padding: [top/right/bottom/left]
/* dus */
padding: 5px 10px;
/* ipv */
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding: [top] [right/left] [bottom];
padding: [top/bottom] [right/left];
padding: [top/right/bottom/left]
/* dus */
padding: 5px 10px;
/* ipv */
padding: 5px;
padding-left: 10px;
padding-right: 10px;
- herbedenk je selectors. De meeste kunnen makkelijk sneller gemaakt worden. Bijv `section#slider`. Een ID is uniek en die tag ervoor zorgt alleen voor meer denktijd voor het browser, gebruikt dus gewoon `#slider`.
Of `nav ul li a.current`. Die is veel te specifiek terwijl `nav a.current` precies dezelfde elementen selecteert en een stuk sneller is.
- gooi je CSS eens door http://prefixr.com/ zodat je de goede prefixen hebt. Je gebruikt hier bijv. de oude webkit syntax uit 2011 terwijl die allang dezelfde syntax als mozilla hebben.
En include altijd de standard versie, zonder prefix. En ook alle prefixen die nodig zijn, nu vergeet je Opera...
Pagina's
Een normale pagina verschilt vaak van de homepagina. Zo wil ik op een andere pagina echt niet die enorme slider zien en die enorme balk van nieuws-/twitterberichten ook niet.
Denk goed na waar een gebruiker nou voor op die pagina komt en toon alleen dat en niet allemaal andere dingen waardoor hij alleen maar wordt afgeleid van het doel.
Design
Ik ben zelf niet echt liefhebber van het design, het lay-out is wel goed overigens. Het is een beetje saai en heeft niet echt een 'spannend' element. Probeer eens een heel klein en vaag patroontje in de achtergrond van je pagina, of een kleine gradient in de rode slider.
Menu
Een menu moet opvallen, mensen moeten makkelijk kunnen navigeren. In jou geval heeft een menu item dezelfde font size als overal, maak het net 1 of 2 pixels groter en je zult zien dat het meer opvalt.
Toevoeging op 16/09/2012 00:48:37:
Wouter, ik heb volgens mij de meeste puntjes aangepast. Ziet het er zo beter uit?
*bump*
- De header is wel erg aanwezig en erg rood (iets te knallend)
- Ik zou de actieve button (in het menu) niet rood laten kleuren, eerder donker grijs. Anders wordt alles zo rood.
- De afbeeldingen in de header volgen elkaar wel heel snel op
Verder vind ik het geheel iets te rood.
Succes!
Maar :
- Je slideshow gaat wel snel voor mensen met bv. dislexie of andere problemen is dit minder makkelijk om zo snel te lezen, laat dus je foto's iets trager gaan.
- Je header ik vind hem te fel, te rood, ... Het valt iets TE hard op, maak hem wat donkerder ofzo.
- De balk onderaan die tevoorschijn komt ( die cookie balk ) hij irriteert me daar wat, zet hem misschien aan de zijkant dat zou al veel beter zijn.
- De pagina's, klopt het dat je alleen nog maar een Home hebt ?
Verder vind ik je Layout fantastisch, je hebt meteen door wat de bedoeling is van je website *Thumbs Up!*
Doe zo voort zou ik zeggen!
Dat rood is veel te fel.