Eksamensprojekt 2. semester

Transkript

1 Eksamensprojekt 2. semester

2 København Zoos klimaaftale Vedvarende energi Gruppe 2 Mul a13e CPH Business, Lyngby Nathalie Wincents Heiden Mail: cph-nh101@cphbusiness.dk Portfolio Vejledere: Thomas Hartmann Morten Rold Ditlev Skanderby Omfang ca anslag Lars Emil Christensen Mail: cph-lc106@cphbusiness.dk Portfolio Ammar Ali Abdelrahim Al-Basri Mail: cph-aa140@cphbusiness.dk Portfolio Tania Sloth Carlsen Mail: cph-tc97@cphbusiness.dk Portfolio

3 Indholdsfortegnelse Projektbeskrivelse 4 Problemformulering 5 Metode 5 Teori 6 Beskrivelse af Zoo 7 SWOT 9 Kvalitativ analyse 9 Målgruppeanalyse 10 AIDA 12 Design brief 13 Projektudvikling 14 Designudvikling 15 Online medier 15 Offline medier 16 SEO 17 Kodeforklaring 17 Konklusion og refleksion 23 Henvisninger 24 Bilag 25 3

4 Projekttitel: København Zoos klimaaftale Emne: Vedvarende energi Projektbeskrivelse I dette projekt skal vi skal vælge en virksomhed til en case, hvor vi bedst muligt skal kommunikere virksomhedens skifte til vedvarende energi. Vi har valgt København Zoo til dette projekt, da de allerede har indgået en aftale med DONG Energy i På en periode på 5 år vil Zoo nedbringe deres energiforbrug med 10% samt forpligte sig til at købe energi, der er øremærket fra vindmølleparkerne ved Horns Rev. Baggrunden for dette valg er, at Zoo er en relevant virksomhed, da de allerede har indgået en klimaaftale med DONG Energy. Dette betyder, at vi let kan finde informationer om den gældende aftale. Det er DONG Energy s vision at levere stabil energi uden CO2 og målet er, at 85% af energi-produktionen skal komme fra vedvarende energi i Den strategi vil Zoo gerne være en del af, da det er helt i tråd med Zoologisk Haves klima- og miljøstrategi. Partnerskabet med Zoo er derfor endnu et eksempel på, hvordan man i fællesskab kan tage et medansvar for klimaet. [1] Zoos vision er at nedsætte deres energiforbrug med 10% over en periode på 5 år, missionen er at udbrede kendskabet til vedvarende energi. Vores formål for projektet er at udsende et budskab om vedvarende energi på en måde, der stemmer overens med Zoos identitet og derved skabe opmærksomhed omkring klimaaftalen. Zoo er også interessant, fordi det er en virksomhed, der er ekstra afhængig af den offentlige mening, da de besøgende er en stor indtægtskilde. Derudover har de investorer, som ikke vil forbindes med negativ omtale. Endvidere er Zoo også interessant, fordi de i deres arbejde med dyr forbindes med bevarelse, klima og miljø. Siden 2011 anvender Zoo ikke længere fyringsolie, men vedvarende energi til at opvarme haven, som er til gavn for både økonomi og klima. 4

5 Problemformulering Hvordan informerer vi om København Zoos klimapartneraftale med DONG om brug af vedvarende energi gennem online/offline medier og formidler på en måde der er tro overfor Zoos image, mission, vision, strategi og visuelle identitet? Hvordan udbreder vi i den forbindelse kendskabet til Københavns Zoo og derved øge antallet af besøgende i haven? Hvordan profilerer vi Zoo således, at de fremstår ansvarlige i forhold til deres CO² forbrug? Er den nuværende målgruppe optimal for kampagnen eller skal der foretages justeringer? Hvilke udfordringer kunne der være ved denne formidling? Research Kvantitativ undersøgelse Der er anvendt kvantitativ undersøgelse for at definere København Zoos målgruppe og undersøge hvilke eventuelle tiltag, man kunne foretage. I den forbindelse er der oprettet et spørgeskema på nettet med spørgsmål omkring besøg i Zoo. Målgruppeanalysen er baseret på de empiriske data, vi har fra den kvantitative analyse. Kvalitativ undersøgelse For at få flere detaljer omkring klimaaftalen fra 2009 mellem København Zoo og DONG Energi bruges en kvalitativ analyse. Der blev taget kontakt til Zoos miljøkoordinator Rikke Bydam for at stille hende nogle spørgsmål omkring aftalen. Metode Testmetode Der skal laves usability/gangstertest og en ekspertvurdering af websitet for at sikre, at den er brugervenligt og kan bruges intuitivt af af den primære målgruppe. Det er ikke altid, at der er taget højde for brugervenlighed i designprocessen, så derfor er det vigtigt efterfølgende at lave tests. Resultaterne vil derefter blive brugt til at forbedre og optimere websitet. 5

6 Teori SWOT Der er brugt SWOT teori til at analysere interne og eksterne forhold i Københavns Zoo for at se hvilke forbedringer, der i forbindelse med visuel identitet og branding af virksomheden skal udføres. I den forbindelse skal der laves et website, for at skabe opmærksomhed omkring havens klimaaftale med DONG og give dem en grønnere profil. Se side 9 for SWOT AIDA AIDA modellen er anvendt til at undersøge, hvordan virksomheden kommunikerer til deres modtagere. Rapporten analyserer de enkelte dele af kommunikationen for at konkretisere, hvilke forbedringer der kan foreslås. Se side 11 for AIDA Gant Til planlægning af arbejdsopgaver bruges Gantkort med oversigt over de forskellige opgaver, der skal udføres. Udover Gantkort er der dagligt lavet en projektplan for de enkelte arbejdsopgaver og deadlines for at sikre, at tidsplanen holder. Se bilag 1 for Gantkort 6

7 Beskrivelse af København Zoo København Zoo er en virksomhed, der giver de besøgende særlige oplevelser, som man ikke finder andre steder. Det er oplevelser med eksotiske dyr, som giver mange lyst til at besøge haven. Zoo har derfor en bred målgruppe, men det er vigtigt at bruge den, når de skal præsentere virksomhedens visuelle identitet. Man kan sige, at der i deres tilfælde ikke er lige så meget brug for at brande virksomheden, da dyrene er så interessante i sig selv, at det ikke er nødvendigt. Dyrene har så stor en påvirkning på de fleste, både børn og voksne, og tiltrækker derfor mange aldersgrupper. Kommunikationsplatform Zoos hjemmeside er en del af deres kommunikation, men er ikke den primære kommunikationsform. De kommunikerer mere direkte til de besøgene i haven via plakater, bannere, informationstavler, brochurer og lign. Det er her, de kan ramme målgruppen i form af informationer omkring dyrene, haven og undervisningsmateriale. Deres hjemmeside fungerer som en slags brochure og giver nødvendige informationer til besøgene og andre, som har interesse for virksomheden. Det kan også være interne interesser, som f.eks. nogle af de samarbejdspartnere de har rundtomkring i verden. 7

8 Corporate identity Københavns Zoos mission er blandt andet at medvirke til aktivt at bevare dyrearter og naturområder og derved bidrage til bevarelsen af naturens mangfoldighed. Deres formål er formuleret således: Gennem en tidssvarende fremvisning af karakteristiske dyreformer, der egner sig til de lokale forhold, skal Zoologisk Have virke som kulturinstitution med samfundsmæssige opgaver af: rekreativ art, oplysende art og videnskabelig art. Zoologisk Have skal øge interessen for og forståelsen af naturen og dens mangfoldighed gennem oplevelser baseret på en vedkommende, aktiverende og underholdende formidling. [2] Københavns Zoos vision er blandt andet, at de skal være landets førende kulturinstitution med hensyn til innovativ formidling og pædagogik, herunder miljøformidling og bæredygtighed og kendt og respekteret som aktiv naturbevarelsesorganisation med globalt perspektiv og netværk. [3] Københavns Zoo er en virksomhed, der aktivt engagerer sig i dyre- og naturbevarende projekter og planer, men som også tager stilling til aktuelle miljøproblemer. Det er derfor, de har valgt at indgå en klimaaftale med DONG Energy om at nedsætte deres CO² forbrug. Zoo er en virksomhed, som tager disse emner alvorlige, fordi det er så tæt forbundet med det deres arbejde og virke. Zoo har mange sponsorer og vil fortsat gerne forøge antallet. De mange samarbejdspartnere er en stor indtægtskilde, som også giver dem et godt image. Det viser, at det er en interessant virksomhed, da mange gerne vil støtte deres arbejde. Zoos fremtidige kommunikation På baggrund af målgruppeanalysen kan man sige, at Zoos nuværende kommunikationsplatform er den mest effektive for virksomheden. Det er forsat en god ide at holde hjemmesiden opdateret med nyheder og informationer, da så mange bruger nettet til at søge informationer i dag. Det er også smart at lave kampagner og derved at skabe opmærksomhed, som f.eks. ved at reklamere for klimaaftalen med DONG. Kampagner er en god måde skabe opmærksomhed og bidrage til et godt image, som også vil gavne på længere sigt. Det kan tiltrække nye kunder, der f.eks. har interesse for klima og miljø, og derved give dem et grønnere image. Vurdering af virksomhedens website Københavns Zoos nuværende hjemmeside er et velfungerende website med mulighed for at finde en masse brugbar information. Det bliver opdateret med de seneste nyheder og der er også links til de sociale medier, som bruges flittigt i dag. 8

9 Designet er en smule gammeldags og opfattes ikke som moderne, hvis man sammenligner det med de fleste andre store virksomheder. Det er ikke noget, de har anset for være afgørende, da de ikke er afhængige hjemmesiden på samme måde som mange andre virksomheder, som f.eks. Danske Bank. Redesign Det ville være en god ide at forny hjemmesiden og gøre den mere moderne i forhold til virksomhedens image. Det er både valg af farver og fonte som kunne ændres. Informationsartitekturen på siden kunne også forenkles, så det er lettere at navigere rundt i. Research Kvalitativ analyse I den kvalitative analyse har vi skrevet en mail til Zoos miljøkoordinator Rikke Bydam med en hurtig beskrivelse af projektet og nogle spørgsmål angående deres kampagne om klimapartnerskab med DONG Energy fra Rikke Bydams svar bruges til empirisk data til at sammenligne den daværende kampagne med dette projekt. Zoos miljøkoordinator Rikke Bydam understreger, at de ikke har gjort meget for at oplyse offentligheden omkring klimapartnerskabet. Det er et partnerskab de har brugt internt til at få gang i nogle energibesparende tiltag. Tilbage i 2009 havde de bannere med klimapartnerskabet ved indgangen og en særlig rabat som lød: Zoo markerer klimapartner-skabet søndag 13. februar. Den dag kan enhver betalende voksen gæst invitere ét barn (3-11 år) gratis med i Zoo, såfremt man er kommet til Zoo på en klimavenlig måde - gående, cyklende eller med offentlig transport [4] De gæster, der kom cyklende eller gående til haven fik udleveret en badge for at markere kampagnen. Rikke Bydam nævner derudover, at DONG Energy dengang brugte Zoo til en reklamefilm for DONG og partnerskabet. Rikke Bydam sendte os de badges, som besøgende fik udleveret på kampagnedagen den 13. Februar. 9

10 Vi spurgte hende, om de havde opnået at reducere energiforbruget som aftalt og dertil svarede, hun at de er godt på vej til at opfylde deres mål om energibesparelser. Med hensyn til undervisningsmateriale om klima har Zoo lanceret en klimakampagne, hvor der også er en klimaquiz henvendt til børn. De laver særlige rundvisninger og oplæg omkring klima og miljø for skoleklasser, gymnasier og virksomheder. Derudover har de haft et undervisningsmateriale om miljø, som er lavet i samarbejde med Frederiksberg forsyning, men dette er desværre forældet. Zoo besøg Vi besøgte Zoologisk have onsdag den 28. maj for at undersøge Zoos kommunikationsplatform og indsamle oplysninger om klimakampagnen med f.eks. brochure, plakater og infotavler. Det viste sig, at der var informationer om både klimaaftalen, klimakampagnen og klimaforandringerne i haven. Derudover talte vi med en medarbejder på stedet, som er underviser og formidler. Hun fortalte, at alle nye medarbejdere får udleveret informationsmateriale i form af en brochure, så de alle har styr på Zoos vision omkring klimaforandringerne og samarbejdet med DONG Energy. Dette skal alle medarbejderne have styr på for at kunne infomere de besøgende, der er interesserede. Kvantitativ analyse Målgruppeundersøgelse Målgruppen, den gruppe af befolkningen man ønsker at ramme med sin kommunikation, er vigtig at have fastlagt inden man går i gang med at lave sit website. Via København Zoos hjemmeside har vi fundet frem til at deres primære målgruppe er børnefamilier i hovedstads-området samt danske og udenlandske turister. [5] Denne information giver et godt udgangspunkt til en analyse. For at få målgruppen bekræftet på anden vis har vi valgt at benytte os af en kvantitativ metode. Baggrunden for dette valg er at kvantitativ metode egner sig godt til en hurtig indsamling af en stor mængde data, hvorimod kvalitativ metode egner sig til dybdegående undersøgelse. 10

11 Der blev udarbejdet et spørgeskema til indsamling af den data, som kunne bruges for at analysere målgruppen. Spørgeskemaet indeholdte spørgsmål vedrørende personernes køn, alder, beskæftigelse, antal boende i husstanden, seneste besøg i København Zoo, fremtidige planer om besøg i Zoo, samt spørgsmål til hvordan København Zoo kunne gøres mere interessant. Det lykkedes at få sendt spørgeskemaet ud til 100 respondenter og der kunne dermed analyseres på den data, som blev indsamlet. Som nævnt tidligere er København Zoos primære målgruppe børnefamilier i hovedstadsområdet, samt danske og udenlandske turister. Ud fra resultaterne af den indsamlede data, kunne man se at ud af 100 svar, havde 61 respondenter været i København Zoo indenfor de sidste 5 år. Heri er medregnet svarmulighederne indenfor en uge, indenfor en måned og indenfor et år. Data Ud af de 61 respondenter var 27 i alderen år, 22 i alderen 33+, 7 i alderen år og 5 i alderen år. Dette viser et billede af, at det er primært er børnefamilier, der besøger København Zoo. Set ud fra et aldersaspekt er 29 af respondenterne potentielle forældre i en børnefamilie. Det er som regel i denne alder, at mange stifter familie. Derudover er de 27 respondenter i alderen der også potentiale til at være forældre. Det er også muligt, at de indenfor de sidste 5 år har været hjemmeboende og er en del af en børnefamilie. Dette gælder også de sidste 5 respondenter i alderen som enten er en del af en børnefamilie eller har været det indenfor de sidste 5 år. Usikkerhed Et problem med denne undersøgelse er, at vi desværre ikke fik udarbejdet spørgeskemaet, således at vi præcis kunne se, hvem af respondenterne, der var forældre i børnefamilie. Dette skaber en vis usikkerhed og derfor skal denne analyse også kun ses som et skøn, baseret på empirisk data. Noget andet, som også giver usikkerhed i dataen er, at der er benyttet online spørgeskemaundersøgelse, som blev delt på Facebook og via mail til en af respondenternes it-faglige netværk. Det har betydet, at der er ramt alt for bredt i forhold til København Zoos målgruppe. Eksempelvis kommer Ammar fra Nordjylland og Lars fra Fyn. Derfor er deres Facebook netværk også infiltreret. Den bedste metode havde været at uddele spørgeskemaer til børnefamilier i Københavnsområdet. Dette kunne have været i eksempelvis store indkøbscentre. 11

12 AIDA AIDA står for Attention, Interest, Desire og Action og er en model, der bruges til at planlægge hvordan man ønsker at kommunikere sit budskab til sin målgruppe. Dette gøres ved at man kigger på, hvordan man fanger målgruppens opmærksomhed, skaber interesse, et behov og til sidst hvordan man får målgruppen til at handle. Attention Vi ønsker at at fange målgruppens interesse for kampagnen flere steder. Først og fremmest ønsker vi, at kampagnen skal være synlig i det københavnske gadebillede. Denne synlighed i gadebilledet skabes ved hjælp af plakater ved busstoppesteder, togstationer og plakatstandere omkring i byen. Udover gadebilledet ønsker vi også at fange målgruppens opmærksomhed, når de allerede er i København Zoo. Her har vi tænkt at benytte os af de samme plakater, som dem vi benytter i bybilledet for at skabe genkendelighed. Det vil være en god idé at sætte brochurer op med informationer om klimapartnerskabet. Ved samme stander kunne man give børnene samlesæt til papirvindmøller. Henvendelsen til Zoos gæster har til formål at kommunikere det gode budskab om vedvarende energi og København Zoos tiltag for at nedsætte energiforbruget og ikke at øge antallet af besøgende i København Zoo. Dette kan på længere sigt måske generere noget goodwill. Til sidst vil vi fange målgruppens opmærksomhed ved hjælp af bannerreklamer på internettet. Interest For at vække målgruppens interesse for kampagnen er der brugt korte sætninger, så man ikke går død i en overflod af tekst og ignorerer banneret eller plakaten. Desire Når man taler om desire i AIDA modellen handler det om at skabe et behov hos læseren. Da vi ikke er ude på at sælge et produkt, er det lidt mere kompliceret at tale om at vække et behov. Formålet med kampagnen er at oplyse folk om København Zoos tiltag for at nedbringe energiforbruget i haven samt deres klimapartnerskab med DONG Energy. Når man taler om et behov der bliver vækket og skal dækkes, så må man ud fra Maslows Behovspyramide konkludere, at det er behovet for selv-realisering. Her tænker vi på, at der kan være et behov at tilegne sig en viden. Med denne kampagne håber vi også på at så mange som muligt vil tage budskabet om vedvarende energi til sig ved at ændre vanerne i deres dagligdag, ude som hjemme. Man kan forsøge at fremtvinge behovet for den slags viden ved at opstille fakta om, hvad det betyder for miljøet med vedvarende energi og nedsættelse af energiforbruget. 12

13 Action For at målgruppen handler som man ønsker, mangler der et sidste element. Indtil videre har vi fanget deres opmærksomhed, fastholdt interessen og skabt et behov. Nu skal de blot dirigeres hen til løsningen på deres behov. Derfor indeholder vores plakat og brochure en url, som læseren kan indtaste slet på sin enhed og dermed få adgang til den efterspurgte viden. Vores bannerreklamer på samvirke.dk vil naturligvis linke direkte til sitet. Design brief Inden hjemmesiden skulle designes, gjorde vi os nogle tanker om hvilke krav, der skulle være til den. Produkt og idé Vi ønsker at skabe et website der fortæller om København Zoos indgåede klimapartnerskab med DONG energy samt at oplysninge, hvilke tiltag København Zoo har gjort for at imødekomme klimapartnerskabets aftaler. Samtidigt ønskes der, at det skal være muligt for brugerne at stille spørgsmål til København Zoo via kontaktformular. Grafik Grafikken skal fremstå dynamisk og energisk så sitet virker levende. Farveskala Farveskalaen på sitet skal være tro overfor København Zoos identitet samtidigt med at den symboliserer renhed, miljøbevidsthed, energi og natur. Derfor er der brugt grøn i forskellige nuancer. Typografi Vi ønsker skrifttyper, der ikke er forstyrrende for øjnene, det skal være letlæseligt, da brugeren skal søge information på sitet og ikke underholdes. Sprogbrug Der benyttes et let forståeligt sprog, som er tilpasset den brede målgruppe. Layout Slideshow-banner der linker til undersider, der er tilknyttet billedet, samt en menu til navigation foroven. Derudover skal siden være responsive, så det tilpasses til tablets og mobiltelefoner. Usability Websitet skal være brugervenligt, så brugerne ikke skræmmes væk. Derfor skal sitet brugertestes af repræsentanter fra målgruppen. Fotos Der skal være billeder af dyr primært fra København Zoo og være i god kvalitet. 13

14 Projektudvikling Idefase Den første dag startede vi med at finde frem til vores valg af virksomhed og samarbejdspartner. Vi brainstormede og kom med idéer og undersøgte alt hvad vi kunne finde omkring vedvarende energi. Vi valgte at bruge Zoo København som eksempel på en virksomhed, der har indgået et samarbejde DONG-Energy. Dvs. de opfyldte de kriterier, som opgaven stillede. Projektplan Vi lavede en disposition og oprettede et Gantkort (se bilag 1). Derefter brainstormede vi omkring, hvad der var relevant at få afklaret og analyseret i projektet med kvalitative og kvantitative analyser. Vi tog senere på virksomhedsbesøg for at hente yderligere informationer. Analysefase Vi udarbejdede følgende analyser: Kvantitativ: spørgeskema med svar fra mere end 100 personer til målgruppeanalyse Kvalitativ: en mailkorrespondance med en miljøkoordinator i Zoo, samt et interview med en medarbejder ved besøg i virksomheden. SWOT analyse Innovativt design Vi udviklede et gennemgående design til kampagnen inden vi fik kontakt til miljøkoordinatoren og fik information omkring deres klimapartnerskab og fik materialer fra kampagnen. Da vi besøgte Zoo, blev vi bekræftet i at vores design lå meget tæt op af deres eget design til kampagnen. Problemformulering Vi udarbejdede derefter en problemformulering for at finde ud af, hvad der skulle til for at opfylde målene for virksomhedens fremtidige visioner omkring nedsættelsen af CO2-forbruget og hvilke kommunikationsstartegier, der skulle til for at understøtte dette. Vi kan nu konstatere, at brainstormfasen var meget idérig i forhold til vores design og gav et stort idékatalog. Hvis vi havde fået udleveret materialer og design tidligere i processen, havde dette muligvis sat en stopper for vores egen udvikling. 14

15 Designudvikling I kampagnen har vi taget udgangspunkt i grønne nuancer og rødt i logoet. På det originale website bliver der primært brugt kolde farver. Online medier Website På websitet er der et slideshow med billeder fra Zoo på forsiden for at gøre den interessant (se den her). Informationsarkitektur: For at alle let kan navigere rundt på websitet, er menuen lavet simpel med samme struktur på alle sider. (Se bilag 6 for wireframe) Vi startede med en hurtig idéfase med alle de tanker vi havde gjort os angående et logo. Vi fik hurtigt slået fast, at vi skulle bevare det originale logo og tilføje elementer. Elementerne skulle formidle og kommunikere det samarbejde ud som Zoo København har med DONG Energy. Til at starte med brugte vi et element som et træ eller en vindmølle pga. vindmølleparken ved Horns Rev. Grunden til at det blev en papirvindmølle var, at målgruppen er børnefamilier og at børnene også skal blive fanget af logoet. Den grønne farve i elementerne og skriften ændrede vi, så det blev den samme nuance som i Zoo har på deres website, for at være DONG Energys klimapartner. (Se bilag 2 for logoudvikling) Banner Banner1 Der er valgt en blå himmel med skyer, da det repræsentere natur og miljø. Derudover er DONG Energys logo placeret i midten for at skabe opmærksomhed på, at det er dem, der er med i samarbejdet. Banneret er placeret på kampagne-websitet og linker til DONGs website. 15

16 Offline medier Brochure Vi fandt inspiration på nettet og lavede nogle buer, der illustrerer vind og natur. Farven er de samme grønne nuancer, som vi har brugt i logoet. Vi har brugt en baggrund, der illustrerer genbrug og natur, da det ligner krøllet papir. Banner2 Til dette banner har vi valgt at bruge logoet til at gøre opmærksom på samarbejdet. Et element flyver fra højre side ind mod venstre og lander derefter på logoet. Derefter kommer der en kort info og en grøn call to action knap til landingpagen, som er vores kampagne-website. Baggrunds farverne er blå og grøn, som fader ud i hinanden og skal illustrere himmel og jord. På forsiden har vi både kampagnens og DONG Energys logo for at skabe opmærksomhed på samarbejdet. Indeni brochuren finder man information omkring samarbejdet, hvad dette betyder for Zoo, og under teksten om Horns Rev er der illustreret vindmølle og over teksten om global opvarmning er der illustreret en isbjørn. (Se bilag 4 for brochureudvikling) Kampagnebanneret er placeret på en offline HTML side med et screenshot af Samvirkes website, da Samvirkes målgruppe passer til kampagnes målgruppe. (Se bilag 3 for bannerudvikling) 16

17 Plakat På plakaten er der anvendt samme farver, som på websitet. Den er enkel med få grafiske elementer, som giver en idé om, hvad det handler om - også på afstand. Afsenderen er placeret nederst med flere informationer. Til plakaten har vi brugt samme baggrund som til brochuren, de samme logoer, de to nuancer grønne buede striber og illustrerede vindmøller. Derudover har vi en lille info-tekst og et motto Vi tænker på fremtiden. SEO Søgeoptimering - SEO Google Hjemmesiden skal være synlig. Brugerne finder ofte hjemmesider vha. søgemaskiner. Derfor er det vigtigt, at hjemmesiden kan findes af fx Google. Søgemaskineoptimering (SEO) handler om at gøre de søgeord, vi valgte synlig for søgemaskinerne. Målet er at få så god en placering som muligt - som minimum på side 1, gerne i top 5 og allerhelst nr. 1. Der findes kun én vej til en topplacering, og det er målrettet og vedholdende arbejde med vores hjemmesides indhold og de relevante søgeord. (Se bilag 5 for søgeord) Kodeforklaring HTML struktur Hjemmesiden har et responsive layout med en variation af kolonne layout afhængig af siden. Hjemmesiden bruger 960 skinnesystemet (12 kolonner), som med hjælp af en strømline kan tilpasse det du ønsker. Hvis du er bekendt med den 960 grid system, skal du sørge for at gå til full_width.html, hvis man vil se Grid-system med divs. 17

18 Her er der en lille bid af koden. Et screenshot af full_width.html: CSS struktur 960 Grid System og andre værktøjer og systemer som det - giver en hurtig og nem måde at skabe et gridnetbaseret layout ved hjælp af CSS. For eksempel, hvis vi har en 1000-pixel bred wrapper/container, og vi ønsker at splitte den op i tre kolonner, der er 333 og 1/3 pixel per søjle, som ikke er et helt tal. Desuden vil kolonnerne blive brudt op og rykke ned under hinanden for at undgå dette, kan der tilføjes margin på hver side. Hvis vi tilføjer en 10-pixel margin på hver side af hver kolonne, må vi også trække, 20 pixels fra bredden af hver kolonne. Det giver os 3 søjler omkring 313 pixels bred hver med en margin på 10 pixels på hver side (selv der er vi på 999px og ikke px). Ønskes der 4 kolonner i en række under det? Så er du nødt til at starte processen igen og trække 80px margin fra 1000px for i alt 920px og dividere det med 4 for at få en kolonne bredde på 230px. Struktur af Included filer i HTML: Sidst men ikke mindst, hvis du ønsker at tilføje en sidebar, der er en tredjedel af den samlede bredde på siden, er du nødt til at oprette en kolonne, der er 750px for indholdet og en, der er 250px for sidelinjen, derefter trække 40px margin til at få en 730px kolonne og en 230px kolonne. 18

19 Javascript indstillinger Her er lidt af Java indstillinger for Sliders, Nav-menu, statuslinje og flere [7] Dette har vi oprettet med følgende kode: Figur 1: userregistration.html PHP og JavaScript På vores website skal det være muligt for brugeren at kontakte os, hvis denne skulle have spørgsmål. Samtidigt vil brugeren også kunne tilmelde sig nyhedsbrev. For at dette vil kunne lade sig gøre, skal der være et UserInterface med felter hvori bruger kan indtaste sine oplysninger. På linie 7 kan man se at der er tale om et form tag som vi via action får til at køre insertnewuser.php når der trykkes på submit. Vi har benyttet metoden POST til at kommunikere med InserNewUser.php fordi denne metode ikke vil vise de indtastede i URL en ligesom hvis man benyttede GET metoden. Dette gøres af sikkerhedsmæssige hensyn. Linie 12 osv. er vores tekstfelter i kontaktformularen. Vi har givet dem hver især et relevant ID og NAME som bruges i php filen til at identificere, hvorfra php filen skal hente sine inputs. Derudover har vi indsat en placeholdertekst, der fortæller brugeren at feltet skal udfyldes. 19

20 På linie 29 benytter vi et textarea tag til kommentarfeltet. Dette tag benyttes, da det er mere overskueligt for brugeren at skrive i. Til sidst har vi på linie 33 et input tag med type SUBMIT så inputtet vil fremstå som en knap. Figur 3: insertnewuser.php del 2. Figur 2: insertnewuser.php del 1. Her ses første del af insertnewuser.php som er den fil userregistration.html kører, når der trykkes submit. I dette stykke af koden erklærer vi hvilke navne inputsene fra userregistration.html skal have i insertnewuser.php - her har vi med vilje sørget for at ens navne. I denne del af koden bruger vi echo til at vise brugeren, hvad denne har indtastet i kontaktformularen, efter at der er trykket submit. Nedenfor ses hvordan input og tekst kommer til at se ud for brugeren. Når man har med kontaktformularer at gøre, er det vigtigt at man sørger for at brugerens input bliver valideret således at man er sikker på at de indtastede informationer er af korrekt karakter. Et eksempel på dette er at telefonnumre udelukkende skal bestå af tal. På linie 4 ses at vi har udkommenteret et stykke kode. Dette er gjort fordi vi i første omgang lavede sitet således at det indtastede information i kontaktformularen ville blive gemt i en database. Dette fungerer fint så længe vi kørte siden på localhost, men da vi begyndte at lægge sitet over på det pågældende domæne, blev vi mødt med fejl, som vi ikke kunne løse. 20

21 Figur 5: JavaScript del 2. Figur 4: JavaScript del 1. Ovenfor ses første del af vores JavaScript kode. Med linie 1 sørger vi for at at browseren ikke igangsætter noget af javascriptet før at hele siden er indlæst. Linie 3 er et stykke kode vi benyttede under udviklingsporcessen for at tjekke om javascriptet blev eksekveret korrekt eller ej. Linie 8,9 og 10 er regular expressions der bliver tildelt en variabel, så de kan benyttes i funktioner der skal validere brugerens inputs. Ovenfor ses en af vores funktioner. Denne funktion validerer længden på den information brugeren har indtastet. Hvis inputtet ikke er større end length, så dukker der en fejlbesked op i tekstfeltet skrevet med røde bogstaver, men fordi denne fejlmeddelses er større end vores givne length har vi valgt blot at indsætte en tom fejlmeddelses. Således bliver feltet kun markeret med rødt. Se nedenstående kode. På linie er vores globale variabler der er bundet til de enkelt inputfelter i kontaktformularen. 21

22 Figur 6: JavaScript del 3. Her ser vi, at når feltet Fornavn går fra aktiveret til ikke aktiveret, køres funktionen fra Figur 5. Length er sat til 1 fordi funktionen læser at inputtet skal være større eller lig med length for at blive godkendt. Og da de korteste navne i Danmark er Ib og Bo, må vi gå ud fra at man ikke kan have et kortere navn. På figur 6 ses det også at vi i samme omgang kører vores funktion der validerer at et navn kun kan indeholde bogstaver og bindestreg. Figur 7: JavaScript del 4. Til sidst har vi et stykke kode der sikrer at man ikke kan trykke submit, hvis felterne fornavn, efternavn, og telefon er tomme. For at dette kunne lade sig gøre blev vi nødt til at erklære en række variabler, denne gang lokale, der alle skal give true for at submit vil gå igennem. Er bare én af dem false vil der på skærmen dukke en besked frem hvor der står Udfyld venligst felterne korrekt. 22

23 Konklusion og reflektion Målet med vores problemformulering var at finde en metode til at kommunikere Zoos grønne profil og dermed også bidrage til et godt image. På baggrund af de analyser vi har fortaget, kan vi konkludere, at den bedste måde at profilere Zoos visioner om at nedsætte CO2 udslippet er ved hjælp af en kampagne-hjemmeside, der understøttes af forskellige offline medier som f.eks. plakater og brochure. I problemformuleringen søgte vi blandt andet efter, hvordan man kan øge antallet af besøgende i haven ud fra klimapartnerskabsaftalen. Men efterfølgende har vi erfaret, at dette ikke var et relevant mål for kampagnen. Dog kan man håbe på, at antallet af besøgende vil stige under kampagnen, som resultat af offentligt goodwill. I dette projekt har vi designet et website, der skal kommunikere kampagnen til den målgruppe, som vi har defineret ud fra den kvantitative analyse. På baggrund af vores målgruppeanalyse vurderer vi, at Zoos nuværende målgruppe ikke bør udvides, da den er optimal for kampagnen. Det er den, fordi budskabet om vedvarende energi rammer bredt i befolkningen. Der kan både være fordele og ulemper ved så bredt defineret en målgruppe, som København Zoo har. Det kan være en fordel at designe til den brede målgruppe, når der ikke er specifikke krav til retningslinjerne. Vi har udviklet en simpel hjemmeside som informationsplatform med de vigtigste oplysninger. Hjemmesiden er designet dynamisk både med slideshow og nyhedsbokse på forsiden. Vi har valgt at designe en side målrettet til børn, da børnefamilier er vores primære målgruppe. Bortset fra denne side er designet neutralt, hvilket primært appellerer mest til den voksne del af målgruppen. Der er brugt mange fotografier af dyr, da det er Zoos varemærke. Billederne gør også websitet mere interessant og udnytter den visuelle kommunikation, da de fleste ikke vil læse store mængder af tekst, især om et faktuelt emne. Vi vil senere undersøge websitet for at tjekke, om det lever op til det budskab, som vi gerne vil formidle og appellere til vores primære målgruppen. Det skal også testes, for at sikre at det er brugervenligt og intuitivt. 23

24 Henvisninger [1] Projektbeskrivelse [2] Mission [3] Vision [4] Kvalitativ analyse [5] Målgruppeanalyse Kodelinks [7] Script jquery library Grid system (960) ddsmoothmenu Elastic Slider Selectnav Ui Totop Colortip Carousel Slider Lightbox Isotope Filtering Font Titillium-text font Icons Glyphicons [6] Video 24

25 Bilag 1 Gantkort Bilag 2 Logoudvikling Page 1 / 4 25

26 Bilag 3 Bannerudvikling Bilag 4 Brochureudvikling 26

27 Bilag 5 SEO søgeord Bilag 6 Wireframe 27