Band website

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Henk PHP

Henk PHP

04/07/2012 16:30:26
Quote Anchor link
Gegroet. Ik heb sinds een aantal dagen de bandwebsite van mijn band online.
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
 
PHP hulp

PHP hulp

02/03/2024 16:46:54
 
Wouter J

Wouter J

04/07/2012 16:32:42
Quote Anchor link
En de website is... ??verkeerd gelezen, mijn commentaar komt straks

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

Hoor je gewoon met BR op te lossen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<p>Met vriendelijke groet,<br>
<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
 
Vincent Huisman

Vincent Huisman

04/07/2012 16:34:07
 
Henk PHP

Henk PHP

04/07/2012 16:41:37
Quote Anchor link
Wouter J op 04/07/2012 16:32:42:
Offtopic:
Yeah!! Eindelijk nog iemand die MooTools gebruikt!
Mootools ftw :D

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
 
- Mark -

- Mark -

04/07/2012 17:16:55
Quote Anchor link
Het duurt te lang voordat je doorhebt waarvoor en waarover de website is naar mijn mening. Als de foto's die op de band pagina staan nu eens verplaatst werden naar de home pagina met daaronder een korte introductie dan hebben mensen het waarschijnlijk eerder door.

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.
 
Vincent Huisman

Vincent Huisman

04/07/2012 17:16:57
Quote Anchor link
sorry dat het wat kort was, maar dat leek mij op het eerste gezicht het belangrijkste punt. Ook al is het design niet jou verantwoordelijkheid, je kan het er altijd over hebben.

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
 
Henk PHP

Henk PHP

04/07/2012 17:21:04
Quote Anchor link
Bedankt voor de reacties jongens. Ik ben even koken en eten, ik zal straks even reageren :D

Toevoeging op 04/07/2012 19:16:28:

Wouter J op 04/07/2012 16:32:42:
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
Ik weet dat het donker is, dat wat mijn inziens ook de bedoeling.
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:
Die social media buttons bijv. heel vaag en donker en zelf als ik erover heen gaan komt het nog moeilijk tot zijn recht.
Ja daar ben ik het op zich wel eens, die twee knopjes moeten sowieso beter (ze kloppen nu nog niet helemaal)

Wouter J op 04/07/2012 16:32:42:
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.
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.
Ik zal het zeker in m'n achterhoofd houden.

Wouter J op 04/07/2012 16:32:42:
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/
Was ik al van plan op zich, maar misschien kan je me een eindje op weg helpen. (Geweldige video btw)

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:
Quote:
Met vriendelijke groet,

Wouter

Hoor je gewoon met BR op te lossen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<p>Met vriendelijke groet,<br>
<br>
Wouter</p>
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>


Thanks voor je commentaar :D
Gewijzigd op 04/07/2012 19:18:05 door Henk PHP
 
Wouter J

Wouter J

04/07/2012 19:22:44
Quote Anchor link
Hmm, dan ben ik het niet eens met de TinyMCE editor.
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>.
 
Henk PHP

Henk PHP

04/07/2012 19:25:44
Quote Anchor link
Hmm ik dacht altijd dat ik dat in de head moest plaatsen, maar dat is dus bijgeloof?

Wouter J op 04/07/2012 19:22:44:
Hmm, dan ben ik het niet eens met de TinyMCE editor.
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. :p

Wouter J op 04/07/2012 19:22:44:
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.
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.
Gewijzigd op 04/07/2012 19:29:01 door Henk PHP
 
Wouter J

Wouter J

04/07/2012 19:39:35
Quote Anchor link
Woeps, ik zei Media-Queries maar ik bedoelde font-face.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.