RESPONSIVE WEBSITE GRAFISK WORKFLOW DOKUMENTATION

Transkript

1 RESPONSIVE WEBSITE DOKUMENTATION

2 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

3 ARBEJDSPROCES Søge inspiration Se andre websites med sommerhusudlejning. Billedredigering Klargøre billederne af sommerhuset fra fotoshootet. Feedback Tilpasser layout efter kundens ønske og får den endelige tekst som indsættes. Kodning Sitet kodes i Dreamweaver og testes i forskellige browsere. Modtager opgaven Idéudvikling Noter og frimærkeskitser udarbejdes. Logo Udarbejder logo ud fra et billede af huset. Optimeres til web PSD-filer lægges op på Adobe Creative Cloud Extract der gør bl.a. udklipning nemt af grafik og tekst. SEO optimering Kundemøde Diskutere indhold, layout, tage billeder af huset. Flowchart Få overblik over siderne og hvordan de skal være placeret i forhold til hinanden. Første udkast præsenteres Skelet & storyboard Udformes, hvis en anden skulle overtage opgaven. Publish website Uploader på det tilkøbte domæne. Redegørelse for målgruppe Mockups Afprøver farver, fonte og billeder i opbygningen i Photoshop. Anden udkast præsenteres & godkendes Breakpoints Opretter Media queries og tester på smartphone og tablet. 3

4 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

5 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 5

6 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. Intern link Ekstern link RIBE TØNDER RØMØ SKÆRBÆK FRITIDSCENTER GOKART CENTER SKÆRBÆK BALLUM FODBOLDGOLF NATIONALPARK VADEHAVET TAK FORSIDE INFORMATIONER GALLERI AKTIVITETER & SEVÆRDIGHEDER BOOKING INDEX: DK INDEX: DE BOOKING & PREISE AKTIVITÄTEN & SEHENSWÜRDIGKEITEN GALERIE INFORMATIONEN VORDERSEITE DANKE NATIONALPARK WATTENMEER BALLUM FUSSBALLGOLF GOKART CENTER SKÆRBÆK SKÆRBÆK FREIZEITCENTER RÖM TONDERN RIBE 6

7 FONTE & FARVER Fontvalg 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. Helvetica Neue: Brink Møllegaard Farvevalg 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. Grafik 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: Cantata One: Brink Møllegaard Farvekode HEX: #fffffff Logofremstilling: Farvekode HEX: # Farvekode HEX: #ff6600 Farvekode HEX: #cc5200 Farvekode HEX: #e6e3da Farvekode HEX: #12b2be 7

8 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. 99 px 986 px 240 x 83 px 54 x 83 px 320 px width: 100% 100 x 38 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. 545 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. 30 px 314 px 766 px 15 px 30 px 509 px 30 px 470 px 290 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: 40 px 470 px 85 px 162 x 65 px 194 x 65 px 290 x 65 px 314 px 10 px <meta name= viewport content= width=device-width, initial-scale=1.0 /> width: 100% Laptop: 1437 x 547 px 40 px Breakpoints: max-width 641 px max-width 1025 px 125 px 250 x 25 px Smartphone: 320 x 568 px 8

9 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 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

10 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= method= post > <ul class= kontakt > <label for= navn >For- og efternavn:</label> <input class= stor-txt name= navn type= text placeholder= f.eks. Anders Andersen > <label for= adresse >Adresse:</label> <input class= stor-txt name= adresse type= text placeholder= Søndrevej 24, 6. th. > <label for= by >Postnr. og By:</label> <input class= stor-txt name= by type= text placeholder= 8000 Aarhus > <label for= > </label> <input class= stor-txt name= type= placeholder= > <label for= Telefonnr. >Telefonnr.:</label> <input class= stor-txt name= Telefonnr. type= text placeholder= > <label for= antal >Antal personer:</label> <input class= stor-txt name= antal type= text placeholder= 5 voksne, 2 børn > <label for= lejedato >Den ønskede dato for leje:</label> <input class= stor-txt name= lejedato type= text placeholder= 18/07/ /07/2015 > <label for= besked >Evt. besked eller spørgsmål:</label> <input class= stor-txt name= besked type= text placeholder= Skriv din besked her > <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= > <input class= knap name= send type= submit value= Send forespørgsel til booking > </ul> </form> Formen postes via dette script Variabel med modtageren Afsender Emnet på mailen Hvor brugeren bliver sendt hen efter at poste formen 10

11 BROWSERKOMPATIBILITET & SEO Browserkompatibilitet 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. Browser: Chrome Browser: Internet Explorer Browser: Firefox Browser: Safari 11

12 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