Dalinamės patarimais, kaip sukurti tobulą adaptyvus rašymas.
Didelėse pašto tarnybose yra įmontuotas blokų rengyklė. Jis renka paprastus prisitaikančius el. laiškus ir yra įtrauktas į prenumeratos kainą. Suformatuoti sudėtingo kūrybinio laiško redaktoriuje nepavyks – tai dizainerio ir maketuotojo darbas. Pirmiausia išsiaiškinkime, kuri raidė klasifikuojama kaip sudėtinga, o kuri – kaip paprasta.
Toliau ateina "lustai". Kai kuriose vietose galite nustatyti tikslų atskirų blokų dydį, bet kitose - ne. Viename redaktoriuje galite rinkti tik vieno stulpelio raides, kitame stulpelių skaičiaus apribojimų nėra. Kai kuriuose redaktoriuose netgi galite konfigūruoti, kuriuos blokus rodyti darbalaukio versijoje, o kuriuos tik mobiliuosiuose įrenginiuose.
Dizaineris ir maketuotojas siūlo individualius sprendimus, redaktorius – standartinius. Turėkite omenyje, kad sudarydami laišką redaktoriuje bet kokiu atveju esate ribojami, pavyzdžiui, šriftų rinkinio ir jų dydžių.
Dizaineris tai padarys taip, kaip norėjote. Maketuotojas pagalvos, kaip pertvarkyti blokus mobiliuosiuose įrenginiuose – taip, kaip planavote. Dirbdami blokų rengyklėje pasikliaujate kūrėjų pasiūlytais sprendimais.
Redaktorius pritaiko raidę pagal savo algoritmą, algoritmo keisti negalima.
Jei sukūrėte struktūrą, parašėte tekstą ir pasirinkote paveikslėlius, tada laiško sukūrimas užtruks nuo trisdešimties minučių iki dviejų valandų. Primename, kad už maketavimą nemokate, darbas su redaktoriumi įskaičiuotas į sąskaitos kainą.
Dizainerio ir laisvai samdomo maketuotojo komanda laišką padarys per dvi ar tris dienas, tai kainuos nuo 5000 iki 15000 rublių. Jei užsisakote iš agentūros, tai kelis kartus brangiau. Prisimeni istoriją iš įžangos? Sergejui pasirinkimas akivaizdus: laišką atsiims pats, jo situacijoje pigiau ir greičiau.
Paprastą adaptacinį laišką geriau sudaryti integruotame redaktoriuje. Jei norite nestandartinių sprendimų, užsakykite juos iš išorės.
Kaip sudaryti laišką integruotame redaktoriuje
Tiems, kurie surenka raidę redaktoriuje, kodo žinoti nereikia. Vienintelis dalykas, kurio jums reikia, yra apgalvoti laiško struktūrą, pasirinkti paveikslėlius ir parašyti tekstą. Jokio „rankinio“ išdėstymo – laišką surinksite iš blokų, kaip ir nukreipimo puslapio kūrimo priemonėje.
1 veiksmas. Laiško kontūras arba prototipas
Pradėkite nuo juodraščio, nupieškite ant popieriaus būsimos raidės kontūrus: kur bus antraštė, kur paveikslėlis, kur mygtukas ir tt Jei turite laiko, surinkite pilnavertį prototipą „Balsamiq“ arba „NinjaMock“. Tokį prototipą parodyti režisieriui ir perduoti dizaineriui nėra gėda.
2 veiksmas. Laiško išdėstymas redaktoriuje
- Pridėkite reikiamą stulpelių skaičių pagal paruoštą diagramą arba prototipą
- Tempti ir paleisti būtini elementai laiško tekste
Paprastai įtaisytieji redaktoriai naudoja vilkimo principą. Jei pas jus taip nėra, pažiūrėkite į Žinių bazės straipsnius – ten aprašyti darbo redaktoriuje principai.
- Tinkinkite elementų turinį: įtraukas, tarpus, lygiavimą ir stilių
Čia įvedate reikiamą tekstą, pridedate nuotrauką ar iliustraciją, su nuorodomis arba be jų. Nepamirškite, kad galite pridėti animuotą paveikslėlį; dauguma redaktorių palaiko GIF formatą.
Tik nepersistenkite su failo dydžiu. El. pašto programos nemėgsta „sunkių“ raidžių ir gali paslėpti jų turinį po mygtuku „Rodyti visą“ – tai, pavyzdžiui, daro „Gmail“. Pasirinkite failus taip, kad baigta raidė svertų ne daugiau kaip 600 KB, tai yra optimalus dydis.
Nepamirškite tinkinti mygtukų ir pridėti prie jų naršymo nuorodų.
3 veiksmas. Reagavimo tikrinimas integruotame redaktoriuje
Kai el. laiškas bus paruoštas, patikrinkite, kaip jis rodomas skirtinguose įrenginiuose.
90% atvejų viskas bus gerai, blokeliai bus „atstatyti“ automatiškai. Jei išdėstymas vis tiek „skraido“ arba rezultatas jums netinka, patikrinkite blokų įtraukų reikšmes, jos turėtų būti vienodos. Jei vienas blokas atsitraukia 10 taškų, o kitas - 30, in mobilioji versija jie gali neteisingai persirikiuoti. Jei abu blokai pasislinks 10 taškų atgal, tikriausiai viskas bus gerai.
4 veiksmas. Patikrinkite pritaikomumą trečiųjų šalių paslaugoms
Patikrinkite rezultatą naudodami „Litmus“ arba el. paštą „Acid“. Šios paslaugos parodys, kaip laiškas bus rodomas skirtinguose įrenginiuose, skirtingose naršyklėse ir skirtingose el. pašto programose.
Kai kuriuose redaktoriuose tikrinimas per „Litmus“ yra integruotas pagal numatytuosius nustatymus. Jei jūsų redaktorius neturi šios galimybės, atsiųskite bandomąją laiško kopiją į specialų el. paštą, kurį gausite užsiregistravę „Litmus“.
Paslauga yra mokama, mėnesinis abonementas „Litmus“ prasideda nuo 79 USD, „Email on Acid“ - nuo 45 USD. Jei vieną kartą per mėnesį siunčiate vieną el. laišką, jis šiek tiek brangsta. IN paskutinė išeitis, pabandykite Browser Shots, ji sena ir nepatogu, bet nemokama. Atminkite, kad tokios paslaugos nesuteikia 100% garantijos. Net jei „Litmus“ viskas gerai, tai nėra priežastis nedelsiant pradėti naujienlaiškį. Išsiųskite laišką į savo asmeninį el. pašto adresą ir atidarykite jį ten.
Pasirinkite redagavimo priemonę, rodančią, kaip el. paštas atrodo skirtinguose įrenginiuose. Idealiu atveju redaktorius yra integruotas su „Litmus“ paslauga. Jei integracijos nėra, patikrinkite prisitaikymą rankiniu būdu asmeniniu el. paštu.
Kaip įvertinti darbo rezultatą – jūsų ar maketuotojo
Jei rašote laišką patys, patikrinkite pritaikomumą redaktoriuje ir pažiūrėkite į laišką iš savo asmeninio el. pašto – to pakanka. Jei norite išbandyti reagavimą vienu metu daugelyje įrenginių, naršyklių ir el. pašto programų, įsigykite paskyrą su „Litmus“ arba „Email on Acid“ ir pamatysite rezultatus.
Tiems, kurie maketavimą perdavė iš išorės, sąskaitos pirkti nebūtina, paprašykite maketuotojo ekrano kopijų iš „Litmus“. Jei jis profesionalas, tai tikrina laiškus panašiose tarnybose, ekrano kopiją jam ne bėda, Tikrindamas atidžiau pasidomėk el.pašto klientais, čia dažniausiai išlenda klaidos. Būtinai patikrinkite, kaip laiškas atsidaro „Outlook“, „Gmail“, „Yandex“ ir „Mail.ru“ – tai populiariausios el. pašto programos Rusijoje.
Neturėtumėte gaišti laiko taisydami išdėstymą, jei jis netinkamai rodomas trečiajame „iPhone“, septintoje „Internet Explorer“ versijoje arba „The Bat“ el. pašto programoje. Taip, visada atsiras tokių, kurie naudojasi trečiuoju iPhone, bet jų yra mažuma. Ar verta perdaryti išdėstymą dėl 1-2% visos bazės? Priklauso nuo bazės kiekio ir „kokybės“.
Tikimės, kad suskirstėte jį į segmentus ir žinote viską apie savo prenumeratorius. Jei 1-2% yra 10 000 žmonių, tada verta vargti. Jei dirbate b2b ir šie 1-2% yra įmonių vadovai, įmonių savininkai ir kiti VIP klientai, laiškus teks pritaikyti jiems.
Įsitikinkite, kad raidė tinkamai rodoma „Outlook“, „Gmail“, „Yandex“ ir „Mail.ru“ - to pakanka.
Rinkodaros atmintinė
- Nuspręskite dėl laiško formato, koks jis bus: standartinis ir paprastas ar sudėtingas ir kūrybingas. Sudėtingos struktūros laiškus dovanokite dizaineriui ir maketuotojui. Surinkite paprastus laiškus pašto tarnybos redaktoriuje, jie pritaikyti pagal numatytuosius nustatymus.
- Patikrinkite rezultatą įtaisytajame redaktoriuje ir, jei jūsų biudžetas leidžia, trečiųjų šalių paslaugose. Priimdami laišką iš maketuotojo, paprašykite ekrano kopijų, kurios patvirtintų, kad laiškas rodomas teisingai – iki bent jau, populiariose el. pašto programose ir populiariose naršyklėse.
- Būtinai peržiūrėkite laišką per savo asmeninį el. paštą, bent jau pagrindinėse el. pašto programose ir iš dabartinių išmaniųjų telefonų modelių, skirtų iOS ir Android.
Pliusas
Vienas iš Web Council tinklaraščio skaitytojų paprašė manęs pakalbėti apie platinamų laiškų išdėstymą. Pats to praktiškai nedarau. Prisimenu, kad kažkada daug kūriau su Subscribe.ru šablonais ir prisimenu, kad tai buvo niūri užduotis. Problema ta, kad el. pašto paslaugos netinkamai veikia su blokų išdėstymu. Ir dar blogiau su css stiliais. Praėjo tiek metų, bet viskas vis dar yra. Šiais laikais didžioji dauguma laiškų, skirtų laiškams, vis dar yra išdėstyti taip pat senamadiškai – naudojant lenteles. Ir tai 2016 m., kai svetainėse jau seniai viešpatavo html5, css3 ir kitos šiuolaikinės gėrybės.
Iš esmės išsamius straipsnius apie raidžių išdėstymą jau galima rasti Habré čia ir čia. Taip pat rekomenduoju paskaityti vietinį gyventoją Arthurą Kochą, kuris yra parašęs daug naudingų straipsnių apie raidžių išdėstymą. Pavyzdžiai: 1 nuoroda, 2 nuoroda.
Bet kad įrašas nepasirodytų tuščias, vis tiek trumpai išdėstysiu pagrindinius el. pašto naujienlaiškių laiškų išdėstymo punktus.
Pirma, turėsite pamiršti apie bloko išdėstymą ir atskiras failas stiliai. Viskas išdėstyta naudojant lenteles, o stiliai rašomi tiesiai vietoje arba kitaip – Inline. Tai atrodo maždaug taip:
Antra, visada turėtumėte priversti įtraukti įtraukų, paraščių ir kraštinių reikšmes į nulį, nes kiekviena el. pašto programa stengiasi jas rodyti skirtingai:
Trečia, jums nereikia vargti su doctype, head and body žymomis. Be doctype tavo laiškai visur bus vienodi, galva ir kūnas praktiškai nenaudingi, nes... vis tiek bus iškirpti dauguma pašto paslaugų (įrodymas).
Ketvirta, jei laiškuose naudojate paveikslėlius, būtinai nurodykite jų dydžius.
prisitaikantis el. pašto išdėstymas
Labai dažnai laiškininkai blokuoja vaizdus raidėmis, o jei nenustatysite jų dydžių, laiškas atrodys gremėzdiškas. Taip pat būtinai pridėkite style=»display:block;. Tai pašalins problemas dėl neaiškių įtraukų (pavyzdžiui, „Gmail“):
Ir jokiu būdu nenaudokite vieno pikselio vaizdų kaip lentelės langelių tarpiklių! Jūsų laiškas garantuotai pateks į šlamštą. Jei jums reikia tarpiklio, turėtumėte naudoti vaizdą, kurio matmenys yra ne mažesni kaip 20x20 pikselių, kuris stiliuose turi būti nustatytas į 1x1 pikselį.
Penkta, galima sukurti adaptyvų raidžių išdėstymą. Atrodo taip pat gremėzdiškai, kaip ir apskritai visi darbai su stalais, bet be žuvies... Suprantate. Trumpai tariant, norint, kad jūsų laiškas būtų pritaikomas, jo turinio dalis turėtų būti įrėminta centrine žyma su atitinkamais stiliais:
Ir galiausiai, pora naudingų nuorodų. Čia galite pamatyti, kurias žymas palaiko įvairios el. pašto paslaugos. Ir čia rasite dar keletą naudingų dalykų – „HTML el. laiškų išdėstymo ypatybės“.
Jei šis straipsnis jums pasirodė naudingas, įvertinkite jį ir pasidalykite juo socialiniuose tinkluose:
(2 balsų vidurkis:
Susiję įrašai:
Adaptyvių raidžių išdėstymas: atmintinė rinkodaros specialistui
Dauguma el. laiškų netinkamai rodomi mobiliuosiuose įrenginiuose. Paveikslėliai skiriasi, o tekstas turi būti slinktas ir keičiamas.Kad raidės gerai atrodytų įvairiose platformose, reikia naudoti adaptyvų išdėstymą.
Šis kursas skirtas HTML koduotojams, kūrėjams ir el. pašto rinkodaros specialistams, turintiems pagrindinių HTML ir CSS žinių. Sužinosite, kas yra mobilusis ir guminis išdėstymas, blokų ir flangų pritaikymas. Sužinokite, kaip paruošti vaizdus raidėms ir peržiūrėkite pagrindinius maketavimo įrankius.
Po kursų galėsite kurti el. laiškus, kurie vienodai gerai rodomi kompiuteriuose ir mobiliuosiuose įrenginiuose.
2. Adaptyvaus išdėstymo ypatumai
3. Požiūriai į el. pašto pritaikymą
4. Pagrindinis reaguojančio el. pašto šablonas
5. Mobiliojo prisitaikymo būdai
6. HTML maketavimo įrankiai
7. Kurso apibendrinimas
8. Adaptyvus raidžių išdėstymas elektroninio pašto rinkodaroje: baigiamasis testas
Neribotos kūrybiško elektroninių naujienlaiškių maketavimo galimybės, grafinių elementų panaudojimas ir įdomus turinys patraukia kliento dėmesį. Tokie laiškai nesiunčiami į šiukšlių dėžę.
Laiško platinimui kūrimas
Norint sėkmingai naudotis el. pašto rinkodaros sistema, neužtenka paprastos siuntimo ir pasiūlymo laiško logikos.
30 nemokamų reaguojančių el. pašto šablonų
Norint patraukti dėmesį, informacija turėtų būti pateikta gražiame „įpakavime“, su reikiamomis nuorodomis ir patraukliais vaizdais. Pirmas laiško įspūdis – išorinis apvalkalas, turinys antraeilis.
Kasdien vartotojai gauna apie šimtą laiškų, auditorijos dėmesį turite patraukti „ryškia“ ir jaudinančia antrašte bei sakiniu viduje. Norėdami sėkmingai įgyvendinti platinimo laiškų dizainą ir išdėstymą, turite apgalvoti projekto įgyvendinimo strategiją:
- apgalvoti idėją ir kompetentingai susisteminti raidžių seriją;
- pabrėžkite pagrindinį dalyką, laimėkite kliento pasitikėjimą pateikdami įdomų produktą;
- laiškai turėtų skatinti veikti, motyvuoti įsigyti prekę;
- patrauklus dizainas, profesionalai pagamins html laiškų išdėstymą paštu.
Specialistai pasirūpins adaptyviu el. pašto laiškų išdėstymu, kad dizainas puikiai atrodytų bet kuriame įrenginyje. Jeigu Jūsų internetinė parduotuvė neturi firminio identiteto, tuomet sukursime bendrą firminį laiškų maketą, kuris bus naujienlaiškio pagrindas. Marketingas – tai gebėjimas sukelti žmoguje emocijas ir sukurti norą ką nors nusipirkti. Esame šios srities profesionalai, todėl mūsų darbo rezultatai visada puikūs.
html raidžių išdėstymas
- Produkto/paslaugos reklamavimo idėja ir jos įgyvendinimas tekstiniu formatu.
- Laiško, siunčiamo paštu, dizainas.
- Laiškų išdėstymas.
- Rezultato testavimas visose platformose ir el. pašto paslaugose.
Didžiausią raidžių efektą galima pasiekti, jei kiekviena proceso grandis aiškiai ir efektyviai atlieka paskirtą užduotį. Profesionalūs maketuotojai ir dizaineriai pasirūpins laiško funkcionalumo ir techninės bazės nustatymu, atsižvelgdami į konkrečių el. pašto klientų maketą. Laiškas bus rodomas teisingai visose platformose – tai vadinama kryžminio pašto išdėstymu.
Paprasti atpažįstami šablonai, teisingas plotis, informacija apie įmonę ir prenumeratos atsisakymo forma – jei visa tai atsižvelgsite, Jūsų naujienlaiškis įkvėps pasitikėjimo, o klientui nekils minčių spustelėti mygtuką „Spam“.
ką gausi?
- Crossmailer laiškai sukurti pagal visas taisykles
- Tikslus gražus dizainas
- Aukštas PR
- Mažas prenumeratos atsisakymų ir įtraukimo į šlamštą skaičius
- Apgalvotas tekstas, laiškų taikymas
- Efektyvus segmentavimas
- Teisingas raidžių atvaizdavimas daugelyje el. pašto programų
- Teisingas techninis siuntimo proceso nustatymas
Svarbu ne tik estetika, bet ir funkcionalumas. Jei esate pasirengęs pradėti taisyklingai rašyti raides - Kviečiame į nemokamą konsultaciją.
Atnaujinta medžiaga 2018-06-20
Raidžių išdėstymas skiriasi nuo įprasto žiniatinklio išdėstymo dėl interpretavimo ypatumų įvairiose interneto sąsajose ir el. pašto programose.
Pažvelkime į pavyzdžius, kaip pasiekti gerą el. pašto rodymą įvairiuose IPT ir el. pašto programose.
Kaip atrodo bendras interaktyvus el. pašto šablonas:
|
Norėdami išspręsti automatinio mastelio keitimo problemą iOS 10 ir iOS 11 versijose, pridėjome:
Automatinio mastelio klaidos pavyzdys
Kitas įsilaužimas:
Webkit-text-size-adjust:none; -ms-text-size-adjust: nėra;
neleidžia iOS įrenginiams keisti el. laiško turinio, kad būtų lengviau jį skaityti. Tai paprastai prieštarauja dizainui ir gali sugadinti išdėstymą:
Pereikime prie laiško korpuso – kūno dalies. Žiniatinklio sąsajos fono spalva gali būti skirtinga, todėl reikia viską suvynioti į lentelę su norima fono spalva, net jei ji yra balta, kaip šiuo atveju:
| … |
Dėl riboto stiliaus ypatybių, pvz., maksimalaus pločio, palaikymo Outlook 2007–2016 el. pašto programose, taip pat IE panašiose Outlook 2003 ir Lotus Mail el. pašto programose, sąlyginiuose komentaruose būtina sukurti pagalbinę lentelės struktūrą, kuri apribos pranešimo plotis šiose el. pašto programose:
| 1 blokas | 2 blokas |
Kodas tarp:
bus nepaisoma visose el. pašto programose, išskyrus Outlook 2007–2016 ir į IE panašias el. pašto programas.
Ir kiekvienas blokas turės tokią struktūrą:
| Blokuoti |
Taip pat kartais raidėse pasitaiko situacija, kai kaladėlės yra išdėstytos šaškių lentos tvarka, tačiau perstatant pageidautina išlaikyti loginę kaladėlių seką ir atstatyti ne dešinįjį bloką po kairiuoju, o atvirkščiai - kairysis blokas po dešine. Tai galima padaryti pakeitus teksto kryptį, jis atrodys taip:
|
Kiti elementai ir technika
Nematoma išankstinė antraštė
Beveik visose žiniatinklio sąsajose šalia laiško temos taip pat rodomas pirmasis tekstas:
Laiškuose tai dažniausiai būna techninė informacija, tokia kaip „atsisakyti prenumeratos“ ir „atidaryti naršyklėje“, kuri akivaizdžiai nemotyvuoja prenumeratoriaus atidaryti laiško, tačiau valdydami rodomą tekstą galite žymiai padidinti galimybę atidaryti laišką.
Norėdami tai padaryti, pačioje laiško html pagrindinio teksto pradžioje pridėkite kodą su tokia struktūra:
Nematomos išankstinės antraštės naudojimas gali neigiamai paveikti pristatymą, todėl atsargiai naudokite šią techniką ir atidžiai stebėkite pristatymą per pašto viršininką.
Vaizdo įrašai laiškais
Standartinė pašto programa vėl pradėjo leisti HTML5 vaizdo įrašus, tačiau ant vaizdo yra tiesioginė nuoroda į „YouTube“ vaizdo įrašą.
Naudojant šį diegimą, vaizdo įrašas bus rodomas Mail.ru (apie 55 %) ir Gmail (apie 14 %) žiniatinklio sąsajų sluoksnyje. Tokiu atveju daugumoje mobiliųjų įrenginių vaizdo įrašas bus atidarytas Youtube programoje, neatidarius naršyklės.
Šio metodo trūkumas yra nesugebėjimas rinkti paspaudimų statistikos, nes nuoroda į Youtube turi būti tiesioginė, o šio pašto paspaudimų stebėjimas turi būti išjungtas jūsų ESP.
Testavimas
Svarbiausias maketavimo etapas – raidžių testavimas. Geriausias būdas vis tiek yra rankiniu būdu patikrinti laiško atvaizdavimą įvairiose žiniatinklio sąsajose ir el. pašto programose; tai gali padėti išsiųsti „neapdorotą“ laiškų išdėstymą archyvo forma. Turite žinoti, kokias platformas naudoja jūsų prenumeratoriai, kuriems el. pašto paslaugų teikėjams jie teikia pirmenybę, ir rankiniu būdu patikrinti bent jau populiariausias.
Norėdami pagreitinti testavimo procesą, galite naudotis „Litmus“ ir „EmailOnAcid“ paslaugomis, tačiau tai nepanaikina būtinybės tikrinti kiekvienos atskiros raidės atvaizdavimą rankiniu būdu.
Straipsnyje buvo paminėtos kai kurios paslaugos, ištekliai ir įrankiai, kurie neabejotinai bus naudingi laiškų maketuotojams ir kitiems. Čia yra trumpas naudingų išteklių sąrašas.
Įrankiai ir paslaugos:
El. pašto mygtukai – mygtukų generatorius naudojant VML.
- fono paveikslėlių įterpimas į raides naudojant VML.
Lakmusas – raidžių rodymo testavimas.
Email On Acid – alternatyva Litmus: el. pašto ekrano tikrinimas.
Naudingos medžiagos:
„Litmus“ tinklaraštis yra el. pašto testavimo rinkos lyderis. Įdomūs atvejai ir naujausios naujienos iš el. pašto rinkodaros ir el. pašto maketavimo pasaulio.
Blog Email On Acid – įdomūs atvejai ir naujausios naujienos iš el. pašto rinkodaros ir el. pašto išdėstymo pasaulio.
- pirmasis tinklaraštis apie elektroninio pašto rinkodarą, kalba apie tai, kaip padaryti el.
Todo dienoraštis - įdomūs atvejai ir naudinga medžiaga apie išdėstymą ir plėtrą.
- Vertimas
Kiekvienas, kuris periodiškai skaito el. laiškus savo telefone, žino, kad patirtis gali būti nuo visiškai malonios iki siaubingos. Tai, kad el. laiškas iš naujienlaiškio puikiai atrodo ant darbastalio, dar nereiškia, kad mobiliojoje el. pašto programoje viskas bus gerai – mažame ekrane dažnai kyla problemų su šriftais, stulpelių atvaizdavimu, o šablonų išdėstymas tiesiog subyra.
Kodėl el. laiškus reikia pritaikyti mobiliesiems įrenginiams?
Nemaža dalis įvairių el. pašto rinkodaros įmonių auditorijos el. laiškus žiūri mobiliuosiuose įrenginiuose. 2011 m. atliktas „Campaign Monitor“ tyrimas parodė, kad beveik 20 % el. pašto atidarytų išmaniuosiuose telefonuose ir planšetiniuose kompiuteriuose, palyginti su tik 4 % 2009 m. Beveik 90% šių atradimų buvo atlikti iOS įrenginiuose. Dabar skaičiai dar didesni.Šiame vadove apžvelgsime kelis būdus, kaip pagerinti ekraną mobiliuosiuose įrenginiuose (nuo medijos užklausų naudojimo kuriant reaguojančius šablonus iki pažangesnių metodų). Be to, apžvelgsime įvairius dizaino klausimus, kurie iškyla net naujienlaiškio planavimo etape, taip pat kalbėsime apie tai, kaip išmaniuosiuose telefonuose ir planšetiniuose kompiuteriuose patalpinti laiškų gavimo prenumeratos formas.
Dizaino technikos
Prieš pasinerdami į raidžių išdėstymo pasaulį, pakalbėkime apie vizualinį šio verslo komponentą. Įdomus momentas yra tai, kad analizuodami medžiagą sukursime dvi tos pačios raidės versijas – vienas šablonas sukurtas taip, kad gerai atrodytų darbalaukio el. pašto programose, o antrasis turėtų būti malonus skaityti įrenginiuose su mažais ekranais.Pavyzdžiui, štai kaip toks laiškas gali atrodyti „Outlook“:
Žemiau yra tas pats el. laiškas, atidarytas „iPhone“ skirtoje pašto programoje. Skirtumas tarp dviejų šablonų yra aiškiai matomas. Mobilioji versija yra siauresnė ir turi mažiau pasirenkamų vaizdinių elementų, tačiau ją taip pat lengva skaityti kaip ir darbalaukio versiją. Dviejų mobiliųjų parinkčių išvaizdos skirtumas yra CSS naudojimas.
Dešinioji raidė niekuo nesiskiria nuo kairiosios, tačiau jos makete nebuvo naudojamas CSS. Kai kurios teksto skiltys pasirodė per mažos, o vartotojui beveik neįmanoma suprasti, kas ten parašyta - tai yra milijonų naujienų laiškų, kuriuos mobiliųjų įrenginių savininkai gauna kasdien, problema.
Į ką reikia atsižvelgti kuriant šablonus
Kurti el. laiškus, kurie gerai atrodytų mobiliuosiuose įrenginiuose, yra daug sudėtingiau nei naudojant tinkintą CSS. Kiti dalykai, į kuriuos reikia atkreipti dėmesį:- Ne platesni nei 500–600 pikselių vieno stulpelio šablonai geriau veikia mobiliuosiuose įrenginiuose. Juos lengviau skaityti, o jei ir turi trūkumų, bet kokiu atveju visos „kambarinės“ atrodo geriau.
- Remiantis „Apple“ gairėmis, minimalus mygtukų ir nuorodų nusileidimo plotas turėtų būti 44 x 44 pikseliai. Nieko nėra „nenaudotesnio“ už krūvą mažų nuorodų, kurias sunku naršyti mažame mobiliojo įrenginio ekrane.
- Minimalus „iPhone“ rodomas šriftas yra 13 pikselių. Į šį faktą būtina atsižvelgti kuriant laiško tekstą – jei šablone tekstas bus spausdinamas mažesniu šriftu, jis automatiškai bus padidintas, o tai gali sulaužyti visą maketą.
- Laiškas turi būti glaustas, o visa svarbi informacija turi būti pateikta viršuje. Jutikliniuose ekranuose slinkti pirštu yra sunkiau nei darbalaukyje su pele.
- Jei įmanoma, turėtumėte naudoti display:none; property. norėdami paslėpti pasirenkamus šablono elementus. Socialinių tinklų bendrinimo mygtukai yra tinkami darbalaukyje, tačiau ne visada patogu juos naudoti išmaniajame telefone.
Dabar, kai aptarėme kai kurias svarbias mobiliųjų platformų el. pašto kampanijų dizaino problemas, galime pereiti prie įvairių jų išdėstymo aspektų.
Mobiliųjų raidžių išdėstymas
Kalbant apie mobiliuosius stilius, dažniausiai turimas galvoje ne atskiras stiliaus failas, o medijos užklausos. Štai kaip jie atrodo:
Pažiūrėkime atidžiau, kaip vyksta @media pranešimas. Visų pirma, norint sukurti „mobilųjį“ CSS, reikia įdiegti tam tikrą kriterijų, pagal kurį el. pašto klientas nuspręs, kokius stilius naudoti.
Tam naudojamas @media only ekrano operatorius – jis nurodo, kad el. pašto programa turi būti rodoma ekrane (o ne, pavyzdžiui, spausdinama spausdintuvu). Po to aukščiau esančiame kodo pavyzdyje nustatėme maksimalų įrenginio ekrano plotį iki 480 pikselių. Tai svarbu, nes daugelio (bet ne visų) mobiliųjų įrenginių ekrano plotas yra 480 pikselių ar mažiau.
Todėl dažnai naudojamas maksimalus įrenginio plotis: 480 pikselių (tai taip pat yra ankstesnių iPhone modelių ekrano plotis gulsčiojo režimo režimu), tačiau galite išplėsti aprašą, kad apimtų kitus ekrano dydžius:
@medijos ekranas ir (įrenginio plotis: 480 pikselių) ir (įrenginio aukštis: 360 pikselių), ekranas ir (įrenginio plotis: 360 pikselių) ir (įrenginio aukštis: 480 pikselių), ekranas ir (įrenginio plotis: 320 pikselių) ir (įrenginys -aukštis: 240 pikselių) (... )
Grįžkime prie aukščiau aptarto mobiliojo laiško šablono. Štai kaip tai atrodo Apple Mail:
Šiame pavyzdyje turinio lentelė taikoma HTML lentelėms, kuriose yra tekstas ir vaizdai. Štai kodo pavyzdys:
Ši klasė atlieka įdomų vaidmenį – atidarius el. laišką 480 pikselių ar platesnio ekrano įrenginyje, tai nieko nedaro. Tačiau kai ekranas yra 480 ar mažesnis, jis susiaurina lentelių plotį iki 320 pikselių. Siekiant išvengti neįprastų „Yahoo“ pašto trikdžių, naudojami atributų parinkikliai. Kitu atveju naudojamas „įprastas“ CSS. Be to, galite įtraukti šiuos skelbimus:
@medijos tik ekranas ir (maks. įrenginio plotis: 480 pikselių) ( /* mobiliesiems pritaikyti CSS stiliai čia */ lentelė ( plotis: 325 piks. !svarbu; ) img ( plotis: 325 piks. !svarbu; ) p ( ekranas: nėra ! svarbu;))
Toliau apžvelgsime pažangesnius mobiliųjų el. laiškų pritaikymo mobiliesiems įrenginiams būdus.
Interaktyvių šablonų su du su vienu stulpeliais kūrimas
Vieno stulpelio šablonų naudojimas yra geras būdas optimizuoti el. pašto kampaniją mobiliesiems įrenginiams. Nepaisant to, yra būdų, kaip sukurti reaguojančius dviejų stulpelių šablonus, nereikalaujant ilgų CSS žiniasklaidos užklausų.Dviejų stulpelių šablonas leidžia įdėti daugiau turinio darbalaukio ar žiniatinklio el. pašto programose rodomo pranešimo viršuje, tačiau skaityti ir naršyti šiuos pranešimus mobiliuosiuose įrenginiuose yra dar smagiau. Tai galite išspręsti naudodami seną gerą kodą.
Auksinė el. pašto išdėstymo taisyklė yra tokia: „Kai tik įmanoma, vietoj CSS naudokite HTML. Skirtingų el. pašto klientų CSS palaikymo mastas gali labai skirtis, tačiau jie visi veikia vienodai su HTML. Pavyzdžiui, tokie atributai kaip align=”left” ir cellpadding=”10” yra daug patikimesni nei jų CSS atitikmenys float: left; ir pamušalas: 10 pikselių; . Būtent šie atributai bus naudojami kuriant raides „du prie vieno stulpelio“ formatu.
Štai kaip panašus laiškas gali atrodyti „Outlook 2007“:
Anksčiau pateiktame pavyzdyje naudojama 640 pikselių pločio sudėtinio rodinio lentelė, kurioje yra dvi 320 pikselių lentelės, kurios sudaro stulpelius. Šie stulpeliai turi cellpadding=”20“ – tai daroma taip, kad turinys neprispaustų prie kraštų.
Koduojant žiniatinkliui dažniausiai naudojamas float:left; kad sulygiuotų stulpelius. Tačiau vietoj to galite naudoti align="left". Kadangi sudėtinio rodinio lentelės plotis yra lygus arba didesnis už bendrą dviejų įdėtų lentelių plotį, HTML veiks gerai. Toliau pateikiamas supaprastintas tokio dviejų stulpelių šablono kodas:
|
Rezultatas atrodo taip:
Sudėtinio rodinio lentelė yra 640 pikselių pločio, todėl šabloną sudarys du stulpeliai. Bet jei ekrano plotis yra mažesnis už šį, dešiniojo stulpelio turinys bus „apvyniotas“ po kairiuoju. Jei įdėtųjų lentelių plotį padarysite lygų 320 pikselių, tada rodydami mobiliajame įrenginyje gausite vieno stulpelio raidę, kurios visai nereikia „didinti“. Šį efektą galite pasiekti pridėję vieną medijos užklausos eilutę prie HTML kodo:
Pirma antraštėSlėpti Rodyti
|
Pelentiškas gyventojas morbi...
Įkeliama...