Share
Tuts + e-postmeddelandena (nyhetsbrev, smältningar etc.) genomgick nyligen en fullständig översyn, inklusive nya mönster och en ny plattform. Denna fallstudie kommer att förklara hur jag byggt dem i HTML och CSS, baserat på mönster från första delen i denna serie.
När tiden kom för att börja bygga de glänsande nya Tuts + e-mallarna, hade jag turen att vara ganska bekant med mönstren. Under designfasen hade Ian slog mig in på viktiga beslut och frågade mig massor av frågor för att se till att vi undviker några klassiska email gotchas. Denna process var en utmärkt grund för mig och jag var redo att dyka rakt in när mönstren var färdiga.
Ian skickade mig mönstren, en översikt över layouterna, en guide till rutnätlayouten och en stilguide med alla nödvändiga teckensnittstorlekar och färger. Jag var redo att komma igång.
Mitt första steg skissar alltid. Syftet med detta är att identifiera alla distinkta moduler, och ignorera mindre kosmetiska skillnader. Denna process ger mig en sista uppsättning nyckelmoduler att bygga att jag kan arbeta genom en efter en för att bygga upp den primära strukturen.
Efter att ha identifierat dessa, skulle jag i många fall bygga dem alla på en enda sida innan de separerades senare, men layouterna är ganska besvärliga att granska i det läget. Istället utvecklade jag varje layout enligt mönster så att de kunde granskas och godkännas lättare.
Med hänvisning till min skisserade sammanfattning av modulerna kunde jag komma ihåg när en modul behövde återanvändas över flera mallar och bygga den i enlighet därmed. Senare skulle jag sätta upp klasser på varje variants kropp, som var-admin och var-digest, så att jag kan skapa stilar som är specifika för varje enskild layout.
Jag började med att skapa några mindre variabler för element som jag visste att jag skulle använda om och om igen, som färger och mätningar.
En guide till de flesta typografiska stilar Några av mina variabler (i MINDER syntax) visas nedan.
// Variabler @ bg-body: # f2f2f2; @ paletttext: # 58595a; @ palett-marin: # 212a34; @ palettdesign: # c94e4b; @ palettkod: # 4cc1be; @ palett-web: # 49b293; @ palettfotografi: # 8360a8; @ palettspel: # 72BF40; @ palettdator: # 5d7dba; @ palettaffär: # f38844; @ palett-3d: # f95858; @ palettmusik: # 56a4ca; @ palett-footer: # 5a6e7a; @ palettadress: # 999999; @ divider-color: #EAEAEA; @ länkfärg: # 136fd2; @ alt-färg: @ paletttext @ bredd: 640px; @ yttre gutter: 53px; @ innehållsbredd: @width - (@ yttre-gutter * 2); @ rutnätverk: 16px; .rounded (@radius: 1px) border-radius: @radius; -webkit-gränsen-radien: @radius;
Jag förbereder alltid mina färger med palett att hålla dem ihop. Detta gör det lättare för mig att välja en färg från förslaget som visas i Sublime Text:
Nästa viktiga steg var att ställa in de webbfonter som användes i mönstren. Tecknet är Roboto tillgängligt från Google Fonts, så jag lade till den här taggen till av mallen:
Detta genereras av Google Fonts och länkar till deras CSS för de fyra olika vikterna av Roboto som vi använder.
Jag använde teckensnittet på kroppslabeln och mitt huvudomslagstabell för de kunder som ignorerar kroppsgenmärket eller bandets formatering.
kropp, .wrapper font-family: 'Roboto', sans-serif;
För att förhindra att Outlook 2007-2016 visas på Windows från att visa Times New Roman-som det brukar göra när man möter ett okänt teckensnitt-konfigurerar jag en del villkorad Outlook-only-kod i av mallen:
Detta säkerställer att varje instans av webfont överstyrs i Outlook med en sans-serif. Jag tillämpar den på tabeller och divs, de enda två elementen som används för att innehålla innehåll i mallen. Det är inte nödvändigt att gå till en lägre nivå än detta, eftersom alla andra taggar kommer att ärva detta i Outlook.
Därefter var det på strukturell kodning. Jag började med den första modulen som jag hade skisserat: mastheaden. En utmaning här var logotypen, för vissa mallar ser det lite annorlunda ut på mobilen:
För att uppnå detta, gömde jag på huvudlogotypen och texten längst upp på mobilen. Jag gömde logotypen och lade till det lilla bladet som en bakgrundsbild till mastodet.
.logo img display: none! important; .logo bakgrundsbild: url (images/[email protected]); höjd: 17px; bakgrundsställning: center center; bakgrundsstorlek: 15px 17px; background-repeat: no-repeat;
Nästa avsnitt jag tacklade var "hjälte" artikeln i Digest e-postmeddelanden; den första knepiga delen här är etiketterna. I mönstren visade de sig bredvid rubriktexten på skrivbordet, men ovan texten på mobilen. För att uppnå detta i kod kan vi använda vissa visningsegenskaper för att få dem att flytta runt.
Först skapade jag rubriken med innehållet indelat i två spänner, en för texten och en för etiketten.
Använda kurvor i Adobe Photoshop FUNKTIONSKURS
Styling-wise, the .text span ärver h2 styling, och sedan .märka span är utformad separat för att göra det mindre och ge den en färgad bakgrund:
.etikett display: inline-block; marginal-vänster: 5px; vaddering: 3px 8px; vertikaljustering: 4px; gränsstråle: 3px; -webkit-gränsen-radien: 3px; färg: #ffffff; typsnittstorlek: 8px; linjehöjd: 10px; typsnittstyp: normal; brevavstånd: 0.1em;
Sedan byter vi med hjälp av mediefrågor elementen runt på mindre visningsportar:
@media skärm och (max bredd: 700px) h2 display: bord! viktigt; h2 .text display: table-footer-group! important; h2 .label margin-bottom: 12px! viktigt;
H2 är vår behållare, och vi ställer den för att visa som bord så att vi kan berätta .text spänna för att fungera som sidfoten på den tabellen och flytta längst ner i layouten. De .märka spänningen visas sedan på toppen, och vi lägger till en marginal under den för att ge det lite andningsrum.
Inte förvånansvärt, Outlook på Windows (2007-2016) ville inte visa etiketterna ordentligt, eftersom det inte respekterar gränserad radie, och det tycker inte om att lägga till vaddering på inline-element. Resultaten var verkligen inte bra, så jag satte upp någon alternativ styling för Outlook som jag lade upp i villkorlig kod i mallen:
Detta innebar att de i Outlook skulle visas som en enkelfärgad text:
Kampanjmallen har en mycket särskiljande funktion: en kant-till-kant hjälte med en bakgrundsbild.
Kredit till Marco Goran Romano för den lysande bilden som används som platshållare Bakgrundsbilder i e-post stöds inte överallt. De viktigaste två e-postklienterna utgör problem med Outlook 2007-2016 (Windows) och Gmail.
Syn visar inte regelbunden bakgrund alls, vilket kräver några speciella Vector Markup Language för att få dem att fungera. (Stig på Kampanjövervakarens bakgrunds.cm är ett bra verktyg för att generera den här koden). Problemet med det är dock att du slutar med två kodblock: en i HTML och en i VML. Det här är riskabelt när du vet att andra måste kunna uppdatera bakgrundsbilden enkelt: om någon försöker göra det utan att läsa igenom instruktionerna ordentligt, skulle de troligen få fel.
Gmail visar bakgrundsbilder, men det respekterar inte background-storlek eller bakgrund-positionen egenskaper som kan göra styling dem ganska svåra.
Vi tittade på abonnentnumren och kunde ringa till Outlook: det skulle vara bra om Outlook-användare såg en solid återgångsfärg istället för bilden.
För Gmail-användare skulle vi behöva ställa in några riktlinjer kring acceptabla bilder när mallarna används. Bakgrunden ska antingen vara en sömlös upprepande bakgrund eller ställa in så att den alltid ser bra ut på 100%, fastnat till det övre vänstra hörnet.
Intressant, Gmail gör stöd vertikal bakgrund-positionen egenskaper på vänster sida: övre vänstra , nedre vänstra och mitt till vänster . Tyvärr kan du inte placera horisontellt, vilket vanligtvis är vad du vill göra genom att visa det centrum .
På några av annonsblocket kunde vi ha bakgrundsbilder i Gmail, eftersom de är fastsatta längst ned till vänster. Dessa block återställs också till en solid bakgrundsfärg i Outlook.
Jag lekte runt med två sätt att få den negativa toppmarginalen på mastodet att fungera, där den vita innehållsförpackningen uppträder överlagrad på själva mastodet.
I webbutveckling skulle du lägga till en negativ margin-top till innehållslådan, damm händerna och fortsätt med din dag.
I e-postutveckling är det dock inte möjligt. Negativa marginaler stöds bara av en handfull e-postklienter, vilket ger många vanliga i smuts (som Gmail, Yahoo och Outlook.com).
Det var vårt första alternativ men: använd en negativ topp-marginal som en progressiv förbättring, som skulle visa med en marginal på 0 i alla icke-stödda klienter (se nedan till vänster). Nackdelen är att en hel del kunder skulle se denna marginlösa versionen och layouten förlorade säkert något utan det.
Det andra alternativet var att förfalska den negativa marginalen genom att skapa ett tomt vitt bord med rätt höjd och bredd. Nackdelen med detta tillvägagångssätt är att Gmail-appen ofta visar små hårföremål när du skalar ner innehåll på mobilen där det finns lättare innehåll över en mörk bakgrund eller vice versa. Dessa är egentligen inte riktiga linjer eller gränser, bara minuscule glitches som inte kan fixas med kod. Vi bestämde oss för att gå med det här scenariot, eftersom det gynnade det största antalet läsare, och hårföremålen var allmänt omärkliga. Vi bestämde oss också för att hålla koll på problemet och se om vi inte var nöjda med resultatet. (Tyvärr kan dessa mallar inte byggas med hjälp av fluid-hybrid-metoden eftersom både MailChimp och Campaign Monitor utgör stora problem med att göra det.)
Ingen överlappning
Överlappa, med Gmails lilla linje mellan sektionerJag visste att jag skulle överlämna mallarna till Ian för integration med flera Email Sending Platforms: MailChimp och Kampanjövervakare. Eftersom min kod fungerade bra med båda mallspråk följde jag några tips för att göra processen så smidig som möjligt.
Redaktörens anteckning: Sedan design- och utvecklingsfasen har vi faktiskt flyttat från MailChimp, istället med bara Kampanjövervakning. Som sagt är följande tips mycket användbara!
Till exempel med text styling, applicerade jag allt till Kampanjövervakningsmallar kräver en En av mallarna behövde ha en uppsättning av de olika färgade rubrikerna för varje ämne som kunde väljas när man skapade ett nyhetsbrev i MailChimp. Jag satte upp ett parti av rubrikstilar som kan väljas från en rullgardinsmeny i MailChimp, med rätt syntax för att definiera deras Men… Jag gav detta till Ian som upptäckte att det inte fungerade alls; ingen av dessa rubrikformat visades upp i rullgardinsmenyn när han redigerade texten. Han tinkered med det och upptäckte att MailChimp faktiskt inte visar dessa alternativ som valbara rubrikformat om de inte har någon typ av teckensnittsrelaterad egenskap som Det fungerade inte heller eftersom jag levererade det separat, och någon särskild MailChimp-mallkod för redigerbara områden eller anpassade format måste visas i Nu när alla våra layouter hade granskats och godkänts, beslutade problem och kompromisser bestämdes var det dags att slutföra testning och förbereda alla filer för utplacering. Jag bestämde mig för att göra massor av grusande slutprov i Litmus och Email on Acid. Jag använder Trello för att hålla reda på krav, uppgifter och buggar för varje projekt jag jobbar med. Jag arbetade igenom mina listor av fel och uppgifter tills det inte fanns något kvar och filerna var redo att distribuera. Envato-laget ville kunna dyka in i koden för att blanda och matcha olika layouter, så jag behövde ge tydliga HTML- och CSS-kommentarer, samt se till att överföringsmoduler mellan mallar inte skulle orsaka större katastrof. Jag ställer in varje mall med sin egen kroppsklass: Och sedan skapa en klass som kan läggas till för att enkelt växla mellan en vit och grå bakgrund: Jag har också separerat layoutspecifika format (både mobil och skrivbord) i enskilda formatmallar för att spara filstorlek: Jag gav instruktioner för att lägga till en länk till varje formatblad där element från den layouten användes. Till exempel, om en Digest-modul skickas till nyhetsbrevmallen, måste Digest CSS-länken läggas till i För vanliga element, som annonsfältet och annonsblocket, såg jag till att stylingen var helt oberoende av layout, så att de kunde flyttas fritt. Jag inkluderade alla dessa instruktioner i en README-fil och slängde upp den med all HTML och bilder som ska skickas. Och då var vi färdiga! Jag skickade allt över till Ian som åtagit sig resten av integrationen själv. Det är lite nagelbitande att överlämna mallfiler utan förmåga att obsessivt testa och ompröva under integrationen, men jag hade den största tron i Ian, förstås! När hans arbete var klart och det var dags att börja skicka, skickade Ian testkopior till min Litmus och Email on Acid-konton, så att jag kunde gå igenom förhandsgranskningarna och flagga några problem. Ett par bakgrundsbilder föll bort här och där, som vi fixade innan mallarna äntligen var redo att skickas. I nästa och sista delen av denna serie tar vi våra statiska mallar till nästa nivå och visar hur vi integrerat dem i kampanjövervakningen! , inte några av sina barn, så att om celler eller stycken konverterades till redigerbara områden var det ingen risk att förlora någon styling någonstans. Tabellinnehållet ärva sin textstyling från föräldern över alla e-postklienter. Det enda undantaget är AOL-post, som ofta misslyckas med att ärva det
Färg egendom om du inte placerar det på den enskilda cellen. Använd avsnitt för text
multiline element som ska definieras när du vill ha ett redigerbart textblock som tillåter radbrytning, fet / kursiv / understrykning, länkad vald text och så vidare. Det sveper också automatiskt all text inuti multiline med en p tagg, som verkligen kan bryta din layout om du inte har tillåtit för stycken. När du använder en radbrytning i kampanjövervakning slutar det nuvarande stycket och startar en ny. MailChimp gör inte detta, och när du skapar en radbrytning läggs det enkelt till en Gör variabler användarvalbara
@stil block:/ ** * @stil ämne design * / .topic-design färg: # c94e4b; .topic-design a color: # c94e4b; / ** * @stil ämne-kod * / .topic-kod färg: # 4cc1be; .topic-code a color: # 4cc1be; / ** * @style topic-web * / .topic-web färg: # 49b293; .topic-web a color: # 49b293; / ** * @stil ämne-fotografi * / .topic-fotografi färg: # 8360a8; .topic-photography a color: # 8360a8; / ** * @style topic-game * / .topic-game färg: # 72BF40; .topic-game a color: # 72BF40; / ** * @stil ämne-dator * / .topic-dator färg: # 5d7dba; .topic-dator en färg: # 5d7dba; / ** * @style topic-business * / .topic-business färg: # f38844; .topic-business a color: # f38844; / ** * @stil ämne-3d * / .topic-3d färg: # f95858; .topic-3d a färg: # f95858; / ** * @stil ämne-musik * / .topic-musik färg: # 56a4ca; .topic-music a color: # 56a4ca;
typsnittsfamilj eller font-weight . av din mall Det kan inte vara en extern fil. Så vi lade till en font-weight: bold deklaration till våra rubrikstilar, poppade CSS i huvudet och fick allt att fungera.Final Testing och Wrapping Up
Måste älska Trello för uppgiftshantering Ställa in ett paket med mallar
huvud av nyhetsbrevmallen innan du kopierar över modulen HTML.
Email leveranser Frakt
relaterade länkar
Accentsconagua