Share
I denne opplæringen vil jeg vise deg hvordan du lager en enkel, responsiv HTML-e-post som vil fungere i hver e-postklient, inkludert alle de nye smarttelefonklientene og -appene. Det bruker minimal media spørringer og en væskebredde tilnærming for å sikre maksimal kompatibilitet.
Hvis du leter etter en ferdig, profesjonell løsning, ta en av våre mest solgte, responsive e-postmaler på Envato Market. Vi har hundrevis av responsive alternativer fra så lite som $ 5, med lett å tilpasse funksjoner for å komme i gang.
Bestselgende responsive e-postmaler på Envato MarketIkke det du leter etter? Ikke noe problem, denne opplæringen vil lære deg hvordan du bygger din egen.
Det var en tid da mediaforespørsler var ganske nok til å få responsive e-postmeldinger som arbeider i iOS- og Android-postprogrammer, som begge støtter medieforespørsler.
Siden da har det vært en spredning av postprogrammer opprettet for både iOS- og Android-plattformer, med varierende grad av støtte for responsive e-postutviklingsmetoder.
Mest bemerkelsesverdig er den siste oppdateringen til Gmail-appen for Android, som er dobbelt så populær som standard e-postapp for Android-brukere (som nå består av 11% av total åpner). Det har aldri støttet medieforespørsler, og fortsatt ikke, men det skalerer nå ned e-postene dine ved å komprimere størrelsen på det ytre bordet slik at det passer inn i det synlige området på skjermen. Det er vanskelig å kontrollere, og når hele eposten din er avhengig av medieforespørsler for å vise riktig på mobil, genererer noen svært ubehagelige resultater.
Den gode nyheten er at du kan designe og bygge en e-post som vil se utmerket ut i alle e-postapplikasjoner, inkludert de som ikke støtter medieforespørsler. Du kan gjøre dette ved å bruke en væskelayout.
Det er imidlertid noen design kompromisser som du må gjøre. Disse nydelige, likte kolonneoppsettene som stabler til en enkelt kolonne, fungerer ikke så bra med denne metoden. Hvis du kan lære å leve uten dem, er det noen veldig funksjonelle design som kan fungere ekstremt godt.
Her er hva vi skal skape i dag:
Ok, la oss starte med vårt blanke lerret.
En Enkel Responsive HTML Email
|
Det vi lager her er vår grunnleggende side med sin Overskrift, dOCTYPE og beholderbord med en bakgrunnsfarge påført (både kropp og et stort innpakningsbord, siden styling av kroppsmerket ikke støttes fullt ut). Hvis du vil ha mer informasjon om dette grunnleggende oppsettet, kan du se Bygg en HTML-e-postmall fra grunnen av.
Jeg har da lagt vår hovedinnholdstabell til sentrum med en klasse av "innhold".
Merk: Du vil merke at i denne opplæringen skal jeg plassere CSS i hodet til dokumentet vårt. Jeg plasserer vanligvis stiler i hodet når jeg skal bruke dem igjen, og beholde enstendige stiler inline.
Viktig: Når du bruker CSS-regler i hodet på dokumentet ditt, gjør du det må bruk et verktøy for å bringe det hele inn i slutten av prosessen. Hvis du bruker en tjeneste som MailChimp eller Campaign Monitor, tilbyr de automatisk for å få stilene dine til å være inline for deg når du importerer ditt design. Du må gjøre dette fordi enkelte kunder, for eksempel Gmail, vil ignorere eller fjerne din Nå legger vi til den første raden av bordet vårt - overskriften. Legg til følgende i stil på raden som vi allerede har opprettet: Og deretter i CSS, legg til polstring for overskriften: Nå skal vi lage vår aller første responsive rad. Måten vi gjør dette på, er å lage to tabeller som "flyter" ved siden av hverandre ved å bruke "justere" HTML-egenskapen. Erstatt vår lille "Hei!" Hilsen med følgende: Vi lager vårt 70px bord og legger også til noe polstring som vil fungere som vår renner mellom de to kolonnene. Padding på bunnen vil legge til vertikal puste rom når de to kolonnene stabler på mobilen. Vi lager den høyre kolonnen ved å tilpasse et bord til venstre igjen. Denne tabellen skal være 445px bred, noe som vil gi oss 25px til overs på høyre side. Dette er viktig fordi Outlook automatisk stabler bordene dine hvis det ikke er minst 25px å spare på en gitt rad. Så lenge du tillater minst 25 px pusteplass, oppfører dine bord som forventet. For å komme seg rundt denne quirk, kan du også bruke betinget kode for å lure Outlook til å tro at du har lukket en celle og åpnet en ny. Etter avslutningstegnet til ditt første bord, og før åpningstabelltaggen for det andre, legger du ganske enkelt til: På det bredere, høyre bordet skal vi bruke samme tilnærming som vi brukte på vårt containertabell, som innebærer å lage en klasse og legge til den betingede wrapper-koden også. Vi vil at dette bordet skal være 100% bredt på mobilen, hvor det vil komme ned under bordet til venstre. Her kan du se at jeg har opprettet en klasse kalt 'col425' for dette bordet, vår 425px brede kolonne. Jeg har pakket bordet i den betingede koden som vil legge den inn i et 425px bredt bord. Vi legger deretter til vår klasse i mediesøknaden som vi opprettet for Apple Mail også. Nå i vår celle legger vi til den stilige overskriften. Jeg har lagt til noen klasser for hver celle for styling, så vel som noen stilarter som jeg skal bruke for andre teksttyper senere: Vår topptekst er nå fullført, og du kan se nedenfor hvordan de to kolonnene stabler på mobilen. (For å forhåndsvise dette mens du jobber, må du midlertidig kommentere min-enhetsbredde medieforespørsler, fordi de håndhever en fast bredde på skrivebordet). For å opprette en enkelt kolonne tekstraden, legger vi ganske enkelt en ny rad til vårt ".content" -bord. Vi legger til en 'innerpadding'-klasse i disse radene med noen gjenbrukbare polstringsverdier. Vi legger også til en klasse av 'borderbottom' for å legge til en ramme på hver rad. Vår CSS for denne delen: Nå lager vi en responsiv rad som vår topptekst, men med litt forskjellige dimensjoner, slik at vi kan få et større bilde. Vi har lagt til en knapp her med klassen 'buttonwrapper'. Den inneholder en polstret celle med et bakgrunnsfarget sett, og deretter en tekstlink inni. Jeg foretrekker å bruke denne metoden, da det gir deg mulighet til å ha fluidbredde knapper som er svært nyttig når du lager en gjenbrukbar mal, hvor bredden på hver knapp vil være forskjellig hver gang den brukes. Hvis du har en fast bredde for knappene dine, kan du foretrekke å bruke Bulletproof Button Generator på Campaign Monitor. Våre stiler for knappen: I tillegg til vår settbredde for denne nye klassen 'col380', legger vi vår størrelse til vår liste over stiler for å ta vare på Apple Mail. Det ser nå ut som dette: Dette er en veldig enkel rad; vi vil ganske enkelt sette et bilde for å være 100% av bredden på e-posten og sørge for at høyden er satt til å være automatisk ved hjelp av CSS. I vår CSS: Til slutt legger vi til en rad tekst uten grensen nederst: For å lage bunnteksten legger vi til en ny rad med et bord inne. En av radene vil inneholde et annet bord for våre sosiale medier-ikoner. Vi legger til de nødvendige stilene for vår footer til CSS: På mobil er det ideelt hvis hele knappen er en lenke, ikke bare teksten, fordi det er mye vanskeligere å målrette en liten tekstlänk med fingeren. Fordi det ikke er mulig å få dette arbeidet på alle stasjonære klienter (polstring er ikke fullt støttet på Vi må strippe fargen fra Jeg vil bruke begge Nå når du klikker hvor som helst på den fargede knappen på mobil, er det en link! Hvis du vil, kan du nå begynne å gjøre forbedringer i oppsettet ditt ved å bruke klassenavn til elementer du ønsker å kontrollere, og deretter opprette de nye reglene i mediesøket vi nettopp har opprettet over. Som et eksempel, slår vi ut abonnementslinken vår til en knapp, ved å legge til en klasse i koblingen: og legger til følgende CSS i media spørringen: Du kan også målrette mot .innerpadding, .header og .footer klassene for å redusere mengden padding på klienter som støtter medieforespørsler. Endelig, som alltid, sørg for at du validerer (ved hjelp av W3C-validatoren - du bør bare få en feil for det proprietære "yahoo" -attributtet på kroppstegnet) og teste veldig bra ved hjelp av live-enheter og en forhåndsvisningstjeneste som Litmus eller Email på Syre. Nyt å opprette responsive e-postmeldinger som ser bra ut i hver e-postklient! Hvis du trenger en profesjonell, klar-til-gå-løsning, så kan en responsiv e-postmal være det rette alternativet for deg. For å ta det du har lært til neste nivå, sjekk ut de neste opplæringsprogrammene: Opprette toppteksten
Hallo! .header polstring: 40px 30px 20px 30px;
Legge til den første responsive raden
Venstre kolonne
Høyre kolonne
Tillat minst 25 pust pusterom for å stoppe Outlook fra å stable tabellene dine Stoppe! Alternativt tips for å lure Outlook
Fortsett…
style = "width: 100%; max-width: 425px;">
.col425 bredde: 425px! viktig;
OPPRETTE Responsive Email Magic .underhode skriftstørrelse: 15px; farge: #ffffff; font-familie: sans-serif; Letter-spacing: 10px; .h1 font-size: 33px; linjehøyde: 38px; font-weight: bold; .h1, .h2, .bodycopy color: # 153643; font-familie: sans-serif;
Opprette tekstlinjens enkelt kolonne
Velkommen til vår responsive e-post! Kjæresten er dum og sitter, og er en avgjørende forfatter. I tempus adipiscing felis, setter du et blankt ipsum volutpat sed. Morbi Porttitor, eget akkord, er en av de mest ettertraktede ipsumene, og har en tendens til å være noe bedre.. .innerpadding padding: 30px 30px 30px 30px; .borderbottom border-bottom: 1px solid # f2eeed; .h2 polstring: 0 0 15px 0; skriftstørrelse: 24px; linjehøyde: 28px; font-weight: bold; .bodycopy font-size: 16px; linjehøyde: 22px;
Opprette dobbeltkolonne artikkelen
Kjæresten er dum og sitter, og er en avgjørende forfatter. I tempus adipiscing felis, setter du et blankt ipsum volutpat sed. Morbi Porttitor, eget akkord, er en av de mest ettertraktede ipsumene, og har en tendens til å være noe bedre..
Gjør krav på deg! .knapp text-align: center; skriftstørrelse: 18px; font-familie: sans-serif; font-weight: bold; polstring: 0 30px 0 30px; .button a color: #ffffff; tekst-dekorasjon: ingen;
@media bare skjerm og (min-enhet-bredde: 601px) . innhold bredde: 600px! viktig; .col425 bredde: 425px! viktig; .col380 bredde: 380px! viktig;
Opprette Single Column Image
img høyde: auto;
Opprette den endelige vanlige tekstraden
Kjæresten er dum og sitter, og er en avgjørende forfatter. I tempus adipiscing felis, setter du et blankt ipsum volutpat sed. Morbi Porttitor, eget akkord, er en av de mest ettertraktede ipsumene, og har en tendens til å være noe bedre.. Opprette bunnteksten
® Noen, et sted 2013
Avslutte abonnementet fra dette nyhetsbrevet umiddelbart
.footer polstring: 20px 30px 15px 30px; .footercopy font-family: sans-serif; skriftstørrelse: 14px; farge: #ffffff; .footercopy a color: #ffffff; tekst-dekorasjon: understreke;
Optimalisering av knapper for mobil
koder), det er noe jeg legger til i mobilversjonen ved hjelp av medieforespørsler. som det er brukt for øyeblikket, og bruk det deretter tilbake til ta sammen med masse polstring. max bredde og max-enhet bredde i denne medien spørringen i et forsøk på å unngå en feil i Outlook.com på IE9.@media bare skjerm og (maksimal bredde: 550px), skjerm og (maksimal bredde på enheten: 550px) body [yahoo] .buttonwrapper bakgrunnsfarge: gjennomsiktig! viktig; kropp [yahoo] .button a background -farve: # e05443; polstring: 15px 15px 13px! viktig; vise: blokk! viktig;
Ytterligere forbedringer med medieforespørsler
Avslutte abonnementet fra dette nyhetsbrevet umiddelbart kropp [yahoo] .unsubscribe display: block; margin-topp: 20px; polstring: 10px 50px; bakgrunn: # 2f3942; border-radius: 5px; tekst-dekorasjon: ingen! viktig; font-weight: bold;
kropp [yahoo] .hide display: none! important;
Test og gå!
Accentsconagua