Grafisk workflow Hjemmeside til Bærkompagniet
Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne have mulighed for at kontakte dem. Sitet måtte gerne være responsive, så det kunne tilpasse sig mobileenheder. Designkrav Sitet skal være indbydende og enkel Der skal være banner med frugter og frodige landskaber, samt farver som matcher bærkompagniets logo Brugervenlig - nem at navigere rundt på Det skal være overskuelig og informerende Det skal være nemt at finde kontaktinformationerne Layout Sitet er responsive, så det tilpasser sig mobileenheder her er der brugt Gracefull degradation Menuen ændre sig til en mobilmenu når browservinduet er under 800 px bred for overskuelighed Links med hover effekt for brugervenlighed Slideshow med stemningsbilleder Der er brugt semantisk HTML Box-shadow på header for at give en god adskillelse til resten af sitet. Der er brugt fonten Titillium Web, da denne er let læselig på skærm Stringent opsætning med bokse Usability Sitet er enkelt, overskueligt og nemt at navigere rundt på. Der er korte afsnit i teksten, så det ikke bliver for tungt at læse. Knappen ved kontakt formularen har en god størrelse og er fremhævet med orange for størrer synlighed. Det er nemt at finde frem til kontaktoplysningerne i menuen. Arbejdsproces Møde med kunden Inspirationssøgning på nettet Håndtegnede skitser Layout i Photoshop, som præsenteres for kunden og godkendes Udarbejdelse af flowchart, skelet og storyboard Programmering af sitet med brug af HTML5, CSS3 og jquery Tilpasning til tablet og mobil (mål i %, media queries, viewport meta tag) Søgeoptimering ved brug af meta tags (title, keywords, discription) Browserkompatibilitet testet Demo uploadet til kunden Tilretninger af kode og tekster Sitet er godkendt og uploades på domæne Browserkompatibilitet Sitet er testet i Chrome, Firefox, Safari og Internet Explorer, og her fungerer det som det skal, og jeg har tjekket på caniuse.com for at se om de forskellige browsere understøtter HTML5 og CSS3. Der kan være lidt problemer med Internet explorer 8 og 9, da disse er ældre versioner, men jeg har brugt præfiks i min CSS3 og HTML5 shiv for at undgå dette. Kvalitetsvurdering Jeg er blevet rigtig tilfreds med det færdige resultat, da sitet er blevet overskueligt og nemt at navigere rundt på. Det har fanget kundens ønske om at responsivt design, som er enkelt og indbydende og det lever op til kundens forventninger. Kunden er glad og tilfreds med både layout og funktionalitet af sitet. Til kodning af websitet har der været nogle udfordringer blandt andet i forhold til mobilmenuen, som tog noget tid at få til at virke på den måde, som jeg gerne ville. Teksten i menuen lavede et indryk, som jeg ikke kunne få til at gå væk, men fandt ud af, at det var en fast bredde i skærmkodningen, som jeg havde fået tastet og som ikke skulle være der. Jeg synes at mobilmenuen til slut er blevet brugervenlig og overskuelig. Dokumentation 59
Procesbeskrivelse Møde med kunden Inspirationssøgning på nettet Håndtegnede skitser Layout forslag i photoshop Layoutet præsenteret for kunden og godkendes Browserkompatibilitet testet Søgeoptimering med meta tags Tilpasning til tablet og mobil - media queries Programmering med HTML5, CSS og jquery Udarbejdelse af flowchart Demo uploadet til kunden Tekst og kode tilrettes Godkendt og uploadet Opgaven er færdig 60 Procesbeskrivelse
Inspirationssøgning Det giver et flot udtryk visuelt, at der er brugt billeder i kompetencekasserne. Banneret i fuld bredde giver en storhed til sitet, som giver en god harmoni. De lyse farver giver et rent og neutralt udtryk. Inspirationssøgning 6
Skitser Flowchart index.html om.html produkter.html forhandler.html kontakt.html tak.html tak.html Denne skitser vil jeg arbejde videre med. Banneret med fuld bredde giver storhed og stemningsbillederne vil komme til sin ret her. Desuden er præsentationen af produkterne i de 4 kasser gode, da flaskerne vises og ikke kun frugter og bær. 62 Skitser og flowchart
Typografi Farver Afprøvede typografier Ubuntu Velkommen til Bærkompagniet Open Sans Velkommen til Bærkompagniet Farverne til websitet er valgt efter Bærkompagniets logo, så der er en rød tråd. Derfor har jeg brugt den orange logofarve til detaljer, så som fremhævning af overskrifter, og den grønne farve som border i header, samt som et bånd under slideshowet. De to farver følger godt i tråd med billederne af frugter og bær, og giver stemningen af natur, frodige bær og friske drikke. Derudover har jeg benyttet hvid som baggrund og en lys grå farve i footeren for at holde det overordnede design rent og lyst. Til tekst generelt har jeg brugt sort, da den er nem at læse på den hvide baggrund. Titillium Web Velkommen til Bærkompagniet News Cycle Velkommen til Bærkompagniet Sort Hex #000000 Grå Hex #D9D9D9 Titillium Web har en god harmoni. Den er letlæselig, er ikke for condensed, og er ikke for rund i o et. Den er også en god kontrast til de meget runde former i Bærkompagniets logo. Valgt typografi Titillium Web Light a b c d e f g h i j k l m n o p q r s t u v w x y z 00 % 75 % 50 % 25 % Bruges til tekst generelt og hover på knapper samt i menuen. 00 % 75 % 50 % 25 % Bruges til baggrund i footer. a b c d e f g h i j k l m n o p q r s t u v w x y z 2 3 4 5 6 7 8 9 0 @ % & ( ),. :!? Grøn Hex #8AB867 Orange Hex #BD4F20 Titillium Web Regular 00 % 75 % 50 % 25 % 00% 75 % 50 % 25 % a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 2 3 4 5 6 7 8 9 0 @ % & ( ),. :!? Bruges til bånd under slideshow, border i header, samt streger i mobilmenu. Bruges til fremhævning af tekster, såsom overskrifter og menu. Typografi og farver 63
Layout i Photoshop Opbygning Sitet er opbygget i 960 Grid, hvor jeg har brugt 2 kolonner, da det ikke er et komplekst design, der skal laves, så behovet var ikke til mere. 960 Grid er en action i Photoshop, som gør det nemt at skabe en ensartet strutur på sitet, og lave ensartede afstande. Dog er 960 Grid ikke optimalt, når der skal laves et responsivt design, da man i et responsivt design arbejder med procenter i stedet for faste pixelmål. Så fra Photoshop filen og til det endelige website er der nogle forskelle i afstande og størrelser, og det skal man selvfølgelig holde inmente, men når der skal laves et designudkast til kunden er 960 Grid nemt og overskueligt at arbejde med. 64 Layout i Photoshop
Skelet - index og om Bærkompagniet Logo 65 x 2 px (billedets faktiske størrelse) Header 00% x min 35 px Section header max 960 px x variabel højde 50 px Nav 75% x variabel højde Logo 65 x 2 px (billedets faktiske størrelse) Header 00% x min 35 px Section header max 960 px x variabel højde 50 px Nav 75% x variabel højde Banner Banner Container max 960 px x variabel højde 2% 2% Grønt bånd Her er en H 2% 2% Grønt bånd Article.text Container max 960 px x variabel højde 2% 2% Billede i box Billede i box Billede i box Billede i box 00% x auto 00% x auto 00% x auto 00% x auto 2% Box 23% x variabel højde Box 23% x variabel højde Box 23% x variabel højde Box 23% x variabel højde 2% Address max 960 px x variabel højde Footer 2% Address max 960 px x variabel højde Footer Skelet - index og om Bærkompagniet 65
Skelet - produkter og forhandler/kontakt Logo 65 x 2 px (billedets faktiske størrelse) Header 00% x min 35 px Section header max 960 px x variabel højde 50 px Nav 75% x variabel højde Logo 65 x 2 px (billedets faktiske størrelse) Header 00% x min 35 px Section header max 960 px x variabel højde 50 px Nav 75% x variabel højde Banner Banner Her er en H 2% 2% Grønt bånd Article Container max 960 px x variabel højde Her er en H Her er en H2 2% 2% Grønt bånd Billede i box 40% x auto 5% Box 00% x min 330 px 2% Address max 960 px x variabel højde 5% Billede i box 40% x auto 5% Box 00% x min 330 px 2% Address max 960 px x variabel højde 5% Billede i box 40% x auto 5% Box 00% x min 330 px 5% Billede i box 40% x auto 5% Box 00% x min 330 px 0% Article.text Container max 960 px x variabel højde Section.contacttext max 300 px x variabel højde float left Section.mailform 445 px x variabel højde float right Footer Footer 66 Skelet - produkter og forhandler/kontakt
Storyboard index.html Elementer generelt baer-logo.png 2 3 Slideshow med 5 billeder : baer-banner.jpg baer-banner2.jpg baer-banner3.jpg baer-banner4.jpg baer-banner5.jpg 3 4 Alle tekster på sitet er samlet i samme dokument : Bærkompagniet.doc 4 Actions generelt baer-logo.png Linker til index.html 2 Forside Om Bærkompagniet Produkter Forhandler Kontakt Linker til index.html Linker til om.html Linker til produkter.html Linker til forhandler.html Linker til kontakt.html 5 6 7 8 Elementer index.html Actions index.html 5 drik-solbaer.jpg 5 drik-solbaer.jpg Linker til produkter.html 6 drik-tranebaer.jpg 6 drik-tranebaer.jpg Linker til produkter.html 7 drik-gojibaer.jpg 7 drik-gojibaer.jpg Linker til produkter.html 8 drik-granataeblejpg 8 drik-granataeblejpg Linker til produkter.html Storyboard index.html 67
Storyboard om.html Storyboard produkter.html Elementer 2 3 4 5 Det samlede tekstdokument : Bærkompagniet.doc produkt-solbaer.jpg produkt-tranebaer.jpg produkt-gojibaer.jpg produkt-granataeble.jpg 2 3 Elementer 4 Det samlede tekstdokument : Bærkompagniet.doc 5 68 Storyboard om.html og produkter.html
Storyboard forhandler.html Storyboard kontakt.html 2 2 3 4 3 5 Elementer Elementer Det samlede tekstdokument : Bærkompagniet.doc 2 Mailformular 4 Det samlede tekstdokument : Bærkompagniet.doc Mailformular Actions Actions 3 Send knap Sender udfyldt formular. Redirect til tak.html 2 lars@beveragegroup.eu Email link. Åbner ny mail besked i mailprogram 3 rasmus@bentzon.me Email link. Åbner ny mail besked i mailprogram 5 Send knap Sender udfyldt formular. Redirect til tak.html Storyboard forhandler.html og kontakt.html 69
Responsivt design Sitet er responsivt, og for at gøre dette har jeg benyttet mål i procenter, media queries og viewport meta tag. Skærm Mål i procenter For at sitet skal være fleksibelt opgives bredderne på elementerne i procenter i stedet for i faste pixels. Det vil sige, hvis et element opgives til at være 50 % i bredden, så er det 50 % af bredden på browservinduet eller 50 % af bredden på det element, som det er placeret inden i. Hvis et element skal begrænses til max at være en bestemt størrelse, så sættes der en max-width i et antal pixels. Media queries Media queries bruges til at bestemme, hvornår indholdet skal ændre sig i forhold til bestemte skærmstørrelser. Via media queries oprettes der forskellige CSS stylesheets, hvori der kan bestemmes, at f.eks. mobilversionen skal være i en kolonne ved en max-width på 480 px. Viewport meta tag For at der kan tages højde for mobile enheders størrelse og opløsning, skal der indsættes view meta tag i head delen på en hjemmeside. Dette betyder, at de definerede media queries ikke bliver vist på f.eks. mobilen, hvis der ikke fortælles, at sitet skal forholde sig til den faktiske størrelse, som mobilen har. Dette fortælles med viewport meta tag. Mobil (max-width: 480 px) Her ses koden på viewtag meta tag, media queries og mine 3 CSS stylesheets <meta name= viewport content= width=device-width > <!-- screen --> <link href= styles.css rel= stylesheet type= text/css > <!-- tablet --> <link href= tablet.css rel= stylesheet type= text/css media= only screen and (min-width:48px) and (max-width:800px) > <!-- mobile --> <link href= mobile.css rel= stylesheet type= text/css media= only screen and (max-width:480px) > Tablet (min-width: 48 px) (max-width: 800 px) 70 Responsivt design
Html og CSS Søgeoptimering Jeg har på websitet lavet søgeoptimering ved at tilføje title, description og keywords i headeren på alle siderne af websitet. Desuden har jeg tilføjet alt= -tekst på billeder og angivet H. Her ses skærmdumps af HTML-koden og CSS en, som viser brugen af kommentarer, samt HTML-koder for æ, ø og å. HTML-kodning for æ, ø og å Selvom min tegnkodning står til UTF-8, og dette burde betyde, at æ, ø og å bliver vist korrekt, så har jeg været inde og erstatte disse bogstaver med deres HTML-kode. På denne måde sikrer jeg mig, at browseren viser æ, ø og å korrekt. Da jeg kun har æ, ø og å i minuskler, så ser HTML-koderne således ud : æ ø å æ ø å Kommentarer i koden For overskuelighed i HTML-koden og i CSS en, så har jeg tilføjet kommentarer. Det gør det nemmere for andre at overtage dokumenterne og gennemskue, hvor koderne starter og slutter. Desuden er kommentarerne skrevet på engelsk, så hvis dokumenterne skal sendes til udlandet, så kan en udenlandsk person også læse dem. Html og CSS 7
Mobilmenu Når sitet vises på en bredde på 800 px eller derunder, ændre visningen af menuen sig, hvor man ved klik kan få vist menupunkterne. Dette er valgt for at spare plads til visning af de øvrige elementer og for at gøre siden mere brugervenlig på de mobileenheder. Mobilmenuen er lavet via CSS og jquery. Her ses koden på javasriptet <script> $(function() { var pull = $( #pull ); menu = $( nav ul ); $(pull).on( click, function(e) { e.preventdefault(); menu.slidetoggle(); }); $(window).resize(function(){ var w = $(this).width(); if(w > 800 && menu.is( :hidden )) { menu.removeattr( style ); } }); $( li ).on( click, function(e) { var w = $(window).width(); if(w < 800 ) { menu.slidetoggle(); } }); Der skal ske en funktion for variablen pull indeholdende en id #pull og for menu indeholdende nav ul Ved klik på variablen pull folder #pull sig ud, og ved klik igen folder den sig ind Hvis menuen er skjult, når browservinduet er over 800 px bred, skal denne funktion fjernes fra stylen, når browservinduet bliver mindre end 800 px bred. Ved klik på li folder menuen sig ind, hvis browservinduet er mindre end 800 px bred. }); </script> 72 Mobilmenu
Det færdige produkt Se websitet på www.bærkompagniet.com Det færdige produkt 73