jeg har nu arbejdet i gruppe med to andre fokuseret studerede i vores speciale inden for webudvikling og optimering som har været en spændene proces som også har styrket mine kompetencer inden for webdesign og optimering af en hjemmeside også at kunne finde fejl og mangler på en hjemmeside

Webudvikling og SEO

Webudvikling handler om at skabe og vedligeholde hjemmesider. Det involverer alt fra kodning og design til indholdsopdateringer og brugeroplevelse. God webudvikling sikrer, at en hjemmeside er funktionel, æstetisk tiltalende og nem at navigere.

SEO, eller søgemaskineoptimering, handler om at forbedre en hjemmesides synlighed på søgemaskiner som Google. Ved at optimere indholdet og tekniske aspekter af en hjemmeside, kan man opnå højere placeringer i søgeresultaterne, hvilket øger chancen for, at brugere finder og besøger siden.

Begge dele er vigtige, fordi en velfungerende og synlig hjemmeside kan tiltrække flere besøgende, forbedre brugeroplevelsen og øge konverteringsraterne, hvilket samlet set kan føre til større succes for virksomheden eller projektet bag siden.

Performance og optimering af hjemmesider

Performance er en afgørende faktor for succes i webudvikling, både for brugeroplevelsen og for søgemaskinernes vurdering af en hjemmeside. Et værktøj som Pagespeed Insights spiller en central rolle i at måle, hvor hurtigt en hjemmeside svarer, og det giver os indsigt i, hvordan vi kan forbedre ydelsen på tværs af både mobil og desktop. Specielt når vi bruger platformspecifikke resultater fra pagespeed.web.dev, får vi en mere detaljeret forståelse af, hvordan hjemmesiden præsterer på forskellige enheder.

Et centralt fokusområde er Googles Core Web Vitals, der vurderer fundamentale aspekter af hjemmesidens tekniske ydeevne. For eksempel er CLS-score (Cumulative Layout Shift) vigtig, fordi den måler, hvor meget indhold på siden flytter sig under indlæsning. Hvis tekst og bokse hopper rundt på forsiden – som det aktuelt er tilfældet – kan det skabe frustration for brugeren og samtidig trække ned i den samlede vurdering.

Bubbels hjemmeside har en effektivitetsscore, som lige nu ligger på 45, understreger, at der er plads til forbedring. For at nå et grønt niveau kræver det, at vi arbejder os op til en score over 80. Dette kan blandt andet opnås ved at fokusere på grundlæggende optimeringer, som at sikre brugen af korrekte billedstørrelser. Store eller ukomprimerede billeder bidrager til længere indlæsningstider, hvilket især rammer mobilbrugere hårdt.

Et wireframe og et sitemap er to vigtige værktøjer inden for webudvikling og design, som hjælper med at planlægge og strukturere en hjemmeside.

Bubble

For at forbedre indholdet hos Bubble inden for vores respektive ekspertiseområder, arbejdede vi i vores læringscirkel tæt sammen med Morten. Vi valgte at fokusere på at optimere en af bureauets landingssider, og valget faldt naturligt på landingssiden for “Hjemmesider”, da den passede til vores erfaring inden for webudvikling. Samtidig med vores case-opgave for Bubble, gennemgik vi også deres hjemmeside, hvor Morten kom med værdifulde kommentarer, som vi vil overveje i vores forbedringsarbejde.

Wireframe

Et wireframe er en enkel visuel skitse eller prototype af en hjemmeside, Superego laver en hjemmeside igennem Firma og viser den til en kunde så de kan se hvordan deres hjemmeside vil se ud . Det viser layoutet og strukturen af en side uden fokus på det visuelle design som farver, billeder og typografi. I stedet koncentrerer det sig om funktioner og placering af elementer som:

• Navigation (menuer og knapper)
• Indholdsblokke (overskrifter, tekst, billeder)
• Interaktive elementer (formularer, CTA-knapper)
• Hierarki (hvilke sektioner der prioriteres visuelt og funktionelt)

Wireframes kan laves digitalt i værktøjer som Figma, Adobe XD eller Sketch eller tegnes manuelt på papir. Formålet er at skabe en klar plan for, hvordan en side fungerer og ser ud, før det detaljerede design og udvikling begynder.

Sitemap

Et sitemap er en oversigt over en hjemmesides struktur og navigationshierarki. Det viser, hvordan forskellige sider og sektioner hænger sammen. Sitemaps kan enten være visuelle diagrammer eller simple tekstbaserede lister og omfatter typisk:

• Hovedsider (som forsiden, kontakt, produkter/tjenester)
• Undersider (som individuelle produktbeskrivelser eller blogindlæg)
• Hierarkiet (hvilke sider der er over- eller underordnede)
• Links (for at vise relationer og navigation mellem sider)

Sitemaps bruges til at sikre, at alle nødvendige sider er inkluderet, og at navigationen på hjemmesiden er logisk og brugervenlig.

Kort fortalt

• Wireframe: Fokuserer på layout og funktion på en enkelt side.
• Sitemap: Fokuserer på struktur og relationer mellem flere sider.

Tilsammen hjælper de med at skabe en klar og sammenhængende plan for udviklingen af en hjemmeside.

Det skal bare være fedt!

Morten Neessen – superego

Kodning

Morten lærte os noget rigtig fedt, nemlig kodning og det vi lærte var at, kodning er grundstenen i opbygningen af hjemmesider. Vi har primært arbejdet med HTML og CSS, som er to essentielle teknologier inden for webudvikling:

CSS (Cascading Style Sheets) er ansvarlig for at designe og style hjemmesiden. Det gør det muligt at tilføje farver, ændre skrifttyper, justere layout og sikre, at siden ser flot og professionel ud på forskellige skærmstørrelser.

HTML (HyperText Markup Language) bruges til at strukturere indholdet på en hjemmeside. Det handler om at definere overskrifter, tekst, billeder, knapper og andre elementer, der udgør hjemmesidens grundlæggende layout.

SVG (Scalable Vector Graphics) er en XML-baseret filtype, der bruges til at skabe vektorgrafik. Den er skalerbar uden tab af kvalitet, hvilket gør den ideel til logoer, ikoner og grafik på hjemmesider. SVG understøtter animationer, interaktivitet og kan styles med CSS.

Hvad har vi lavet

Under vores tid med Morten har vi arbejdet intensivt med at forbedre vores hjemmesider. Vi startede med at gennemgå dem grundigt for at identificere forbedringsmuligheder. Da vi oplevede udfordringer med at ændre vores sider direkte i WordPress, oprettede Morten en kopi af hver hjemmeside, så vi kunne eksperimentere frit. Resultatet blev, at alle tre hjemmesider fik helt nye temaer og en betydelig opgradering. Min egen hjemmeside har gennemgået en total forvandling og er blevet omdannet fra en grøn, rodet forside til en mere enkel og struktureret version, der er langt mere overskuelig og brugervenlig.

CSS

Vi startede med at optimere vores nye hjemmeside og fokuserede på at rette specifikke elementer. Koden, vi har herover, er en CSS-kode, der bruges til at style hjemmesiden. Denne kode blev anvendt til at justere menulinjen øverst på siden. Før rettelsen optog menulinjen for meget plads og virkede uhensigtsmæssig, men med CSS-justeringen blev den tilpasset, så den nu fremstår pænere og mere struktureret.

HTML

Det, vi ser her, er en SVG-fil, som både fungerer som kode og billede. En SVG er en filtype, der bruges til at vise grafik og billeder direkte på hjemmesiden ved hjælp af kode.

Vi startede med at indsætte SVG’en, hvilket resulterede i et meget stort billede nederst på hjemmesiden. Herefter brugte vi CSS til at skalere billedet ned til den ønskede størrelse og placere det præcist, hvor vi ville have det. Samtidig valgte vi farvekoder for at matche designet, og vi sørgede for, at SVG’en følger med siden, når man scroller.

Litteraturliste

• PageSpeed Insights
• Figma Design
• Google Analytics
• Hotjar
• WordPress
• Guide til SEO
• InboundCPH Sitemap
• Wireframes: Hvad og hvordan bruges det
• Neessen, M. (u.d.). Morten Neessen: Web Developer & Team Lead at Superego. Superego.
• Bentzen, F. (u.d.). Flemming Bentzen: Underviser på VIA University College. VIA University College.