QUICK GUIDE INSTANT MAGAZINE
Creëer een online magazine in een handomdraai Wat tof dat je aan de slag gaat met onze tool! We hopen dat je veel plezier beleeft aan het maken van je publicaties. Lees deze quick guide en word een ware Instant Magazine hero! Heb je vragen? Stel ze gerust aan één van onze collega’s. Dit kun je het beste doen via het ‘support centrum’ in ons systeem.
Goed om te weten Bij Instant Magazine kun je meerdere titles aanmaken binnen je account. Binnen één title kun je een onbeperkt aantal issues publiceren. Indien je een one-off afneemt, kun je één issue aanmaken binnen de title. Maar hoe werkt dat precies? In dit schema leggen we de structuur uit:
Je maakt binnen een title de issues aan. Stel dat je een personeelsblad én een corporate brochure maakt, dan zijn dit twee titles. Aan de title is je domeinnaam, Google Analytics code, logo en magazine archief gekoppeld. Als je een tweede issue binnen de title aanmaakt, staan al deze instellingen direct goed. ________________________________________________________________________________________________________ Instant Magazine Quick Guide 1 Versie: 20150727
Let’s get started Log in op http://my.instantmagazine.com In het dashboard vind je de issues waar je recent aan hebt gewerkt en een overzicht van je titles.
________________________________________________________________________________________________________ Instant Magazine Quick Guide 2 Versie: 20150727
Aan de slag met je eerste magazine
STAP 1: Je eerste magazine maken Klik op new title, geef ‘m een naam en klik op start! (Als je een tweede issue gaat maken binnen een bestaande title, kies je ‘edit’ bij de betreffende title. Vervolgens druk je op de + bij New Issue. Deze stap kun je dan overslaan)
In deze title settings kun je de naam van de title, logo’s, hostname en Google Analytics-code toevoegen. Logo: dit logo staat in de navigatiebalk. Icon: deze verschijnt in je navigatiebalk op de mobiele weergave, als favicon én als avatar op je mobiel/tablet als je het magazine toevoegt aan je beginscherm. De afbeelding moet vierkant zijn. Loader: is het eerste logo wat je ziet op het laadscherm van je magazine. Voor logo’s met een transparante achtergrond adviseren we een .png bestand. In andere gevallen gebruik je een .jpg bestand. Qua afmeting adviseren we een breedte van 1024 pixels. Tip: maak in de Image Library een map
aan waar alle logo’s in staan (lekker overzichtelijk). ________________________________________________________________________________________________________ Instant Magazine Quick Guide 3 Versie: 20150727
Hostname Bij hostname vul je de URL in waaronder je magazine moet verschijnen. Laat je die leeg dan is de opbouw van de URL is in principe zo: http://accountname.instantmagazine.com/title/issue Wil je hem op een eigen (sub)domein hebben draaien? Vul dan je eigen URL (hostname) in. Deze wordt na het publiceren: http://subdomein.jouwdomein.nl/issue of http://www.jouwgekozendomeinnaam.nl/issue (dus je accountnaam, onze URL en de title worden vervangen door je hostname) Google Analytics Wil je je magazine meten via Google Analytics? Dan kun je in dit veld de UA-code invullen. Heb je geen Google code? Activeer deze op www.google.com/analytics.
STAP 2: Theme styling (de algemene vormgeving) Om het je makkelijk te maken, kunnen we alle stijl-elementen automatisch invullen. Dat kan op basis van de URL van je website óf je logo óf een bestaand magazine óf een aantal basis kleuren die je selecteert. In het volgende venster kies je één van de navigatievormen, een iconen set en selecteer je de lettertypes.
________________________________________________________________________________________________________ Instant Magazine Quick Guide 4 Versie: 20150727
Per magazine blijven deze instellingen bewaard. Als je al een kleurenschema hebt en opnieuw kiest voor ‘Create new theme’, overschrijf je daarmee je bestaande instellingen. In de color-picker kun je RGB (Rood, Groen, Blauw) kleuren óf Hexa-kleuren gebruiken. Hexakleuren zijn webkleuren. De A staat voor Alfa. Hiermee kun je de transparantie van een kleur instellen. Deze kun je instellen met een percentage of beïnvloeden met de schuifbalk. Met het
icoon kun je een item transparant maken.
Als de kleuren en lettertypes zijn ingesteld klik je op
________________________________________________________________________________________________________ Instant Magazine Quick Guide 5 Versie: 20150727
Stap 3: een pagina aanmaken Nu begint het leuk te worden; je kunt je eerste pagina gaan aanmaken! We hebben een groot aantal pagina templates ontwikkeld. Dit zijn vooraf gedefinieerde pagina-types die je naar eigen inzicht kunt invullen. We hebben deze standaarden gecreëerd zodat: ●
Jij supersnel de pagina’s kunt aanmaken
●
Wij kunnen waarborgen dat ze op de verschillende apparaten goed werken
●
De lezer enige houvast krijgt in de navigatie
Je kunt per pagina een template kiezen. Geef je pagina een naam en kies een template. Voor elk type content hebben we templates ontwikkeld. Covers, indexpagina’s, foto-galleries, video’s, agenda’s, producten, etc. Filter aan de hand van je content of scroll door het overzicht. Klik op USE TEMPLATE om het template te selecteren of klik op PREVIEW voor meer informatie over het template.
Tip: Probeer vooraf een goed beeld te krijgen van de beschikbare templates. Bekijk alle templates op: http://instantmagazine.instantmagazine.com/nieuwsupdate/all-templates of blader door de Template Instructies (deze vind je terug in het support centrum in de editor). ________________________________________________________________________________________________________ Instant Magazine Quick Guide 6 Versie: 20150727
Vervolgens worden in het tabblad ‘Content’ de velden getoond die je moet invullen. In sommige templates zie je twee tekstvelden. Één voor mobile en één voor desktop/tablet. Zo kun je voor bezoekers op een smartphone eventueel een kortere tekst presenteren.
Tekst Veelal worden teksten opgeknipt in korte content chunks met duidelijke koppen. Maar ook voor longreads hebben we een aantal fraaie templates. Zorg ervoor dat de tekst goed scanbaar is voor de lezer. Bij de meeste templates geven we het aantal maximale woorden aan waar het template geschikt voor is. Maar omdat je zelf de lettergrootte bepaalt, is het belangrijk dat je de pagina’s op alle resoluties controleert. ________________________________________________________________________________________________________ Instant Magazine Quick Guide 7 Versie: 20150727
Afbeeldingen Alle afbeeldingen staan in je eigen Image Library. Deze kun je openen door op de knop Browse te klikken. Tip: Werk hier met een logische mappenstructuur om het overzichtelijk te houden.
Voor achtergrondafbeeldingen adviseren we het volgende: ●
Opslaan voor web als .jpg
●
1400 x 900 pixels (de hoogte wordt bijgesneden)
●
Eventueel voor mobile een staande variant (640 x 960 pixels)
●
Kwaliteit terugbrengen naar 30-60%
●
Probeer ervoor te zorgen dat een achtergrondfoto niet groter is dan 150 kb.
Met te zware visuals wordt de laadtijd langer. De formaten voor de overige visuals vindt je onder het
icoon.
Tip: Heb je geen Photoshop? Probeer Pixlr: http://apps.pixlr.com/editor. Een gratis web-based tool. Als alle content is gevuld klik je op ‘Save’ en de pagina wordt opgeslagen. Klik op ‘Preview’ om je pagina te bekijken. En? Ziet het er goed uit? Nu kun je eventueel in het ‘Thema’ nog wat finetunen in je vormgeving. Je kunt in het tabblad ‘Page style’ op pagina-niveau de vormgeving aanpassen. Hier worden de specifieke elementen van het template getoond. Hiermee overschrijf je de theme styling. Veranderingen die je hier doorvoert worden alleen op deze pagina aangepast. In sommige templates vind je de button ‘Item style’. Hiermee kun je items individueel stijlen. De ‘Item style’ vind je in de geavanceerdere templates zoals de onepager, onepager tiles, timeline, longread etc. In het tabblad ‘SEO’ (Search Engine Optimization) kun je eventueel je pagina’s optimaliseren voor vindbaarheid in Google. Gebruik hier alleen teksten die ook daadwerkelijk in je issue voorkomen. De description wordt ook gebruikt als je hem deelt op Facebook. Maak een overlay aan via het tabblad ‘Overlay’. Klik op de +. Vul de overlay met content en bewaar deze. De overlay staat nu klaar om gekoppeld te worden aan de tekst. Ga naar de tab content en selecteer de tekst waar de overlay aan gekoppeld moet worden. Ga rechtsboven in het tekstveld naar Insert link
. Daar selecteer je bij To overlay de aangemaakte
overlay. Bij style kun je ‘button’ selecteren, als je dat niet doet wordt het een tekstlink.
________________________________________________________________________________________________________ Instant Magazine Quick Guide 8 Versie: 20150727
STAP 2: Issue settings Na het instellen van de title ga je verder met het magazine (issue). Geef de naam van de uitgave op, selecteer welke social share buttons in je issue komen, stel de taal in en klik vervolgens op save.
Een korte uitleg over de overige items op deze pagina: ●
Buttons in navigation bar: voor buttons in je navigatiebalk, zoals een colofon
●
Form builder: als je formulieren aan wilt maken in je issue
●
Cookie check: als je deze in wilt stellen voor je magazine
●
Header: hier heb je de mogelijkheid om op elke pagina een logo of call-to-action toe te voegen
●
Acces control: kan op twee manieren: By password: als je het issue wilt afschermen dmv bijvoorbeeld een wachtwoord
Whitepaper: als je wilt dat mensen zich kenbaar maken voordat ze je magazine lezen. ●
Advanced: een aantal geavanceerde functionaliteiten
Stap 5: je magazine publiceren
________________________________________________________________________________________________________ Instant Magazine Quick Guide 9 Versie: 20150727
Klaar? Dan kun je publiceren! Je krijgt dan automatisch een link van ons waaronder je je issue kunt vinden. Indien je je domeinnaam goed hebt gekoppeld, kun je direct je magazine bekijken. Hieronder een aantal punten waar je op moet letten: Checklist voor publiceren: ❏
Is de hostname goed ingevuld in de title settings?
❏
Heb je je eigen (sub)domein gekoppeld via je domein beheer?
❏
Is de UA code ingevuld (indien je het magazine wilt meten via Google Analytics)?
❏
Heb je het magazine gecontroleerd op tablet en mobile formaat?
❏
Zijn alle links vanuit het magazine goed gekoppeld?
❏
Heb je alle overlays getest?
❏
Heb je eventuele formulieren getest? Komen ze binnen per mail?
In de FAQ worden een aantal van bovenstaande punten uitgelegd.
FAQ Waar vul ik de logo’s in? Ga naar de titles en bewerk de betreffende title. Aan de rechterzijde zie je drie logo’s. Het eerste logo ________________________________________________________________________________________________________ Instant Magazine Quick Guide 10 Versie: 20150727
verwijst naar het logo in de navigatiebalk. Het tweede logo is het app-icon (moet vierkant zijn). Deze komt op de mobile versie in je navigatiebalk en als app-icon als je het magazine toevoegt aan je home-screen van je tablet of smartphone. Het loader logo staat boven de laadbalk als je het magazine opent. Hoe koppel ik mijn domeinnaam? Dit doe je door bij de title een domeinnaam in te vullen. Dat kan een specifiek domein zijn of een subdomein (bijv. magazine.jouwdomein.nl). Vervolgens log je in op het administratiepaneel van je domein. Deze gegevens heb je van je provider ontvangen. Hier maak je bij de DNS gegevens een subdomein aan. Als type kies je voor een CNAME. Bij het serveradres vul je in: s1.instantmagazine.com. (bij sommige providers is die ‘punt’ belangrijk). Kan ik meerdere domeinen koppelen aan één title? Wij kunnen één domeinnaam per title herkennen. Als je meerdere domeinen naar je magazine wilt verwijzen, kun je bij de meeste providers een doorstuur service gebruiken. Dit is hetzelfde als een URL redirect. Dit wordt ook gebruikt als je bijvoorbeeld wilt dat gebruikers met én zonder WWW uitkomen bij je magazine. Welke videostreams kan ik embedden? In het video template kan je een Youtube, Vimeo of Wistia link plaatsen. Je kunt video’s ook achter een button of overlay plaatsen. Hoe kan ik Google Analytics integreren? Als je je magazine nog uitgebreider wilt meten dan de standaard meetfunctie in Instant Magazine, kun je bij de title een UA-code invoeren. Als je via Google Analytics een profiel of property aanmaakt voor je magazine ontvang je deze UA-code (www.google.com/analytics). Als je de title gaat bewerken zie je rechts in de Title Settings het veld Google Analytics staan. Vul hier alleen de UA-code in. Hoe plaats ik een achtergrond video (full-screen video)? Het is bij de meeste templates mogelijk op de achtergrond een video af te laten spelen. Dit kan in de Image Gallery bij Video. Full-screen video wordt niet ondersteund door mobiele apparaten, daarom moet je een zogenaamde ‘fall-back afbeelding’ invullen samen met het Youtube ID. Door op het tandwieltje te klikken naast het ID kun je aangeven wanneer je video moet starten en eindigen.. Hoe pas ik de paginavolgorde aan? Bij ‘Pages’ kun je het
icoon gebruiken om de pagina’s naar boven of onder te slepen.
________________________________________________________________________________________________________ Instant Magazine Quick Guide 11 Versie: 20150727
Hoe kan ik mijn magazine personaliseren? Je kunt de ontvanger nóg persoonlijker aanspreken door je magazine te personaliseren. Dit kan bijvoorbeeld door zijn/haar naam en bedrijfsnaam op de cover te plaatsen. Stap 1: Ga naar Settings > advanced en vink "Enable personalization’ aan. Stap 2: Bij de verspreiding van je magazine kun je in de URL de gepersonaliseerde variabelen meegeven. Bijvoorbeeld: http://magazine.jouweigendomein.nl/issue/?name=John De variabele "name" kun je in dit geval overal in je magazine gebruiken. Dit doe je door {{name}} op de gewenste positie in te voeren. Wil je een alternatieve tekst (fall-back) tonen als de variabele "name" niet wordt meegegeven? Dan kun je de volgende code gebruiken: als name niet bestaat dan alternatief einde als {{^name}} Welkom {{/name}} als de naam wel bestaat dan tonen einde als {{#name}} Beste {{name}} {{/name}} Voorbeeld eindresultaat: {{#name}}Beste {{name}}{{/name}}{{^name}}Welkom{{/name}}, I--- personalisatie ---I--- alternatief ---I Kan ik mijn magazine delen op social media? Je kunt op paginaniveau je magazine delen op sociale kanalen. De tekst die je daarbij te zien krijgt kun je invullen bij de tab SEO in het veld description. Bij Facebook heb je invloed op de getoonde items, door bij de onderstaande URL je link in te vullen. https://developers.facebook.com/tools/debug/og/object/ Hoe plaats je een button in een tekstvlak
________________________________________________________________________________________________________ Instant Magazine Quick Guide 12 Versie: 20150727
Als je in het tekstvlak bijvoorbeeld ‘Lees meer’ typt en deze tekst selecteert, kun je via ‘insert link’ een button aanmaken. URL: Je kunt een verwijzing maken naar een externe url (geef dan wel bij Target ‘New window’ aan, anders verlaat je je magazine. Text to display: deze tekst staat in de button/link To page: linkt rechtstreeks naar een pagina To overlay: linkt naar een aangemaakte overlay Target: moet bij de koppeling naar een externe url op ‘New Window’ staan Style: ‘None’, wordt de tekst aanklikbaar, met een streep eronder en bij ‘Button” wordt er een knop aangemaakt. Kun je in een tekstvlak verschillende lettergroottes aangeven? Alle tekst in een tekstvlak heeft dezelfde grootte en stijl. Maar als je handig bent met HTML, kun je het in de sourcecode aangeven.
________________________________________________________________________________________________________ Instant Magazine Quick Guide 13 Versie: 20150727