Manual Anvisningar vid annonsering på startsida i Ratsit 3.0.

Relevanta dokument
Mobilt. Digitala annonsformat och teknisk specifikation. Gäller fr om

Grafisk profil för digitala gränssnitt MAJ 2019

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1

Lektion 2 - CSS. CSS - Fortsätt så här

Svenska kyrkans annonsverktyg Användarmanual Version

Mobilt. Digitala annonsformat och teknisk specifikation. Gäller fr om

Bildredigering i EPiServer & Gimp

Manual för lokalredaktörer villaagarna.se

Gäller fr om och tills vidare

GRAFISKA RIKTLINJER FÖR ANNONSPRODUKTION

Manual HSB Webb brf


Dessa tre fönster kan enbart visas i datavyn, inte i layoutvyn. Det är också möjligt att ha flera fönster öppna samtidigt.

[ HUR DU UPPDATERAR FÖRSTASIDAN PÅ OTHELLO.NU ]

MATERIALSPECIFIKATIONER T JÄNSTER

Materialspecifikation för desktop och mobil

Lär dig grunderna i Photoshop Elements 4.0

Grundredigering i Photoshop Elements. Innehåll. Lennart Elg Grundredigering i Elements Version 2, uppdaterad

Materialspecifikationer webb 2014

MATERIALSPECIFIKATIONER T JÄNSTER

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Startsidan. Panorama / Dubbel panorama. 400x80. Panorama / Dubbel panorama

Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA

Bygga kurser för mobila enheter

Teckenförrådet Grafisk profil

Innehåll. Omslagsfoto: Daniel Sahlberg. Liber AB Version 2.1 Sida 1

Manual för lokalredaktörer villaagarna.se

Struktur & Layout med CSS

Snabbstartsguide. Verktygsfältet Snabbåtkomst Kommandona här är alltid synliga. Högerklicka på ett kommando om du vill lägga till det här.

Börja med att samla alla bilder som du vill använda till din film i en mapp under Mina dokument.

UngO teket. Banläggning i OCAD. ungoteket.se

När man trycker på knappen får man upp ett fönster med alla tillgängliga bilder, och väljer en av dem genom att trycka på bilden:

Materialspecifikation

När appen startar så gör den det på en särskild sida som du bestämt ska vara Hem-sida. Du kan ändra det under Inställningar och Spara sida som Hem.

Materialspecifikation för desktop och mobil

IT-körkort för språklärare. Modul 5: Ljud, del 2

DOME. storyteller DOME STORYTELLER

Användarmanual Bildstöd

Grundredigering i Photoshop Elements

T a b e l l e r - t a b l e s

Nya funktioner i EPI6 Bilder hantering för nyheter

Teknisk beskrivning för annonsering i PlayAd s format

Materialspecifikation för alla Portalens mässajter

INNEHÅLL. INNEHÅLL 30 juni Administrera din butik 2. 2 Lägg in dina första varor och artiklar 4. 3 Butiksinställningar 8

Manual till hemsidesförslag för:

Manual. Grafiska anvisningar. Så här använder du Svenska Kennelklubbens logotyper

Övningar i bilder och färger

Digital materialspec - Hälsa & Fitness

Att skapa en bakgrundsbild och använda den i HIPP

Materialspecifikationer

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

Elements 5.0. Innehållsförteckning

Vilken version av Dreamweaver använder du?

Skapa PowerPoint-presentation

Våra grafiska riktlinjer

Manual Invånare. Stöd och Behandling version 1.4. Stockholm,

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Kom igång och redigera din hemsida!

Kort instruktion för arbete i Sitevision ( exempel från ATM)

Föreningarnas nya sidmall

MANUAL. fotoklok designer 3.5. Startskärmen

HelenTh. Picmonkey.com. Redigera foton och gör bildkollaget hos.

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad ) Birger Eriksson webblots.se

Verktygsfält. Hantering av webbkarta Grundinstruktion. Sida 1 av 6. De olika verktygen och delarna förklaras i detalj längre ner i dokumentet.

SE/Rapport_tillganglig_webb_2004_14.pdf 2 webzone.k3.mah.se/k99ac3hl/helenalackmagisterkogniton2003.

Open24 Webtool. Inofficiell komplettering till manual

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: Byta lösenord

GRAFISK MANUAL

Laboration 2. Webbproduktion En stiligare webbsida HT2015

logotyp Logotypen finns i två utföranden. Liggande och stående.

Lathund länkar. Skapa en intern länk som en sida

Genom att följa instruktionerna når vi konsekvens, tydlighet och trovärdighet i vår kommunikation.

Manual för. 2.4 KALAS Sitemanager

Grafisk manual för Sveriges Viktigaste Jobb. ringen

Så beställer du via ny och enkel e-handel

Vetenskapliga affischer. Karin Fahlquist

Lathund mallar för filmgrafik

med Office 365 i Dynamics NAV 2015

Manual för banläggning i OCAD IF ÅLAND

Lathund länkar. 1Skapa en intern länk som en sida

RACCOON DEVELOPMENT AB

Arbeta med bilder. Lathund kring hur du fixar till bilder från digitalkamera eller Internet så att de går att använda i ett kommunikationsprogram.

En stiligare portal Laboration 3

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Kapitel 3 Fönster och dörr... 3

4.1 Skapa innehållselement

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida.

1 Allmänt. 2 Hur gör man. 2.1 Gå till lagets sida, Logga in genom att trycka på hänglåset

Snabbguide: Hur man öppnar en egen nätbutik

Ljuskultur är Sveriges enda specialtidning om belysning

GRAFISK PROFIL TIDAHOLMS KOMMUN

Inledning. Innehåll. Inledning

Manual till webbkartornas grundläggande funktioner

Produktionsprislista och materialspecifikationer

GRAFISK MANUAL. Exempel på icke tillåtna skrivningar: Bank-id, Bank-ID, bank-id, Bankid, Bank id, bankid.

create+ Interactive Scene Redaktörshandbok episerver

Innan du börjar göra din katalog så rekommenderar vi att du läser igenom den korta introduktionen på startsidan.

Juni 2003 PlanCon Viewer Handledning PlanCon PROJEKT

MANUAL INVÅNARE. Manual Invånare. Stöd och Behandling release 2018:3. Stockholm, sid 1 (17)

Transkript:

Version 2.0 onsdag 12 oktober 2016 1 av 8 Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Kort beskrivning Instruktioner: Nedan finner du instruktioner kring hur du skapar wallpaper för ratsit.se. Viktigt att komma ihåg är att bilden är satt som cover och kommer att beskäras för att alltid täcka hela ytan på skärmen beroende på enhet som användarna kör. Detta kan leda till att bilden även zoomas för att behålla proportionerna. Orange = Ratsit sökruta (Denna är bara för att skapa en uppfattning, kan skilja sig från verkligheten då bakgrunden skalas om på sajten.) Blå = Yttre säkerhets zon (Syns inte alltid men oftast) Grön = Yttre säkerhets zon Ipad lanscape. Rött = Lägg budskapen här viktigt innehåll som läggs utanför markering kan komma att skalas bort i vissa enheter. Desktop 1400px*800px: Bilden nedan förklarar hur du ska tänka kring placering i Desktop.

Version 2.0 onsdag 12 oktober 2016 2 av 8 Tablet 1024px*800px: Bilden nedan förklarar hur du ska tänka kring placering i Tablet. Grön zon kommer att beskäras i porträttläge. Mobil 395px*800px: Bilden nedan förklarar hur du ska tänka kring placering i Mobil. Alla bilder ovan finns i Material mappen Ratsit WP Guide i filformaten.eps.pdf &.png för att kunna redigeras och se var ni ska placera material över vid produktion.

Version 2.0 onsdag 12 oktober 2016 3 av 8 Bra att veta: - Skicka aldrig material med sökrutan i till Invativa. - Lägg alltid på en bakgrundsfärg eller bild över hela bilden säkerhetszonerna är endast - för att markera vart ni ska lägga viktigt innehåll så som Texter, erbjudanden osv. Skicka material i filformaten.jpg eller.png. Skicka gärna med orginalfilen med objekt så kan Invativa hjälpa till med små justeringar så att ni får det bästa resultaten. De röda & gröna zonerna är alltid tänkt på att vara in screen utan att man ska behöva scrolla. Exempel på en bra kampanj:

Version 2.0 onsdag 12 oktober 2016 4 av 8 Lång beskrivning Koncept Ny annonsyta på ratsit.se startsidan som täcker hela sidans bakgrund, en så kallad wallpaper. Hela bakgrunden är klickbar d.v.s. länkar vidare till annonsörens sida/ kampanj. Sökrutan på start är genomskinlig vilket ger ett snyggt och effektivt helhetsintryck av annonsen. Responsivitet Annonsytan är skalbar och täcker sidans bakgrund oavsett storlek på fönster. Dock krävs viss anpassning i design och layout av annonsen i mobila enheter. Annonsören måste välja hur annonsen ska bete sig beroende på enhet och storlek på fönster. Ett alternativ är att skapa tre varianter av annonsen: en för desktop, en för tablets och en för mobiltelefoner. Vad gäller mobila enheter rekommenderas att skapa en specifikt anpassad annons. Nedan presenteras olika design och layout möjligheter för olika enheter. Design Desktop Beroende på vilket tillvägagångssätt som väljs kan designen av annonsen se lite olika ut. I desktop finns dock några riktlinjer som kan vara bra att följa. Storleken på annonsen bör vara 1400px i bredd och 800px i höjd i fullstorlek. På så vis passar den de flesta desktop datorer. På större skärmar kommer annonsen att förstoras en del så det är viktigt att upplösningen är relativt hög. Om skärmen är mycket stor finns även risk att kanter på bilden klipps av såväl på sidorna som i toppen och botten av annonsen. Därför är det viktigt att placera annonsens budskap på ett sätt som inte påverkas av detta. Nedan visas ett exempel där prioriterat budskap placeras strax under sökrutan. På det viset kommer det synas oberoende av skärmstorlek. Viktigt innehåll/budskap bör alltså läggas under sökrutan i mitten av sidan. På så vis kommer det alltid synas och ligga centralt på sidan (prio 1) exempelvis text. Om element ligger för nära nedre kanten eller för långt upp över sökrutan finns också risk att dessa kapas vid stora skärmar. Sekundärt innehåll kan ligga på sidan av sökrutan (prio 2). Denna information kommer då synas när fönstret är tillräckligt stort och annars kapas av likt den högra bilden nedan. Om annonsören väljer att skapa en design specifikt för tablets kommer detta inte att ske särskilt ofta då annonsen byts till tablet versionen när fönstret blir tillräckligt litet. Men om samma annons används för desktop och tablet kommer kanter att kapas av. Det är därför viktigt att tänka på hur innehåll presenteras på höger respektive vänster sida av sökrutan. Återigen rekommenderas att lägga text centralt under sök och att man istället har bilder/illustrationer eller dylikt på kanterna eftersom det inte gör lika mycket om dessa kapas. I desktopläge är sökrutans storlek 395px i bredd och 304px i höjd.

Version 2.0 onsdag 12 oktober 2016 5 av 8 Bilderna nedan visar var innehåll förslagsvis kan placeras. Sedan kan bakgrundsbilden ha ett tydligt budskap som går över hela sidan men vad gäller specifika element såsom rubriktext, logotyper eller specifika element är det en bra idé att följa ytorna nedan. På bilderna syns även hur bilden kan komma att kapas på sidorna vid mindre storlekar. Riktlinjer: Ha viktigt budskap (text, rubrik, logotyper) centralt precis under sökrutan. Ha inte element för nära botten eller toppen av bilden. Vid stora storlekar zoomas bilden in så Ha mycket luft på sidorna och framförallt under och över sökrutan. Centrera viktiga element under sök. Försök att placera viktiga element mer än 200px från nedre kant för att försäkra att de inte klipps i botten av bilden. Ha prio 2 element på kanterna då dessa kan kapas i vissa extrema storlekar. Exempel på mindre enheter och skärmar: - Element på kanter kapas en aning. Därför bra att även ha med en tablet variant. Exempel på stora skärmar: - Bilden anpassas efter CSS klassen Background-image:cover; vilket innebär att bilden zoomas in vid stora skärmar. Detta för att bilden inte ska skalas konstigt,

Version 2.0 - onsdag 12 oktober 2016 6 av 8 stretchas ut etc. Detta innebär att kanter kapas en aning men framförallt att ytorna ovanför och under sökrutan minskas ner. På bilden till vänster syns hur annonsen ser ut på en normalstor skärm. På bilden till höger syns hur annonsen ser ut på en större skärm. Då element ligger längst ner på bilden kapas de då annonsen expanderar. Denna annons kapas då i botten. Tablet Precis som på desktop bör viktigt information och framförallt text ligga under sökrutan. På så sätt är informationen central. Sidorna på tablet blir mindre vilket gör att det blir mindre lämpligt för den typ av innehåll, se bilden nedan. Dock kan ju tablets användas i liggande riktning vilket skapar större marginal på sidorna. Storleken på tablets varierar också ganska kraftigt mellan olika typer vilket kan göra det svårt att få till en annons som matchar alla. Men en annonsyta på exempelvis en ipad skulle i stående läge behöva vara ca. 769px i bredd och 800px i höjd och i liggande läge ca. 1024px i bredd och 800px i höjd. Annonsen behöver därför vara 1024x800px för att fungera i både liggande och stående läge. Men det är viktigt att designen anpassas så den fungerar bra i båda lägena. I tablet-läge är sökrutans storlek 395px i bredd och 304px i höjd.

Version 2.0 onsdag 12 oktober 2016 7 av 8 Mobil Vad gäller mobiltelefoner finns det två alternativ. (1) Antingen skapas en banner som ligger under sökrutan med en generisk bakgrund utan koppling till annonsen bakom (se bild till vänster). (2) Alternativt skapas en specifik annonsbild som täcker hela sidan men som är anpassad för mobilen (rekommenderas, se bilder till höger). Bakgrunden kan vara samma som i desktop och tablet men bara om den fungerar. Alternativt krympas ner/kapas i kanter etc. för att matcha. Bakgrunden kan också vara en enfärgad bakgrund i en färg som passar. Detta är upp till annonsören. Precis som i de övriga enheterna skall den viktigaste informationen ligga under sökrutan. I mobilen är avståndet till kanterna minimalt, så ingen information kommer kunna ligga där. Däremot kan återigen hela bakgrundsbilden kommunicera annonsens budskap. Men text etc. bör ligga under sökrutan för att synas väl. Höjden på sidan i mobilen går att anpassa så det går även att lägga information hela vägen ner till footern (se bilden längst till höger) dock kommer ju endast första rutan (Prio 1 innehåll) synas utan scroll. Alternativ 1. Alternativ 2. Väljs alternativ 1 (banner) bör bannern vara ca. 328px i bredd och 120px i höjd. Den kan vara högre men då kommer det behövas att användaren scrollar för att se hela annonsen. Väljs alternativ 2 (hela sidan bakgrund och allt) bör annonsen vara ca 375px i bredd och 800px i höjd.

Version 2.0 onsdag 12 oktober 2016 8 av 8 Storleken på sökrutan i mobilt läge är 328px i bredd och 180px i höjd Placeringen på sökrutan i mobilt läge är 26px från toppen. Dimensioner och storlekar Storlek på annons Desktop 1400px i bredd och 800px i höjd Filstorlek: Max 500kb Tablet 1024px i bredd och 800px i höjd. Dock kapas kanterna då tablet är i stående läge, vilket bör tas hänsyn till i designen. Filstorlek: Max 400kb Mobil Banner: 328px i bredd och 120px i höjd Full bakgrund: 375px i bredd och 800px i höjd Filstorlek: Max 350kb Sökrutans storlek Desktop B: 395px H: 304px Tablet B: 395px H: 304px Mobil B: 328px H: 180px Sökrutans placering Desktop 83px från toppen. Tablet 38px från toppen. Mobil 26px från toppen.