GRAFISK WORKFLOW
Opgaven Da jeg ikke har været meget i berøring med web i min virksomhed, har jeg valgt at lave et site baseret på min typografiske opgave, altså et website om lakrids. Sitet er bygget op som en såkaldt ”onepage”, altså et site uden undersider. Sitet er kodet med HTML5 og CSS3, hvilket giver en masse spændende nye designmæssige muligheder. Sitet indeholder de samme opskrifter som magasinet, og man behøver derfor ikke at gemme magasinet for at følge opskriften, dette kan gøres ved hjælp af enten mobiltelefon, iPad eller computer. Programvalg • Photoshop – Billedredigering • Illustrator – Visuel opbygning • Dreamweaver – Opbygning af det fungerende site.
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
Browservenlighed Da der altid er en lille forskel på hvordan enkelte browsere viser det samme site, er det vigtigt at tjekke sitet igennem i flere forskellige browsere. Jeg har tjekket mit site i Safari, Chrome, Firefox og naturligvis – den stadig mest brugte – Explorer. Arbejdsproces • Brainstorm • Idéudvikling • Skelet • Billedbehandling • Kodning i DreamWeaver • Oploade til server • Tjekke alt igennem i forskellige browsere
Målgruppen Som ved det trykte magasin er min målgruppe relativt bred, da magasinet både kan have interesse for amatørkokke, lakridsentutiaster og aldersmæssigt både unge og gamle. Dog rammer sitet typisk et lidt yngre publikum end en tryksag, da de hellere vil se opskrifterne online end at fylde køkkenet med opskriftsbøger og -blade.
Som en del af min arbejdsproces anvender jeg comments <!-- -->. Jeg arbejdede indledningsvist med en slider øverst på mit site, men valgte at gøre denne inaktiv, da jeg ikke følte den gjorde noget godt for designet. Slideren har jeg valgt at gøre inaktiv ved at indramme den som en comment, på den måde kan jeg hurtigt få slideren tilbage i mit site, hvis jeg igen ønsker at have den på sitet – normalt ville jeg have slettet den, for at den ikke skal ligge og genere i koden og tynge i loadetiden, men jeg har her valgt at bibeholde den, for at vise hvordan comment også kan anvendes.
Brugervenlighed Sitet er opbygget til at være responsive, hvilket vil sige, det både fungerer på stor skærm og på mobilskærm. Dette gøres ved at linke to forskellige CSS dokumenter i din HTML, en browser registerer, hvor mange pixels din browser er bred, og når der ikke længere er ”plads” til den store version af sitet, overtager den lille version.
Semantisk opbygning Det er vigtigt at opbygge din kode så det er nemt at overskue og læse for dig selv, for andre og for webbrowseren. Med HTML5 har man fået mulighed for at bruge en lang række nye elementer, som f.eks. Header, Nav, Section, Article, Footer og Address. Det er vigtigt at bruge disse elementer rigtigt, altså bruges Nav til navigation og
Address til adresseinformationer. Bruger man disse elementer rigtigt, skaber man en semantisk opbygning. Kvalitetsvurdering Jeg gennemgår løbende koden for hele tiden at holde den så overskuelig som muligt, dette gør det nemmere at holde styr på sitet og finde evt. fejl eller rettelser. Jeg arbejder fra stor mod lille – altså fra sitet vist på computerens browser mod sitet vist på mobil browser. Billeder i sitet er gemt som .jpegfiler, da der er tale om store billeder, der gerne skulle gengives i høj kvalitet. Det færdige site har en overskuelig og frisk brugerflade og har en god sammenhæng med det trykte magasin. Sitet afspejler tydeligt, hvor stor brugervenlighed man opnår, ved at lave sider med responsive opbygning – især i en tid, hvor folk i stor stil bruger deres mobile enheder til at surfe på nettet.
Idéudvikling – Skitser Idéen om en one-page lå ret hurtigt fast, og jeg valgte derfor at idéudvikle ud fra denne grundtanke. Onepage formatet passer godt til mit site, hvor der kun er opskrifter, kontaktformular og ikke andet.
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
Idéudvikling – genbrugte elementer Jeg har genbrugt følgende elementer fra magasinet for at skabe en fælles genkendelighed. - Farver på baggrund og overskrifter - Opstilling af tekster - Dottet ramme - Store billeder
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
Elementer Inden jeg gik i gang med kodningen, lavede jeg en elementopstilling for, hvordan jeg ønskede opbygningen. Da sitet er en onepage giver det ikke nogen mening at lave et sitemap. Med min elementopbygning kan jeg nemt overskue, hvordan jeg vil have de forskellige elementer til at opføre sig på henholdsvis desktop og på mobilskærm.
MOBILE
DESKTOP LOGO
LOGO
Container
Menu Container
Rettens navn Menu
Rettens navn
GRAFISK WORKFLOW
IMG
www.mortenharbo.dk/html/lakrids.html
IMG Opskriften Opskriften
IMG Opskriften
IMG Opskriften
Komposition Sitet er konstueret helt simpelt for ikke at forvirre modtageren: ”Her er tale om et opskriftssite – ingen hokus pokus”. Sitet har ligheder fra et menukort, man kunne finde foran restauranter, samtidig med at det er selve opskriften på retten. Store billeder pirrer øjet og giver virkelig en lyst til at lave det hele med det samme. Det store baggrundsbillede med lakridsrødderne er lavet fixed – altså bliver det hele tiden stående på den samme position. Dette giver en parallex effekt af at opskrifterne flyder hen over baggrunden. Denne effekt, samt den to-spaltede opbygning, har jeg valgt at ændre i mobilversionen, her ses altså blot en blågrå baggrund og en 1-spaltet opbygning.
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
Nederst på sitet finder man en kontakt formular, der anvendes til nyhedsbreve, spørgsmål, kommentarer og lignende. Denne har jeg valgt at lave meget afdæmpet, igen for at den ikke skal stjæle opmærksomheden fra opskrifterne.
KONTAKT FORMULAR
Responsive - Mediaquery For at gøre sitet mere brugervenligt er det gjort responsive, hvilket vil sige, at sitet ændrer sig, alt efter om det ses på stor skærm (desktop) eller lille skærm (mobile). Dette gøres ved at linke to css-styles og ved at skrive den kodebid, der ses under ”to work on devise”. På den måde fortæller man browseren, at når der ikke længere er plads til de ”store” css-styles indlæses, de ”små” css-styles. Jeg kunne have valgt at lave en tredje størrelse, der kunne fungere bedst på tabletskærm, men sitets simple opbygning gør den tredje løsning overflødig. Det kan ses, at jeg har valgt at ændre css-style ved 480px. Når man bygger responsive sites, kan det gøres på to forskellige måder:
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
Graceful degradation På denne måde bygger man fra desktop størrelsen mod mobilstørrelsen – altså fra stor mod lille. Man fjerner med andre ord løbende elementer, så sitet stadig ser pænt ud, når det kommer ned på den lille mobilskærm. Dette gælder f.eks. for store billedslidere, lange menuelementer og så videre. Dette er metoden, jeg har valgt. Progressive enhancement Denne metode går den anden vej rundt, og hvor man tidligere oftere brugte Graceful degradation, ser man nu oftere og oftere denne metode brugt. Her bygger man først hele mobilsitet og tilføjer løbende elementer, efterhånden som sitet bliver større. Denne metode er blevet populær, da flere og flere surfer fra deres telefoner og tablets. Nyeste statistik viser at mobile browsere peaker om eftermiddagen og aftenen, det vil altså sige, at folk ikke længere går hjem fra arbejde og tænder deres stationære computere, men i stedet klarer det meste fra de mobile enheder.
CSS3 elementer / HTML5-tags CSS
RUNDE HJØRNER/TRANSPERANS
Med CSS3 er det blevet muligt at style meget nemmere, end det var tidligere. Hvor man tidligere skulle lave skygger, runde hjørner, gradieringer, transperans og så videre i Photoshop, er det nu blevet muligt at lave det direkte i Stylesheetet. På den måde sparer man plads og gør loadetiden markant kortere.
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
Med det nye HTML5-tag kaldet <strong>, har jeg lavet mine fremhævninger. Disse er stylet direkte på strong-tagget i stylesheetet. Farven har jeg efterfølgende ændret direkte i HTML’en med tagget <font color> – på den måde opnår jeg samme grafiske stil som i det fysiske magasin. HTML
CSS
STRONG TAG
Google fonts Hvor man tidligere var meget låst i sit fontvalg, har man nu også muligheden for at anvende de såkaldte google fonts. Disse linkes direkte i HTML head sektionen og når sitet indlæses, ved browseren at den skal hente fontene hos Googles fontserver. På den måde har man et hav af spændende fonte at arbejde med. Man laver altid en fallback i tilfælde af, at Google fonten ikke indlæses. Jeg har valgt en sans serif.
HEAD SEKTION
CSS
Det ses også, at jeg anvender enheden em til at styre min skriftstørrelse. På den måde er fonten uafhængig af, hvor mange pixels, den enkelte skærm viser. 1 em svarer til 100% størrelsen altså 12px.
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
GOOGLE FONTE I BRUG
SEO – Søgemaskine optimering Da man ønsker, at folk finder ens site, er man nødt til at tænke SEO ind i sin siteopbygning. SEO er søgemaskine optimering, man vil altså rigtig gerne have Google (og andre) til at lægge mærke til ens site og fortælle folk, at det eksisterer, når man søger. For at Google skal se en, er der nogle vigtige grundregler, man skal huske: Titel Det, du skriver her, vises i toppen af browseren, når du befinder dig på sitet. Meta name description Dette tag indsættes umiddelbart efter sitets titel og hjælper Google med at tyde, hvad der findes på sitet. Denne tekst skal altså være kort, præcis og sælge sitet.
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html
Alt tags på billeder Det er vigtigt at have alternative tags (alt tags) på alle billeder – på den måde kan Google også bruge dine billeder i en evt. billedsøgning. Samtidig er det denne tekst, der vises ved hover på blandt andet Chrome og samtidig er det denne tekst, der vises i tilfælde af, at sitet ikke kan loade.
SEO OPTIMERING
Det færdige site – mock-up
GRAFISK WORKFLOW www.mortenharbo.dk/html/lakrids.html