Grafisk & Produktion workflow Website www.patellaloeb.dk
OPGAVEN: Løbetræneren Mads Frederiksen skulle have designet og programmeret et nyt site, hvor kunderne kan gå ind og læse om de løbepakker, han tilbyder, og hvad de koster. Derudover skal kunderne kunne kontakte ham via sitet. FARVER: Sitet er holdt i hvid, sort og lys grå for at fremme det maskuline udtryk. Derudover er der brugt orange som en kontrast til de mørke farver. PROGRAMVALG: Indesign Photoshop Dreamweaver Filezilla DESIGNKRAV: Sitet skal være indbydende og enkelt. Brugervenligt nemt at navigere rundt på. Maskulint - uden for mange farver. Have et seriøst udtryk. Kontaktinformationer skal være let tilgængelige. Responsiv til både web, tablet og mobil. LAYOUT: Format: 100 % i bredden og fleksibel i højden, da hjemmesiden skal være responsiv. #E9E5E5 #000 #EF8703 USABILITY: Sitet er kodet som en one page så brugeren nemt kan scrolle ned over hjemmesidens indhold, der er opdelt i sektioner. Øverst på hjemmesiden er der en menubar, der leder brugeren ned til den ønskede sektion. Kontakt informationerne ligger i footeren og under sektionen kontakt. Kunden blev fra start informeret om one page begrænsninger ved google søgninger. (se mere på s.7) Fonte: Jeg har valgt en google font til brug på hele hjemmesiden for at skabe sammenhæng. Fonten er grotesk og skaber et moderne og maskulint udtryk. Roberto font: BROWSERKOMPATIBILITET: Sitet og mail formularen er testet i både Safari, Firefox, Google Chrome og Internet Explorer. Sitet indeholder html5 tags, hvilket ikke kan vises i alle browsere. Derfor er der indsat en kode i head der fortæller hvordan sitet skal opføre sig. Se mere på s. 7. ARBEJDSPROCES: Breefing fra kunden. Udarbejdelse af flowchart. Udarbejdelse af 2 layouts herefter 1 godkendt af kunden. Rettelser og tilpasninger fra kunden. Billeder behandlet i photoshop RGB og 72 ppi, jpg og png filer. Optimeret navne til SEO. Opsætning i Dreamweaver. Benyttet Html5 tags, jquery, media query og css. Metatags: keywords og description, for synlighed ved søgning på nettet. Uploadet til test hjemmeside, hvor kontaktformularen er testet. Testet i Safari, Firefox, Google Chrome og Internet Explorer. Godkendt af kunden med rettelser. Uploadet til patellaloeb.dk 2
FLOWCHART INDEX OM PATELLA LØB PRODUKTER Kontakt OM MADS FEJL KONTAKT TAK FOOTER 3
MOCK UP MOCK UP 1: Designet som One Page ud fra et 960 grid system med 16 kolonner da siden er opbygget i moduler. MOCK UP 2: Designet som en flersidet hjemmeside udfra et 960 grid system med 12 kolonner. PATELLALOEB.DK FORSIDE PRODUKTER OM MIG KONTAKT OM MIG Mit navn er Mads Frederiksen. Så længe jeg kan huske tilbage, har jeg interesseret mig for løb og motion. Min interesse for især løb er kun blevet forstærket efter 6 år ansat som Konstabel Forsvaret, nærmere bestemt Hæren. Min tid i Hæren gav mig ud over fl ere Militær Fysisk Træner (MFT) -kurser, en masse praktisk erfaring med løb, træning og kost og udstyrede mig med en masse viden om kroppen og fysisk aktivitet. Så hvad gør mig i stand til at undervise netop DIG? Udover uddannelsen fra Forsvaret har jeg siden suppleret mit CV med et "Pose-running instruktør"-kursus. Med en bestået eksamen blev jeg i 2014 certifi ceret "Running Technique Specialist" hos POSE METHOD. Jeg har fokus på at udvikle færdigheder frem for at lægge vægt i lange distance ture eller høj intense intervaller. Selvfølgelig skal man udvikle sin udholdenhed og sin kondition. Men for at man kan gøre det optimalt skal man have styr på sit bevægemønster. Og for at få styr på sin teknik skal man træne en masse teknik forbedrende øvelser. Når man så har styr på det kan man begynde at pakke mere volume på sin træning fordi kroppen nu har optimale forudsætninger for at håndtere de mange kilometer. Hvis du har nogle former for spørgsmål så skal du ikke tøve med at skrive til mig under "KONTAKT" PATELLALOEB.DK FORSIDE PRODUKTER OM MIG KONTAKT Hvorfor skal du benytte dig af Patella Løb? KONTAKT Patella Løbs mål er at forbedre løberes tekniske evne, og dermed nedbringe den høje skadesprocenten der er vedhæftet løb. Vi lægger vægt på færdigheds udvikling, så du SELV kan undgå største delen af de løbeskader, som du skulle støde på igennem din løbe-karrier.du behøver ikke være topatlet for at kunne benytte dig af Patella Løbs ekspertise. Vi hjælper alle fra hverdags motionister til konkurrence løbere. Så hvis du er træt af at rulle terningen når det kommer til løbeskader, så tag ansvar for din egen krop og forbedre din løbestil sammen med Patella Løb! Læs mere Produkter Hos PatellaLøb hjælper vi ALLE, uanset dit niveau! Hvis du har nogle tvivlsspørgsmål så er du mere end velkommen til at skrive til os ved at udfylde kontaktformularen ude til højre, så vil vi vende tilbage til dig hurtigst muligt! Hvis du vil bestille en workshop så skal du også skrive til os ved hjælp af kontaktformularen ude til højre. Husk at der skal være mellem 3 og 10 deltagere tilmeldt for at workshoppen bliver gennemført. NAVN E-MAIL BESKED der skal være mellem 3 og 10 deltagere tilmeldt for at workshoppen bliver gennemført. Hvorfor skal du benytte dig af Patella Løb? Patella Løbs mål er at forbedre løberes tekniske evne, og dermed nedbringe den høje skadesprocenten der er vedhæftet løb. Vi lægger vægt på færdigheds udvikling, så du SELV kan undgå største delen af de løbeskader, som du skulle støde på igennem din løbe-karrier.du behøver ikke være topatlet for at kunne benytte dig af Patella Løbs ekspertise. Vi hjælper alle fra hverdags motionister til konkurrence løbere. Så hvis du er træt af at rulle terningen når det kommer til løbeskader, så tag ansvar for din egen krop og forbedre din løbestil sammen med Patella Løb! Løbestils analyse Opfølgende analyse Workshop NAVN Løbestils analyse Opfølgende analyse Workshop Med en løbestils analyse får du Efter din første løbestils analyse har Patella Løbs workshop er til jer som netop de færdigheder som du skal du nu mulighed for at forbedre din vil have nogle teknikforbedrende bruge for at vinde kampen over tekniske fremgang. Denne lektion øvelser. Workshoppen bliver afholdt dine løbe skader. Det bliver en tilbyder fl ere advancerede færdighedsforbedrende grupper, hvor vi bruger hinanden halvanden time, one on one med øvelser, styrke til at vise og fortælle. Vi kommer fokus KUN på dig. Du får viden om øvelser og video-optagelser af dit ind på det teoretiske omkring løb, løb og din egen løbestil. Derudover udgangspunkt og dit slutresultat. derefter begynder vi at løbe ig- bliver du udstyret med øvelser ennem de forskellige øvelser. Til slut som forbedre din løbestil og efter Video optagelse af dit udgangspunkt tager vi en samtale om, hvad vi har lektionen får du tilsendt øvelser som (løb) været igennem, og hvad I har lært. kan forbedre dit løb yderligere. Teknik forbedrende øvelser Workshoppen er perfekt til din løbegruppe, Lektionens indhold: Styrke øvelser som har lyst til at gå mere Video optagelse af dit slutresultat dybden med løbestilen. Teori omkring løb (løb) - Minimum tre deltagere Video optagelse af dit udgangspunkt Evaluering - Maksimum ti deltagere (løb) Lektionens varighed: 1 time Teknik forbedrende øvelser teori omkring løb Video optagelse af dit slutresultat Lektionen bliver, som undgangspunkt Styrke øvelser (løb) afholdt udendørs på ad- teknik forbedrende øvelser Evaluering dresse: Forhåbningsholms allè 8, evaluering Lektionens varighed: 1,5 time 1904 Frederiksberg C. Lektionens varighed: 2 time Lektionen bliver, som undgangspunkt Men der kan selvfølgelig aftales et andet sted vi kan mødes. Placering for workshops bliver aftalt afholdt udendørs på ad- individuelt. dresse: Forhåbningsholms allè 8, Pris: 499,- 1904 Frederiksberg C. Pris pr. deltager: 350,- Men der kan selvfølgelig aftales et Book en tid andet sted vi kan mødes. Hvis du ønsker at bestille en workshop til dig og dine venner, så skriv E-MAIL BESKED SEND Mads Frederiksen Adresse Adresse Tlf mail OM MIG Mit navn er Mads Frederiksen. Så længe jeg kan huske tilbage, har jeg interesseret mig for løb og motion. Min interesse for især løb er kun blevet forstærket efter 6 år ansat som Konstabel Forsvaret, nærmere bestemt Hæren. 4
MENU WIREFRAME Da sitet er lavet ud fra et 960 grid system, kan jeg allerede på forhånd bestemme elementernes størrelser. 100 % 130 px 650 px HEADER 600 px 50 % 50 % 50 % 380 px 340 px 900px 880 px 600px 580 px 600 px 400px FOOTER MAIN 600 px 90 % 5
WIREFRAME RESPONSIV Sitet skal kodes respontivt, og derfor er der også lavet et wireframe for, hvordan den mobile version skal opføre sig. PC / TABLET MOBIL MAIN 80 % 90 % article { float: left; width:20%; height:90%; } article { float: none; width:80%; height:20%; } 80 % 100 % BREAKPOINT @media screen and (max-width : 768px) { MEDIA QUIERES VIEWPORT For at få breakpointet til at fungere optimalt er der indsat et viewport-metatag i sitets head. Det gør, at den mobile version snakker sammen med css delen, og ikke bare bliver skaleret ned. 80 % <meta name = viewport content= width=device-width > <script type= text/javascript src= js/jquery-1.10.2.min.js ></script> 6
OPTIMERING TIL BROWSER & SEO OPTIMERING TIL SEO I HTML KODEN: MAIN TAG: Sidens vigtige indhold er de produktpakker, Mads Frederiksen tilbyder. De er kodet ind i et Main tag så Google ved, at det er det primære indhold. Derudover er der sammenhæng mellem sidens meta description og indholdet i Main. META DESCRIPTION: Den tekst der bliver vist på google under sidens titel. Den skal være mellem 150-160 tegn. H1: Nomal kan man have en H1 på hver side, men da dette er en One Page, er der kun plads til en. Derfor har jeg valgt at kode sidens header ind som en H1. EKSTERN LINK BUILDING: I forhold til Googles søgerobotter er det godt at have links til andre sider og endnu bedre, hvis andre sider linker til ens egen. Det giver Linkjuice. For at skabe en smule aktivitet, linker patellaloeb til fotografen og til mig og omvendt. TILKOBLING TIL GOOGLE ANALYTICS: Til sidst er sitet tilmeldt google analytics og Mads Frederiksen kan derfor holde øje med sine besøgende og hvor de kommer fra. ALT TAGS: Alle billederne på sitet er tildelt alt tags, som beskriver hvad billedet forestiller. Det hjælper søgerobotter med at finde ud af hvad billedet forestiller, samtidig med at blinde kan få læst teksten op. NAVNE PÅ BILLEDER: Det samme gælder for billedernes navne. I takt med at de er blevet optimeret til web (72ppi / RGB) er de blevet gemt med navne, der samtidig beskriver billederne, så søgerobotter kan tyde billederne. PROBLEMER VED ONE PAGE SIDENS TITEL: Optimalt skal sidens titel ændres på hver underside, men da Patella Løb er kodet som en one page, vil dette ikke være muligt. FILSTRUKTUR: En one page site har af gode grunde kun 1 side, og bruges ofte, hvis den skal være meget enkelt og uden for meget tekst. Derfor linkes der ikke til andre undersider, og det skaber ikke den struktur, som Googles robotter leder efter. OPTIMERING TIL BROWSER: PRÆFIKS Det er ikke alle browsere, der forstår de nye HTML5 tags og CSS3 muligheder. Derfor er der skrevet præfikser ved alle disse tags: (-webkit) Crome / Safari (-moz) Firefox (-ms) Internet Explorer (-o-) Opera PROBLEMER MED INTERNET EXPLORER: Internet Explorer kan ikke vise de nye HTML5 tags. Derfor er der indsat en kode i sitets header, der fortæller at sitet skal åbnes i den nyeste version. <!--[IF LT IE 9]> <SCRIPT SRC= HTTP://HTML5SHIM.GOOGLECODE. COM/SVN/TRUNK/HTML5.JS ></SCRIPT> <![ENDIF]--> ÆØÅ & Selvom min tegnkodning står til UTF-8, og dette burde betyde, at æ, ø og å bliver vist korrekt, har jeg erstattet bogstaverne med deres HTML-kode. På denne måde sikrer jeg mig, at browseren viser æ, ø og å korrekt. Da jeg kun har æ, ø og å i minuskler, ser HTML-koderne således ud: æ æ ø ø å å & & 7
DET FÆRDIGE PRODUKT KVALITETSVURDERING: Jeg er tilfreds med det færdige resultat. I forhold til SEO optimering kunne jeg godt have tænkt mig, at sitet var et flersidet site istedet for onepage, hvilket giver flere muligheder for at optimere sitet til Googles søgerobotter. FREMTIGE FORLØB: Det næste skridt vil være at holde øje med Google Analytics. På den måde kan Mads se hvor hans besøgende kommer fra og derved finde ud af, hvor han skal annoncere. 8