Artiklen er opdateret den: 30. juli 2024
WordPress er kendt for sine færdige design (themes) som enten er gratis eller forholdsvis billige at anskaffe. Hvis du har læst lidt på min hjemmeside, ved du nok hvad jeg mener om dem, så det behøver vi ikke dvæle ved her!
Heldigvis findes der stadig designere og webbureauer, der insisterer på at lave unik design til deres kunder. Et design 100% tilpasset kundens ønsker.
Det er ofte større firmaer og organisationer, der kræver et unikt webdesign, der flugter med deres brand og generelle visuelle udtryk.
De har ofte i mange år opbygget en visuel identitet mht. farvevalg, skrifttyper, afstande og placering af elementer etc. Her er det ikke kun logoet, men hele udtrykket der skal signalere, hvem afsenderne er og hvad de står for.
Deres målgrupper og kunder kender dem blandt andet på dette visuelle udtryk.
Det er en af hovedårsagerne til, hvorfor den type firmaer ikke bare benytter et gratis WordPress tema!
De frie skoler og privatskoler er også med
Det er ikke kun de store multinationale firmaer, der stille så store krav til deres webdesign. Mange af landets friskoler og privatskoler har et tilsvarende ønske om det unikke design / udtryk.
Grunden til dette er, at de frie skoler som hovedregel har brugt mange år på at definere deres kerneværdier og særegne. Et fokus som oftest videreføres, når de skal have nyt webdesign.
Det handler om kerneværdier, selvforståelse og selvfølgelig om at tiltrække nye elever til skolen.
Dele af bestyrelsen, lærergruppen eller en forældregruppe arbejder ofte meget dedikeret når de skal have ny hjemmeside.
Indholdet i tekst og billeder og dets struktur er selvfølgelig et hovedfokus, men det visuelle kan til tider have et lige så stort fokus.
Mange tanker bliver gjort for hvordan man kan signalere skolens værdier og den daglige stemning via designet på hjemmesiden.
Pixel Perfect eller design anvisninger
En forskel der ofte er på eksempelvis de store firmaer / organisationer og de frie skoler er hvordan designfasen og detaljegraden er.
Pixel Perfect design var et begreb fra før hjemmesiderne blev responsive.
Her kunne jeg placere designet som et billede på baggrund af en HTML side, og ud fra det placere de enkelte HTML elementer med 100% pixel præcision … hvis det ikke lige var for alle de forskellige webbrowser som Internet Explorer, Safari, Google Chrome, Firefox, Opera o.a. Som alle havde deres små regler for hvordan HTML og CSS skulle tolkes 🙂
MEN Pixel Perfect er ikke helt dødt på trods af at alle design i dag er responsive. De store gennemarbejdede design er opdelt i desktop, tablet og mobil design. Med det kan jeg som programmør kode et WordPress tema der er 100% som designere har tiltænkt det, uanset hvilket “device” siden bliver set på.
Forskelle fra tiden før det hele blev responsivt og i dag er at man i dag ikke arbejder med “magic numbers”. Altså at der skal være præcis 22px hen til et HTML element, der SKAL være 75px højt etc.
I dag er det indholdet (content) der bestemmer, hvor stort et element er og skærmstørrelsen der bestemmer hvor store afstande og skrifttyper skal være. Intet må låses fast med “magic numbers”!
Designet skal tilpasse sig automatisk indhold og skærmen den vises på. Skal der pludselig være dobbelt så meget tekst i et HTML-element, skal det ske, uden at hele designet falder fra hinanden!
De fleste design jeg modtager i dag, har dog ikke denne detaljegrad. De er ofte udarbejdet som anvisninger og retningslinjer for hvordan det færdige WordPress tema skal fremstå.
Ofte er der også kun lavet et designoplæg for desktop-visningen og: “Så skal du bare få det til at virke på telefoner og tablets Morten“
Fra PSD til WordPress theme
Designbureauer, webbureauer eller mine egne kunder på Web.dK vil selvfølgelig gerne følge med i kode arbejdet. Ofte kommer der nye behov og design elementer løbende i denne proces.
Derfor koder jeg altid en almindelig HTML side af forsiden, en underside og andre sider der er specielt udtænkt og designet.
I denne proces kommer der næsten altid ændringer til designet, når designere ser det “rigtigt” i browseren. Man skulle ikke tro det, men der er altså forskel på, at se sit designet i Photoshop, Affinity Designer eller hvilket program designeren benytter og så se den kodet HTML siden i browseren.
Design-elementer kan nu være animerede og almindelige “hover effekter” og “fokus tilstande” kan være med til, at designere får nye ideer … kunne man så ikke? …. jo da 🙂
Først når designeren, web-udvalget eller hvem der styrer designprocessen er 100% tilfredse, koder jeg det endelige WordPress tema.