Band website
Er zijn nog een aantal dingen die ik moet verbeteren maar de site werkt verder naar behoren.
URL: http://www.inhalo.nl/
De site is verder vrij simpel, wat contactinformatie, muziek, video's, foto's, show data. Er zit een simpel administratie paneeltje achter (dat moet voor het grootste gedeelte nog goed uitgewerkt worden maar dat heeft geen haast, het is immers niet openbaar).
Misschien dat ik ook nog de CSS bij ga werken, bepaalde dingen kunnen misschien wat beter verwezenlijkt worden.
De layout heb ik zelf niet ontworpen, ik ben enkel verantwoordelijk voor html/css/js/php.
Gebruik gemaakt van de volgende software:
[doctype: XHTML 1.0 Strict]
PHP framework: CakePHP 2.1.1 [ben wel van plan te updaten naar 2.2]
Javascript framework: Mootools Core 1.4.5 + Mootools More 1.4.0.1
Javascript plugins:
- Cerabox 1.3.5
- TinyMCE editor
Stats:
- Piwik 1.7.1: open source web analytics
Ik sta open voor commentaar, reacties, opmerkingen, eventuele verbeterpunten, vragen. De site wordt nog aan gewerkt, maar hij draait zoals de bedoeling is dus daarom is hij al live (we hadden haast).
Alvast bedankt voor de moeite.
PS: Ik weet dat ie een validation error geeft als je op de index pagina probeert te valideren. Dit komt door dat TinyMCE de optie heeft om een venster in een nieuwe scherm te openen (bah) en voegt daarmee 'target="_blank"' toe en dat is niet strict compliant. Ik ben hiervan op de hoogte en dit zal verholpen worden, verder is de html valide. Bovendien heeft dit voor mij op het moment niet echte prioriteit.
Gewijzigd op 04/07/2012 16:34:21 door Henk PHP
Quote:
Ik ben hiervan op de hoogte en dit zal verholpen worden, verder is de html valide. Bovendien heeft dit voor mij op het moment niet echte prioriteit.
Ik zou hier totaal geen moeite voor doen: http://wouterj.nl/html/waarom-ik-geen-voorstander-ben-van-validators/167/
Offtopic:
Yeah!! Eindelijk nog iemand die MooTools gebruikt!
Design heb je dan toch niet gemaakt, ik wil er toch wel wat op aanmerken:
Het is allemaal heel vaag en donker. Als ik jullie demo'tje luister is het allemaal hele spetterende muziek, daar hoort zo'n site met bijna een begrafenisondernemer-look totaal niet bij. Dat zwart begrijp ik wel maar ga dan lekker volledig tegen wat de mensen verwachten in en gooi er felle kleuren als nemo geel en dat soort dingen in. Bijv: http://kuler.adobe.com/#themeID/1976418
Die social media buttons bijv. heel vaag en donker en zelf als ik erover heen gaan komt het nog moeilijk tot zijn recht.
ook bijv. op pagina 'Band' laat daar onhover een gekleurde foto zien.
Typografie is niet goed, sorry dat ik het zeggen moet. Maar het contrast is zoo laag dat het bijna niet leesbaar is. Tevens heb je een extreem Serif lettertype met een extreem Sans-Serif lettertype gedaan, dat is niet wat mooi bij elkaar past. Of schrijf de content ook in een serif lettertype, zoals Georgia, of maak het menu ook in een Sans-Serif lettertype.
Tevens heb je overal plaatjes gebruikt waar die Serif lettertype is. Dat is natuurlijk niet nodig, gebruik Media-Queries en het werkt in elk browser (zelfs IE6+). Het zal ervoor zorgen dat je betere SEO krijgt en de usability zal een stuk beter worden.
Een tip om eens te bekijken: http://webdesign.tutsplus.com/articles/typography-articles/weekend-presentation-jason-santa-maria-on-web-typography/
Dan nu de code:
- plaats een lang attribuut op de html tag die aangeeft in welke taal de site is geschreven
- vervang alle plaatjes met tekst door tekst en geef dan de titel wel een heading element (H1 t/m H6) mee, H1 komt 1 keer op de pagina voor en is een unieke en belangrijkste titel
- vind jij het menu een geordende lijst? Maakt de volgorde echt uit? Volgens mij niet, ik weet het eigenlijk wel zeker, en daarom moet je een unordered list gebruiken (<ul>)
- geen tabellen voor je content gebruiken
- geen inline CSS gebruiken
- #footer-tekst is geen div, maar moet een small tag of een paragraph tag zijn (of op zijn minst een span tag)
- een alinea bestaat doorgaans uit meer dan 1 woord. Iets als:
Quote:
Met vriendelijke groet,
Wouter
Wouter
Hoor je gewoon met BR op te lossen:
Code (php)
1
2
3
2
3
<p>Met vriendelijke groet,<br>
<br>
Wouter</p>
<br>
Wouter</p>
- laat alle JS scripts het liefst in vlak voor </body> Dat zorgt ervoor dat je pagina sneller laad
Gewijzigd op 04/07/2012 16:50:49 door Wouter J
Wouter J op 04/07/2012 16:32:42:
Mootools ftw :DOfftopic:
Yeah!! Eindelijk nog iemand die MooTools gebruikt!
Yeah!! Eindelijk nog iemand die MooTools gebruikt!
Vincent Huisman op 04/07/2012 16:34:07:
Leuk dat je reageert, maar je neemt mij niet erg serieus door alleen een URL te posten en dat dan verder van geen commentaar te voorzien.
Ik waardeer het punt dat je probeert te maken, maar als dit alles is wat je te zeggen hebt dan kun je dat wat mij betreft achterwege laten :) No offence.
Bovendien heb ik uitgelegd dat ik niet verantwoordelijk ben voor het design zelf, maar enkel de technische uitvoering daarvan. Desalniettemin begrijp ik wat je bedoelt, maar gelukkig ben je tot op heden de eerste persoon die erover begonnen is.
Gewijzigd op 04/07/2012 16:44:53 door Henk PHP
Maar over het algemeen zou ik zeggen ga maar terug naar de teken tafel voor het design. Het ziet er een beetje jaar 2000 uit. Kijk anders eens op www.themeforest.net of zo.
De bio over de band is geschreven alsof het een review is. Voor fans lijkt het me leuker als deze een stuk persoonlijker is. Nu komt het over alsof het een fansite is.
ook de pagina titels zou ik in een <h2> oid zetten, dat is ook wat beter voor de seo.
De favicon lijkt niet echt bij de rest van de site te passen.
waarom gebruik je half engels en half nederlands?
de hovers in je menu zou ik een wat snellere animatie geven
het emailadres op de contact pagina zou ik iig beveiligen met js en eventueel in een plaatje stoppen zodat spambots er niks mee kunnen
op de band pagina denk ik dat het wel een leuk idee is dat wanneer je over een persoon heen gaat, de foto in kleur wordt
Toevoeging op 04/07/2012 19:16:28:
Wouter J op 04/07/2012 16:32:42:
Ik weet dat het donker is, dat wat mijn inziens ook de bedoeling. Design heb je dan toch niet gemaakt, ik wil er toch wel wat op aanmerken:
Het is allemaal heel vaag en donker. Als ik jullie demo'tje luister is het allemaal hele spetterende muziek, daar hoort zo'n site met bijna een begrafenisondernemer-look totaal niet bij. Dat zwart begrijp ik wel maar ga dan lekker volledig tegen wat de mensen verwachten in en gooi er felle kleuren als nemo geel en dat soort dingen in. Bijv: http://kuler.adobe.com/#themeID/1976418
Het is allemaal heel vaag en donker. Als ik jullie demo'tje luister is het allemaal hele spetterende muziek, daar hoort zo'n site met bijna een begrafenisondernemer-look totaal niet bij. Dat zwart begrijp ik wel maar ga dan lekker volledig tegen wat de mensen verwachten in en gooi er felle kleuren als nemo geel en dat soort dingen in. Bijv: http://kuler.adobe.com/#themeID/1976418
Misschien kan er wel wat meer contrast komen (ik neem aan dat mensen doelen het menu), maar volgens mij is het goed leesbaar. Vooral ook omdat het enkele woorden zijn en niet hele lange teksten.
Wouter J op 04/07/2012 16:32:42:
Ja daar ben ik het op zich wel eens, die twee knopjes moeten sowieso beter (ze kloppen nu nog niet helemaal)Die social media buttons bijv. heel vaag en donker en zelf als ik erover heen gaan komt het nog moeilijk tot zijn recht.
Wouter J op 04/07/2012 16:32:42:
Het contrast-verhaal gaat over het menu neem ik aan? Ik dacht dat het wel meeviel met onleesbaarheid, maar blijkbaar niet. Misschien is mijn scherm zo helder/contrastrijk dat het me niet is opgevallen.Typografie is niet goed, sorry dat ik het zeggen moet. Maar het contrast is zoo laag dat het bijna niet leesbaar is. Tevens heb je een extreem Serif lettertype met een extreem Sans-Serif lettertype gedaan, dat is niet wat mooi bij elkaar past. Of schrijf de content ook in een serif lettertype, zoals Georgia, of maak het menu ook in een Sans-Serif lettertype.
Ik zal het zeker in m'n achterhoofd houden.
Wouter J op 04/07/2012 16:32:42:
Was ik al van plan op zich, maar misschien kan je me een eindje op weg helpen. (Geweldige video btw)Tevens heb je overal plaatjes gebruikt waar die Serif lettertype is. Dat is natuurlijk niet nodig, gebruik Media-Queries en het werkt in elk browser (zelfs IE6+). Het zal ervoor zorgen dat je betere SEO krijgt en de usability zal een stuk beter worden.
Een tip om eens te bekijken: http://webdesign.tutsplus.com/articles/typography-articles/weekend-presentation-jason-santa-maria-on-web-typography/
Een tip om eens te bekijken: http://webdesign.tutsplus.com/articles/typography-articles/weekend-presentation-jason-santa-maria-on-web-typography/
Wouter J op 04/07/2012 16:32:42:
Dan nu de code:
- plaats een lang attribuut op de html tag die aangeeft in welke taal de site is geschreven thanks
- vervang alle plaatjes met tekst door tekst en geef dan de titel wel een heading element (H1 t/m H6) mee, H1 komt 1 keer op de pagina voor en is een unieke en belangrijkste titel ik gebruik al headings voor belangrijke elementen
- vind jij het menu een geordende lijst? Maakt de volgorde echt uit? Volgens mij niet, ik weet het eigenlijk wel zeker, en daarom moet je een unordered list gebruiken (<ul>) hier ben ik het mee eens
- geen tabellen voor je content gebruiken welke content doel je hier op? En waarom niet eigenlijk? Waarvoor zijn tabellen dan? Zijn tabellen nu helemaal niet meer toegestaan?
- geen inline CSS gebruiken ook hier weet ik niet precies waar je op doelt; ik vermijdt het zoveel mogelijk iig. Soms dan doet javascript het, en ik gok dat jij doelt op de justify align bij het nieuws, en dat doet TinyMCE. Dat neem ik voor lief denk ik
- #footer-tekst is geen div, maar moet een small tag of een paragraph tag zijn (of op zijn minst een span tag) agreed
- een alinea bestaat doorgaans uit meer dan 1 woord. Iets als:
Hoor je gewoon met BR op te lossen:
ook hier is het me niet helemaal duidelijk waar je precies op doelt, maar ik gok dat het ook te maken heeft met TinyMCE output.
- laat alle JS scripts het liefst in vlak voor </body> Dat zorgt ervoor dat je pagina sneller laad doet ik dat niet dan? ze staan volgens mij allemaal precies boven de <body> net voor de </head>
- plaats een lang attribuut op de html tag die aangeeft in welke taal de site is geschreven thanks
- vervang alle plaatjes met tekst door tekst en geef dan de titel wel een heading element (H1 t/m H6) mee, H1 komt 1 keer op de pagina voor en is een unieke en belangrijkste titel ik gebruik al headings voor belangrijke elementen
- vind jij het menu een geordende lijst? Maakt de volgorde echt uit? Volgens mij niet, ik weet het eigenlijk wel zeker, en daarom moet je een unordered list gebruiken (<ul>) hier ben ik het mee eens
- geen tabellen voor je content gebruiken welke content doel je hier op? En waarom niet eigenlijk? Waarvoor zijn tabellen dan? Zijn tabellen nu helemaal niet meer toegestaan?
- geen inline CSS gebruiken ook hier weet ik niet precies waar je op doelt; ik vermijdt het zoveel mogelijk iig. Soms dan doet javascript het, en ik gok dat jij doelt op de justify align bij het nieuws, en dat doet TinyMCE. Dat neem ik voor lief denk ik
- #footer-tekst is geen div, maar moet een small tag of een paragraph tag zijn (of op zijn minst een span tag) agreed
- een alinea bestaat doorgaans uit meer dan 1 woord. Iets als:
Quote:
Met vriendelijke groet,
Wouter
Wouter
Hoor je gewoon met BR op te lossen:
Code (php)
1
2
3
2
3
<p>Met vriendelijke groet,<br>
<br>
Wouter</p>
<br>
Wouter</p>
- laat alle JS scripts het liefst in vlak voor </body> Dat zorgt ervoor dat je pagina sneller laad doet ik dat niet dan? ze staan volgens mij allemaal precies boven de <body> net voor de </head>
Thanks voor je commentaar :D
Gewijzigd op 04/07/2012 19:18:05 door Henk PHP
Met contrast bedoel ik het menu, de titels van pagina's en de header.
Een sitenaam is ook een heading en daar gebruik je een span voor.
Quote:
doet ik dat niet dan? ze staan volgens mij allemaal precies boven de <body> net voor de </head>
En ze moeten precies boven </body> staan, niet </head>.
Wouter J op 04/07/2012 19:22:44:
Tjah, je krijgt misschien niet de allermooiste/beste code eruit. Maar het is een stuk beter dan mijn bandleden html leren. You know the deal. :pHmm, dan ben ik het niet eens met de TinyMCE editor.
Wouter J op 04/07/2012 19:22:44:
Goed, dan begrijp ik je. En jah, ik moet me even verdiepen in die media queries, want ik heb hier gewoon the easiest way out genomen (voor mij dan) ten koste van usability.Met contrast bedoel ik het menu, de titels van pagina's en de header.
Een sitenaam is ook een heading en daar gebruik je een span voor.
Een sitenaam is ook een heading en daar gebruik je een span voor.
Gewijzigd op 04/07/2012 19:29:01 door Henk PHP
Wat je moet doen is de ttf van dat font pakken, als deze op je computer staat geïnstalleerd staat hij in C:\Windows\Fonts\Naam van font.ttf deze zet je in de font-face generator daar komt een ZIP bestandje uit met het font in de juiste formaten en een voorbeeld CSS, pas dat toe en klaar ben je!
Gewijzigd op 04/07/2012 19:42:29 door Wouter J