Marketing specialisering

Som en del af min uddannelse som markedsføringsøkonom har jeg på 3. semester skulle vælge en specialisering, som jeg kunne fordybe mig i. Jeg har valgt webudvikling og SEO som min specialisering, da jeg blev fascineret af emnet allerede på første semester. Under en temauge, hvor vi skulle udvikle vores egen hjemmeside (den, du ser her), opdagede jeg de mange muligheder, der findes inden for webudvikling og SEO. Webudvikling giver mig værktøjer til at lære, hvordan man bygger en brugervenlig hjemmeside, der kan optimere virksomheders digitale tilstedeværelse.

Webudvikling handler om processen med at skabe og vedligeholde hjemmesider og webapplikationer. Det omfatter både den visuelle del af en hjemmeside, som brugerne ser (frontend), og de bagvedliggende systemer, der håndterer data og funktionalitet (backend). Better Developers. (2021, 15. juni). Front-end vs. back-end vs. full-stack udvikling. Better Developers.

Inden optimeringen af landingssiden udarbejdede vi et sitemap for at få et klart overblik over Bubbles hjemmeside. Morten introducerede os til konceptet og forklarede, at et sitemap fungerer som en strukturplan for en hjemmeside – et visuelt kort, der viser, hvordan man navigerer fra forsiden til undersider og videre. Han præsenterede os også for designprogrammet Figma, som Bubble bruger til at udvikle grafiske elementer og sitemaps. I Figma kan man indsætte figurer, tekst, billeder og meget mere, hvilket gjorde processen mere overskuelig. Under arbejdet opdagede vi, at Bubbles hjemmeside havde

havde fire niveauer af sider. Vi vurderede, at det fjerde niveau var overflødigt, da det ikke indeholdt væsentlig information i forhold til de forrige niveauer. Derfor besluttede vi at integrere det fjerde lag på landingssiden, så denne blev mere informativ og brugervenlig.

Som en del af processen sammenlignede jeg Bubble’s sitemap med mit eget fra min hjemmeside. Det gav et interessant perspektiv, da min hjemmeside har betydeligt færre undersider. Herunder kan du se sitemaps for både Bubble og min egen side. Figma. (u.d.). Figma. Figma.

Med en klar forståelse af, hvad en god landingpage bør indeholde, begyndte vi at udarbejde wireframen til landingssiden “Hjemmesider”. Vores første overvejelse var at inkludere et stort billede med teksten “Hjemmesider” som centralt element. Dette tjener til at fange kundens opmærksomhed og skabe et skarpt fokus. For yderligere at understøtte sidens formål tilføjede vi en lille tekst i billedets hjørne for at sikre, at budskabet er tydeligt og informativt.

Derefter fokuserede vi på at gøre landingssiden mere informativ end den nuværende løsning. I dag benytter Bubble undersider (niveau 4 i sitemap) til at præsentere relevant information om, hvad der kendetegner en god hjemmeside. Vi valgte i stedet at integrere disse oplysninger direkte på landingssiden i form af tekst og billeder, så brugerne hurtigt kan få indsigt i centrale elementer. For at opmuntre til handling placerede vi to Call-to-Action-knapper (CTA’er) i denne sektion.

Troværdighed er et afgørende element på en landingpage. Derfor inkluderede vi en kundecase, der viser en konkret hjemmeside skabt af Bubble, suppleret med kundens udtalelser om samarbejdet. Bubble har i dag en side dedikeret til cases, men den kan være svær at navigere i, og den nuværende landingsside linker kun til færdige hjemmesider uden kundernes udtalelser. Ved at placere denne case direkte på landingssiden styrker vi sidens troværdighed.

Afslutningsvis inkluderede vi en kontaktsektion med teksten “Lad os tage en snak”, ledsaget af CTA-knapper, der gør det nemt for brugeren at vælge mellem at ringe eller skrive til Bubble. Dette sikrer, at kontaktmulighederne er let tilgængelige og brugervenlige.

Dette design kombinerer klare budskaber, brugervenlighed, troværdighed og strategisk placerede CTA’er for at sikre en effektiv og engagerende landingsside. Se Bubble side her

Bubble.dk. (u.d.). Hjemmeside. Bubble.dk.

Under min specialisering har jeg arbejdet målrettet på at optimere og forbedre min egen hjemmeside. Mit primære fokus har været at skabe en indbydende og fangende forside, men projektet udviklede sig hurtigt til at omfatte meget mere end blot en god forside.

Før jeg begyndte at udarbejde wireframen til forsiden, brugte jeg tid på at undersøge WordPress’ funktioner i forhold til temaer og mulighederne for at opbygge en hjemmeside på platformen. WordPress blev introduceret tidligt i skoleforløbet som det værktøj, vi skulle anvende til at udvikle vores hjemmesider. Jeg blev hurtigt fortrolig med WordPress og opdagede, at det i visse tilfælde kan have begrænsninger, især når det kommer til layoutmuligheder.

Gennem vejledning fra Morten fik vi adgang til en testhjemmeside på deres server. Dette gav os mulighed for frit at eksperimentere og tilpasse vores hjemmesider uden at påvirke det oprindelige indhold.

Udseende
I det valgte tema har jeg arbejdet i sektionen “Udseende” for at tilpasse farverne til en minimalistisk og moderne stil med lyse og mørke nuancer, som giver et rent og professionelt udtryk. Tidligere havde jeg anvendt mere feminine, beige farver, som jeg nu har skiftet ud for at skabe et stærkere visuelt udtryk. På forsiden har jeg lagt vægt på at skabe øget synlighed ved at lade et stort billede fylde en væsentlig del af layoutet. Billedet repræsenterer mig og er med til at illustrere, hvad hjemmesiden handler om – nemlig at formidle min viden og erfaring til en potentiel arbejdsgiver. Tidligere havde forsiden kun to små billeder og meget tekst, som hverken var indbydende eller brugervenligt.

HTML-strukturen: Jeg startede med at skrive en HTML-kode, som definerer strukturen for kontaktknappen. Først oprettede jeg en <div> (en container) og tildelte den en CSS-klasse for at gøre det muligt at style knappen med CSS.

Derefter linkede jeg knappen til kontaktoplysningerne og tilføjede et SVG-ikon (en mobiltelefon) for at gøre knappen visuelt tiltalende. SVG-filer er god at bruge, da de er vektorbaserede og kan skaleres uden i flere størrelser.

CSS-styling: I CSS-snippet definerede jeg udseendet for kontaktknappen ved at style klassen .fixed-contact.

Her kunne jeg justere farver, størrelser og placeringen af SVG-ikonet. Jeg specificerede også ikonets størrelse, så det passer harmonisk ind på siden.

HTML og CSS: WordPress genererer automatisk HTML-strukturen for menulinjen. Jeg tilføjede en CSS-snippet for at designe den og sikre, at menulinjen følger med, når man scroller.

Jeg definerede højden og bredden samt tilføjede en z-index på 1000 for at sikre, at menulinjen altid ligger øverst på siden og ikke bliver dækket af andet indhold.

Derudover tilføjede jeg en margin, så sidens tekst ikke forsvinder bag menulinjen.

Clickmap:
Clickmappet kan jeg bruge til at vurdere om folk klikker der hvor jeg forventer det og ønsker det. Hvordan de besøgende klikker kan samtidig give mig en indikation på hvor jeg skal placere mine links.

Movemap:
Movemappet illustrerer, hvordan musen bevæger sig rundt på forsiden. For eksempel viser det, at der er betydelig aktivitet omkring menulinjen, hvilket er et positivt tegn. Dette indikerer, at navigationen på siden fungerer godt og effektivt guider de besøgende.

Scrollmap:
Scrollmappet viser, hvor langt de besøgende når ned på forsiden, før de enten forlader siden eller navigerer videre. På min side er det kun 21% der scroller helt bunden.