Kodning av HTML-e-postmeddelanden suger. På en tid där vi har blivit så inblandade i webbstandarder och CSS-baserad layout, hoppar vi tillbaka i tid och kodar upp bordsbaserade layouter med inline styling, känns rättvist icky. Faktum är att det finns massor av webbdesigners som inte ens varit tillräckligt länge för att vara bekanta med hur man kodar på det här sättet.
Idag ska vi titta på ett nytt verktyg som lovar att göra livet mycket enklare för HTML-e-postdesigners. Med Mailrox laddar du upp din design, skär den upp och enkelt omvandlar den till ett fungerande HTML-e-postmeddelande.
Möt Mailrox
Mailrox lovar ett enkelt arbetsflöde: ladda upp en design (jpg, gif eller png), definiera din layout, lägg till text och anpassad HTML och exportera. Låter lätt rätt? Men kan skapa HTML-e-postmeddelanden verkligen vara en enkel process?
Jag är skeptisk, så idag ska vi ge denna sucker en provkörning. Jag går igenom hela processen med att börja med en design, ladda upp den till webbplatsen och konvertera den till en live-e-post.
Mallen
För att testa Mailrox behöver vi en HTML-e-postdesign. Jag kunde sluta skriva och ta tid att bygga mig själv, men jag är lat och det finns massor av fantastiska gratis mallar online så vi kan lika bra bara ta en av dem. Här är en sådan mall från PSD Freebies.
Steg 1. Skapa en ny e-postadress
Mailrox är för närvarande i beta, så det är gratis att använda, för nu. Du kastar i ditt e-mail för att göra en inbjudan, jag har min inom tio minuter så det borde inte ta för lång tid för dig att komma in.
När du är alla registrerade kommer du att tas till den här sidan:
De har redan gett dig en mall att leka med, men vi vill börja från början, så låt oss träffa knappen som säger? Skapa en ny e-post? vilket ger oss en enkel dialog där vi kan ladda upp vår platta jpg.
Spårning framsteg
Under hela processen hjälper Mailrox dig att hålla ett öga på var du är på gång med en användbar liten grafik längst upp till vänster på skärmen. Jag älskar det när apps gör det här, det ger mig en klar uppfattning om var jag har varit och vart jag ska, förutom att jag tillåter att snabbt klicka och hoppa till olika steg.
Steg 2. Skiva och tärning
När vi laddar upp vår bild tas vi till skärmen nedan. Här ser vi den uppladdade jpg tillsammans med en enkel remsa av verktyg och några fina lilla tips och tips om hur du kommer igång.
I grund och botten är din verktygssats och arbetsflöde helt centrerad kring skivverktyg. Det finns två vertikala skivverktyg, två horisontella skivverktyg, ett skivverktyg och ett skivverktyg.
Som du kan se är blåa skärverktyg enkla? och gröna är verktyg? komplexa.? Det låter bra, men vad betyder det? Det finns verkligen inget som berättar mer om hur dessa fungerar. Efter några experiment visar det sig att blåa skivor kommer att gå hela vägen över sidan och gröna är medvetna om och bundna av andra skivor på sidan.
? Blå skivor kommer att gå hela vägen över sidan och gröna är medvetna om och bundna av andra skivor på sidan.?För att göra en skiva, ta bara ett verktyg och sväng musen över duken. En förhandsgranskning av skivan visas, så att du kan placera den exakt var du vill ha den. Du kan hålla den på plats med ett klick.
Klicka Klicka Klicka
Du får idén här. Bara gå och skiv upp din fil, var försiktig med att skära runt varje objekt som du behöver anpassa på något sätt, vare sig du byter ut en grafik, kasta i text eller helt enkelt lägga till en länk.
Sammantaget är det faktiskt en ganska snabb och enkel process. Om du någonsin har skivat upp en PSD i Photoshop känner du dig hemma här.
Steg 3. Anpassa innehållet
Medan du snittade din design, definierade du faktiskt olika innehållsområden som skulle anpassas. När vi går vidare till innehållet? steg, var och en av dessa områden kommer att vara något du kan sväva över och klicka på för att ändra.
Låt oss till exempel säga att vi vill behålla den huvudsakliga bilden, men lägg till en länk så att när du klickar på bilden tar den dig till en specifik webbadress. För att göra detta klickar du på det avsnittet och använder sedan den lilla blanketten som ska läggas till i din länk.
Ganska lätt rätt? Låt oss hoppa in i något lite svårare där vi måste lägga till i anpassad kod.
Lägger till anpassad kod
Högst upp i vår e-postmall är en stapel som informerar läsaren varför de tar emot e-postmeddelandet och länkar dem tillbaka till en webbplats. Självklart vill vi lägga in vår egen text här.
Processen för detta är där WYSIWYG-iden bryts ner. Du ser, Mailrox är inte avsedd för icke-kodare. Om du inte vet grundläggande HTML och CSS kommer du inte att bli väldigt långt.
? Mailrox är inte avsedd för icke-kodare. Om du inte vet grundläggande HTML och CSS kommer du inte att bli väldigt långt.?I stället skapades det för designers med en bra förståelse av grundläggande webbkod som helt enkelt inte vill gå igenom krånget för att koda ett e-postmeddelande, vilket är ett mycket specifikt djur som måste kodas precis för att fungera korrekt. Det kan låta som en liten nisch, men jag satsar det här beskriver en hel del webbdesigners. Inklusive mig!
När jag klickar på det övre området och väljer att infoga anpassad HTML, får jag skärmen som visas nedan. Textfältet omges automatiskt med koden för tabeller och celler, så tack och lov behöver vi aldrig röra med det. Istället måste vi infoga en textdia och vad som helst inline styling är nödvändigt för att se till att det ser bra ut. Du är helt ensam för detta, så förhoppningsvis är du bekväm med CSS.
När du är klar här, upprepar du i grund och botten bara denna process genom hela din mall tills alla innehållsområden har anpassats efter dina önskemål.
Steg 4. Extra
Innan vi lägger upp det här är det värt att titta på de olika extrafunktioner och godisar som finns tillgängliga för dig i innehållet? sektion. Högst upp till höger i fönstret bör du se följande uppsättning knappar:
Här kan du se en live förhandsgranskning av din färdiga kodade mall i webbläsaren eller ens skicka ett testmail för att se hur det ser ut i olika klienter. Det finns också en nedladdningsknapp, som vi ska prata om i nästa steg.
Motsatt av dessa knappar, längst upp till vänster på skärmen, är följande verktygslista:
Dessa låter dig anpassa de grundläggande sidegenskaperna: bakgrundsfärg, toppmarginal och titel. Det finns också en länk till en Kompatibilitetsrapport.? Detta är ett fantastiskt litet verktyg som gör att du kan se till att din design kommer att fungera i olika e-postklienter.
Som du kan se passerade vår design testet för 19 e-postklienter, inklusive Apple Mail, Gmail och Yahoo. Vi misslyckades dock i ett område: Lotus Notes 6.5-7. Av hand, jag är inte ens säker på vad det är eller om det är viktigt, men Mailrox är precis där för att hålla min hand och hjälpa mig att fatta ett beslut.
Appen informerar mig om att jag har några små bordceller som Lotus Notes inte gillar, men också att det här sannolikt kommer att påverka mindre än 1% av potentiella e-postanvändare. Det låter acceptabelt för mig, men om jag vill lösa problemet, ger de mig även instruktioner för hur man åtgärdar felet.
Steg 5. Ladda ner
När du är färdig klickar du på nedladdningsknappen som vi såg för att tas till skärmen nedan. Jag applåderar utvecklarna för dessa tre alternativ, för jag tycker att de är perfekta:
Här kan vi ladda ner vår mall så att den optimeras specifikt för Mailchimp eller Campaign Monitor. Detta är fantastiskt eftersom båda dessa tjänster är extremt populära och båda har mycket specifika anpassade kodsedlar som krävs för att förbereda en mall för sin tjänst.
Det tredje alternativet är lika coolt. Om du bara vill hämta den vanliga HTML och bilder som ska laddas upp till din server, kommer appen att gå in och prefixera alla bildlänkar med sökvägen till katalog du kommer att lägga på bilderna. Detta är ett riktigt väl genomtänkt alternativ och jag uppskattar ansträngningen här.
Vad tycker jag?
Jag var skeptisk till det här verktyget först, helt enkelt för att jag är en kodare som vanligtvis föredrar att bygga saker för hand och undviker WYSIWYG som pesten. Med detta sagt hatar jag kodning av HTML-e-postmeddelanden. De är verkligen en smärta och allt om layoutprocessen känns bara klumpigt och fel om du älskar CSS-layout så mycket som jag gör.
? Mailrox verkar veta exakt vem jag är och vad jag vill ha av det.?Mailrox verkar veta exakt vem jag är och vad jag vill ha av det. Det vet att jag kan skära upp en design med mycket lite instruktion, och att jag är mer än behörig att skriva en egen kod för de olika bitarna av innehåll. Viktigast av allt, det vet att, medan jag kan göra allt det, vill jag inte bry mig med bordsbaserad layout och komplexiteten i HTML-e-mailkompatibilitet.
Det fokuserar specifikt på de delar av HTML-byggprocessen som är störst och hanterar dem för mig. Jag älskar att utvecklarna är insiktsfulla nog för att dra av en sådan prestation och jag har verkligen haft glädje av att använda appen.
Jag är inte säker på vad de ska debitera för det efter beta, men så länge det är rimligt kan jag definitivt se mig själv att vända mig till Mailrox nästa gång jag behöver ange ett e-postmeddelande.
? Det fokuserar specifikt på de delar av HTML-byggprocessen som är mest irriterande och hanterar dem för mig.?Hur man gör det bättre
Självklart har jag hög beröm för detta verktyg. Det är enkelt, lätt att använda och verkar rikta precis på mina talanger och behov. Med detta sagt har jag ett par klagomål som jag skulle vilja se adresseras i framtida versioner.
Ge mig ett zoomverktyg
Det första klagomålet är införandet av ett zoomverktyg i skivningsarbetet (eller om det redan finns en som jag missade, gör det mer uppenbart). Du försöker placera de här skivorna på mycket exakta punkter i layouten och jag hittade mig ofta med mitt ansikte mot skärmen och försökte få det rätt.
Ge mig ett zoomverktyg
Mitt andra klagomål är att jag måste använda Mailrox för att skära alls. Photoshop-skärverktygen är mer robusta och designers är mer bekanta med dem, varför låt oss inte skära upp dokumentet i Photoshop och sedan ladda upp vår PSD för att hoppa direkt till innehållssteget.
? Photoshop-skärverktygen är mer robusta och designers är mer bekanta med dem, så varför låt oss inte skära upp dokumentet i Photoshop ??En förskivad PSD-uppladdningsfunktion skulle definitivt göra det till en killer app eftersom det skulle göra att konvertera min design till en kodad e-post en nästan smärtlös process som kan utföras mycket snabbt. Skärverktygen på Mailrox är bra och borde förbli, men de av oss som föredrar Photoshop ska få det alternativet.
Vad tror du?
Nu när du har sett mitt genombrott och åsikter om Mailrox, är det dags för dig att chime in och låta mig veta vad du tycker. Hatar du kodning av HTML-e-post så mycket som jag gör? Skulle du överväga att använda ett verktyg som Mailrox för att hjälpa till med processen?
Om du har gjort det till beta och haft chansen att prova Drive Mailrox, lämna en kommentar nedan och låt mig veta vad du älskar och vad du skulle ändra.