Hem  ›  0. Guider  ›  Skapa mobilanpassade nyhetsbrev- Genomgång

Skapa mobilanpassade nyhetsbrev- Genomgång

Taggar: , , ,

Här går vi igenom hur du använder våra nya block för de mobilanpassade mallarna till blockeditorn. Artikeln delas upp efter block då det är dessa som har genomgått den största förändringen.

Vad menas med mobilanpassade nyhetsbrev?

Först ska vi förklara vad mobilanpassade nyhetsbrev innebär och vad som händer när mottagaren öppnar ditt nyhetsbrev på en mobil enhet. En mobilanpassad mall är precis som en vanlig mall när mottagaren öppnar sitt nyhetsbrev på skärmar större än 480px. Om mottagaren istället öppnar nyhetsbrevet på en mobil enhet anpassas nyhetsbrevet därefter. Detta innebär att samtliga block i två och tre kolumner staplas ovanpå varandra för att få plats i den mobila enheten vilket förbättrar läsbarheten för mottagaren. I exemplet nedan kan du se hur ett block för text och bild staplas ovanpå varandra för mobila enheter.

Ny redigeringsyta för block i två och tre kolumner

Block i två respektive tre kolumner har förändrats för att de ska fungera på mobila enheter. Numera drar du ut ett block som innehåller samtliga typer av innehåll i samma, det vill säga rubrik, text och bild. Inget fält är obligatoriskt och du kryssar dör de block du vill inkludera, detta för att du ska kunna kombinera precis som du vill. Du kan exempelvis endast placera två bilder bredvid varandra och strunta i text och rubrik. Vi går in djupare på detta under varje blocks individuella beskrivning längre ner i denna artikel.

edit-blocks2

Begrepp

När vi skriver ”standard” i exempelbilderna menar vi hur nyhetsbreven ser ut på skärmar som är bredare än 480px. Detta innefattar alltså surfplattor, bärbara datorer och stationära datorer. När vi skriver ”mobilanpassad” menar vi hur nyhetsbrevet ser ut på skärmar som är smalare än 480px. Detta innefattar alltså de allra flesta smart phones som exempelvis iPhone. Det är alltså samma nyhetsbrev som skalar om sig och anpassar sig efter storleken på skärmen som mottagaren använder. Standard = Surfplattor, bärbara datorer, stationära datorer. Mobilanpassad = Smart phones

❤ Block i en kolumn

Block i en kolumn har inte genomgått någon större förändring men vi ska ändå ta en titt på hur de ser ut i normal storlek jämfört med hur de ser ut på en mobil enhet.

1-txt Text

Text i en kolumn löper lika långt som nyhetsbrevets längd och när den ytan förminskas på mobila enheter justeras texten därefter.

1-img-nomargin Bild (utan marginal)

Bilder utan marginal är lika bred som nyhetsbrevet och när nyhetsbrevet ses på en mobil enhet anpassas bilden efter bredden på skärmen.

1-img Bild (med marginal)

Precis som blocket med bild utan marginal anpassar sig detta block efter storleken på skärmen, enda skillnaden är att bild med marginal har 15px på vardera sida av bilden så att det inte ska löpa över nyhetsbrevets hela bredd.

1-heading Rubrik

Likt text i en kolumn anpassar sig bredden för rubriken så att den får plats på mobila enheter. Tänk på att inte ha för långa ord i rubrikerna då det kan bryta layouten för nyhetsbrevet på mobila enheter. Se till att förhandsgranska utskicket noga för att säkerställa att det ser bra ut.

Exempel på nyhetsbrev med en kolumn:

onecol-ex


❤❤ Block i två kolumner

Block i två kolumner har fått sig en rejäl omstrukturering. Block för text och bild samt bild och text fungerar på samma sätt som innan men de andra blocken var vi tvungen att omstrukturera för att få dem att fungera på mobila enheter. Tidigare kunde du dra ut ett block som innehåller endast bilder i två kolumner och sedan dra ut ett nytt block för text i två kolumner: Skärmavbild 2013-05-23 kl. 15.33.50

Problematiken med denna lösning är att blocken staplas felaktigt på mobila enheter. Som du kan se på exempelbilden nedan blir ordningen bild – bild – text – text istället för det önskvärda bild – text – bild – text.

Skärmavbild 2013-05-23 kl. 15.45.57

Detta har vi löst genom att ta fram nya block och nedan följer instruktioner för hur du hanterar dem.

2-txt_img Text och bild

Precis som innan uppdateringen lägger detta block till text till vänster och en bild till höger. På mobila enheter kommer texten lägga sig ovanför bilden.

2-img_txt Bild och text

Detta block fungerar på samma sätt som det ovan. Standardversionen av nyhetsbrevet kommer visa bild till vänster och text till höger men på mobila enheter kommer dessa lägga sig efter varandra. Bild först och text under.

heading_image_text_two_columns Rubrik, bild och text

Dessa block är alltså ersättning för de tidigare blocken ”text i två kolumner”, ”bild i två kolumner” och ”rubrik i två kolumner”. Inget av fälten är obligatoriska för att du ska ha möjligheten att exempelvis endast ha text i två kolumner. Men möjligheten finns alltså att placera rubrik, bild och text efter varandra.

image_heading_text_two_columns Bild, rubrik och text

Detta block fungerar precis som det ovan förutom ordningen på blocken. Här kan du alltså placera innehållet enligt ordningen bild, rubrik och text istället.

Exempel på nyhetsbrev i två kolumner:

twocol-ex


❤❤❤ Block i tre kolumner

heading_image_text_three_columns Rubrik, bild och text

Precis som block för två kolumner var vi tvungen att göra om strukturen för att anpassa blocken för mobila enheter. Inget fält är obligatoriskt för att du ska ha möjligheten att endast välja en typ. Du kan exempelvis dra in detta block och endast placera bilder i tre kolumner och utelämna rubrik och text.

image_heading_text_three_columns Bild, rubrik och text

Samma sak gäller för detta block. Skillnaden är att här har du möjlighet att placera innehållet enligt ordningen bild, rubrik och text istället för rubrik, bild och text som i blocket ovan.

Exempel på nyhetsbrev i tre kolumner

threecol-ex


★ Special

special-divider-empty2 Avskiljare med tomrum

Detta block är helt oförändrat för våra mobilanpassade mallar. Blockets enda syfte är att skapa extra tomutrymme mellan blocken så det är samma resultat på mobila enheter.

special-divider-line2 Avskiljare med en linje

Precis som avskiljare med tomrum är detta block oförändrat. Linjen sträcker sig över hela blockets bredd oavsett om det är i standardläget eller i mobilt läge.