1. No category

Grafisk workflow
Hjemmeside til Bærkompagniet
Dokumentation
Opgaven
Arbejdsproces
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.
• Møde
Designkrav
• Sitet
skal være indbydende og enkel
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
• Der
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.
med kunden
• Inspirationssøgning
på nettet
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
• Håndtegnede
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
60
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
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
61
Skitser
Flowchart
index.html
om.html
produkter.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
forhandler.html
kontakt.html
tak.html
tak.html
Typografi
Farver
Afprøvede typografier
Ubuntu
Open Sans
Velkommen til
Bærkompagniet
Velkommen til
Bærkompagniet
Titillium Web
News Cycle
Velkommen til
Bærkompagniet
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.
Sort
Grå
Hex#000000
Hex#D9D9D9
100 %
100 %
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
75 %
50 %
25 %
75 %
50 %
25 %
Bruges til tekst generelt og hover
på knapper samt i menuen.
Bruges til baggrund i footer.
Grøn
Orange
Hex#8AB867
Hex#BD4F20
100 %
100%
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890@%&(),.:!?
Titillium Web Regular
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
75 %
50 %
25 %
Bruges til bånd under slideshow,
border i header, samt streger i
mobilmenu.
75 %
50 %
25 %
Bruges til fremhævning af tekster,
såsom overskrifter og menu.
1234567890@%&(),.:!?
Typografi og farver
63
Layout i Photoshop
Opbygning
Sitet er opbygget i 960 Grid, hvor jeg har brugt 12 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
Header
100% x min 135 px
1%
1%
Logo
165 x 112 px
(billedets faktiske
størrelse)
Section header
max 960 px x variabel højde
1%
50 px
1%
Nav
75% x variabel højde
1%
Logo
165 x 112 px
(billedets faktiske
størrelse)
Section header
max 960 px x variabel højde
2%
2%
6%
6%
2%
Grønt bånd
100% x variabel højde
Her er en H1
2%
2%
Container
max 960 px x variabel højde
Article.text
100% x variabel højde
6%
2%
1%
1%
Banner
100% x variabel højde
Grønt bånd
100% x variabel højde
Container
max 960 px x variabel højde
50 px
Nav
75% x variabel højde
2%
Banner
100% x variabel højde
Header
100% x min 135 px
1%
Billede i box
100% x auto
Billede i box
100% x auto
Billede i box
100% x auto
Box
23% x variabel højde
Box
23% x variabel højde
Box
23% x variabel højde
Box
23% x variabel højde
1%
1%
6%
Billede i box
100% x auto
6%
1%
Footer
100% x variabel højde
1%
2%
Address
max 960 px x variabel højde
1%
6%
6%
1%
2%
Address
max 960 px x variabel højde
Footer
100% x variabel højde
Skelet - index og om Bærkompagniet
65
Skelet - produkter og forhandler/kontakt
Header
100% x min 135 px
1%
1%
Logo
165 x 112 px
(billedets faktiske
størrelse)
Header
100% x min 135 px
1%
Section header
max 960 px x variabel højde
50 px
1%
Nav
75% x variabel højde
1%
Logo
165 x 112 px
(billedets faktiske
størrelse)
Section header
max 960 px x variabel højde
Banner
100% x variabel højde
2%
2%
2%
Container
max 960 px x variabel højde
6%
6% 2%
Grønt bånd
100% x variabel højde
Her er en H1
1%
1%
Container
max 960 px x variabel højde
Article.text
100% x variabel højde
6%
6%
Article
100% x variabel højde
1%
Billede i box
40% x auto
1%
Nav
75% x variabel højde
Banner
100% x variabel højde
Grønt bånd
100% x variabel højde
Her er en H1
50 px
Her er en1%H2
1%
Box
100% x min 330 px
5%
Section.mailform
445 px x variabel højde
float right
Billede i box
40% x auto
6%
5%
Section.contacttext
max 300 px x variabel højde
float left
Box
100% x min 330 px
5%
5%
6%
1%
2%
Address
max 960 px x variabel højde
Footer
100% x variabel højde
5%
Billede i box
40% x auto
5%
Box
100% x min 330 px
5%
Billede i box
40% x auto
6%
10%
Box
100% x min 330 px
6%
1%
2%
Address
max 960 px x variabel højde
Footer
100% x variabel højde
66
Skelet - produkter og forhandler/kontakt
1%
1%
Storyboard index.html
Elementer generelt
2
1
1
baer-logo.png
3
Slideshow med 5 billeder :
baer-banner1.jpg
baer-banner2.jpg
baer-banner3.jpg
baer-banner4.jpg
baer-banner5.jpg
4
3
Alle tekster på sitet er samlet i samme dokument :
Bærkompagniet.doc
4
Actions generelt
1
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
Elementer index.html
5
6
7
8
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
1
3
Elementer
1
4
Det samlede tekstdokument : Bærkompagniet.doc
5
68
Storyboard om.html og produkter.html
1
1
Det samlede
tekstdokument :
Bærkompagniet.doc
2
produkt-solbaer.jpg
3
produkt-tranebaer.jpg
4
produkt-gojibaer.jpg
5
produkt-granataeble.jpg
Storyboard forhandler.html
Storyboard kontakt.html
1
2
1
2
3
3
Elementer
4
5
Elementer
1
Det samlede tekstdokument : Bærkompagniet.doc
1
Det samlede tekstdokument : Bærkompagniet.doc
2
Mailformular
4
Mailformular
Actions
3
Send knap
Actions
Sender udfyldt formular. Redirect til tak.html
2
[email protected] Email link. Åbner ny mail besked i mailprogram
3
[email protected]
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
Skærm
Sitet er responsivt, og for at gøre dette har jeg benyttet mål i procenter, media queries og
viewport meta tag.
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.
Mobil
(max-width: 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.
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:481px) and (max-width:800px)”>
<!-- mobile -->
<link href=”mobile.css” rel=”stylesheet” type=”text/css”
media=”only screen and (max-width:480px)”>
70
Responsivt design
Tablet
(min-width: 481 px)
(max-width: 800 px)
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 H1.
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 :
æ&aelig;
ø&oslash;
å&aring;
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
71
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’);
}
});
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,
$(’li’).on(’click’, function(e) {
hvis browservinduet er mindre end var w = $(window).width();
800 px bred.
if(w < 800 ) {
menu.slideToggle();
}
});
});
</script>
72
Mobilmenu
Det færdige produkt
Se websitet på
www.bærkompagniet.com
Det færdige produkt
73