Her er noen tips for å lage det perfekte responsive brevet.
Store e-posttjenester har en innebygd blokkredigerer. Den samler enkle responsive e -postmeldinger, og dette er inkludert i abonnementsprisen. Det vil ikke fungere å fylle ut et komplekst kreativt brev i redaktøren - dette er arbeidet til designeren og layoutdesigneren. La oss først finne ut hvilken bokstav som er klassifisert som kompleks og hvilken som er enkel.
Så er det "chips". Et sted kan du angi den nøyaktige størrelsen for individuelle blokker, men et sted kan du ikke. I den ene redaktøren kan du bare samle bokstaver med en kolonne, i den andre er det ingen begrensninger på antall kolonner. I noen redaktører kan du til og med tilpasse hvilke blokker som skal vises på skrivebordet og hvilke som bare er på mobile enheter.
Designeren og layoutdesigneren tilbyr individuelle løsninger, redaktøren tilbyr standardløsninger. Husk at når du samler et brev i redaktøren, er du uansett begrenset, for eksempel av settet med fonter og størrelser.
Designeren vil gjøre det slik du ville. Layoutdesigneren vil tenke over hvordan du omorganiserer blokkene på mobile enheter - akkurat som du planla. Når du jobber i en blokkredigerer, er du avhengig av løsningene fra utviklerne.
Redaktøren tilpasser brevet i henhold til sin egen algoritme, algoritmen kan ikke endres.
Hvis du utarbeidet strukturen, skrev teksten og hentet bildene, vil det ta fra tretti minutter til to timer å lage et brev. La oss minne deg på at du ikke betaler for oppsettet, arbeid med redaktøren er inkludert i kostnaden for kontoen.
Et team med en frilansdesigner og layoutdesigner vil lage et brev om to eller tre dager, det vil koste fra 5000 til 15 000 rubler. Hvis du bestiller fra et byrå, er det mye dyrere. Husker du historien fra introduksjonen? For Sergei er valget åpenbart: han vil samle brevet selv, i hans situasjon er det billigere og raskere.
Det er bedre å sette sammen et enkelt responsivt brev i den innebygde redaktøren. Hvis du vil ha ikke-standardiserte løsninger, outsource.
Hvordan sette sammen et brev i den innebygde redaktøren
De som samler et brev i redaktøren trenger ikke å kjenne koden. Det eneste du trenger er å tenke over bokstavens struktur, plukke opp bilder og skrive teksten. Ingen "manuell" innstilling - du vil sette sammen et brev fra blokker, akkurat som i landingssidebyggeren.
Trinn 1. Oversikt eller prototype av brevet
Start med et grovt utkast, tegn et diagram over den fremtidige bokstaven på papir: hvor overskriften vil være, hvor bildet er, hvor knappen er, etc. Hvis du har tid, kan du sette sammen en fullverdig prototype i Balsamiq eller NinjaMock . Det er ikke synd å vise en slik prototype til regissøren og overføre den til designerens arbeid.
Trinn 2. Layout av brevet i editoren
- Legg til det nødvendige antallet kolonner basert på et ferdig opplegg eller en prototype
- Dra de nødvendige elementene inn i brødteksten
Vanligvis fungerer dra-og-slipp-prinsippet i innebygde redaktører. Hvis din ikke er det, se på artiklene fra Knowledge Base - prinsippene for arbeid i redaktøren er beskrevet der.
- Tilpass innholdet i elementene: polstring, mellomrom, justering og stil
Her skriver du inn nødvendig tekst, legger til et bilde eller en illustrasjon, med eller uten lenker. Ikke glem at du kan legge til et animert bilde, de fleste redaktører støtter GIF -format.
Bare ikke gå for langt med filstørrelsen. E -postklienter liker ikke "tunge" bokstaver og kan skjule innholdet under knappen "Vis helt" - som for eksempel Gmail. Velg filer slik at den ferdige bokstaven ikke veier mer enn 600 KB, dette er den optimale størrelsen.
Ikke glem å tilpasse knappene og legge til navigasjonslenker til dem.
Trinn 3. Kontroll av responsen i den innebygde editoren
Når e -posten er klar, sjekk hvordan den ser ut på forskjellige enheter.
I 90% av tilfellene vil alt være i orden, blokkene blir "gjenoppbygd" automatisk. Hvis oppsettet fortsatt "flyr" eller resultatet ikke passer deg - sjekk verdiene til innrykkene i blokkene, bør de være de samme. Hvis en blokk trekker seg tilbake med 10 poeng, og den andre med 30, kan det hende at de ikke blir omorganisert riktig i mobilversjonen. Hvis begge blokkene faller tilbake 10 poeng, vil du mest sannsynlig ha det bra.
Trinn 4. Kontroll av tilpasningsevne på tredjepartstjenester
Sjekk resultatet via lakmus eller e -post på Acid. Disse tjenestene viser deg hvordan e -posten vises på forskjellige enheter, i forskjellige nettlesere og forskjellige e -postklienter.
I noen redaktører er kontroll via Litmus integrert som standard. Hvis redaktøren din ikke har dette alternativet, kan du sende en testkopi av brevet til en spesiell e-post som vil bli gitt etter registrering hos Litmus.
Tjenesten er betalt, et månedlig abonnement i Litmus starter fra $ 79, i e -post på Acid - fra $ 45. Hvis du sender ett brev en gang i måneden, kan det bli dyrt. Som en siste utvei, prøv Browser Shots, det er gammelt og upraktisk, men gratis. Husk at slike tjenester ikke er 100% garantert. Selv om alt er bra i Litmus, er dette ikke en grunn til å starte adresselisten med en gang. Send brevet til din personlige e -post og åpne det der.
Velg en redaktør som viser hvordan brevet ser ut på forskjellige enheter. Ideell hvis redaktøren er integrert med Litmus -tjenesten. Hvis det ikke er noen integrasjon, må du kontrollere tilpasningsevnen manuelt via personlig e -post.
Hvordan evaluere resultatet av arbeidet - ditt eget eller en layoutdesigner
Hvis du samler inn brevet selv, sjekk tilpasningsevnen inne i redaktøren og se på brevet fra din personlige e -post - det er nok. Hvis du vil teste tilpasningsevnen på mange enheter, nettlesere og e -postklienter samtidig - kjøp en konto i Litmus eller Email on Acid, se resultatet der.
De som outsourcer layouten trenger ikke å kjøpe en konto, be layoutdesigneren om skjermbilder fra Litmus. Hvis han er profesjonell, sjekker han bokstaver på slike tjenester. Å sende et skjermbilde er ikke et problem for ham. Når du sjekker, må du se nærmere på postklientene, for det meste dukker det opp jambs her. Sørg for å sjekke hvordan en e -post åpnes i Outlook, Gmail, Yandex og Mail.ru - dette er de mest populære e -postklientene i Russland.
Ikke kast bort tid på å fikse oppsettet hvis det vises feil på den tredje iPhone, i den syvende versjonen av Internet Explorer eller i postklienten The Bat. Ja, det vil alltid være de som bruker den tredje iPhone, men de er et mindretall. Er det verdt å gjøre om oppsettet for 1-2% av den totale basen? Avhenger av mengden og "kvaliteten" på basen.
Vi håper du har segmentert det, og at du vet alt om abonnentene dine. Hvis 1-2% er 10 000 mennesker, så er det verdt bryet. Hvis du jobber i b2b og disse 1-2% er administrasjonsselskaper, bedriftseiere og andre VIP-klienter, må du tilpasse brev for dem.
Sørg for at bokstaven vises tilstrekkelig i Outlook, Gmail, Yandex og Mail.ru - det er nok.
Markedsførers notat
- Bestem deg for formatet på brevet, hva det vil være: standard og enkelt eller komplekst og kreativt. Gi brev med en kompleks struktur til designeren og layoutdesigneren. Samle enkle brev i redaktøren av posttjenesten, de er tilpasset som standard.
- Sjekk resultatet i den innebygde editoren, og hvis budsjettet ditt tillater det, på tredjepartstjenester. Når du godtar et brev fra en layoutdesigner, ber du om skjermbilder som bekrefter at brevet vises riktig - i hvert fall i populære e -postklienter og populære nettlesere.
- Sørg for å se brevet via personlig post, i det minste i de viktigste postklientene og fra de nåværende modellene for smarttelefoner på iOS og Android.
Plus
En av leserne i Web Council -bloggen ba om å få snakke om oppsettet av brevene for adresselisten. Selv gjør jeg praktisk talt ikke dette. Jeg husker at jeg på et tidspunkt fiklet med maler for Subscribe.ru, og jeg husker at det var en kjedelig virksomhet. Problemet er at e -posttjenester ikke fungerer godt med blokkoppsett. Og enda verre med css -stiler. Så mange år har gått, og ting er der fortsatt. Nå er det overveldende flertallet av brev for utsendelser skrevet på samme måte på den gammeldagse måten - ved hjelp av tabeller. Og dette er i 2016, da html5, css3 og andre moderne søtsaker har kjørt nettstedene lenge.
I utgangspunktet er uttømmende artikler om oppsett av bokstaver allerede på Habré, her og her. Jeg anbefaler også å lese en lokal innbygger ved navn Arthur Koch, som skrev mange nyttige artikler om utformingen av bokstaver. Eksempler: lenke 1, lenke 2.
Men for at innlegget ikke skal vise seg å være tomt, vil jeg likevel kort gi uttrykk for hovedpoengene i utformingen av brev for nyhetsbrev på e-post.
Først må du glemme blokkoppsettet og et eget stilark. Alt er lagt opp i tabeller, og stiler er skrevet direkte på plass, eller på annen måte - Inline. Det ser slik ut:
For det andre bør du alltid tvangsinnstille verdiene for innrykk, marginer og grenser, fordi hver e -postklient prøver å vise dem på sin egen måte:
For det tredje trenger du ikke å bry deg med doctype-, head- og body -taggene. Uten en doktype vil bokstavene dine være like overalt, hode og kropp er nesten ubrukelig, fordi vil fremdeles bli kuttet av de fleste e -posttjenester (bevis).
For det fjerde, hvis du bruker bilder i bokstaver, må du skrive ned størrelsene.
adaptiv layout av bokstaver
Svært ofte blokkerer mailere bilder med bokstaver, og hvis du ikke angir størrelsen, vil brevet se klønete ut. Sørg også for å legge til style = "display: block;. Dette vil bli kvitt problemer med uforståelig innrykk (for eksempel i gmail):
Og ikke i noen tilfeller bruke enkeltpikselbilder som mellomrom for tabellceller! Brevet ditt kommer garantert til å havne i spam. Hvis du trenger et mellomrom, bør du bruke et bilde med dimensjoner på minst 20x20 piksler, som i stiler bør tvinges til størrelsen 1x1 piksel.
For det femte er det mulig å lage et adaptivt oppsett for bokstaver. Det ser like klønete ut som alt arbeid med bord generelt, men uten fisk ... Du skjønner det selv. Kort sagt, for at brevet ditt skal se ut som noe respons, bør innholdsdelen være innrammet med en senteretikett med passende stiler:
Og til slutt, et par nyttige lenker. Her kan du se hvilke koder som støttes av forskjellige e -posttjenester. Og her finner du noen flere nyttige ting - "Funksjoner i HTML -bokstavers layout".
Hvis artikkelen viste seg å være nyttig for deg, kan du rangere den og dele den på sosiale nettverk:
(2 stemmer, gjennomsnitt:
Relaterte oppføringer:
Oppsett av responsive e -poster: et markedsførers notat
De fleste e -poster vises ikke riktig på mobile enheter. Tegninger divergerer og teksten må rulles og skaleres. Responsiv layout er avgjørende for at e -post skal se bra ut på forskjellige plattformer.
Dette kurset er rettet mot HTML -kodere, utviklere og e -postmarkedsførere med grunnleggende kunnskap om HTML og CSS. Du vil lære hva mobil og flytende layout, blokk og flanketilpasning er. Lær hvordan du forbereder bilder for bokstaver og vurder grunnleggende layoutverktøy.
Etter kurset vil du kunne lage bokstaver som vises like godt på datamaskiner og mobile enheter.
2. Funksjoner av responsiv layout
3. Tilnærminger til e -posttilpasning
4. Grunnleggende responsiv e -postmal
5. Teknikker for mobil tilpasning
6. HTML -layoutverktøy
7. Oppsummering av kurset
8. Responsiv e -postmarkedsføring: siste test
De uendelige mulighetene for kreativt oppsett av nyhetsbrev på e -post, bruk av grafiske elementer og interessant innhold tiltrekker kundens oppmerksomhet. Slike e -poster sendes ikke til spam.
Opprette et postbrev
For en vellykket anvendelse av e -postmarkedsføringssystemet er det ikke nok å ha en enkel nyhetsbrevlogikk og et brev med et tilbud.
30 gratis responsive e -postmaler
For å tiltrekke seg oppmerksomhet, bør informasjon presenteres i en vakker "innpakning", med riktige lenker og attraktive bilder. Det første inntrykket av bokstaven er det ytre skallet, fyllet er sekundært.
Brukere mottar omtrent hundre brev hver dag, du må tiltrekke deg oppmerksomheten til publikum med en "lys" og spennende overskrift og forslag inne. For en vellykket implementering av design og layout av brev for utsendelse, må du tenke gjennom en strategi for gjennomføringen av prosjektet:
- tenk over en idé og bygg riktig en rekke bokstaver;
- markere det viktigste, vinn klientens tillit ved å tilby et interessant produkt;
- brev bør oppmuntre til handling, motivere til å kjøpe et produkt;
- attraktiv design, vil fagfolk lage html -layout av brev for utsendelse.
Eksperter vil ta seg av den responsive utformingen av e -postmeldinger, slik at designet ser bra ut på alle enheter. Hvis nettbutikken din ikke har bedriftsidentitet, vil vi lage et generelt brevoppsett som er grunnlaget for utsendelsen. Markedsføring er evnen til å fremkalle følelser hos en person, å danne et ønske om å kjøpe noe. Vi er fagfolk på dette området, så resultatet av arbeidet vårt er alltid utmerket.
Oppsett av html -bokstaver
- Ideen om å markedsføre et produkt / en tjeneste og dens implementering i tekstformat.
- Brevdesign for utsendelse.
- Oppsett av e -post.
- Tester resultatet på alle plattformer og posttjenester.
Maksimal effekt av bokstaver kan oppnås hvis hver kobling i prosessen vil klare oppgaven tydelig og effektivt. En profesjonell layoutdesigner og designere vil overta tilpasningen av funksjonaliteten og det tekniske grunnlaget for brevet, med tanke på oppsettet for spesifikke e -postklienter. Brevet vil vises riktig på alle plattformer - dette kalles kryssmelding.
Enkle gjenkjennelige maler, riktig bredde, bedriftsinformasjon og et avmeldingsskjema - når alt dette tas i betraktning, vil nyhetsbrevet ditt skape tillit, og klienten vil ikke engang tenke på å klikke på "spam" -knappen.
Hva får du?
- Cross-mailing brev utarbeidet i henhold til alle reglene
- Presis vakker design
- Høy CTR
- Lav andel av abonnementer, og legger til søppelpost
- Gjennomtenkt tekst, rettet mot nyhetsbrev
- Effektiv segmentering
- Riktig visning av bokstaver i de fleste e -postklienter
- Riktig teknisk oppsett av utsendingsprosessen
Det er ikke bare estetikk som er viktig - funksjonalitet er viktig. Hvis du er klar til å begynne å få bokstavene dine riktige - Vi inviterer deg til en gratis konsultasjon.
Oppdatert materiale 20.06.2018
Oppsettet av bokstaver skiller seg fra det vanlige weboppsettet på grunn av særegenheter ved tolkning i forskjellige webgrensesnitt og e -postklienter.
La oss se på eksempler på hvordan du kan oppnå god visning av brevet i alle forskjellige ISP -er og e -postklienter.
Hvordan en generisk responsiv e -postmal ser ut:
|
For å fikse problemet med automatisk skalering av e -post i iOS 10 og iOS 11, la vi til:
Eksempel på autoskala feil
Neste hack:
Webkit-tekst-størrelse-juster: ingen; -ms-tekst-størrelse-juster: ingen;
forhindrer iOS -enheter i å endre innholdet i brevet for lesbarhet. Dette motsier vanligvis designet og kan bryte oppsettet:
La oss gå videre til bokstavens kropp - kroppsseksjonen. Bakgrunnsfargen på webgrensesnittet kan være annerledes, så du må pakke alt inn i et bord med ønsket bakgrunnsfarge, selv om det er hvitt, som i dette tilfellet:
| … |
På grunn av begrenset støtte for stilegenskaper, for eksempel maks-bredde, av Outlook 2007-2016 postklienter, samt IE-lignende postklienter Outlook 2003 og Lotus Mail, er det nødvendig å bygge en tilleggstabellstruktur i de betingede kommentarene som vil begrense bredden på meldingen i disse e -postklientene:
| Blokk 1 | Blokk 2 |
Kode vedlagt mellom:
blir ignorert av alle e-postklienter unntatt Outlook 2007-2016 og IE-lignende e-postklienter.
Og hver av blokkene vil ha følgende struktur:
| Blokkere |
Noen ganger er det også i bokstaver en situasjon når blokkene er forskjøvet, men ved ombygging er det tilrådelig å bevare blokkens logiske rekkefølge og ikke bygge om høyre blokk under venstre, men omvendt - venstre blokk under den rette. Dette kan gjøres ved å endre retningen på teksten, den vil se slik ut:
|
Andre elementer og teknikker
Usynlig prehoder
Nesten alle webgrensesnitt viser også den første teksten ved siden av emnelinjen:
I e -postlister er dette vanligvis teknisk informasjon, for eksempel "melde deg av" og "åpne i en nettleser", noe som tydeligvis ikke motiverer abonnenten til å åpne brevet, men ved å kontrollere teksten som vises, kan du øke sjansen for åpner brevet.
For å gjøre dette, legg til en kode med følgende struktur helt i begynnelsen av html-brødteksten i bokstaven:
Bruk av en usynlig prehoder kan påvirke leveransen negativt, så bruk denne teknikken nøye og nøye overvåke leveransen gjennom postmesteren.
Video i e -post
Standard postklient Mail begynte igjen å spille html5 -video, men det er en direkte lenke til youtube -videoen som er plassert på bildet.
Med denne implementeringen vil videoen bli vist på et lag i webgrensesnittene Mail.ru (ca. 55%) og Gmail (ca. 14%). Samtidig, på de fleste mobile enheter, vil videoen bli åpnet i Youtube -applikasjonen, uten å åpne en nettleser.
Ulempen med denne tilnærmingen er manglende evne til å samle inn statistikk over klikk, siden lenken til Youtube må være direkte, og sporing av klikk for denne utsendelsen må deaktiveres i ESP.
Testing
Det viktigste oppsettet er å teste bokstaver. Den beste måten er fremdeles å manuelt kontrollere visningen av brevet i ulike webgrensesnitt og e -postklienter, dette kan hjelpe til med å sende et "rått" layout av bokstaver i form av et arkiv. Du må vite hvilke plattformer abonnentene dine bruker, hvilke e -postleverandører de foretrekker, og manuelt kontrollere minst de mest populære.
For å fremskynde testprosessen kan du bruke tjenestene Litmus og EmailOnAcid, men dette hindrer ikke behovet for å kontrollere visningen av hver enkelt bokstav manuelt.
Artikkelen nevnte noen tjenester, ressurser og verktøy som utvilsomt vil være nyttige for brevdesigneren og ikke bare. Her er en liten liste over nyttige ressurser.
Verktøy og tjenester:
E -postknapper er en knappegenerator som bruker VML.
- Sette inn bakgrunnsbilder i e -post ved hjelp av VML.
Litmus - testing av visning av bokstaver.
Email On Acid er et alternativ til Litmus: testing av visning av e -post.
Nyttige materialer:
Blog Litmus er ledende innen e -postmarkedet. Interessante saker og de siste nyhetene fra verden av e -postmarkedsføring og e -postoppsett.
Blog Email On Acid - interessante saker og de siste nyhetene fra verden av e -postmarkedsføring og e -postoppsett.
- den første bloggen om e -postmarkedsføring, snakker om hvordan du kan gjøre e -post effektiv.
Tods blogg - interessante saker og nyttig materiale om layout og utvikling.
- Oversettelse
Alle som jevnlig leser e -posten på telefonen, vet at opplevelsen kan være like hyggelig som den er helt forferdelig. Det faktum at en e -post fra en adresseliste ser bra ut på et skrivebord, betyr ikke at alt vil gå bra i en mobil e -postklient - på en liten skjerm er det ofte problemer med fonter, visning av kolonner og oppsett av maler bryter rett og slett ned.
Hvorfor må du tilpasse e -post for mobile enheter
En betydelig andel av publikum i ulike e -postmarkedsføringsselskaper ser på e -post på mobile enheter. En Campaign Monitor -studie fra 2011 fant at nesten 20% av e -poståpningene skjedde på smarttelefoner og nettbrett, opp fra bare 4% i 2009. Nesten 90% av disse funnene ble gjort på iOS -enheter. Nå er tallene enda høyere.I denne opplæringen ser vi på flere måter å forbedre visningen på mobile enheter (fra bruk av mediespørringer når du koder responsive maler til mer avanserte teknikker). I tillegg vil vi se på ulike designproblemer som oppstår på stadiet av planleggingen av en adresseliste, samt snakke om hvordan du plasserer abonnementsskjemaer for å motta brev på smarttelefoner og nettbrett.
Design teknikker
La oss snakke om det visuelle aspektet av denne saken før vi dykker ned i en verden av å skrive bokstaver. Et interessant poeng er at under analysen av materialet vil vi lage to versjoner av samme bokstav - en mal er designet for å se bra ut på e -postklienter på datamaskiner, og den andre skal være hyggelig å lese på enheter med små skjermer.For eksempel, slik kan et slikt brev se ut i Outlook:
Nedenfor er den samme e -posten, men åpnet i Mail -appen for iPhone. Forskjellen mellom de to malene er tydelig synlig. Mobilversjonen er smalere, den har færre valgfrie visuelle elementer, men den er like lett å lese som desktopversjonen. Forskjellen i utseende mellom de to mobilalternativene er i bruken av CSS.
Den høyre bokstaven er ikke forskjellig fra den venstre, men ingen CSS ble brukt i oppsettet. Noen deler av teksten viste seg å være for liten, og det er nesten umulig for brukeren å finne ut hva som står der - dette er problemet med de millioner av nyhetsbrev som eiere av mobile enheter mottar hver dag.
Ting du bør vurdere når du lager maler
Å lage e -post som ser bra ut på mobilen er mye vanskeligere enn bare å bruke tilpasset CSS. Merk også for andre ting:- På mobile enheter fungerer maler med én kolonne som ikke er bredere enn 500-600 piksler best. De er lettere å lese, og selv om det er noen feil i dem, ser alle "stimene" uansett bedre ut.
- I henhold til Apples retningslinjer bør minimum målområde for knapper og lenker være 44 x 44 piksler. Det er ingenting mer "ute av bruk" enn en haug med små lenker som er vanskelig å få tilgang til på en liten skjerm på en mobil enhet.
- Minste skrift på en iPhone er 13 piksler. Det er nødvendig å ta dette med i betraktningen når du oppretter teksten til bokstaven - hvis teksten i malen er skrevet inn i en mindre skrift, blir den automatisk forstørret, noe som kan ødelegge hele oppsettet.
- Brevet skal være kortfattet, og all viktig informasjon skal plasseres øverst på den. Det er vanskeligere å rulle på berøringsskjermene med fingeren enn på et skrivebord med en mus.
- Hvis mulig, bruk displayet: none property; for å skjule valgfrie malelementer. Delingsknapper for sosiale nettverk er passende på et skrivebord, men de er ikke alltid praktiske å bruke på en smarttelefon.
Nå som vi har dekket noen av de viktige designproblemene for e -postlister, kan vi gå direkte til forskjellige aspekter av oppsettet.
Skriv inn mobile bokstaver
Når det gjelder mobilstiler, er det oftest ikke en egen stilfil som er ment, men mediespørringer. Slik ser de ut:
La oss se nærmere på hvordan @media -erklæringen fungerer. Først av alt, for å lage "mobil" CSS, må du implementere et kriterium som e -postklienten vil bestemme hvilke stiler du skal bruke.
For å gjøre dette brukes bare @media -skjermoperatoren - det indikerer at e -postklienten skal vises på skjermen (i stedet for for eksempel å bli skrevet ut på en skriver). Etter det, i eksempelkoden ovenfor, angir vi maksimal skjermbredde på enheten til 480 piksler. Dette er viktig fordi mange (men ikke alle) mobile enheter har et skjermområde på 480 piksler eller mindre.
Dette er grunnen til at maks-enhetsbredde: 480px ofte brukes (dette er også skjermbredden på tidligere iPhones i liggende modus), men du kan utvide beskrivelsen til å dekke andre skjermstørrelser:
@media-skjerm og (enhetsbredde: 480px) og (enhetshøyde: 360px), skjerm og (enhetsbredde: 360px) og (enhetshøyde: 480px), skjerm og (enhetsbredde: 320px) og (enhet -høyde: 240px) (...)
La oss gå tilbake til den mobile e -postmalen som er diskutert ovenfor. Slik ser det ut i Apple Mail:
Dette eksemplet bruker innholdstabellklassen på HTML -tabeller som inneholder tekst og bilder. Her er noen eksempler på kode:
Denne klassen spiller en interessant rolle - når e -posten åpnes på en enhet med en skjerm på 480 piksler eller bredere, påvirker det ingenting. Men når skjermen er 480 eller mindre, reduserer den tabellbredden til 320 piksler. Attributtvelgere brukes for å unngå en uvanlig feil i Yahoo -post. Ellers brukes "normal" CSS. I tillegg kan du inkludere følgende annonser:
@medias skjerm og (maks-enhetsbredde: 480px) ( / * mobilspesifikke CSS-stiler går her * / tabell (bredde: 325px! viktig;) img (bredde: 325px! viktig;) p (skjerm: ingen! viktig;))
Deretter ser vi på mer sofistikerte teknikker for å tilpasse mobile e -postmeldinger til mobile enheter.
Lag responsive to-til-en-kolonneoppsett
Å bruke en-kolonne maler er en god måte å optimalisere nyhetsbrevet for mobile enheter. Når det er sagt, er det måter å lage responsive to-kolonne oppsett uten å måtte bruke lang CSS i mediespørringer.Med to-kolonneoppsettet kan du legge mer innhold øverst i meldingen som vises i stasjonære eller web-e-postklienter, men å lese og navigere i slike e-poster på mobile enheter er fortsatt en glede. Du kan fikse dette med en god gammel kode.
Den gylne regelen for e -postoppsett er: "Når det er mulig, bruk HTML i stedet for CSS." I hvilken grad CSS støttes av forskjellige e -postklienter kan variere betydelig, men de fungerer alle på samme måte med HTML. For eksempel er attributter som align = ”left” og cellpadding = ”10” mye mer pålitelige verktøy enn deres CSS -motstykker float: left; og polstring: 10px; ... Dette er attributtene som skal brukes når du oppretter bokstaver i formatet "to til en kolonne".
Slik kan et lignende brev se ut i Outlook 2007:
Eksemplet ovenfor bruker en 640px bred containertabell som inneholder to 320px -tabeller som danner kolonner. Disse kolonnene har cellpadding = "20" - dette gjøres for at innholdet ikke skal klamre seg til grensene.
Når de koder for nettet, bruker de vanligvis float: left; for å justere kolonnene. Imidlertid kan align = ”venstre” brukes i stedet. Siden bredden på beholderbordet er lik eller større enn den kombinerte bredden til de to nestede tabellene, fungerer bruk av HTML godt. Nedenfor er en forenklet kode for et lignende to-kolonne mønster:
|
Resultatet ser slik ut:
Beholderbordet er 640 piksler bredt, så oppsettet vil være to-kolonne. Men i tilfelle at bredden på skjermen er mindre enn dette, blir innholdet i den høyre kolonnen "pakket" under venstre. Hvis du gjør bredden på de nestede tabellene lik 320 piksler, så når du viser den på en mobilenhet, får du en bokstav på en kolonne som ikke trenger å bli "zoomet" i det hele tatt. Denne effekten kan oppnås ved å legge til en linje mediespørring i HTML -koden:
Første overskriftGjem Vis
|
Pellentesque habitant morbi ...
Laster inn ...