KODNING AF RESPONSIV DESIGN

Transkript

1 Grafisk Workflow

2 REDEGØRELSE GRAFISK WORKFLOW 39 OPGAVEN Frk. Nielsens rengøringsfirma kom til os for at få lavet ny hjemmeside. Hun var træt af den gamle, da hun ikke kunne rette i indholdet, og valgte derfor os for at få et brugevenlig CMS, hvor hun selv kan redigere sit indhold. Frk. Nielsens Rengøring tilbyder rengøring hos både private og erhverv. Jeg har stået for at designe og kode hjemmesiden, og har i samarbejde med min kollega Kevin overført koden til vores CMS. PROCESS Overlevering af opgave (Design-pitch) Inspirationssøgning Design i Photoshop Udarbejdelse af designpræsentation Feedback/godkendelse fra kunden Kodning i Sublime Implimentering i bubbleweb Browsertests LAYOUT Kundens logo er i 50 er stil, og denne stil ville hun gerne have på hjemmesiden også. Så vi blev enige om at lave et moderne og brugervenlig webdesign smeltet sammen med en gammeldags stil ved at hive karakteristiske design-elementer ind fra 50 erne, som bl.a. skygger, håndkrevet skrift, og matte pastel farver. Samtidig måtte sitet gerne udstråle humor og sætte et lille smil på læben hos den besøgende. Layoutet lavede jeg i Photoshop. KODNING AF RESPONSIV DESIGN Da designoplægget var godkendt startede jeg med at kode siden i min editor, Sublime. Jeg har brugt frameworket Foundation til at bygge siden op med. Mest pga. af deres grid-system, som gør det meget let at lave en responsiv side. Ved at lægge indhold ind i rows og columns i HTML en, ved indholdet hvor det skal placere sig på de forskellige skærmstørrelser. Dette skal kombineres med brugen af Media Queries i min CSS, hvor jeg fortæller indholdet, hvordan det skal se ud på de forskellige devices. Da jeg var færdig med at kode siden satte jeg mig sammen med Kevin, og vi fik sammen overført min kode til vores CMS. KVALITETSVURDERING Jeg synes siden er blevet rigtig god, og at det er lykkedes at ramme den stil kunden ønskede. Processen kørte meget godt. Det var første gang jeg skulle prøve at kode en hjemmeside på min elevplads, så i forhold til det synes jeg det kørte rigtig godt. Tidsplanen skred lidt på design-delen, da der var mange småopgaver der skulle løses indimellem. Men siden havde som sådan ikke nogen deadline, så det gjorde ikke så meget. Siden fungere fint på alle devices og browsere, bortset fra Internet Explorer 8, som ikke understøtter en del af de ting vi har brugt. Men vi vælger at se bort fra Internet Explorer, da det er en meget gammel browser, og vi vurderer, at de fleste relevante besøgende vil være opdaterede i forhold til browsere. DESIGNPITCH Vi havde et lille møde, hvor opgaven blev pitched for mig. Da der ikke var blevet snakket særlig meget design til første møde med kunden - men mere funktionalitet - gav jeg derfor selv kunden et kald, for at få en bedre fornemmelse af, hvad hun havde af tanker og ønsker omkring designet. PLANLÆGNING Jeg noterede det forventede tidsforbrug i min arbejdskalender, for at have en fornemmelse for den tid jeg skulle bruge på opgaven. Jeg tilpassede løbende kalenderen med den reelle tid, så vi har styr på hvor meget tid der er brugt på opgaven, og om antallet at timer spiller sammen med budgettet på opgaven. BROWSERTEST Da vi var færdige med at lægge koden over i bubbleweb skulle siden browsertestes, for at sirke at alle brugere får en god oplevelse ligegyldig hvilket device og hvilken browser de besøger fra. Jeg startede med at teste sitet på de forskellige devices: Computer, ipad og iphone. Derefter testede jeg følgende browsere: FireFox, Safari, Chrome og Explorer. Da jeg bruger Mac på kontoret, brugte jeg programmet Virtual Box, for at teste hvordan siden så ud i de forskellige browsere på PC. BRUGERVENLIGHED Der er lagt vægt på brugervenligheden både overfor den besøgende i form af tydelige navigation og Call-To-Actions, men også overfor kunden da hun selv har adgang til vores CMS, bubbleweb og nemt kan redigere i indhold ved behov.

3 PLANLÆGNING GRAFISK WORKFLOW 40 I min kalender notere jeg de timer jeg forventer at bruge/har brugt på opgaven. Her ses kalender for både design og opsætning. Vi bruger Trello til projektstyring. Vi har et kundekort, hvor vi kan kommentere, lave checklister og mere for at bevare overblikket på opgaven.

4 INSPIRATION GRAFISK WORKFLOW 41

5 DESIGN I PHOTOSHOP GRAFISK WORKFLOW 42 I design-processen har jeg taget valg omkring farver, former, skrifttyper og layout.

6 DESIGNPRÆSENTATION OG FEEDBACK GRAFISK WORKFLOW 43 Kunden fik tilsendt en designpræsentation med det nye webdesign. Her kan kunden se billeder af de forskellige sider på hjemmesiden, og læse nærmere om tankerne bag. Jeg ringede herefter til min kunde, for at få feedback på tilsendte. Designet blev godkendt uden ændringer, og var dermed klar til opsætning.

7 UDKLIP AF GRAFISKE ELEMENTER GRAFISK WORKFLOW 44 Alt det grafiske som jeg vurderede ikke kunne laves med rent CSS klippede jeg ud, og gemte det så det var optimeret til webbrug. Elementer som denne skal min. være 420 i bredden, så det kan fylde hele skærmbredden på et mobil device. Til disse ikoner lavede jeg en sprite. På den måde har jeg kun ét billede jeg skal forholde mig til, og vælger bare i min CSS, hvilket ikon der skal bruges ved at bruge background-position.

8 OPSTART MED FOUNDATION OG SUBLIME GRAFISK WORKFLOW 45 Jeg bruger frameworket Foundation til at bygge hjemmesiden op med. Jeg downloadede hele pakken fra Foundation s hjemmeside - men det mest nødvenige er grid -delen af det. Jeg bruger text-editoren Sublime til at sætte min kode op. Jeg startede med at få mine link på plads i Head sektionen, både til interne og eksterne stylesheets, som bl.a. fontawesome. Her har jeg også hentet mine fonte ind fra Google Fonts, som gøres meget simpelt med en enkelt linje kode. Head Herefter kodede jeg headeren og footeren, som skal være faste på alle side. Herefter lavede jeg en web-mappe i kundens mappe, hvor i jeg lægger alt det jeg skal bruge til kodningen. Footer Header

9 IMPLIMENTERING I BUBBLEWEB GRAFISK WORKFLOW 46 Den kode jeg havde skrevet skulle flyttes over i vores CMS, så kunden selv kan redigere i indholdet. Til højre ses hvordan kunden vil se og kunne redigere i indholdet.

10 BROWSERTESTS GRAFISK WORKFLOW 47 HTML Validering er kørt på alle sider, for at sikre der ikke er fejl i min HTML. VirtualBox brugt til at teste sitet på PC. Test af sitet på forskellige devices.