GRAFISK WORKFLOW - RESPONSIV WEBSIDE

Transkript

1 GRAFISK WORKFLOW - RESPONSIV WEBSIDE

2 REDEGØRELSE Opgavebeskrivelse Redesign hjemmeside for Murerfirmaet Døssing i responsivt design, som udstråler professionalisme. Der skulle være en referenceside med billeder af de arbejder firmaet har udført, samt en kontaktformular. Kunden havde ikke gjort sig de store tanker ellers, så det var op til mig. Kundekontakt & ordrebehandling Kundekontakten er foregået over mail og i få tilfælde pr. telefon, hvilket har fungeret godt. Jeg har haft kunden med i designprocessen lige fra starten, og han har kunne følge med i udviklingen, da jeg med jævne mellemrum har uploadet websiden til mit eget domæne for også at kunne tjekke, hvordan websiden opførte sig på forskellige platforme. Kvalitetsvurdering Jeg er endt ud med en webside, som både kunden og jeg er tilfredse med. Den udstråler den ønskede professionalisme, og er overskuelig og brugervenlig. Den er fremtidssikret med sit responsive design, da folk i stigende grad bruger deres smartphones og tablets, når de surfer på nettet. Kontaktformularen kunne dog med fordel placeres længere oppe på siden, så den springer mere i øjnene og siger udfyld mig. Skulle jeg gøre det om, ville min tilgang have været mobile first. Så kan de mindste enheder nøjes med at læse den normale CSS og springe over alle media queries og overlade alle de ekstra beregninger til de større enheder. 2 / Grafisk Workflow / Nanna Van Wittendorff

3 ARBEJDSPROCES 1. Briefing - Kunde beskriver opgave. - Forventningsafstemning. 2. Research & inspiration Hvilke elementer indeholder de bedst placerede sider i kategorien, som er værd at have med, og hvilke ting er relevante at informerer om. 3. Designfase - Flowchart - Skitser - Mockup - første udkast. 4. Kundekontakt Første udkast godkendes. 8. Kodning - Opsætning af øvrige sider. Siden gøres responsiv. - Løbende test af browser og mediekompatibilitet. - Små bugs noteres. 7. Kundekontakt Ajourfører kunde om fremskridt, uploader igangværende arbejde, så han kan følge med fra sidelinjen. 6. Kodning Opsætning af forside. 5. Designfase - Mockup til tre skærmstørrelser. - Storyboard. 9. Billedbehandling Billederne fra den gamle webside behandles, så de fremstår mere professionelle og indbydende. 10. Rettelser og test - Rettelser af noterede bugs, fx preload af de andre sider, for at undgå blink ved load. - Test i nye versioner af Chrome, Firefox og Explorer. 11. Brugervenlighed Succesfuld test af brugervenlighed vha. google.com/webmasters/tools/mobilefriendly 12. Screenfly Tester på forskellige platforme vha. quirktools.com/screenfly 15. Publish Uploader websiden på kundes domæne, og erstatter dermed den gamle. 14. Kundekontakt - Test af kontaktformular - Test af webside 13. Søgeoptimering - Meta descriptions - Mikrodata indsættes vha. google.com/webmasters/markup-helper - Succesfuld test vha. developers.google.com/structureddata/testing-tool 3 / Grafisk Workflow / Nanna Van Wittendorff

4 INSPIRATION Store billeder med tekst over Ikoner og simpelt layout Ring til os øverst på siden Informativ footer 4 / Grafisk Workflow / Nanna Van Wittendorff

5 IDÉUDVIKLING Flowchart og elementer Skitser - store skærme 5 / Grafisk Workflow / Nanna Van Wittendorff Skitser - små skærme

6 IDÉUDVIKLING Skelet og mockup Storyboard Da jeg ikke har haft andre inde over opgaven, er storyboard og skelet skrevet i hånden, som rettesnor til mig selv. Havde jeg skulle samarbejde med andre om opgaven, ville jeg have brugt tiden på at lave det digitalt, og beskrevet på en mere let forståelig måde. 6 / Grafisk Workflow / Nanna Van Wittendorff

7 FARVER, FONTE & GRAFISKE ELEMENTER Baggrund mønster minder om flisearbejde (Fundet til gratis afbenyttelse) Overskrift & ikoner: #5E9CAA Ikonerne har jeg selv tegnet i Illustrator Baggrund & tekst: # Baggrund & ikoner: #E6E6E6 Border #E9E9E9 7 / Grafisk Workflow / Nanna Van Wittendorff

8 BILLEDREDIGERING Kunden havde kun billeder taget med mobilkamera, og som han har slettet efter det blev lagt op på hhv. hjemmeside og Facebook. Det har betydet at billederne ligger i meget ringe opløsning, hvilket har gjort det til en stor udfordring at redigere billederne, så de ser mere indbydende ud. Det er blevet bedre, men ikke godt. Til det har jeg brugt Photoshop, hvorfra jeg har gemt til web i 72 ppi. For en sikkerheds skyld har jeg været omkring en online image optimizer for at sikre mig at billederne fyldte mindst muligt, uden at blive ringere. 8 / Grafisk Workflow / Nanna Van Wittendorff

9 RESPONSIVT DESIGN Fluid grids Med fluid grids har jeg sikret mig, at ingen kommer til at se horisontale scrollbars, uanset skærmens størrelse. Udover at angive bredden i procent, har jeg afgrænset med en max-width, for at siden ikke skal blive for voldsom på de større skærme. Jeg har brugt box-sizing: border-box, for at holde størrelserne på elementerne, selvom der tilføjes padding. På den måde kan jeg tillade mig at bruge pixels i den forbindelse. Fluid columns I min css har jeg flere steder arbejdet med fluid columns, som del i det responsive design. Til højre ses koden fra footeren, hvor jeg har fortæller den at der højst skal være 3 kolonner på mindst 250px. Det vil sige, at hvis kolonnerne kommer under 250px i bredden, så vil der kun være 2 kolonner osv. Jeg har delt footerens indhold ind i tre sections, som jeg i css en har bedt om ikke at lave linjeskift i, for at holde orden i footerens indhold, når den kommer ned på 2 kolonner. Viewport meta tag Med et viewport meta tag, fortæller jeg sitet, at det skal forholde sig til skærmstørrelsen på mediet. Ud fra det kendskab hentes de rigtige stylesheets. Det ene stylesheet bliver der altid kigget på, mens de to andre supplerer det første ved at overskrive eller tilføje css. 9 / Grafisk Workflow / Nanna Van Wittendorff

10 BRUGER- OG MOBILVENLIGHED Siden er nem og intuitiv at navigere rundt på. Der er kun tre sider, som alle kan ses i topmenuen. Jeg har tilføjet en til top knap i højre bund - særdeles relevant på referencesiden og på de mobile platforme. Jeg har lagt det vigtigste øverst, nemlig telefonnummeret, som er klikbart for hurtigt opkald. Målgruppen vil oftest besøge hjemmesiden, med det for øje at kontakte firmaet, derfor giver det en god brugeroplevelse, at telefonnummeret kan ses hele tiden. Hastighed Når det kommer til sidens hastighed, har jeg testet det (se til højre), og mens det på computeren ser rigtig fint ud, er der plads til forbedring på mobilenheder - det omhandler cachelagring. Cachelagring er ikke noget jeg har viden om, og i forhold til målgruppe og formål, mente jeg ikke at det var relevant for kunden at skulle betale ekstra for, da folk som oftest kun vil komme derind en enkelt gang eller to. Noget andet er, at vi kommer udenom den, for mange irriterende, lovpligtige meddelelse om, at siden bruger cookies. Sådan ser det ud, når man tester aarhustech.dk Test af mobilvenlighed 10 / Grafisk Workflow / Nanna Van Wittendorff

11 BROWSERKOMPATIBILITET & SØGEOPTIMERING Browserkompatibilitet Under udviklingen af websiden, har jeg løbende testet sidens udseende og funktionalitet i forskellige browsere, for at være på forkant med de problemstillinger der kan forekomme i den sammenhæng. Der kan være små forskelle på, hvordan den enkelte browser fortolker websidens koder. Her er der dog tale om marginaler, som ingen effekt har på brugeroplevelsen. Siden er testet i de nyeste versioner af Chrome, Firefox, Internet Explorer, Safari, mobil webbrowser samt på Screenfly, hvor man kan vælge hvilken platform man vil se siden gennem. (quirktools.com/screenfly) Søgeoptimering med Microdata Microdata markup er en måde, hvorpå du kan strukturere tekst, billeder, video m.fl. elementer på dine sider, så søgemaskiner og andre systemer nemmere kan forstå, hvilken type indhold der er tale om. På den måde hjælper du bl.a. søgemaskiner som Google med, at øge kvaliteten af deres søgeresultater. På google.com/webmasters/markup-helper/ finder du et redskab til nemt at få implementeret microdata i din html. I dette tilfælde er Lokale virksomheder den rigtige datatype, som bliver udgangspunktet under markeringen med værktøjet, som er meget nemt og intuitivt at arbejde med. Når man er færdig med markeringen, får man hele HTML-koden med microdata tilføjet. 11 / Grafisk Workflow / Nanna Van Wittendorff