RESPONSIVE WEBSITE
GRAFISK WORKFLOW
DOKUMENTATION
OPGAVEN
Opgaven gik ud på at designe og kode et responsive website til sommerhuset Brink Møllegaard. Websitet skulle præsentere og informere besøgende om huset og området og dermed gøre det nemmere at leje ud til feriegæster. Det var et krav at produktet skulle være tilpasset til de mest brugte platforme, såsom smartphone, tablet, desktop og laptop. Der skulle dog lægges mest vægt på desktop, så derfor blev strategien graceful degradation brugt. Opgaven har jeg udvalgt til min portfolio, fordi jeg har været med fra start til slut; kundemøde, designproces af layout og logo, billedbehandling af de udvalgte fotos, kodning, testning og til slut overlevering af sitet.
2
GRAFISK WORKFLOW
ARBEJDSPROCES
Søge inspiration
Billedredigering
Feedback
Kodning
Se andre websites med sommerhusudlejning.
Klargøre billederne af sommerhuset fra fotoshootet.
Tilpasser layout efter kundens ønske og får den endelige tekst som indsættes.
Sitet kodes i Dreamweaver og testes i forskellige browsere.
Modtager opgaven
Idéudvikling
Logo
Optimeres til web
Noter og frimærkeskitser udarbejdes.
Udarbejder logo ud fra et billede af huset.
PSD-filer lægges op på Adobe Creative Cloud Extract der gør bl.a. udklipning nemt af grafik og tekst.
SEO optimering
Flowchart Få overblik over siderne og hvordan de skal være placeret i forhold til hinanden.
Kundemøde Diskutere indhold, layout, tage billeder af huset.
Skelet & storyboard
Første udkast præsenteres
Mockups Redegørelse for målgruppe
Afprøver farver, fonte og billeder i opbygningen i Photoshop.
Publish website
Udformes, hvis en anden skulle overtage opgaven.
Anden udkast præsenteres & godkendes
Uploader på det tilkøbte domæne.
Breakpoints Opretter Media queries og tester på smartphone og tablet.
GRAFISK WORKFLOW
3
INSPIRATION
Der blev søgt pü forskellige websites og andre med sommerhusudlejning til inspiration.
Menu, stort forsidebillede og knap.
Kort med placering.
Priser og kalender med overblik over frie datoer. Galleri med billeder af faceliteter og omgivelser.
4
GRAFISK WORKFLOW
IDÉUDVIKLING
Noter nedskrives og frimærkeskitser tegnes i idéudviklingen med AIDA-modellen i tankerne. Siten skulle være funktionel, effektiv, samt give en god brugeroplevelse til målgruppen, som er mænd og kvinder, typisk i 30 års alderen fra Danmark og Tyskland, der skal på ferie med venner eller familie og som holder af oplevelser i naturen. Jeg har taget udgangspunkt i skitserne og herefter udarbejdet layoutet i Photoshop.
Attention Stort billede med overskrift fanger øjet.
Idéer til menupunkter og indhold noteres ned.
Interest Introtekst fastholder interessen.
Desire Ønsker at se mere og scroller ned.
Action Brugeren klikker sig videre her for mere info.
Frimærkeskitser over forside, informations-, galleri- og aktivitetsside bliver udvalgt.
j
h
j
h
j
h
GRAFISK WORKFLOW
5
FLOWCHART
Der udarbejdes et flowchart for at få overblik over de muligheder som brugeren skal have i denne skærmbaseret produktion. Strukturen følger en logisk tankegang som er baseret på konventioner omkring navigation. Jeg har lavet et non-lineært forløb, hvor brugeren har mulighed for at navigere til alle sider ved hjælp af menuen. Samtidig har jeg holdt hele websitet så simpelt som muligt, så brugerne ikke kan bevæge sig for dybt ned i sitet og fare vild.
RIBE
TØNDER
RØMØ SKÆRBÆK FRITIDSCENTER
Intern link Ekstern link
GOKART CENTER SKÆRBÆK BALLUM FODBOLDGOLF
FORSIDE
INFORMATIONER
GALLERI
NATIONALPARK VADEHAVET
TAK
AKTIVITETER & SEVÆRDIGHEDER
BOOKING
INDEX: DK
INDEX: DE BOOKING & PREISE
AKTIVITÄTEN & SEHENSWÜRDIGKEITEN
DANKE
NATIONALPARK WATTENMEER BALLUM FUSSBALLGOLF GOKART CENTER SKÆRBÆK SKÆRBÆK FREIZEITCENTER
RÖM
TONDERN
RIBE
6
GRAFISK WORKFLOW
GALERIE
INFORMATIONEN
VORDERSEITE
FONTE & FARVER Fontvalg
Farvevalg
Grafik
Til menupunkterne, brødtekst og knapper blev Helvetica Neue brugt som er en simpel, neutral og en harmonisk grotesk font der er meget læsbar. Til kontrast har jeg valgt Cantata One til overskrifterne h1 og h2, som har en rund og blød form i forhold til Helvetica Neue der er mere hård og kantet. Cantata One har en høj kontrast og giver association til luksus og historie med hjælp fra sine seriffer. Fonten er en Google font og hentes fra Googles server, via et link som er indsat i head. I tilfælde af nogle browsere er forældede og dermed ikke understøtter fontene, er der defineret et alternativt fontvalg ved hjælp af font-family CSS.
Der er brugt lyse og indbydende farver, samt enkelte farver der står i skarp kontrast til resten af looket. Farverne er colorpicked fra billeder af huset, så der skabes genkendelse mellem designet og billederne af huset. Jeg har brugt en hvid baggrund i menulinjen, for det rene udtryk. Til kontrast til den hvide, har jeg valgt en sort til det meste af teksterne. Den er ikke 100% sort, da det ikke er rart for øjet op imod den hvide. Orange er borderen der adskiller menuen fra resten af sidens indhold. Knapperne er også orange, da det er en iøjefaldende farve der oveni symbolisere sol, sjov og varme. I footeren er der brugt en sandfarve, der kan give en stemning af strand, udendørs, pålidelighed, stabilitet og relaterer til husets nye interiør. Turkis er brugt på en faktaboks da den matcher en stol på et billede på samme site og giver glæde og ro.
Alt grafik er gemt til web via Save for web and device i Photoshop til .jpeg eller .png og derefter har jeg kørt billederne igennem ImageOptim, som er et gratis værktøj til at optimere billeder, for at de fylder mindst mulig uden at miste billedkvalitet. For at få en tekstur på min baggrund, bruges en grafik på 400 x 400 px der gentager sig. Man kan forestille sig at det er et tapet på en væg med et gammelt mønster, med et nyt tvist. Logoet blev lavet i Illustrator, ud fra et billede, som der var taget på fotoshootet. Det endte ud som en png-fil så baggrunden var gennemsigtig.
Tekstur: Helvetica Neue:
Brink Møllegaard Cantata One:
Brink Møllegaard
Farvekode HEX: #fffffff
Logofremstilling: Farvekode HEX: #282828
Farvekode HEX: #ff6600
Farvekode HEX: #cc5200
Farvekode HEX: #e6e3da
Farvekode HEX: #12b2be
GRAFISK WORKFLOW
7
SKELET
For at websitet skal kunne fungere på mange forskellige platforme, er det vigtigt at lave det responsive så det er fleksibelt og dermed undgår horisontale scrollbars. Til det har jeg brugt Foundation 5 som er et avanceret responsive front-end framework. Jeg har med det benyttet mig af tre redskaber som er fluid grids, media queries og viewport meta tag. Til højre vises skelet over forsiden af mit website, med udgangspunkt i laptop og smartphone.
986 px 99 px
width: 100%
240 x 83 px
320 px
545 px
Fluid grids For at tilpasse et browservindue, uanset størrelse, skal bredden angives i procent i stedet for en statisk bredde i pixels. Det vil sige at hvis et element har en bredde på 50 %, så er det 50 % af browservinduets bredde, hvis det er det yderste af sitets elementer, ellers er det 50 % af bredden på det element det er placeret indeni. For at kunne have lidt kontrol over hvor bredt sitet bliver, så har jeg angivet et max antal pixels med max-width.
15 px
30 px
30 px
314 px
Media queries Media queries er en slags betingelser, som jeg har indsat i mit CSS og derved ændre sig efter skærmstørrelsen. Disse betingelse kaldes for et breakpoint, som jeg har brugt til at flytte rundt på elementer, ændre deres design eller måske fjerne dem helt fra designet. F.eks. har jeg gjort designet smallere til smartphone med media queries, ved at gå fra to kolonner til en kolonne. Og til mindre enheder har jeg indsat en dropdown menu ved hjælp af et toggle script.
100 x 38 px
54 x 83 px
766 px
509 px 290 px
470 px
30 px
Viewport meta tag Der findes mange websites som ikke er optimeret til mobile enheder. De mobile enheder viser derfor websites som om de har en stor desktop skærm på 980 px, så man kan se hele websitet. For at blive påvirket af mine media query, skal jeg fortælle browseren at den skal vise siden i den størrelse som enheden i virkeligheden har og det gøres ved at indsætte dette tag i min header:
314 px
40 px
470 px 162 x 65 px
85 px
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0“ />
10 px
194 x 65 px
290 x 65 px
width: 100% Laptop: 1437 x 547 px 40 px
Breakpoints: max-width 641 px max-width 1025 px
8
GRAFISK WORKFLOW
125 px
250 x 25 px Smartphone: 320 x 568 px
STORYBOARD
Her vises et storyboard af forsiden, der har til hensigt at give udvikleren overblik over den enkelte skĂŚrmsituation - hvilke grafikker der er brugt og hvor elementerne linker til. Grafik og tekst hentes fra nettet pĂĽ Adobe Creative Cloud Extract, hvor elementerne er nemme at udklippe fra PSD-filen. 1. Link: index.html 2. Link: informationer.html 3. Link: galleri.html 4. Link: index.html, logo.png 5. Link: aktiviteter.html 6. Link: booking.html 7. Link: de/vorderseite.html, tysk-sprog.png 8. brinkmolle-forside-billede.jpg 9. contemporary_china.png 10. Link: galleri.html, sommerhus-spisebord.jpg 11. Link: informationer.html 12. Link: aktiviteter.html, spillerum.jpg 13. Link: booking.html, terrasse-med-udsigt.jpg
1
2
3
4
5
6
7
8
9
10
11 12
13
GRAFISK WORKFLOW
9
KONTAKTFORMULAR
På booking-siden har jeg lavet en kontaktformular, til en bookingforspørgsel, som brugeren kan udfylde og dernæst sendes en mail til min kunde via et ASP-script. Med tanke på UI/UX guider jeg brugeren gennem formularen, som er stylet med overskuelige inputfelter. Nedenstående ses hvordan jeg har postet en form til en mail via Wannafinds form2mail script.
<form action=“http://scripts.wannafind.dk/form2mail.asp“ method=“post“> <ul class=“kontakt“> <li> <label for=“navn“>For- og efternavn:</label> <input class=“stor-txt“ name=“navn“ type=“text“ placeholder=“f.eks. Anders Andersen“> </li> <li> <label for=“adresse“>Adresse:</label> <input class=“stor-txt“ name=“adresse“ type=“text“ placeholder=“Søndrevej 24, 6. th.“> </li> <li> <label for=“by“>Postnr. og By:</label> <input class=“stor-txt“ name=“by“ type=“text“ placeholder=“8000 Aarhus“> </li> <li> <label for=“email“>E-mail:</label> <input class=“stor-txt“ name=“email“ type=“email“ placeholder=“mail@mail.dk“> </li> <li> <label for=“Telefonnr.“>Telefonnr.:</label> <input class=“stor-txt“ name=“Telefonnr.“ type=“text“ placeholder=“12345678“> </li> <li> <label for=“antal“>Antal personer:</label> <input class=“stor-txt“ name=“antal“ type=“text“ placeholder=“5 voksne, 2 børn“> </li> <li> <label for=“lejedato“>Den ønskede dato for leje:</label> <input class=“stor-txt“ name=“lejedato“ type=“text“ placeholder=“18/07/2015 - 25/07/2015“> </li> <li> <label for=“besked“>Evt. besked eller spørgsmål:</label> <input class=“stor-txt“ name=“besked“ type=“text“ placeholder=“Skriv din besked her“> </li> <li class=“submitbutton“> <input type=“hidden“ name=“recipient“ value=“brinkmoellegaard@gmail.com“> <input type=“hidden“ name=“fromaddress“ value=“brinkmoellegaard@gmail.com“> <input type=“hidden“ name=“subject“ value=“Mail sendt gennem brinkmoellegaard.dk“> <input type=“hidden“ name=“redirect“ value=“http://brinkmoellegaard.dk/tak.html“> <input class=“knap“ name=“send“ type=“submit“ value=“Send forespørgsel til booking“> </li> </ul> </form>
10
GRAFISK WORKFLOW
Formen postes via dette script
Variabel med modtageren Afsender Emnet på mailen Hvor brugeren bliver sendt hen efter at poste formen
BROWSERKOMPATIBILITET & SEO
Browserkompatibilitet
Browser: Chrome
Browser: Firefox
Browser: Internet Explorer
Browser: Safari
Der er små forskelle på, hvordan hver enkelt browser fortolker koden på mit website, og derfor kan mit website se lidt forskelligt ud for besøgende, der bruger forskellige browsere. Jeg har generelt prøvet at undgå afhængighed af browserspecifikke funktioner, som f.eks. at regne med at en browser registrerer en indholdstype eller kodning, som jeg ikke har specificeret. I udviklingen af webdesignet, testede jeg mit websites udseende og funktionalitet på flere browsere løbende, for at sikre at alle mine besøgende får den oplevelse, jeg har anstrengt mig for at skabe. Nogle effekter virker ikke ens i alle browsere, men det er ikke et designmæssigt problem. Mit website er kompatibelt i Chrome, Firefox, Internet Explorer og Safari. Jeg testede også med Google Developers PageSpeed Insights som analyserede indholdet af websitet og kom med forslag til, hvordan siden kunne gøres hurtigere.
SEO optimering For at fremme mit websites placering i diverse søgemaskiner har jeg søgemaskineoptimeret. Jeg har optimeret ved hjælp af indhold, links, billeder og geografi. Men søgemaskineoptimering er et kontinuerligt arbejde, hvor man arbejder med, hvordan søgemaskinerne virker og hvilke kriterier, de har for at vise søgeresultater. Det er værdifuld for mig at vide hvad folk søger på, hvilke ord de bruger, når de søger og hvad, der får folk til at gå ind på websites. Derfor implementerede jeg Google Analytics så jeg kan følge trafikken på sitet. Websitet har en del konkurrenter og derfor kræver det gode title-tags på siderne, meta descriptions, h1 og h2 tags, væsentlig beskrivende indhold og alt-tags på grafikken. Title-tag skulle indeholde det vigtigste keyword og holde sig til max 69 tegn og max 156 tegn i meta description, ellers ville de blive beskåret i Google. Der er en god rækkefølge i elementerne på siderne, så som at h1 kommer før h2 og derefter kommer p, noget som Google anerkender.
GRAFISK WORKFLOW
11
KVALITETSVURDERING
Det har været en lærerig proces at designe og kode dette website. Jeg har fået erfaring med direkte kundekontakt, det at lære at forstå kundens ønske og udarbejde det til et færdigt produkt, som lever op til kundens forventninger. Det har været udfordrende at skulle kode et responsive website, da det er mange platforme det skal kunne tilpasses og det er tidskrævende, men det hele værd i sidste ende, når man får stor ros fra kunden der har fået en velbesøgt website til sommerhuset.
12
GRAFISK WORKFLOW