MHK - Grafisk Workflow

GRAFISK WORKFLOW

OpgavenDa 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, hvil-ket giver en masse spændende nye de-signmæ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 mobil-telefon, iPad eller computer.

Programvalg• Photoshop – Billedredigering• Illustrator – Visuel opbygning• Dreamweaver – Opbygning af det fungerende site.

MålgruppenSom ved det trykte magasin er min mål-gruppe 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 pub-likum end en tryksag, da de hellere vil se opskrifterne online end at fylde køkkenet med opskriftsbøger og -blade.

BrugervenlighedSitet 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 regi-sterer, 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.

BrowservenlighedDa 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

Som en del af min arbejdsproces anvender jeg comments .Jeg arbejdede indledningsvist med en sli-der ø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 – nor-malt 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 bi-beholde den, for at vise hvordan comment også kan anvendes.

Semantisk opbygningDet 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.

KvalitetsvurderingJeg gennemgår løbende koden for hele tiden at holde den så overskuelig som mu-ligt, dette gør det nemmere at holde styr på sitet og finde evt. fejl eller rettelser.Jeg arbejder fra stor mod lille – altså fra si-tet 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 gerneskulle gengives i høj kvalitet.Det færdige site har en overskuelig og frisk brugerflade og har en god sammen-hæng med det trykte magasin.Sitet afspejler tydeligt, hvor stor bruger-venlighed 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.

GRAFISK WORKFLOWwww.mortenharbo.dk/html/lakrids.html

Idéudvikling – SkitserIdé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.


Idéudvikling – genbrugte elementerJeg har genbrugt følgende elementer fra magasinet for at skabe en fælles genken-delighed.

- Farver på baggrund og overskrifter- Opstilling af tekster- Dottet ramme- Store billeder


ElementerInden 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 forskelli-ge elementer til at opføre sig på henholds-vis desktop og på mobilskærm.

GRAFISK WORKFLOWwww.mortenharbo.dk/html/lakrids.html IMG

DESKTOP

IMG

LOGO

Menu

Rettens navn

Container

Opskriften

Opskriften

MOBILE

IMG

IMG

LOGO

Menu

Rettens navn

Opskriften

Opskriften

Container

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 lakrids-rødderne er lavet fixed – altså bliver det hele tiden stående på den samme posi-tion. Dette giver en parallex effekt af at opskrifterne flyder hen over baggrunden.Denne effekt, samt den to-spaltede op-bygning, har jeg valgt at ændre i mobil- versionen, her ses altså blot en blågrå baggrund og en 1-spaltet opbygning.

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æm-pet, igen for at den ikke skal stjæle op-mærksomheden fra opskrifterne.


KONTAKT FORMULAR

Responsive - MediaqueryFor 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:

Graceful degradationPå denne måde bygger man fra desktop størrelsen mod mobilstørrelsen – altså fra stor mod lille.Man fjerner med andre ord løbende ele-menter, 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 enhancementDenne 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 tab-lets. Nyeste statistik viser at mobile brow-sere peaker om eftermiddagen og aftenen, det vil altså sige, at folk ikke længere går hjem fra arbejde og tænder deres statio-nære computere, men i stedet klarer det meste fra de mobile enheder.


CSS3 elementer / HTML5-tags


RUNDE HJØRNER/TRANSPERANS

STRONG TAG

HTML

CSS

CSS

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.

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 di-rekte i HTML’en med tagget <font color> – på den måde opnår jeg samme grafiske stil som i det fysiske magasin.

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 sektio-nen 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ænden-de 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.

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.

HEAD SEKTION

GOOGLE FONTE I BRUG

CSS

SEO – Søgemaskine optimering


Da man ønsker, at folk finder ens site, er man nødt til at tænke SEO ind i sin siteop-bygning. 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:

TitelDet, du skriver her, vises i toppen af browseren, når du befinder dig på sitet.

Meta name descriptionDette 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.

Alt tags på billederDet 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


MHK - Grafisk Workflow

Documents

Transcript of MHK - Grafisk Workflow