GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL
OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv og kunne redigere i hjemmesiden, men ville have mig til og styre den, brugte jeg bracket og arbejdede med HTML5 og PHP. HJÆLPEMIDLER Brackets og Photoshop
PROCESS MØDE MED KUNDEN Jeg sat mig ned sammen med kunden og fik styr på hvad opgaven omhandlet. INSPIRATION SØGNING Jeg søgte efter inspiration på nettet. SKITSER Udarbejdet skitser. LAYOUT I PHOTOSHOP Arbejede videre med mine skitser i Photoshop. FLOWCHART, SKILLET OG STORYBORD LAVES PROGRAMERING AF SITE Jeg startede med og opbygge hjemmesiden i Brackets. SØGEMOTIMERING VED BRUG AF METATAGS BROWSER TESTES Jeg testede hjemmesiden i forskellige browsers. HJEMMESIDE VISES TIL KUNDEN Jeg presenterede hjemmesiden for kunden, og noterede hans rettelser. RETTELSER FRA KUNDEN LAVES Jeg rettet kundens rettelser og planlagde et nyt møde for godkendelse. HJEMMESIDEN GODKENDES AF KUNDE
MÅLGRUPPE Målgruppen for denne virksomhed er private kunder samt virksomheder som ønsker hjælp med deres eksisterende el eller ønsker og få opsat nyt el. Kunden ønsker at komme ud og ramme bredt på markedet, gerne Aarhus og omegn. IDEUDVIKLING Jeg ville gerne lave et site som var simpelt og overskueligt, da det skulle være nemt og hurtigt at gå ind på og finde de informationer man havde brug for, som kunde. Kunden ønskede at sitet skulle være responsivt, så det er mere overskueligt at bruge sitet på mobilen og tablets. Jeg ville gerne give kunden et moderne look til hjemmesiden, men stadig så den så troværdig ud, hvilket er vigtigt når man som kunde leder efter en håndværker. AIDA-MODELLEN I min ide process har jeg taget inspirration fra AIDA-modellen. Attention Jeg valgte og gøre brug af store billeder på min Index, til og fange brugerens opmærksomhed. Interest For at beholde brugerens interesse, er der skiftende billeder som viser forskellige sider af virksomheden. Desire Små korte tekster om hvad virksomheden udbyder, for brugeren til og ville læse mere. Action Det er tydligt for brugeren hvor der skal trykke henne for og få den information der ønskes.
IDEUDVIKLING BRUGT PÅ INDEX BRUGT PÅ UNDERSIDERNE, TIL BILLEDE BRUGT TIL UNDERSIDR BRUGT PÅ INDEX
LAYOUT I PHOTOSHOP I layout processen i photoshop tog jeg stilling til fontene løbende, farverne var allerede bestemt, da jeg besluttede mig for at bruge blå, da logoet er blåt.
LAOUT I PHOTOSHOP
FLOWCHART INDEX OM VIRKSOMHEDEN SERVICE RENOVERING NYBYG KONTAKT FACEBOOK KONTAKT KONTAKT KONTAKT
logo-3.png LOGO.Col 4 Width: 40%; Height: 190px; FLEXSLIDER.Col 10 Width: 100%; Height: 450px; MENU.Col 6 Width: 60%; Height: 190px; Padding-top: 132px; Padding-right: 39px; flexbillede.png flexbillede2.png SKELETTER OG STORYBOARD SERVICE ELEMENT WRAPPER.Col 10 Width: 100%; Height: auto; Margin-top: 120px; flexbillede3.png 1 2 3 1 2 3 service.png Renovering.png Nybyg.png #SERVICE.Col 3 Width: 30%; Height: 322px; Margin-right: 5%; #SERVICE-TEXT.Col 3 Width: 30%; Height: 200px; Padding-left: 10px; Padding-right: 10px; #RENOVERING-TEXT.Col 3 Width: 30%; Height: 200px; Padding-left: 10px; Padding-right: 10px; #NYBYG-TEXT.Col 3 Width: 30%; Height: 200px; Padding-left: 10px; Padding-right: 10px; #NYBYG.Col 3 Width: 30%; Height: 322px; Margin-bottom: 100px; FOOTER.Col 10 Width: 100%; Height: 150px; #RENOVERING.Col 3 Width: 30%; Height: 322px; Margin-right: 5%;
FONTE BRUGT I HJEMMESIDEN Jeg har brugt to fonte på dette site. Den ene er en google font og den anden er Arial. Arial er kun brugt i kontakt formularen. google fonten jeg har brugt er Ek Mukta. Jeg valgte at holde mig til kun og bruge en google font, for jo færre skrifter som bliver embedet til hjemmesiden, jo hurtigere loader den. Jeg har valgt og bruge en google font fordi: - De er gratis at bruge - De er nemme og implementere i HTML en - De fleste af skrifterne har et stort udvalgt af skriftsnit - Man får bedre mulighed for at fonten vises ens i forskellige browseres. Fonten bliver tilføjet til hjemmesiden når den loader, via denne code som man indsætter i head menuen: <link href='https://fonts.googleapis.com/css?family=ek+mukta:400,700' rel='stylesheet' type='text/css'> Fonten anvendes derefter i CSS'en via taget font-family, og skriftsnittet kan i dette tilfælde bruges i regular og bold, og det vises i CSS en således fontweigt: 400 eller 700. Jeg lavede en google font test for og se hvor hurtig pageloadingen ville være når jeg ville bruge de to forskellige font weigt. Selvom at testen ligger i det røde felt, så har jeg selv testet det og jeg havde ingen problemer med at loade siderne hurtigt hverken på computer, ipad eller mobilen, heller ikke hvis mobilen brugte 3g eller 4g net.
FONTE
KOMPOSITION (COL-SYSTEM) Jeg har opsat min hjemmeside med et grid-system, altså et kolumne system, som er bygget op af 10 kolumner som hver er sat i % hvor col-1 er 10%, col-2 er 20% osv. så vi ender med at col-10 er 100%. Dette grid-system er det som jeg føler er nemmest og arbejde med når man gerne vil lave en hjemmeside responsiv, da det og arbejde i procent og ikke pixels. Man også kan blande procent og pixels hvis det er nødvendigt. PHP Jeg har valgt at arbejde med PHP filer for min hjemmeside, da det giver mig en nem måde og lave rettelser i fx. min header eller footer, og efterfølgende automatisk opdatere sig på alle mine undersider i virksomheden. Dette gør at jeg ikke behøver og rettet det manuelt på alle siderne og at man undgår fejl eller forglemmelser.
.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 4 = 40%.Col 6 = 60%.Col 10 =100% KOMPOSITION.Col 3 = 30% 5%.Col 3 = 30% 5%.Col 3 = 30%.Col 10= 100%
RESPONSIVT Det var vigtigt for kunden at hans hjemmeside skulle være responsiv, og have en mobilvisning. Det nu er meget normalt at kunder finder en via mobilen eller tabletten, da google ikke vil vise hjemmesider som ikke er mobilvenlige på smartphones, hvis man bare søger efter en elektriker. MEDIA QUERIES Min website er bygget op af disse to media queries: Smartphone: @media screen and (max-width:470px)' Tablet: @media screen and (max-width:920px)
RESPONSIVT
BRUGERVENLIGHED/USABILLITY Der er lagt vægt på brugervenlighed i form af: 1. Simple opsætning, så det giver et roligt udseende 2. Tydelig navigation på siderne 3. Altid synlig kontakt informationer i bunden på alle siderne. 4. Menu simple og nemt og finde rundt, da der er brugt tydelige forklaringer 5. En hurtig oversigt over hvad firmaet tilbyder, så man hurtigt kan få et overblik over hvad man har brug for. BROWSER Hjemmesiden er testet i tre af de mest brugte browseres, Google Crome, Safari og Internet Explorer. Den er også testet på tablet og mobil i Safari og Google Crome.
1 2, 4 BRUGERVENLIGHED OG BROWSER 5 3
SØGEMASKINEOPTIMERING For ikke at modarbjede en god søgeplacering, gik jeg ind og undersøgte om jeg havde korrekt brug af H1, H2 og H3 tagging, broken links, dublikeret indhold, server errors, land loading tid, for lange sidetitler eller meta-beskrivelser. Jeg valgte også og indsætte nogle af søgeordene i titler, beskrivelser, overskrifter, brødtekst, billedenavne og lignende, fx har jeg i min kewords service, renovering og nybyg, som også er det mine overskrifter er på service siderne. Dette gøres så Google får nemmer ved og vejlede den person der lavet google søgningen. HEJMMESIDE VALIDREING Jeg valgte og køre min hjemmeside igennem en validering, for og tjekke om der kunne være nogle fejl i mine koder. Dette gøres for og tjekke om ens hjemmeside lever op til de web standarder der er. Søgningen gav mig tre generelle fejl: 1. Den informerer mig omkring at jeg mangler <!DOCTYPE html> før min <html lang> tag, dette gør jeg ikke noget ved, da jeg arbejder med PHP, hvilket er derfor <!DOCTYPE html> ikke bliver brugt. 2. Den siger jeg ikke må bruge 2 classes, der var brugt en container class og en col-10 class. Jeg gik derfor ind og kiggede på den styling jeg havde lavet på de to classes, og fandt ud af at det var fordi jeg havde skrevet det forkert. Men så at jeg faktisk ikke havde bruge for også og sætte col-10 class på så den fjernede jeg. 3. Den informarer mig om at der er en li end tag, men ingen li start tag. Denne fejl tror jeg kommer fordi denne tagging kun bliver aktiv når vi er nede i mobil visning og derfor ikke bliver brugt på desktop.
SEO OG HJEMMESIDE VALIDERING
<META NAME= DECRIPTION CONTENT= /> Decription tag, skrives det tekst som bliver gråt i resultaterne i en google søgning. <META NAME= KEYWORDS CONTENT= /> Her skriver man nogle keywords omkring virksomheden. METATAGS <META NAME= VIEWPORT CONTENT= /> Dette tag bruges til at fortælle hjemmesiden at den er responsiv. <TITLE></TITLE> Det er den tekst der kommer frem i en google søgning, så det er smart ikke kun og skrive firma navnet, men også område og gode kompetencer.
PRODUKT
KVALITETSVURDERING Jeg er meget tilfreds med den hjemmeside jeg har fået lavet til kunden. Jeg føler jeg har fået lavet en simple og flot hjemmeside som er nem og overskuelig. Jeg føler også at jeg har formået at designe den som kunden have efterspurgt. Opgaven har også givet mig en masse erfaring med direkte kundekontakt. Jeg lærte dermed også hvordan, jeg kunne præsentere mine idéer på en konstrueret måde. Min største udfordring i denne opgave var og gøre hjemmesiden responsiv. Der var meget og tage stilling til når elementerne på hjemmesiden både skulle passe på en desktop og iphone. Jeg måtte ud i et nyt territorie og arbejde med procenter, som gav mig et helt nyt syn på hvordan man også kunne arbejde med hjemmesider. Har senere hen snakket med kunden, og han var meget tilfreds med hjemmesiden, og glæder sig til og få den i brug.