Download Report

GRAFISK PRODUKTION & WORKFLOW
Danielle Mandix Jensen — Svendeprøve 2013
Opgavebeskrivelse
Jeg blev kontaktet af en ejendomsmægler, der gerne ville have lavet et designforslag til en hjemmeside-idé, han skulle fremlægge. Min opgave lød på
at designe en hjemmeside der kunne ses på samtlige enheder, både web og mobil.
Briefing
„Lejlighedsvis.dk er et udlejningskoncept for ejendomme, der for en periode ikke er salgbare, men som ejeren er interesseret i at aktivere gennem korttidsudlejning.
Baggrunden er, at der i København i forbindelse med
en række konkurser inden for byggesektoren står mange
tomme lejligheder i ejendomme, der er overtaget af banker og andre kreditorer. Ejerne venter på gunstigere tider
og på, at hele ejendomme kan sælges, men kan formodes
at ville benytte den mellemliggende periode inden et salg
til at udleje enkeltlejligheder.“
Siden skal fremstå imødekommende og troværdig med
en lethed, der afspejler enkeltheden i konceptet. Strukturen skal derfor gøres så enkel som muligt, lidt ud fra tankegangen: „Din nye bolig er blot et klik væk“. Derfor skal
websiden også være let tilgængelig fra alle enheder, og et
design til en responsiv webside er klart at foretrække.
Programvalg
Illustrator, Photoshop.
Funktion
Sitet skal være super brugervenligt, og let overskueligt.
Man skal i løbet af ganske få klik kunne komme ind på en
lejlighed og hurtigt bestille en fremvisning. Der skal også
være min. 4 aktuelle såkaldte „fokusboliger“, som opfylder nogle simple krav, ikke kun for nemhedens skyld, og
til hjælp for f.eks firmaer, der ikke har tid for at sætte sig
ind i boligens specifikationer.
På enheder over 960 px, følger søgeboksen, headeren
og menuen således med når man scroller, så man hele
tiden har mulighed for at redigere i ens søgning.
Responsive webdesign er også en del af søgemaskine optimering. Hvis et emne er søgt på google mobile, og dit
websted har responsive webdesign vil Google automatisk
anbefale din side – kort sagt, din hjemmeside vil få en
meget højere rang i en mobilsøgning.
Ulempen – rent teknisk set – ved et Responsive Webdesign, er så at det kan tage betydeligt længere tid at loade
siden, da den automatisk vil hente alle billederne og objekterne, i de forskellige størrelser, uanset hvilken enhed
du bruger.
Iphone
ARBEJDSPROCESS
001. Briefing fra kunden. Der fastsættes krav til
hjemmesiden, målgruppen, ønsker og al anden
relevant information indsamles.
002. Der laves et sitemap. For bedre at kunne navigere i hvilke sider der er at lave.
003. Indsamling af billedmateriale, samt billedredigering. Her arbejdes naturligvis i RGB og 72 ppi
så de er klar til brug på web.
004. Der laves et wireframe for den version af basis
hjemmesiden der er udgangspunktet til designet.
005. Der laves et mockup af hjemmesidedesignet i
Photoshop. Både til mobil, Ipad og traditionel
webbrowser.
006. Korrektur, kommentarer og godkendelse fra
kunden.
Tablet
007. Der laves en oversigt til over breakpoints, fluid
grids og hvilke billeder der skal skaleres, så det
ligger klart for webudvikleren der i sidste ende
skal kode hjemmesiden.
Responsive webdesign
Grundlæggende er der bare alt for mange mobile enheder der rammer markedet, til at vi kan skræddersy vores
hjemmesider for at se godt ud på dem alle. Næsten alle
enheder har en anden skærmstørrelse og opløsning, end
sin forgænger.
Det giver ikke mening for virksomheder, hverken store
eller små, at bruge tid og penge på at skabe en skræddersyet web-oplevelse for hver enhed i den konstant voksende line-up.
Den største fordel ved at lave en responsive web side,
er at man kun behøver én kodebase til én hjemmeside, for
at samtlige kunder en behagelig oplevelse af ens website.
PC
15 af 18
Danielle Mandix Jensen — Svendeprøve 2013
Responsive webdesign
Iphone visning
Tablet visning
Eksempler på Media Queries
Det er forholdsvist nemt at implementere media queries
i CSS3, når først der er tænkt over designet til de mange
forskellige skærmstørrelser. Der findes flere forskellige
måder at definere visningen.
Her er et par eksempler på hvor lidt kode der faktisk
skal til.
Max Width
Følgende CSS er til alle visnings-områder der er mindre
end 600px i bredden.
@media screen and (max-width: 600px) {
.class {
background: #ccc; }
}
CSS3 Media Queries
Responsive webdesign bruger en CSS3 funktion kaldet
Media Queries, der oversat til dansk betyder noget i retning af „Medie Forespørgsel“.
En Media Query kan f.eks. spørge enheden du bruger, om den horisontale opløsning på enheden er lig med
eller mindre end 480px . Hvis svaret er ja, kan CSS’en så
justere layoutet til f.eks. at være én enkelt kolonne. Media Queries identificerer altså højde, bredde, opløsning,
orientering, skærmformat osv. Det er vigtigt at vide, for
at lave et responsive webdesign der skal reagere på vores
enheder og tilpasse hjemmesiden til at være en fornøjelig
brugeroplevelse.
Det hele sker i real-time, mens du tænder enheden,
drejer enheden – eller ændrer størrelsen på dit browservindue.
Min Width
Denne kode er til visninger, større end 900px i bredden:
@media screen and (min-width: 900px) {
.class {
background: #666; }
}
Multiple Media Queries
Man kan også kombinere flere media queries. Følgende
kode bruges når skærmen er mellem 600px og 900px:
@media screen and (min-width: 600px) and
(max-width: 900px) {
.class {
background: #333; }
}
16 af 18
Danielle Mandix Jensen — Svendeprøve 2013
Standard web visning
Breakpoints
LOGO, fuldt skalerbar
SØG
UDLEJ
INFO
KONTAKT
SØG
UDLEJ
INFO
KONTAKT
MENU, skalerbar ned til 50%,
derefter breakpoint på midten.
SØG BOLIG NU..
SØG BOLIG NU..
Område
Skalerbar ned til 50%,
derefter forsvinder den
Område
Pris
Pris
IMAGE SLIDER,
Areal
Sagsnr.
Areal
Sagsnr.
fuldt skalérbar
SØG
SØG
VED SAMME LEJLIGHED..
Lejlighedsvis udlejer lejligheder
til mennesker, der vil vente med
at sælge. Til folk, der vil vente
med at købe – eller har et akut
behov for en lejlighed i 3-6
måneder – eller en
begrænset årrække.
FOKUSBOLIG:
VED SAMME LEJLIGHED..
Hvad så med flytning?
Vi har samarbejde med byens mest
velrenomerede vognmænd, og kan
ofte skaffe en god pris.
Breakpoints
Lejlighedsvis udlejer lejligheder
til mennesker, der vil vente med
at sælge. Til folk, der vil vente
med at købe – eller har et akut
behov for en lejlighed i 3-6
måneder – eller en
begrænset årrække.
FOKUSBOLIG:
FOKUSBOLIG:
Hvad så med flytning?
Vi har samarbejde med byens mest
velrenomerede vognmænd, og kan
ofte skaffe en god pris.
Skalerbar ned til 50%,
derefter forsvinder den
FOKUSBOLIG:
Breakpoints
Fiolstræde 26, 3.,
1171 København K
Fiolstræde 26, 3.,
1171 København K
Fiolstræde 26, 3.,
1171 København K
Fiolstræde 26, 3.,
1171 København K
Boligareal: 98 m²
Værelser: 3
Boligareal: 98 m²
Værelser: 3
Boligareal: 98 m²
Værelser: 3
Boligareal: 98 m²
Værelser: 3
Se mere..
Se mere..
Fluid Grid Layout
Som mediegrafiker kender man alt til det med at oprette
et grid, oprindeligt tænker vi på et grid som et net af kolonner, og rækker med faste bredder, højder og spaltemellemrum. Man kan f.eks. opbygge en hjemmeside ved
hjælp af et 960px grid, opdelt i 12 kolonner der hver er
40px brede, og med 20px spaltemellemrum, det virker
godt på hjemmesider med en fast bredde. Men når man
designer til en responsive webside, skal man tænke på kolonne og spaltemellemrummenes bredder som procentdele af den maksimalt tilgængelige bredde.
Det er det der gør at indholdet kan skrumpe eller udvide sig baseret på enhedens dimensioner. Kort sagt vil
den justere indholdet til enheden.
Se mere..
Se mere..
Et CSS ekspempel kunne f.eks se sådan her ud:
Flydende billedskalering
.wrapper {
.make-row();
}
Dette hører lidt under samme kategori som overfor, den
justerer bare billederne til at skalere baseret på dimensionerne på enheden, men uden at miste skarpheden i billedet. Her er et eksempel på hvordan man skriver det i CSS:
.content-main {
.make-lg-column(8);
}
img {
max-width: 100%;
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
Breakpoints
Et breakpoint er overgangen mellem media query’ens
værdier. For eksempel: Hvis den tilgængelige browsers
17 af 18
bredde er mindst 780px kan hjemmesiden sagtens vise
menulinjen, der spreder sig på tværs i toppen af siden.

Men hvis den tilgængelige bredde er mindre end 780px
kan CSS’en omstrukturere menulinjen i to rækker eller
flytte links ind i en drop down menu.
Når du så ændrer størrelsen på browser vinduet til
under 780px i bredden, vil menuen justere sig. Den overgang kaldes et breakpoint.
I øjeblikket er der ingen fast vedtaget praksis for at definere hvor et break point kan ligge, det er udelukkende op
til designet.