GRAFISK PRODUKTION OG WORK- FLOW CSS Wrapper paragraph h1 h2 DREAMWEAVER CS5 Class Tags Kodning Design a.link, a.hover, a.visited HTML Kundekontakt Komposition og modulopbygning Skelet Pixels Layout Usabillity Arbejdsproces DESIGN & KODNING AF LANDING PAGE 14
// grafisk produktion og workflow - redegørelse Den grå tekst er det der endnu ikke er nået i arbejdsprocessen OPGAVEN Shark & Co. har skabt en helt ny grafisk identitet for koncernen Aage Østergaard A/S. Som nu hedder AAOsteel. Der er for kunden lavet: komplet designmanual, salgsbrochure på 2 sprog, film, diverse messematerialer, PR samt ny koncernhjemmeside med 3 sproglag. På baggrund af den nye koncernhjemmeside skulle der designes og kodes 2 landing pages - et på tysk og et på engelsk. Jeg har i denne opgave bestræbt mig på, at opbygge de to landing pages vha.. så meget håndkodning som muligt. Jeg har lavet flere web designs hos Shark & Co men har endnu ikke kodet nogen selv i joomla. Derfor er landing pages valgt til denne opgave. Jeg har endvidere lavet et facebooksite med unikke faner kodet i DW til Bedre Bad, men da da denne opgave stadig er i gang er den ikke medtaget. PROGRAMVALG Dreamweaver CS5 KUNDEKONTAKT Sammenløbende med de to landing pages udformning, skulle jeg indsætte den tyske samt engelske oversættelse på koncernhjemmesiden - som er lavet i Joomla. Jeg modtog oversættelserne fra kunden, indsatte på de forskellige slidere, billeder, moduler og sider, hvorefter et link til kunden blev sendt, så de kunne komme med eventuelle rettelser. Disse blev lavet og endnu en korrektur blev sendt til kunden - hvorefter det tyske og det engelske sproglag blev godkendt af kunden og lagt online. På de to landing pages foregik kontakten med kunden på samme måde. Først en snak omkring designet samt billeder til de to landing pages - derefter blev et layout med dansk tekst sendt afsted og blev godkendt af kunden. Jeg modtog den tyske samt engelske oversættelse, indsatte teksten og sendte disse i korrektur, rettede til og fik en godkendelse fra kunden. - Al kontakt foregik i denne opgave via telefon. LAYOUT Skellet er vedlagt på side 18 KOMPOSITION OG MODULOPBYGNING De to landing pages er opbygget så de matcher designet fra koncernhjemmesiden, for på den måde at skabe samhørighed mellem disse to. Se beskrivelse af opbygning og komposition på side 19 USABILLITY OG AKTUALITET Brugervenligheden og aktualiteten er her helt i top, da landing pages jo har til formål at at modtage brugeren på bedst mulig vis, samt give brugeren den information de søger, så så mange besøgende som muligt bliver til betalende kunder. Landing pages er den bedste måde man kan søgeoptimere sin hjemmeside. BROWSERKOMPATIBILITET De to landing pages fungerer til både firefox, google crome, safari og explorer. ARBEJDSPROCES Briefing af opgaven, fik den dansk tekst af min tekstforfatter - denne læses igennem. Der snakkes om design og billeder til landing pages med min AD er hvorefter skitser samt skellet laves. Derefter kontaktes kunden til samme snak om design og billeder - som godkendes. Jeg modtager tysk oversættelse samt engelsk oversættelse og kodningen af landing pages i Dreamweaver begyndes. Til at starte på, brugte jeg koden fra en af undersiderne på AAOsteel s hjemmeside - da både baggrunden, indholdsfeltet og fonten skulle være ens. Men da der var så mange scripts i koden fra hjemmesiden og det kun var en mindre del af koden, jeg skulle bruge, var det lettere at starte helt fra bunden. Mappestruktur laves for tysk landing page, blank HTML side oprettes, wrapper, CSS med diverse div tags samt h1, h2, p, ul, li osv. oprettes. Billeder og den tyske oversættelse indsættes på landing page. Linket til landing page sendes til kunden, som siger godkender denne. Hele den tyske mappe med, CSS, billeder og landing page (index.html) kopieres, navnet på mappen ændres til Engelsk, der ændres lidt i koden på CSS og billeder får den rigtige sti. Den engelske oversættelse indsættes på index.html filen. Linket til den engelske landing page sendes til kunden som ligeledes godkender denne. Til sidst indsættes meta keywords og description i koden - på hver landing page - så siden er søgeoptimeret på henholdsvis engelsk og tysk. Jeg arbejdede lokalt til opgaven var færdig, derefter blev filerne uploade vha.. FileZilla til kundens server, hvor de to landing pages bliver tilkoblet aaosteel.de og aaosteel.uk KVALITETSVURDERING Jeg har i denne opgave fået styrket min kodning i dreamweaver og fået meget mere forståelse for HTML, eftersom jeg har kodet næsten alt i hånden og lært af de fejl og problemer jeg er stødt på undervejs. Jeg er godt tilfreds med resultatet, rods denne opgave ikke var ret udfordrende ret designmæssigt. Men de to landing pages spiller godt sammen med koncernhjemmesiden og giver brugeren de oplysninger vedkommende ønsker, på en hurtig overskuelig og effektiv måde. Som derved generere en masse trafik til AAOsteels hjemmeside - hvilket jo er formålet. På min e-portfolie www.charlottebodholdt.dk findes linket til de to landing pages - som dog endnu ikke er online. 15
// grafisk produktion og workflow - landing page vis på 27 " mac 16
// grafisk produktion og workflow - koncernhjemmeside 17
// grafisk produktion og workflow - skelet Wrapper 980xauto px Skelette til de to landing pages er oprindelig tegnet i hånden. 22 px 17 px logo 82x325 px top 980x120 Er ikke lavet i målestoksforhold Topbillede 382x980 px 200 px billedebox 1-5 400x250 px bund 70 px billedebox 400xauto px top 50 px left 22 px 80 px billedetekstbox 90x650 px 90 px 50 px billedebox 1 50 px 70 px 70 px billedebox 2 textbox 1 textbox 2 70 px 70 px Textbox 1-5 455x250 px bund 70 px * baggrunds billedet er lagt ind i body tagget Background-repeat: No-repeat Background-attachment: fixed footer box 1 & 2 300xauto px 22 px billedebox 3 textbox 3 70 px 70 px billedebox 4 textbox 4 70 px 70 px billedebox 5 textbox 5 50 px Textbox 455xauto px top 50 px right 50 px float right top 18 px left 18 px 70 px billedebox hjemmeside 290X400 PX 70 px textbox hjemmeside footer box 3 300xauto px 20 px footer content 980x180 px top 18 px float right footer box 1 footer box 1 footer box 1 right 22 px left 22 px 18
// grafisk produktion og workflow - tysk & engelsk landing page 1. BAGGRUNDEN er den samme som på koncernhjemmesiden. Denne er fast og følger ikke med når man scroller på siden. 2. LOGO, TOPBILLEDE OG BILLEDETEKST er placeret samme sted som på koncernhjemmesiden. 2 5. I BUNDEN af de to landing pages er der til højre placeret en stor rød Call-to-action knap, som opfordrer kunden til at klikke videre til AAOsteels hjemmeside. Knappen er bevidst lavet så stor, så den adskiller sig fra de andre elementer på siden, og generer kunder til koncernhjemmesiden. 3. DE 7 EMNER med tekst og billede, er placeret vertikalt under hinanden, med lige meget luft over og under (billedeboksene er lige store 400x250 px) - dette er gjort for at skabe balance, ro, struktur og overskuelighed. 1 3 6. FATFOOTEREN Er magen til den på koncernhjemmesiden, her er kontakt informationerne for AAOsteel placeret. 4. OVERSKRIFTERNE, BILLEDER - KONTRASTER er røde som på koncernhjemmeside - for at skabe opmærksomhed på disse og skabe en god kontrast til den grå brødtekst. Samtidig skaber de flotte og farvestrålende billeder en godt kontraste til den rolige lysegrå baggrund. 4 5 19 6
// grafisk produktion og workflow - tysk & engelsk landing page 20