Mēs dalāmies ar padomiem ideāla radīšanai adaptīvā rakstīšana.
Lielajiem pasta pakalpojumiem ir iebūvēts bloku redaktors. Tas apkopo vienkāršus adaptīvus burtus, un tas ir iekļauts abonēšanas cenā. Sarežģītu radošu vēstuli noformēt redaktorā neizdosies – tas ir dizainera un maketētāja darbs. Vispirms noskaidrosim, kurš burts ir klasificēts kā sarežģīts un kurš ir vienkāršs.
Tālāk nāk čipsi. Kaut kur jūs varat iestatīt precīzu izmēru atsevišķiem blokiem, bet kaut kur jūs nevarat. Vienā redaktorā var apkopot tikai vienas slejas burtus, otrā kolonnu skaitam nav ierobežojumu. Dažos redaktoros jūs pat varat pielāgot, kurus blokus rādīt darbvirsmas versijā un kurus rādīt tikai mobilajās ierīcēs.
Dizainers un maketētājs piedāvā individuālus risinājumus, redaktors - standarta risinājumus. Ņemiet vērā, ka, sastādot vēstuli redaktorā, jebkurā gadījumā jūs ierobežo, piemēram, fontu komplekts un to izmēri.
Dizainers darīs to, ko vēlaties. Maketētājs pārdomās, kā mobilajās ierīcēs pārkārtot blokus – tieši tā, kā plānojāt. Strādājot bloku redaktorā, jūs paļaujaties uz izstrādātāju piedāvātajiem risinājumiem.
Redaktors pielāgo burtu pēc sava algoritma; algoritmu nevar mainīt.
Ja esat izstrādājis struktūru, uzrakstījis tekstu un paņēmis attēlus, tad vēstules izveide prasīs no trīsdesmit minūtēm līdz divām stundām. Atgādiniet, ka jums nav jāmaksā par izkārtojumu, darbs ar redaktoru ir iekļauts konta izmaksās.
Ārštata dizainera un maketētāja komanda vēstuli sagatavos divu vai trīs dienu laikā, tā maksās no 5000 līdz 15 000 rubļu. Ja pasūtāt aģentūrā - daudzkārt dārgāk. Atcerieties stāstu no ievada? Sergejam izvēle ir acīmredzama: viņš pats savāks vēstuli, viņa situācijā tas ir lētāk un ātrāk.
Vienkāršu adaptīvu burtu vislabāk var salikt iebūvētajā redaktorā. Ja vēlaties nestandarta risinājumus - ārpakalpojumus.
Kā izveidot vēstuli iebūvētajā redaktorā
Tiem, kuri savāc vēstuli redaktorā, kods nav jāzina. Vienīgais, kas jums nepieciešams, ir pārdomāt vēstules struktūru, paņemt attēlus un uzrakstīt tekstu. Nav "manuāla" izkārtojuma — e-pastu saliksiet no blokiem, tāpat kā galvenās lapas veidotājā.
Solis 1. Shēmas vai burta prototips
Sāciet ar melnrakstu, uz papīra uzzīmējiet topošās vēstules diagrammu: kur būs virsraksts, kur attēls, kur poga utt. Ja jums ir laiks, salieciet pilnvērtīgu prototipu programmā Balsamiq vai NinjaMock. Šādu prototipu nav kauns parādīt režisoram un nodot dizaineram.
2. solis. Vēstules izkārtojums redaktorā
- Pievienojiet nepieciešamo kolonnu skaitu, pamatojoties uz gatavu shēmu vai prototipu
- vilkt un nomest nepieciešamie elementi vēstules pamattekstā
Parasti iebūvētajos redaktoros darbojas vilkšanas un nomešanas princips. Ja tas nav jūsu gadījumā, skatieties rakstus no zināšanu bāzes - tur ir aprakstīti redaktora darba principi.
- Pielāgojiet elementa saturu: polsterējumu, atstarpes, līdzinājumu un stilu
Šeit ievadiet vajadzīgo tekstu, pievienojiet fotoattēlu vai ilustrāciju, ar vai bez saitēm. Neaizmirstiet, ka varat pievienot animētu attēlu, lielākā daļa redaktoru atbalsta GIF formātu.
Vienkārši nepārspīlējiet ar faila lielumu. E-pasta klientiem nepatīk "smagie" e-pasta ziņojumi, un viņi var paslēpt to saturu zem pogas "Rādīt pilnu" — kā to dara, piemēram, Gmail. Izvēlieties failus tā, lai gatavā vēstule sver ne vairāk kā 600 KB, tas ir optimālais izmērs.
Neaizmirstiet pielāgot pogas un pievienot tām navigācijas saites.
3. darbība. Pielāgošanās spējas pārbaude iebūvētajā redaktorā
Kad e-pasts ir gatavs, pārbaudiet, kā tas izskatās dažādās ierīcēs.
90% gadījumu viss būs kārtībā, bloki “pārbūvēs” automātiski. Ja izkārtojums joprojām "lido" vai rezultāts jums nav piemērots - pārbaudiet atkāpes vērtības blokos, tām jābūt vienādām. Ja viens bloks atkāpjas par 10 punktiem, bet otrs par 30, collas mobilā versija tie var netikt pareizi atjaunoti. Ja abi bloki atkāpsies par 10 punktiem, tad visticamāk viss būs kārtībā.
4. darbība. Pielāgojamības pārbaude trešo pušu pakalpojumiem
Pārbaudiet rezultātu, izmantojot Litmus vai Email on Acid. Šie pakalpojumi parādīs, kā vēstule tiks parādīta dažādās ierīcēs, dažādās pārlūkprogrammās un dažādos e-pasta klientos.
Dažos redaktoros pārbaude, izmantojot Litmus, ir integrēta pēc noklusējuma. Ja tas nav iespējams jūsu redaktorā, nosūtiet vēstules testa eksemplāru uz īpašu e-pastu, kas tiks nosūtīts pēc reģistrācijas Lakmusā.
Pakalpojums ir maksas, Litmus ikmēneša abonements sākas no 79 USD, Email on Acid - no 45 USD. Ja sūtāt vienu vēstuli reizi mēnesī, tas ir nedaudz dārgi. AT pēdējais līdzeklis, izmēģiniet Browser Shots, tas ir vecs un neērts, taču tas ir bezmaksas. Atcerieties, ka šādi pakalpojumi nedod 100% garantiju. Pat ja Lakmusā viss ir kārtībā, tas nav iemesls nekavējoties izveidot adresātu sarakstu. Nosūtiet vēstuli uz savu personīgo pastu un atveriet to tur.
Izvēlieties redaktoru, kas parāda, kā e-pasts izskatās dažādās ierīcēs. Ideālā gadījumā, ja redaktors ir integrēts ar pakalpojumu Litmus. Ja integrācijas nav, pārbaudiet pielāgojamību manuāli, izmantojot personīgo pastu.
Kā novērtēt darba rezultātu - savs vai maketētājs
Ja pats sastādat vēstuli, pārbaudiet pielāgošanās spēju redaktorā un apskatiet vēstuli no sava personīgā pasta - ar to pietiek. Ja vēlaties vienlaikus pārbaudīt pielāgošanās spējas daudzās ierīcēs, pārlūkprogrammās un e-pasta klientos, iegādājieties kontu Litmus vai Email on Acid, skatiet rezultātu tur.
Tiem, kas izmantoja izkārtojumu ārpakalpojumā, nav nepieciešams iegādāties kontu, jautājiet maketētājam ekrānuzņēmumus no Litmus. Ja viņš ir profesionālis, tad pārbauda vēstules līdzīgos servisos, screenshot nosūtīšana viņam nav problēma.Pārbaudot ieskaties vērīgāk e-pasta klientos, pārsvarā te uznirst jambs. Noteikti pārbaudiet, kā vēstule tiek atvērta programmās Outlook, Gmail, Yandex un Mail.ru - šie ir populārākie e-pasta klienti Krievijā.
Nevajadzētu tērēt laiku izkārtojuma labošanai, ja tas netiek pareizi parādīts trešajā iPhone ierīcē, Internet Explorer septītajā versijā vai The Bat e-pasta klientā. Jā, vienmēr būs tādi, kas izmantos trešo iPhone, taču viņi ir mazākumā. Vai ir vērts pārtaisīt izkārtojumu 1-2% no kopējās bāzes dēļ? Atkarīgs no bāzes daudzuma un "kvalitātes".
Mēs ceram, ka esat to segmentējis un zināt visu par saviem abonentiem. Ja 1-2% ir 10 000 cilvēku, tad ir vērts apjukt. Ja jūs strādājat b2b un šie 1-2% ir pārvaldības uzņēmumi, uzņēmumu īpašnieki un citi VIP klienti, jums būs jāpielāgo vēstules viņiem.
Pārliecinieties, vai vēstule tiek adekvāti parādīta programmās Outlook, Gmail, Yandex un Mail.ru - ar to pietiek.
Mārketinga speciālista piezīme
- Izlemiet par vēstules formātu, kāds tas būs: standarta un vienkāršs vai sarežģīts un radošs. Uzdāviniet dizaineram un maketētājam sarežģītas struktūras vēstules. Savāc vienkāršas vēstules pasta pakalpojumu redaktorā, tās tiek pielāgotas pēc noklusējuma.
- Pārbaudiet rezultātu iebūvētajā redaktorā un, ja budžets atļauj, trešo pušu pakalpojumos. Pieņemot vēstuli no maketētāja, pieprasiet ekrānuzņēmumus, kas apstiprina, ka vēstule ir parādīta pareizi - līdz plkst. vismaz, populāros e-pasta klientos un populārās pārlūkprogrammās.
- Noteikti skatiet vēstuli, izmantojot savu personīgo pastu, vismaz galvenajos e-pasta klientos un pašreizējos viedtālruņu modeļos operētājsistēmās iOS un Android.
plus
Viena no Web padomes emuāra lasītājām lūdza pastāstīt par vēstuļu izkārtojumu sūtīšanai. Es pats to gandrīz nekad nedaru. Es atceros, ka savulaik es daudz ķēros pie Subscribe.ru veidnēm un atceros, ka tas bija smags darbs. Problēma ir tāda, ka pasta pakalpojumi nedarbojas labi ar bloku izkārtojumu. Un vēl sliktāk ar css stiliem. Ir pagājuši tik daudz gadu, un lietas joprojām pastāv. Tagad lielākā daļa vēstuļu adresātu sarakstiem joprojām tiek rakstītas vecmodīgā veidā - ar tabulu palīdzību. Un tas ir 2016. gadā, kad html5, css3 un citi mūsdienu labumi jau ilgu laiku braukā pa vietnēm.
Principā jau ir izsmeļoši raksti par Habré burtu izkārtojumu šeit un šeit. Iesaku izlasīt arī kādu vietējo iedzīvotāju vārdā Arturs Kohs, kurš ir uzrakstījis daudz noderīgu rakstu par burtu izkārtojumu. Piemēri: saite 1, saite 2.
Bet, lai ieraksts neizrādītos tukšs, es tomēr īsumā izrunāšu galvenos e-pasta biļetenu burtu izkārtojuma punktus.
Pirmkārt, jums ir jāaizmirst par bloku izkārtojumu un atsevišķu failu stilus. Viss ir salikts tabulās, un stili tiek rakstīti tieši vietā vai citādi - Inline. Tas izskatās apmēram šādi:
Otrkārt, vienmēr ir jāpiespiež atkāpju, piemaļu un apmaļu vērtības uz nulli, jo katrs e-pasta klients cenšas tās attēlot savā veidā:
Treškārt, neuztraucieties ar doctype, head un body tagiem. Bez doctype jūsu e-pasti visur būs vienādi, galva un ķermenis ir praktiski bezjēdzīgi, jo joprojām tiks izgriezta lielākā daļa pasta pakalpojumu (pierādījums).
Ceturtkārt, ja izmantojat attēlus ar burtiem, noteikti pierakstiet to izmērus.
atsaucīgs e-pasta izkārtojums
Ļoti bieži sūtītāji bloķē attēlus e-pastos, un, ja jūs neiestatīsit to izmērus, e-pasts izskatīsies neveikli. Noteikti pievienojiet arī style="display:block;. Tas atbrīvosies no problēmām ar nesaprotamiem ievilkumiem (piemēram, Gmail):
Un nekādā gadījumā neizmantojiet viena pikseļa attēlus kā tabulas šūnu starplikas! Jūsu e-pasts tiek garantēts, ka tas nonāks surogātpasta sadaļā. Ja nepieciešams starplikas, tad jāizmanto attēls, kura izmēri ir vismaz 20x20 pikseļi, kas stilos ir spiesti iestatīt uz 1x1 pikseļu.
Piektkārt, e-pastiem ir iespējams izveidot adaptīvu izkārtojumu. Izskatās tikpat neveikli kā visi darbi ar galdiem kopumā, bet bez zivīm... Saproti. Īsāk sakot, lai jūsu vēstule varētu nedaudz pielāgoties, tās satura daļai jābūt ierāmētai ar centrālo tagu ar atbilstošiem stiliem:
Un visbeidzot, pāris noderīgas saites. Šeit varat redzēt, kuras atzīmes atbalsta dažādi pasta pakalpojumi. Un šeit jūs atradīsiet vēl dažas noderīgas lietas - "HTML burtu izkārtojuma iezīmes".
Ja raksts jums bija noderīgs, lūdzu, novērtējiet to un kopīgojiet to sociālajos tīklos:
(2 balsis, vidēji:
Saistītās ziņas:
Adaptīvo e-pasta ziņojumu izkārtojums: piezīme mārketinga speciālistam
Lielākā daļa e-pasta ziņojumu netiek pareizi parādīti mobilajās ierīcēs. Attēli atšķiras, un teksts ir jāritina un jāmēro. Lai e-pasta ziņojumi izskatītos labi dažādās platformās, jums ir jāizmanto adaptīvs izkārtojums.
Šis kurss ir paredzēts HTML kodētājiem, izstrādātājiem un e-pasta mārketinga speciālistiem ar pamatzināšanām par HTML un CSS. Jūs uzzināsiet, kas ir mobilais un šķidrais izkārtojums, bloku un sānu pielāgošana. Uzziniet, kā sagatavot attēlus burtiem, un pārskatiet pamata izkārtojuma rīkus.
Pēc kursa beigām varēsi izveidot e-pastus, kas vienlīdz labi tiek rādīti gan galddatorā, gan mobilajās ierīcēs.
2. Adaptīvā izkārtojuma iezīmes
3. Pieejas e-pasta pielāgošanai
4. Pamata atsaucīgā e-pasta veidne
5. Mobilās adaptācijas tehnikas
6. HTML izkārtojuma rīki
7. Kursa apkopošana
8. Responsīvs e-pastu izkārtojums e-pasta mārketingā: gala tests
Neierobežotas e-pasta biļetenu radošā izkārtojuma iespējas, grafisko elementu izmantošana un interesants saturs - piesaista klienta uzmanību. Šādi e-pasti netiek sūtīti uz surogātpastu.
Adresātu saraksta izveide
Veiksmīgai E-pasta mārketinga sistēmas pielietošanai nepietiek ar vienkāršu adresātu saraksta un e-pasta ar piedāvājumu loģiku.
30 bezmaksas atsaucīgas e-pasta veidnes
Lai piesaistītu uzmanību, informācija jāiesniedz skaistā "iesaiņojumā", ar pareizām saitēm un pievilcīgiem attēliem. Pirmais iespaids par burtu ir ārējais apvalks, pildījums ir sekundārs.
Lietotāji katru dienu saņem ap simts e-pastu, jums ir jāpiesaista auditorijas uzmanība ar “spilgtu” un aizraujošu virsrakstu un teikumu iekšā. Lai veiksmīgi īstenotu pasta vēstuļu dizainu un izkārtojumu, jums jāapsver projekta īstenošanas stratēģija:
- pārdomājiet ideju un kompetenti izveidojiet burtu sēriju;
- izcelt galveno, iekarot klienta uzticību, nodrošinot interesantu produktu;
- vēstulēm jārosina uz rīcību, jāmotivē iegādāties preci;
- pievilcīgs dizains, profesionāļi izgatavos vēstuļu html izkārtojumu pasta sūtīšanai.
Speciālisti parūpēsies par e-pastu adaptīvo izkārtojumu, lai dizains lieliski izskatītos jebkurā ierīcē. Ja Jūsu interneta veikalam nav korporatīvās identitātes, tad mēs izveidosim vēstules vispārīgu firmas izkārtojumu, kas būs par pamatu informatīvajam izdevumam. Mārketings ir spēja raisīt cilvēkā emocijas, veidot vēlmi kaut ko iegādāties. Mēs esam profesionāļi šajā jomā, tāpēc darba rezultāts vienmēr ir izcils.
html burtu izkārtojums
- Ideja par produkta/pakalpojuma popularizēšanu un tās realizāciju teksta formātā.
- Pasta vēstules dizains.
- E-pastu izkārtojums.
- Rezultāta pārbaude visās platformās un pasta pakalpojumos.
Burtu maksimālo efektu var sasniegt, ja katra procesa saite skaidri un efektīvi veic uzdevumu. Profesionāls maketētājs un dizaineri parūpēsies par vēstules funkcionalitātes un tehniskās bāzes uzstādīšanu, ņemot vērā izkārtojumu konkrētiem e-pasta klientiem. Vēstule tiks pareizi parādīta visās platformās – to sauc par crossmailer izkārtojumu.
Vienkāršas atpazīstamas veidnes, pareizs platums, informācija par uzņēmumu un abonēšanas anketa - ja tas viss tiek ņemts vērā, jūsu biļetens iedvesīs pārliecību, un klientam pat prātā nenāks noklikšķināt uz pogas “surogātpasts”.
ko tu dabūsi?
- Pielāgotas šķērspasta vēstules
- Precīzs skaists dizains
- Augsts VKS
- Zems abonēšanas skaits, surogātpasta papildinājumi
- Pārdomāts teksts, pasta mērķēšana
- Efektīva segmentācija
- Pareiza burtu parādīšana lielākajā daļā e-pasta klientu
- Pareiza pasta sūtīšanas procesa tehniskā iestatīšana
Svarīga ir ne tikai estētika, bet arī funkcionalitāte. Ja esat gatavs sākt rakstīt vēstules pareizi - aicinām uz bezmaksas konsultāciju.
Atjaunots materiāls 20.06.2018
Burtu izkārtojums atšķiras no ierastā tīmekļa izkārtojuma interpretācijas īpatnību dēļ dažādās tīmekļa saskarnēs un e-pasta klientos.
Apskatīsim piemērus, kā panākt labu burtu attēlojumu visos interneta pakalpojumu sniedzējos un e-pasta klientos.
Kā izskatās vispārīga adaptīva e-pasta veidne:
|
Lai atrisinātu problēmu ar e-pasta automātisko mērogošanu operētājsistēmās iOS 10 un iOS 11, mēs pievienojām:
Autoscale kļūdas piemērs
Nākamais uzlauzums:
webkit-text-size-adjust: nav; -ms-text-size-adjust: nav;
Neļauj iOS ierīcēm mainīt e-pasta saturu lasāmības nodrošināšanai. Tas parasti ir pretrunā ar dizainu un var sabojāt izkārtojumu:
Pārejam uz burta pamattekstu - ķermeņa sadaļu. Tīmekļa saskarnes fona krāsa var būt atšķirīga, tāpēc jums viss ir jāietver tabulā ar vēlamo fona krāsu, pat ja tā ir balta, kā šajā gadījumā:
| … |
Tā kā Outlook 2007-2016 e-pasta klienti, kā arī IE līdzīgie Outlook 2003 un Lotus Mail e-pasta klienti atbalsta ierobežotu stilu rekvizītus, piemēram, maksimālo platumu, nosacījumos komentāros ir jāizveido papildu tabulas struktūra, kas ierobežos. ziņojuma platums šajos e-pasta klientos:
| Bloks1 | bloks2 |
Kods, kas ievietots starp:
tiks ignorēti visi e-pasta klienti, izņemot Outlook 2007-2016 un IE līdzīgus e-pasta klientus.
Un katram no blokiem būs šāda struktūra:
| Bloķēt |
Arī burtos dažkārt ir situācija, kad klucīši tiek sakārtoti šaha rakstā, tomēr, pārbūvējot, vēlams saglabāt loģisko bloku secību un pārbūvēt nevis labo bloku zem kreisā, bet otrādi - kreiso. bloks zem labās puses. To var izdarīt, mainot teksta virzienu, tas izskatīsies šādi:
|
Citi elementi un tehnikas
Neredzams priekšraksts
Gandrīz visās tīmekļa saskarnēs blakus tēmas rindiņai tiek rādīts arī pirmais teksts:
Adresātu sarakstos tā parasti ir tehniska informācija, piemēram, "atrakstīties" un "atvērt pārlūkprogrammā", kas nepārprotami nemotivē abonentu atvērt vēstuli, tomēr, kontrolējot izvades tekstu, jūs varat ievērojami palielināt atvēršanas iespēju vēstule.
Lai to izdarītu, burta html pamatteksta pašā sākumā pievienojiet kodu ar šādu struktūru:
Neredzamas priekšgalvenes izmantošana var negatīvi ietekmēt piegādi, tāpēc uzmanīgi izmantojiet šo paņēmienu un rūpīgi pārraugiet piegādes caur pasta pārzini.
Video e-pastos
Standarta pasta klients Mail atkal sāka atskaņot html5 video, tomēr - tiešā saite uz youtube video, uzlika uz attēla.
Izmantojot šo ieviešanu, video tiks parādīts slānī Mail.ru (apmēram 55%) un Gmail (apmēram 14%) tīmekļa saskarnēs. Tajā pašā laikā lielākajā daļā mobilo ierīču videoklips tiks atvērts Youtube aplikācijā, neatverot pārlūkprogrammu.
Šīs pieejas trūkums ir tāds, ka nav iespējams apkopot klikšķu statistiku, jo saitei uz Youtube ir jābūt tiešai, un klikšķu izsekošana šim sūtījumam būs jāatspējo jūsu ESP.
Testēšana
Vissvarīgākais izkārtojuma posms ir burtu pārbaude. Labākais veids joprojām ir manuāli pārbaudīt vēstules attēlojumu dažādās tīmekļa saskarnēs un e-pasta klientos, tas var palīdzēt nosūtīt "neapstrādātu" burtu izkārtojumu arhīva veidā. Jums jāzina, kuras platformas izmanto jūsu abonenti, kuriem e-pasta pakalpojumu sniedzējiem viņi dod priekšroku, un manuāli jāpārbauda vismaz populārākās platformas.
Lai paātrinātu testēšanas procesu, varat izmantot pakalpojumus Litmus un EmailOnAcid, taču tas neizslēdz nepieciešamību manuāli pārbaudīt katra atsevišķa e-pasta displeju.
Rakstā tika minēti daži pakalpojumi, resursi un rīki, kas neapšaubāmi noderēs burtu maketētājam un ne tikai. Šeit ir īss noderīgo resursu saraksts.
Rīki un pakalpojumi:
E-pasta pogas - pogu ģenerators, izmantojot VML.
- fona attēlu ievietošana e-pastos, izmantojot VML.
Lakmuss - burtu parādīšanas pārbaude.
Email On Acid — alternatīva Lakmusam: e-pasta ziņojumu parādīšanas pārbaude.
Noderīgi materiāli:
Emuārs Litmus ir tirgus līderis e-pasta testēšanā. Interesanti gadījumi un jaunākās ziņas no e-pasta mārketinga un e-pasta izkārtojuma pasaules.
Emuārs Email On Acid - interesanti gadījumi un jaunākās ziņas no e-pasta mārketinga un e-pasta izkārtojuma pasaules.
- pirmais blogs par e-pasta mārketingu, runā par to, kā e-pastus padarīt efektīvus.
Toda emuārs - interesanti gadījumi un noderīgi materiāli par maketēšanu un izstrādi.
- Tulkošana
Ikviens, kurš periodiski lasa pastu tālrunī, zina, ka pieredze var būt gan patīkama, gan šausmīga. Tas, ka e-pasts no adresātu saraksta izskatās lieliski uz darbvirsmas, nenozīmē, ka mobilajā e-pasta klientā viss būs kārtībā — mazā ekrānā bieži ir problēmas ar fontiem, kolonnu attēlošanu un izkārtojuma veidnēm, kas vienkārši pārvietojas. .
Kāpēc jums ir jāpielāgo e-pasti mobilajām ierīcēm
Ievērojama daļa dažādu e-pasta mārketinga kompāniju auditorijas e-pastus apskata mobilajās ierīcēs. 2011. gada Campaign Monitor pētījums atklāja, ka gandrīz 20% e-pasta atvēršanas gadījumu notika viedtālruņos un planšetdatoros, salīdzinot ar tikai 4% 2009. gadā. Gandrīz 90% no šiem atklājumiem tika veikti iOS ierīcēs. Tagad skaitļi ir vēl lielāki.Šajā rokasgrāmatā mēs apskatīsim vairākus veidus, kā uzlabot displeju mobilajās ierīcēs (no multivides vaicājumu izmantošanas adaptīvu veidņu izkārtojumam līdz modernākām metodēm). Papildus aplūkosim dažādas dizaina problēmas, kas rodas pat adresātu saraksta plānošanas stadijā, kā arī runāsim par to, kā viedtālruņos un planšetdatoros izvietot abonēšanas veidlapas e-pastu saņemšanai.
Dizaina tehnikas
Pirms ienirt burtu izkārtojuma pasaulē, parunāsim par šī biznesa vizuālo komponentu. Interesants moments ir tas, ka materiāla analīzes laikā mēs izveidosim divas viena un tā paša vēstules versijas - viena veidne ir izstrādāta tā, lai tā labi izskatītos darbvirsmas e-pasta klientos, bet otrai vajadzētu būt patīkamai lasīšanai ierīcēs ar maziem ekrāniem.Piemēram, lūk, kā šāda vēstule varētu izskatīties programmā Outlook:
Tālāk ir parādīts tas pats e-pasta ziņojums, kas atvērts iPhone lietotnē Mail. Atšķirība starp abiem modeļiem ir skaidri redzama. Mobilā versija ir šaurāka, tajā ir mazāk izvēles vizuālo elementu, taču tā ir tikpat viegli lasāma kā darbvirsmas versija. Izskata atšķirība starp abām mobilajām iespējām ir CSS izmantošana.
Labais burts neatšķiras no kreisā, taču tā izkārtojumā netika izmantots CSS. Dažas teksta sadaļas bija pārāk mazas, un lietotājam ir gandrīz neiespējami saprast, kas tur rakstīts - tā ir miljoniem biļetenu problēma, ko mobilo ierīču īpašnieki saņem katru dienu.
Kas jāņem vērā, veidojot veidnes
Izveidot e-pasta ziņojumus, kas izskatās labi mobilajās ierīcēs, ir daudz grūtāk, nekā tikai izmantojot pielāgotu CSS. Jums vajadzētu pievērst uzmanību arī citām lietām:- Mobilajās ierīcēs vislabāk darbojas vienas kolonnas veidnes, kas nav platākas par 500–600 pikseļiem. Tie ir vieglāk lasāmi, un pat tad, ja tajos ir daži trūkumi, visi “ambļi” tik un tā izskatās labāk.
- Saskaņā ar Apple vadlīnijām, pogu un saišu minimālajam mērķa laukumam jābūt 44 x 44 pikseļiem. Nav nekā "nelietojamāka" par mazu saišu kopumu, ko ir grūti trāpīt mobilās ierīces mazajā ekrānā.
- Minimālais fonts, ko var parādīt iPhone tālrunī, ir 13 pikseļi. Šis fakts ir jāņem vērā, veidojot vēstules tekstu - ja veidnē teksts ir rakstīts mazākā fontā, tad tas tiks automātiski palielināts, kas var izjaukt visu izkārtojumu.
- Vēstulei jābūt kodolīgai, un visa svarīgā informācija jāievieto vēstules augšpusē. Ritināšana skārienekrānos ar pirkstu ir grūtāka nekā darbvirsmā ar peli.
- Ja iespējams, displejs:nevajadzētu izmantot; lai paslēptu izvēles veidnes elementus. Sociālo tīklu koplietošanas pogas ir piemērotas uz darbvirsmas, taču tās ne vienmēr ir ērti lietojamas viedtālrunī.
Tagad, kad esam apskatījuši dažus svarīgus mobilo adresātu sarakstu dizaina apsvērumus, pāriesim pie dažādiem to izkārtojuma aspektiem.
Mobilo burtu salikšana
Runājot par mobilajiem stiliem, visbiežāk mēs domājam nevis atsevišķu stila failu, bet gan multivides vaicājumus. Lūk, kā viņi izskatās:
Paskatīsimies tuvāk, kā notiek @media deklarācija. Pirmkārt, lai izveidotu "mobilo" CSS, ir jāievieš kaut kāds kritērijs, pēc kura pasta klients noteiks, kādus stilus izmantot.
Šim nolūkam tiek izmantots @media only ekrāna paziņojums - tas norāda, ka pasta klients ir jāparāda ekrānā (nevis, piemēram, jādrukā uz printera). Pēc tam augstāk esošajā piemērā mēs iestatījām ierīces maksimālo ekrāna platumu uz 480 pikseļiem. Tas ir svarīgi, jo daudzām (bet ne visām) mobilajām ierīcēm ekrāna displeja laukums ir 480 pikseļi vai mazāk.
Tāpēc bieži tiek izmantots maksimālais ierīces platums: 480 pikseļi (kas ir arī iepriekšējo iPhone displeja platums ainavas režīmā), taču varat paplašināt aprakstu, lai aptvertu citus ekrāna izmērus:
@media ekrāns un (ierīces platums: 480 pikseļi) un (ierīces augstums: 360 pikseļi), ekrāns un (ierīces platums: 360 pikseļi) un (ierīces augstums: 480 pikseļi), ekrāns un (ierīces platums: 320 pikseļi) un (ierīce -augstums: 240 pikseļi) (...)
Atgriezīsimies pie iepriekš apspriestās mobilā e-pasta veidnes. Lūk, kā tas izskatās pakalpojumā Apple Mail:
Šajā piemērā satura tabulas klase tiek lietota HTML tabulām, kurās ir teksts un attēli. Šeit ir koda paraugs:
Šai klasei ir interesanta loma – kad e-pasts tiek atvērts ierīcē, kuras ekrāns ir 480 pikseļi vai plašāks, tas neko neietekmē. Tomēr, ja ekrāns ir 480 vai mazāks, tas sašaurina tabulu platumu līdz 320 pikseļiem. Lai izvairītos no neparastas kļūmes Yahoo pastā, tiek izmantoti atribūtu atlasītāji. Pretējā gadījumā tiek izmantots "parastais" CSS. Varat iekļaut arī šādas reklāmas:
@media tikai ekrāns un (maksimālais ierīces platums: 480 pikseļi) ( /* mobilajām ierīcēm raksturīgie CSS stili ir šeit */ tabula ( platums: 325 pikseļi !svarīgi; ) img ( platums: 325 pikseļi !svarīgi; ) p ( displejs: nav ! svarīgs; ) )
Tālāk mēs apskatīsim progresīvākus paņēmienus mobilo e-pastu pielāgošanai mobilajām ierīcēm.
Adaptīvu veidņu izveide ar kolonnām divi pret vienu
Vienas kolonnas veidņu izmantošana ir labs veids, kā optimizēt e-pastus mobilajām ierīcēm. Tomēr ir veidi, kā izveidot adaptīvas divu kolonnu veidnes, multivides vaicājumos neizmantojot garus CSS.Divu kolonnu veidne ļauj ievietot vairāk satura ziņojuma augšdaļā, kas tiek rādīts galddatora vai tīmekļa e-pasta klientos, taču šādu e-pasta ziņojumu lasīšana un navigācija mobilajās ierīcēs joprojām ir prieks. To var labot ar veco labo kodu.
E-pasta izkārtojuma zelta likums ir šāds: “Ja vien iespējams, izmantojiet HTML, nevis CSS.” Tas, cik lielā mērā dažādi e-pasta klienti atbalsta CSS, var ievērojami atšķirties, taču tie visi darbojas vienādi ar HTML. Piemēram, atribūti, piemēram, align=”left” un cellpadding=”10” ir daudz noturīgāki nekā to CSS līdzinieki float: left; un polsterējums: 10 pikseļi; . Tieši šie atribūti tiks izmantoti, veidojot e-pastus sleju formātā “divas pret vienu”.
Lūk, kā līdzīgs e-pasta ziņojums varētu izskatīties programmā Outlook 2007:
Iepriekš minētajā piemērā tiek izmantota 640 pikseļu plata konteinera tabula, kurā ir divas 320 pikseļu tabulas, kas veido kolonnas. Šīm kolonnām ir cellpadding="20" - tas tiek darīts, lai saturs netiktu nospiests pret apmalēm.
Izkārtojot tīmeklim, parasti tiek izmantots float:left; lai izlīdzinātu kolonnas. Tomēr tā vietā var izmantot align=”left”. Tā kā konteinera tabulas platums ir vienāds ar vai lielāks par abu ligzdoto tabulu kopējo platumu, HTML izmantošana darbojas labi. Tālāk ir sniegts vienkāršots kods šādai divu sleju veidnei:
|
Rezultāts izskatās šādi:
Konteinera tabulas platums ir 640 pikseļi, tāpēc veidnei būs divas kolonnas. Bet, ja ekrāna platums ir mazāks par šo, labās kolonnas saturs tiks “iesaiņots” zem kreisās. Ja ligzdoto tabulu platumu padarīsit vienādu ar 320 pikseļiem, tad, parādot mobilajā ierīcē, jūs saņemsiet vienas slejas burtu, kas nemaz nav “jātuvina”. Šo efektu varat sasniegt, HTML kodam pievienojot vienu multivides vaicājuma rindiņu:
Pirmais virsrakstsslēpt šovu
|
Pellentiskais iedzīvotāju morbi...
Notiek ielāde...