GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE

Transkript

1 GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE

2 Opgavebeskrivelse Jeg har valgt at gennemgå min egen responsive hjemmeside, hvor jeg vil fokusere på responsivt design. Layout Min hjemmeside har jeg kodet som en såkaldt One Pager. Jeg har anvendt Google Webfonts, nærmere betegnet Signika til headings og Roboto til paragraph tekst. Sitets grafik er lavet i vektor (SVG) format for at kunne skalére bedst muligt uden at gå på kompromis med loading tid og æstetik. Thumbnails er dog lavet i raster format, men som responsive billeder i to versioner, optimeret til desktop og mobil version. Sitet er holdt i en mørk hyggelig blå nuance med tekst, som lyser det op. Cross Browser Kompabilitet Jeg har sørget for at teste min hjemmeside i alle større browsere, og der er ingen problemer browserne imellem. Medmindre man ikke har opdateret sin browser siden 1996, burde den vises optimalt i alle browsere, selv de nyeste versioner af Internet Explorer. Kvalitetsvurdering Jeg er generelt glad for min hjemmeside. Det var et stort projekt, da jeg gik igang for et års tid siden, og jeg er stadig tilfreds med designet. Det beviser for mig, at god planlægning sagtens kan betale sig i længden, og jeg vil prøve at holde fast i den tanke fremover. Usability Min hjemmeside har en god og altid tilgængelig navigation. Min side er responsiv og kan dermed opleves både på mobil, tablet, laptop og bigscreen-tv. Portfolio 2014 / Side 2

3 PROCESGENNEMGANG Idefase Forarbejde Design Kodning» Kravspecifikation» Flowchart» Udarbejdelse af design i Photoshop» Kodning af design» Skitsering af ideer» Storyboard» Udvælgelse af den endelige idé Test Responsivitet SEO & Launch» Test af design i Crossbrowser miljø» Optimering af site til mobil og test heraf» Sørge for at SEO er i orden» Test af links» Spreading the word - Se min nye hjemmeside...» Test af lbilleder Portfolio 2014 / Side 3

4 Flowchart At min side er en såkaldt One pager, forklarer den meget vertikale struktur på mit sitemap. Her ses forskellen også på layoutet, desktop og mobil version imellem. Desktop:» Index.html Mobil:» Index.html #baggrund send #baggrund #projekter lightbox galleri #projekter lightbox galleri.pdf #portfolio.pdf #portfolio.pdf #cv cv.pdf #cv #kontakt tak.html (redirect) eksterne links #links eksterne links #links Portfolio 2014 / Side 4

5 Weboptimering Undersøgelser viser, at websites loading tider på mere end 2.5 sekunder i mobilversion, gør at brugeren browser videre, inden de når at se hjemmesiden. Dette tages meget bogstaveligt og dette punkt har været en vigtig del af mit workflow. Billedeoptimering Jeg har prøvet at finde den bedst mulige balance imellem kvalitet og loading tid til mine billeder. Først gemmer jeg billeder via Save For Web & Devices, i Photoshop. Dernæst sender jeg mine billeder til en billedeopti merings hjemme side, hvor jeg piller flere detaljer fra. SVG format Jeg har hovedsageligt anvendt SVG format til sitets grafik, da det i forhold til raster billeder er skalerbart, hvilket er optimalt til et responsivt site. SVG er et vektorformat. HTTP Requests Jeg har så vidt muligt samlet mindre scripts og andre snippets sammen. Dette gør jeg for ikke at skulle sende flere oplysninger til serveren end højst nødvendigt. Minify Jeg har, via en online minifier, fjernet alle mellemrum, linieskift m.m, for at spare plads på filerne. Portfolio 2014 / Side 5

6 Breakpoints Jeg har bygget mit site responsivt. Ud fra Google Analytics data om hvilke medier, siden hyppigst bliver vist på, kan jeg konkludere at tablets, fjernsyn og lignende medier ikke behøves. Indtil videre er den eneste besøgende på min hjemmeside med anden form for medie end PC og mobil, mig selv, med min egen tablet. For ikke at skulle tilpasse hver eneste telefons skærmstørrelse og pixeltæthed, hvilket ville give mig alt for meget opdateringsarbejde, har jeg valgt at lave mine breakpoints meget generelle. For at finde de mest rammende breakpoints, hvor flest mulige opnår en be hagelig visning af siden, har jeg kigget på de mest populære telefoner. De to bedst sælgende mobil telefoner på markedet lige nu er uden tvivl iphone og Samsungs Galaxy serien. Højde baseret på mediet Højden er i alle Media Queries sat til auto. Herefter har jeg lavet et jquery script, som finder højden på den besøgendes browservindue og sætter herefter automatisk en passende højde, så sektionen bliver fyldt ud..js script Sådan ser scriptet ud: vph = $(window).height(); $( section ).css( min-height, $(window).height ()); Mobil: Landscape» min-width: 480px;» max-width:860px;» (Relativ til desktop main.css) Laptops & små skærme» min-width: 861px.» max-width: 1200px; (laptop) Mobil: Portraitview» min-width: 0px;» max-width: 480px;» (Relativ til desktop main.css) Portfolio 2014 / Side 6

7 RESPONSIVT GALLERI Picture Dette tag er endnu ikke understøttet af nogle browsere. Derfor blev jeg nødt til at bruge et polyfill, som giver picturetagget DOM-værdier. Dette kan jeg bruge til at gøre billlederne responsive. Billederne, der bliver vist, er nu afhængig af skærmens opløsning. Source Dette tag giver mig ekstra muligheder i at kunne definere, hvor breakpointet skal ligge, når der skal skiftes fra det ene billede til det andet, hvilket er angivet i em-værdier. På nuværende tidspunkt er der ingen browsersupport på picture-tagget. Img-tagget til sidst fungerer som en fallback, hvis browseren ikke kan læse mit polyfill. Figcaption På desktop-versionen vises billedets tekst som en overliggende div-boks. På mobil-versionen bliver alt tekst rykket under billedet. Swipebox Dette er et responsivt billedevisningsplugin, som, når der klikkes, åbnes i en lightbox. <ul id="portfolio-list" class="grid cs-style-4 clear work-items"> <li class="all koncept isotopewrap work-item "> <figure class="thumb"> <picture> <source media="(min-width: em)" srcset="img/gallery/projekter/thumbs/startpakke.jpg" alt="introbrochure til IHG"> <source media="(max-width: em)" srcset="img/gallery/projekter/thumbs/startpakke_s.jpg" alt="introbrochure til IHG"> <img src="img/gallery/projekter/thumbs/startpakke.jpg" alt="introbrochure til Inhouse Graphic"> </picture> <figcaption> <h3>introbrochure</h3> <h5 class="sm left">konceptudvikling</h5> <p class="sm left">introbrochure til nye elever <a class="swipebox koncept" title="foerste opslag" href="img/gallery/projekter/startpakke_1.jpg" rel="group9"> <a class="swipebox vis" title="andet opslag" href="img/gallery/projekter/startpakke_2.jpg" rel="group9"> <a class="swipebox vis" title="tredje opslag" href="img/gallery/projekter/startpakke_3.jpg" rel="group9"> <a class="swipebox vis" title="fjerde opslag" href="img/gallery/projekter/startpakke_4.jpg" rel="group9"> <a class="swipebox vis" title="femte opslag" href="img/gallery/projekter/startpakke_5.jpg" rel="group9"> <a class="swipebox vis" title="sjette opslag" href="img/gallery/projekter/startpakke_6.jpg" rel="group9"> <a class="swipebox vis" title="syvende opslag" href="img/gallery/projekter/startpakke_7.jpg" rel="group9"> </figcaption> </figure> </li> <...> </ul>» Uddrag fra opbyningen af mit gallery, fra min HTML kode Portfolio 2014 / Side 7

8 CSS & HTML Den store forskel på mobil og dekstop for mat må være skærmstørrelsen. Alt ser bare anderledes ud i mobiltilstand. Derfor har jeg udelukket enkelte elemen ter, som ikke er absolut nød vendige. Dette gør jeg med en.hide-class.disse classes tilfører jeg derfor på de respektive elementer, og på denne måde, tilpasser jeg de to medier. Dette kan eksempelvis ses på hele kontaktsektionen, som helt er fjernet på mobilversionen. <!-- CSS - PC hide metode -->.hidden-pc { display: none; visibility: hidden; height: 0; } <!-- CSS - Mobil hide metode -->.hidden-mobile { display: inherit; height:inherit; visibility:visible; } <!-- HTML - Navigation --> <ul id="submenu"> <a href="#wrapper"> <li>baggrund</li> <a href="#projekter"> <li>projekter</li> <a href="#portfolio"> <li>portfolio</li> <a href="#cv" > <li>cv</li> <a href="#kontakt"> <li>kontakt</li> <a href="#footer"> <li>links</li> </ul>» Navigations koden vist i desktop og mobil version. Portfolio 2014 / Side 8

9 SEO For at google skal kunne finde min side, har jeg optimeret min søgevenlighed. Dette har jeg gjort ved først og fremmest at opsætte mine meta data. Dernæst har jeg uploadet en XML-fil, som indeholder min sides flowchart. Dette gør, at googles søgerobotter ikke skal lede hele min hjemmeside igennem for links, billeder osv. - botten får det foræret, når den besøger sitet. <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <META NAME="ROBOTS" CONTENT="NOARCHIVE"> <meta name="keywords" content="mediegrafiker, grafiker, Andreas Ernst Tørnqvist, århus, Freelance, portfolio" /> <meta name="description" content="personlig webside for mediegrafiker studerende Andreas Ernst Tørnqvist. Følg mit grafiske arbejde igennem mine kreative projekter og se min udvik ling igennem hovedforløbne fra min portfolio." /> <meta name="author" content="andreas Ernst T rnqvist" /> <title>andreas Ernst Tørnqvist - Online portfolio og showcase!</title> <link rel="author" href=" rnqvistdonernst/posts" /> <link rel="publisher" href=" rnqvistdonernst/posts" /> <link rel="shortcut icon" type="image/png" href=" <link href=' Signi ka:400,300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href=" <link rel="stylesheet" href="assets/webfonts/icomoon/icomoon-style.css"> <link rel="stylesheet" href="css/component.css" media="screen" /> <link rel="stylesheet" href="assets/swipebox/src/css/swipebox.min.css"> <link rel="stylesheet" href="css/normalize-minified.css" /> <link rel="stylesheet" href="css/main.min.css" media="only screen" /> <link rel="stylesheet" href="css/mobile.min.css" media="only screen" /> </head>» Min headsektion i mit HTML dokument. Her kan min grundliggende SEO findes. Portfolio 2014 / Side 9

10 Browserkompabilitet Jeg har testet min hjemmeside i de største browsere. Det drejer sig om: Google Chrome Mozilla Firefox Internet Explorer Opera Safari Portfolio 2014 / Side 10