Halmstads Vokalensemble

Min roll

Webbdesigner
Webbutvecklare

Verktyg

WordPress

Uppdrag

Re-design av föreningens hemsida för att skapa en modernare ”look” som samtidigt är användarvänlig för administratören. 

Kundens behov

Körens hemsida används flitigt av kunden, främst genom att fördela ut information om när deras nästkommande konserter äger rum. Texterna på hemsidan uppdateras därmed regelbundet av administratören. Hemsidan används också som ett arkiv för att dokumentera viktiga händelser för varje år som kören varit aktiv. Kunden önskade därför att strukturen på hemsidan skulle vara den samma som innan redesignen. Ytterligare önskade kunden att alla texter och information skulle föras över till den nya hemsidan precis som det var på den tidigare.

Dialog med kunden

Under första mötet med Halmstads Vokalensemble berättade kunden att det var dags att göra om och modernisera körens hemsida. Deras dåvarande hemsida var gjord för över 10 år sedan och några större uppdateringar var inte gjorda sedan dess. Efter att ha lyssnat in på vad kunden sa kom vi fram till att målet för detta projekt var helt enkelt att modernisera designen på hemsidan.

Dialog med kunden

Under första mötet med Halmstads Vokalensemble berättade kunden att det var dags att göra om och modernisera körens hemsida. Deras dåvarande hemsida var gjord för över 10 år sedan och några större uppdateringar var inte gjorda sedan dess. Efter att ha lyssnat in på vad kunden sa kom vi fram till att målet för detta projekt var helt enkelt att modernisera designen på hemsidan.

Kundens behov

Körens hemsida används flitigt av kunden, främst genom att fördela ut information om när deras nästkommande konserter äger rum. Texterna på hemsidan uppdateras därmed regelbundet av administratören. Hemsidan används också som ett arkiv för att dokumentera viktiga händelser för varje år som kören varit aktiv.

Kunden önskade därför att strukturen på hemsidan skulle vara den samma som innan redesignen. Ytterligare önskade kunden att alla texter och information skulle föras över till den nya hemsidan precis som det var på den tidigare.

Mina tankar

Enligt kunden gör han förändringar regelbundet på hemsidan när det kommer till information och texter. Han är ingen expert på webbadministration, och vill hellre spendera sin tid på musiken istället för att lära sig hur man hanterar hemsidor. Därför kände jag att några större förändringar gällande funktioner och avancerade tillägg inte var aktuellt för denna hemsidan. Skulle jag fyllt hemsidan med detta, så hade kunden behövt lära om sig hela processen med att hantera hemsidan. Även fast jag levererar en guide i hur man gör grundläggande förändringar så var detta inte aktuellt.

Tidslinje och översättning

En av de större förändringarna jag gjorde med redesignen av hemsidan var att ersätta arkivet som bestod av enbart text med en tidslinje. Det är samma innehåll, men nu har det ett bättre grafiskt utseende. Dessutom är det lättare för administratören att lägga till bilder eller liknande vid varje årskrönika.

Det är en hel del internationella besökare på körens konserter, kören åker även ofta utomlands för turné. Därför översatte jag hela hemsidan till engelska, så besökaren kan välja mellan de olika språken. Efter leveransen av hemsidan är det upp till administratören att fortsätta texterna som publiceras på hemsidan.

Design

Stora delar av designen av hemsidan är uppbyggt kring bilderna som kunden levererade till mig, framför allt på första sidan. Det är en stor kontrast med originalsidan, då bilder användes begränsat och på ett omodernt sätt.

Sluttankar

Detta var ett utmanande projekt, då jag var relativt begränsad över vad jag kunde använda mig av när det kom till att utveckla hemsidan. Jag kunde inte använda mina vanliga metoder då det skulle innebära en ny inlärningsperiod för kunden. Något som jag kände att kunden ville undvika. Därför fick jag använda mig av simplare redskap och metoder för att få hemsidan gjord. Kunden blev nöjd med hemsidan och kan idag fortsätta göra förändringar på den, precis som förr.

Tidslinje och översättning

En av de större förändringarna jag gjorde med redesignen av hemsidan var att ersätta arkivet som bestod av enbart text med en tidslinje. Det är samma innehåll, men nu har det ett bättre grafiskt utseende. Dessutom är det lättare för administratören att lägga till bilder eller liknande vid varje årskrönika. Det är en hel del internationella besökare på körens konserter, kören åker även ofta utomlands för turné. Därför översatte jag hela hemsidan till engelska, så besökaren kan välja mellan de olika språken. Efter leveransen av hemsidan är det upp till administratören att fortsätta texterna som publiceras på hemsidan.

Mina tankar

Enligt kunden gör han förändringar regelbundet på hemsidan när det kommer till information och texter. Han är ingen expert på webbadministration, och vill hellre spendera sin tid på musiken istället för att lära sig hur man hanterar hemsidor. Därför kände jag att några större förändringar gällande funktioner och avancerade tillägg inte var aktuellt för denna hemsidan. Skulle jag fyllt hemsidan med detta, så hade kunden behövt lära om sig hela processen med att hantera hemsidan. Även fast jag levererar en guide i hur man gör grundläggande förändringar så var detta inte aktuellt.

Sluttankar

Detta var ett utmanande projekt, då jag var relativt begränsad över vad jag kunde använda mig av när det kom till att utveckla hemsidan. Jag kunde inte använda mina vanliga metoder då det skulle innebära en ny inlärningsperiod för kunden. Något som jag kände att kunden ville undvika. Därför fick jag använda mig av simplare redskap och metoder för att få hemsidan gjord. Kunden blev nöjd med hemsidan och kan idag fortsätta göra förändringar på den, precis som förr.

Design

Stora delar av designen av hemsidan är uppbyggt kring bilderna som kunden levererade till mig, framför allt på första sidan. Det är en stor kontrast med originalsidan, då bilder användes begränsat och på ett omodernt sätt.

Responsiv Design.

Responsiv design innebär att en hemsida fungerar och ser lika bra ut oavsett vilken skärmstorlek som används. Alltså, använder man mobilen så ska hemsidans funktioner och utseende vara anpassad efter denna enhet. En besökare ska inte behöva zooma och ha sig för att kunna använda hemsidan.

Responsiv Design.

Responsiv design innebär att en hemsida fungerar och ser lika bra ut oavsett vilken skärmstorlek som används. Alltså, använder man mobilen så ska hemsidans funktioner och utseende vara anpassad efter denna enhet. En besökare ska inte behöva zooma och ha sig för att kunna använda hemsidan.

Den förra versionen av Halmstads Vokalensembles hemsida var inte responsiv. Alltså behövde mobilanvändare zooma för att kunna läsa texter och hantera navigationen.

För att öka användarvänligheten på mobilversionen behövdes en helt ny meny skapas för att göra hemsidan responsiv. Med denna meny behöver man inte zooma för att använda den, plus att den är öppningsbar via en knapp. Alltså tar inte menyn upp onödigt mycket skärmutrymme på mindre skärmar.

Då kunden inte önskade några avancerade funktioner på hemsidan, var de enda utmaningar att göra bilderna och tidslinjen responsiva. Resultatet blev en användarvänlig hemsida som både ser ut och fungerar som en modern hemsida bör göra.

Under arbetet med att göra hemsidan responsiv var huvudfokus att få samtliga funktioner på plats för besökare som använder mobila enheter. Därför var det viktigaste att se till så att företagets produktkatalog blev anpassad för både besökare från datorer och mobiler.  

För att öka användarvänligheten på mobilversionen ersattes den traditionella menyn som finns på datorversionen med en så kallad ”hamburgarmeny”. Det innebär att menyn visas efter att en knapp med tre vertikala streck klickas på av besökaren. Även vissa texter och rubriker flyttades för att ta hänsyn till den begränsade skärmytan.

Skillnaden i innehåll är minimal mellan de olika versionerna av hemsidan. All viktig information är den samma mellan versionerna. Det lilla som skiljer är exempelvis antal bilder eller antal exempelprodukter som visas för besökaren. Dessa förändringar gjordes för att förhålla sig till den mindre skärmytan som mobila enheter för med sig.