Grundidé, syfte och behov

Den nya versionen av onyxinnebandy.se växte fram lite successivt under två års tid. Det hängde till stor del på den back-end lösning jag hade jobbat på ett tag, Föreningsverktyget (inlägg kommer inom kort). Det fanns många brister i den förra versionen som producerades i samband med mitt projektarbete i trean på gymnasiet 2004. CMS:et var inte så uppdaterat och det fanns en del layoutmässiga brister som gjorde att det krävdes en remake av både design/layout, databas samt front-end och back-end programmering.

Grundidén med den nya versionen var att lyfta fram ungdomslagen från föreningen på ett attraktivt sätt och samtidigt låta representationslagen få mycket utrymme med stora bilder och tidigt fokus. Genom att hela tiden ha lagen i tankarna bestämde jag tidigt att bygga om själva lagsidorna. Målet var att enkelt och snyggt kommunicera ut fler ingångar till statistik, nyheter, träningar, resultat m.m. som täckte alla behov och önskemål. Såväl för spelarna själva som föräldrar, kompisar och motståndare.

Behovet för mer utvecklade spelarsidor fanns och därför byggdes även det om med mer information, statistik och historia. Syftet blev såklart en helförbättrad webbplats med många nya intressanta funktioner, stora bilder på startsidan, bättre hantering av annonsering och intäktsmöjligheter genom banners, t ex matchsponsor i samband med nästa hemmamatch. Fokus på en socialare sida blev det också när vi implementerade DISQUS på alla nyheter samt den publika gästboken.

Design och layout

Eftersom det är så pass många mallar krävdes det ett enkelt grundtänk spetsat med en startsida som lyfte lite extra. En modern bildsnurra fick bli den extra grejen där man kunde lyfta in stora fräcka bilder och även möjlighet till videoklipp direkt i utrymmet. Med en nyhet var från herr, dam och junior som roterade blev det en perfekt yta för repr. lagen. Extra nöjd är jag även med ytan ovanför bildsnurran som highlightar nästa hemmamatch tillsammans med nedräknare och aktuell matchsponsor.

Jag bestämde mig tidigt att jobba med rullgardinsmenyer för att bl a snabbt kunna komma åt lagsidorna (återigen tillbaka till grundidén). Layouten fick sedan bli trespaltig med 1 + 2 som satsytor, det blev små svartgråa puffheaders med en enkel toning som fick lyfta den annars platta och raka designen. Man kan tydligt se på lagsidan hur bra det fungerar att placera ut olika ingångar med hjälp av 1+2 layouten och att puffheaders drar precis lagom uppmärksamhet till respektive yta utan att göra sidan för tung.

Komplementfärg till den annars väldig gråsvarta designen blir självklart den oranga tonen från loggan. Det kan kännas enkelspårigt utan ytterligare en komplementfärg, men just nu är stilmallen som denna. Typsnitt för meny, rubriker och puffheaders är Arial/Helvetica, brödtexter i Tahoma. Brödtexter går i 12/17 px istället för tidigare 11/15 px, just för att följa modet och att locka till mer läsning och mindre skummande av framförallt nyheter som har det största besöksintresset.

OBS! Några av skärmdumparna är tagna off-season, då finns det ingen nästa hemmamatch aktiverat, därav det inkonsekventa.

Back-end

Back-end drivs att ett egenutvecklat CMS som kallas för Föreningsverktyget. I kommande blogginlägg kommer du kunna läsa mer om det specifikt.

• XHTML / CSS 2.1
• PHP
• MySQL
• jQuery

Frond-end

Front-end är programmerat fritt utan något framework. Drivs idag med 10 huvudsakliga templates samt ett par mindre. Tyvärr finns det ett par saker som inte validerar i XHTML 1.0 Transitional. Rätt mycket ballar ur pga DISQUS, vilket man kan förlåta. Det som jag tyvärr inte orkat lösa är bildsnurran, en <a> tag sluter om h2, p och span för att göra hela ytan klickbar, vilket självklart inte validerar. Tyvärr fick jag använda ett par IE-hack i CSSn också.  Markup och programmeringsspråk jag använt är följande;

• XHTML / CSS 2.1 & 3.0
• PHP
• MySQL
• jQuery

Innehåll

Innehåll drivs fullt ut av ledare och övriga ansvariga personer från ungdomskommitté och styrelse. En del foton plåtar jag själv och läggs ut i samband med herrarnas A-lagsmatcher. Eftersom databasen ständigt fylls på med så otroligt mycket information så använder jag det på många delar av sidan, vilket gör att den känns innehållsrik och intressant. Så källan är mycket data som sedan kan användas på många sätt. Den största utmaningen är, som i alla ideella föreningar, att fylla förstasidan med spännande nyheter och artiklar och att hitta flitiga personer som orkar publicera något.

Resultat

Den nya webbplatsen har resulterat i alla fler lag använder den och att både bättre och fler nyheter publiceras. Både på startsidan och på respektive lagsida. De nya lagforumen med nya funktioner vid inloggning har också tagit fart. Det nya närvarorapporteringssystemet back-end har också tagits emot bra, vilket är kul. Vid högsäsong har webbplatsen drygt 7 000 besök / vecka.