Valg af templates

Templates er hjemmeside skabeloner som jeg har designet til Joomla, som jeg bygger alle vores hjemmesider ud fra, når man normalt tænker templates til joomla, eller wordpress, så tænker man på meget låste sider, med faster farver og videre, men jeg har udviklet et system som lader mig lave meget redigerbare templates, hvor det egentligt kun er selve skelettet jeg låser fast, nedenfor har jeg inkluderet forskellige hjemmesider jeg har bygget med samme templates.

Total-tjek Templaten

Unitech templaten

Jeg sættes i gang

Efterfølgende starter min process, jeg koster 1000kr i timen, det samme gør tekstforfatterne, så derfor har jeg kun mellem 8 og 12 timer til min del af opgaven, hvor korrektur ikke er medregnet, ellers bliver det en dårlig forretning. Min process er som følger:

Installer Joomla

vi bruger den nyeste version af joomla, det er et CMS som gør det muligt for os at lave rettelser lynhurtigt, og så lader joomla os bruge templates på en nem og hurtig måde, uden at det går ud over vores evne til at tilføje rå kode til siden.

Skriv tekster ind på siden

Vores hjemmesider består normalt af 10 sider, som tekstforfatterne skriver, den sætter jeg ind i joomla, jeg har udviklet et program som omdanner tekst fra word til fejlfri HTML kode som jeg bruger til dette formål.

Opbyg menu struktur

joomla lader dig nøjes med at bygge din menustruktur én gang, og den lader dig også bestemme hvilke urler undersiderne skal have for eksempel: /tatoveringsfjernelse og /akne-ar som kan have god seomæssig værdi.

Installer den valgte design template

Tekstforfatteren og kunden valgte sammen at bruge Unitech Templaten som set overfor, og jeg var helt enig.

Implementer kontaktformular

Kontaktformularen som kan ses på næsten alle sider er en yderst integral del af næsten alle vores sider, det er her kunden kan se sort på hvidt om siden virker, og intet gør vores kunder gladere end kunder i biksen.

Implementer templaten

Jeg uploader den nyeste version af vores template til siden, installerer den i joomla og sørger for at menuer, formulare og artikler står som de skal.

Designe siden

Her går design processen igen, jeg læser info arket igennem og sætter mig ind i kundens behov og ser hvad jeg kan gøre, jeg læser at kunden gerne vil virke professionel, og godt kan lide farven blå, jeg tænker, han har en klinik som fjerner tatoveringer, han er certificeret laseroperatør. hvis nu jeg giver siden en klinisk turkis farve, kan jeg stadig ramme kundens ønsker, men også lave et images som skaber tillid hos brugeren - og som giver flere henvendelser i sidste ende.

Jeg er for nylig gået i gang med at integrerer Googles Material Design guidelines som er designprincipper som er de retningslinier som google mener man skal følge for at give sine digitale applikationer det bedste look, og realskin var et af første projekter hvor jeg for alvor tog nogle af de principper i brug, hjemmesiden farvepaletter og knapper er skabt med de principper i baghovedet.

Rediger billedemateriale

Realskin var en af de kunder som ikke havde så godt billedmateriale, så derfor var unitech templaten et godt valg, da den ikke har ligeså store krav til billederne, jeg finder de billeder jeg ønsker, og klipper dem til så de passer ind i templaten

optimerer sidens load tid

Når designet af siden er færdigt, går optimeringen igang, Google siger at hvis din hjemmeside er mere end 2 sekunder om at loade mister du 50% af de besøgende som har klikket på siden på google, de når at lukke vinduet igen inden siden loader helt, så man kan have designet en lige så flot side man har lyst til, men hvis ikke den loader hurtigt, så er den ikke noget værd.

Man kan kode sig ud af langt størstedelen af forsinkelserne, men et sted hvor man kan hænte rigtig mange millisekunder er på billede fronten, man skal altid huske at bruge “Save for web” i photoshop, og tage quality slideren på ens jpegs så langt ned som muligt, målet er at finde en balance hvor man har et pænt billede som fylder meget lidt.

Når billedet så er gemt, og jeg stadig har en udfordring med hastigheden på siden, kan jeg køre billederne igennem kraken.io, en hjemmeside med en service som fjerner yderligere metadata fra billeder, det er data som photoshop giver et billede, farveprofiler, hvilket kamera billedet er taget med og lignende, og det fylder alt sammen.

Billedeprocess

kvalitetstjek

til sidst sørger jeg for at kontaktformularen kan sende og at databasen kan modtage henvendelser, og så sørger jeg for at undersidernes urler er som tekstforfatteren ønsker det. finpudser det hele så alt er klar til godkendelse.

Når hjemmesiden har fået det endelige OK fra kunden sættes den online, min chef opretter kundens nye emailadresser, jeg sækker kontaktformularen live, sørger for at HTML koden ikke har nogen fejl, tester alle links og redirects, og sørger for at alt vores er som det skal være, og derefter har Realskin en sprit ny hjemmeside.