ჩვენ ვიზიარებთ რჩევებს სრულყოფილი შექმნის შესახებ ადაპტური წერა.
დიდ საფოსტო სერვისებს აქვთ ჩაშენებული ბლოკის რედაქტორი. ის აგროვებს მარტივ ადაპტირებულ წერილებს და შედის გამოწერის ფასში. რთული შემოქმედებითი წერილის რედაქტორში ფორმატირება შეუძლებელი იქნება - ეს არის დიზაინერისა და განლაგების დიზაინერის ნამუშევარი. პირველი, მოდით გავარკვიოთ, რომელი ასოა კლასიფიცირებული, როგორც რთული და რომელი კლასიფიცირდება როგორც მარტივი.
შემდეგი მოდის "ჩიპები". ზოგან შეგიძლიათ დააყენოთ ზუსტი ზომა ცალკეული ბლოკებისთვის, მაგრამ ზოგან არა. ერთ რედაქტორში შეგიძლიათ შეაგროვოთ მხოლოდ ერთსვეტიანი ასოები, მეორეში არ არის შეზღუდვები სვეტების რაოდენობაზე. ზოგიერთ რედაქტორში შეგიძლიათ დააკონფიგურიროთ თუ რომელი ბლოკები უნდა იყოს ნაჩვენები დესკტოპის ვერსიაზე და რომელი მხოლოდ მობილურ მოწყობილობებზე.
დიზაინერი და განლაგების დიზაინერი გთავაზობთ ინდივიდუალურ გადაწყვეტილებებს, რედაქტორი - სტანდარტულს. გაითვალისწინეთ, რომ რედაქტორში წერილის შედგენისას თქვენ ნებისმიერ შემთხვევაში შემოიფარგლებით, მაგალითად, შრიფტების ნაკრებით და მათი ზომებით.
დიზაინერი ამას გააკეთებს ისე, როგორც თქვენ გინდოდათ. განლაგების დიზაინერი იფიქრებს იმაზე, თუ როგორ გადააკეთოს ბლოკები მობილურ მოწყობილობებზე - ისევე, როგორც თქვენ დაგეგმეთ. ბლოკის რედაქტორში მუშაობისას თქვენ ეყრდნობით დეველოპერების მიერ შემოთავაზებულ გადაწყვეტილებებს.
რედაქტორი ადაპტირებს წერილს საკუთარი ალგორითმის მიხედვით, ალგორითმის შეცვლა შეუძლებელია.
თუ თქვენ შეიმუშავეთ სტრუქტურა, დაწერეთ ტექსტი და შეარჩიეთ სურათები, მაშინ წერილის შექმნას ოცდაათი წუთიდან ორ საათამდე დასჭირდება. შეგახსენებთ, რომ თქვენ არ იხდით განლაგებისთვის, რედაქტორთან მუშაობა შედის ანგარიშის ღირებულებაში.
დიზაინერის და თავისუფალი განლაგების დიზაინერის გუნდი ორ-სამ დღეში გააკეთებს წერილს, ის ეღირება 5000-დან 15000 რუბლამდე. სააგენტოდან თუ შეუკვეთავ რამდენჯერმე ძვირი ღირს. გახსოვთ ისტორია შესავალიდან? სერგეისთვის არჩევანი აშკარაა: ის თავად შეაგროვებს წერილს, მის სიტუაციაში ეს უფრო იაფი და სწრაფია.
უმჯობესია შეადგინოთ მარტივი ადაპტაციური ასო ჩაშენებულ რედაქტორში. თუ გსურთ არასტანდარტული გადაწყვეტილებები, გამოაქვეყნეთ ისინი.
როგორ შევადგინოთ ასო ჩაშენებულ რედაქტორში
ვინც წერილს აწყობს რედაქტორში, არ სჭირდება კოდის ცოდნა. ერთადერთი, რაც გჭირდებათ, არის დაფიქრდეთ წერილის სტრუქტურაში, შეარჩიოთ სურათები და დაწეროთ ტექსტი. არ არის „სახელმძღვანელო“ განლაგება - თქვენ შეკრებთ ასოს ბლოკებიდან, ისევე როგორც სადესანტო გვერდის შემქმნელში.
ნაბიჯი 1. წერილის მონახაზი ან პროტოტიპი
დაიწყეთ მონახაზით, დახაზეთ ქაღალდზე მომავალი ასოს მონახაზი: სად იქნება სათაური, სად არის სურათი, სად არის ღილაკი და ა.შ. თუ დრო გაქვთ, აკრიფეთ სრულფასოვანი პროტოტიპი Balsamiq-ში ან NinjaMock-ში. რეჟისორისთვის ასეთი პროტოტიპის ჩვენება და დიზაინერისთვის გადაცემა არ არის სირცხვილი.
ნაბიჯი 2. წერილის განლაგება რედაქტორში
- დაამატეთ სვეტების საჭირო რაოდენობა მზა დიაგრამის ან პროტოტიპის საფუძველზე
- Გადმოათრიე და ჩააგდე საჭირო ელემენტებიწერილის სხეულში
როგორც წესი, ჩაშენებული რედაქტორები იყენებენ Drag-and-drop პრინციპს. თუ თქვენში ასე არ არის, გადახედეთ სტატიებს ცოდნის ბაზიდან - იქ აღწერილია რედაქტორში მუშაობის პრინციპები.
- ელემენტების შინაარსის მორგება: შეწევა, ინტერვალი, გასწორება და სტილი
აქ შეიყვანთ საჭირო ტექსტს, დაამატეთ ფოტო ან ილუსტრაცია, ბმულით ან მის გარეშე. არ დაგავიწყდეთ, რომ შეგიძლიათ დაამატოთ ანიმაციური სურათი; რედაქტორების უმეტესობა მხარს უჭერს GIF ფორმატს.
უბრალოდ ნუ გადააჭარბებთ ფაილის ზომას. ელ.ფოსტის კლიენტებს არ მოსწონთ „მძიმე“ ასოები და შეუძლიათ დამალონ მათი შინაარსი ღილაკზე „სრული ჩვენება“ - ასე აკეთებს, მაგალითად, Gmail. შეარჩიეთ ფაილები ისე, რომ დასრულებული ასო იწონის არაუმეტეს 600 KB, ეს არის ოპტიმალური ზომა.
არ დაგავიწყდეთ ღილაკების მორგება და ნავიგაციის ბმულების დამატება.
ნაბიჯი 3. რეაგირების შემოწმება ჩაშენებულ რედაქტორში
როდესაც ელფოსტა მზად იქნება, შეამოწმეთ როგორ გამოჩნდება სხვადასხვა მოწყობილობაზე.
90% შემთხვევაში ყველაფერი კარგად იქნება, ბლოკები ავტომატურად „აღდგება“. თუ განლაგება ჯერ კიდევ "ფრინავს" ან შედეგი არ შეესაბამება თქვენ, შეამოწმეთ ჩაღრმავების მნიშვნელობები ბლოკებში, ისინი უნდა იყოს იგივე. თუ ერთი ბლოკი უკან იხევს 10 ქულით, ხოლო მეორე 30 ქულით მობილური ვერსიამათ შეიძლება არასწორად შეცვალონ ხაზი. თუ ორივე ბლოკი 10 ქულით უკან დაიხევს, ალბათ კარგად იქნებით.
ნაბიჯი 4. შეამოწმეთ ადაპტირება მესამე მხარის სერვისებზე
შეამოწმეთ შედეგი Litmus-ის ან Email on Acid-ის საშუალებით. ეს სერვისები აჩვენებს, თუ როგორ გამოჩნდება წერილი სხვადასხვა მოწყობილობებზე, სხვადასხვა ბრაუზერში და ელ.ფოსტის სხვადასხვა კლიენტში.
ზოგიერთ რედაქტორში ლაკმუსის მეშვეობით შემოწმება ნაგულისხმევად ინტეგრირებულია. თუ თქვენს რედაქტორს არ აქვს ეს შესაძლებლობა, გაგზავნეთ წერილის სატესტო ასლი სპეციალურ ელფოსტაზე, რომელიც გადაეცემა Litmus-ში რეგისტრაციის შემდეგ.
მომსახურება ფასიანია, თვიური გამოწერა ლატმუსში იწყება 79 დოლარიდან, Email on Acid-ში - 45 დოლარიდან. თუ თვეში ერთხელ აგზავნით ერთ ელ.წერილს, ცოტა ძვირი დაჯდება. IN ბოლო საშუალებასცადეთ Browser Shots, ის ძველი და მოუხერხებელია, მაგრამ უფასოა. გახსოვდეთ, რომ ასეთი სერვისები არ იძლევა 100%-იან გარანტიას. მაშინაც კი, თუ ყველაფერი კარგადაა ლაკმუსში, ეს არ არის იმის მიზეზი, რომ დაუყონებლივ გამოვაქვეყნოთ ბიულეტენი. გაგზავნეთ წერილი თქვენს პირად მეილზე და გახსენით იქ.
აირჩიეთ რედაქტორი, რომელიც გაჩვენებთ, როგორ გამოიყურება თქვენი ელფოსტა სხვადასხვა მოწყობილობაზე. იდეალურ შემთხვევაში, რედაქტორი ინტეგრირებულია Litmus სერვისთან. თუ ინტეგრაცია არ არის, შეამოწმეთ ადაპტირება ხელით პირადი ელ.ფოსტის საშუალებით.
როგორ შევაფასოთ სამუშაოს შედეგი - თქვენი თუ განლაგების დიზაინერის
თუ თქვენ თავად აგროვებთ წერილს, შეამოწმეთ რედაქტორის ადაპტირება და გადახედეთ წერილს თქვენი პირადი ელფოსტიდან - ეს საკმარისია. თუ გსურთ ერთდროულად შეამოწმოთ რეაგირება ბევრ მოწყობილობაზე, ბრაუზერსა და ელ.ფოსტის კლიენტზე, მაშინ იყიდეთ ანგარიში Litmus-ით ან Email on Acid-ით და იხილეთ შედეგები იქ.
მათთვის, ვინც აუთსორსს გაუწია მათი განლაგება, არ არის საჭირო ანგარიშის ყიდვა; სთხოვეთ განლაგების დიზაინერს სკრინშოტები Litmus-იდან. თუ პროფესიონალია, ამოწმებს წერილებს მსგავს სერვისებზე, სკრინშოტის გაგზავნა მისთვის პრობლემა არ არის, შემოწმებისას ყურადღებით დააკვირდით ელფოსტის კლიენტებს, ძირითადად აქ ჩნდება შეცდომები. დარწმუნდით, რომ შეამოწმეთ, როგორ იხსნება წერილი Outlook-ში, Gmail-ში, Yandex-სა და Mail.ru-ში - ეს არის ყველაზე პოპულარული ელექტრონული ფოსტის კლიენტები რუსეთში.
არ უნდა დაკარგოთ დრო განლაგების კორექტირებისთვის, თუ ის სწორად არ არის ნაჩვენები მესამე iPhone-ზე, Internet Explorer-ის მეშვიდე ვერსიაში ან The Bat ელფოსტის კლიენტში. დიახ, ყოველთვის იქნებიან ისეთები, ვინც მესამე აიფონს იყენებს, მაგრამ ისინი უმცირესობას წარმოადგენენ. ღირს თუ არა განლაგების გადაკეთება მთლიანი ბაზის 1-2% -ისთვის? ეს დამოკიდებულია ბაზის რაოდენობასა და "ხარისხზე".
ვიმედოვნებთ, რომ ის სეგმენტირებული გაქვთ და ყველაფერი იცით თქვენი აბონენტების შესახებ. თუ 1-2% არის 10000 ადამიანი, მაშინ ღირს უბედურება. თუ თქვენ მუშაობთ b2b-ში და ეს 1-2% არის კომპანიის მენეჯერები, ბიზნესის მფლობელები და სხვა VIP კლიენტები, მოგიწევთ მათზე ასოების ადაპტაცია.
დარწმუნდით, რომ წერილი ადეკვატურად არის ნაჩვენები Outlook, Gmail, Yandex და Mail.ru - ეს საკმარისია.
მარკეტერის მემორანდუმი
- გადაწყვიტეთ წერილის ფორმატი, როგორი იქნება ის: სტანდარტული და მარტივი თუ რთული და კრეატიული. მიეცით ასოები რთული სტრუქტურით დიზაინერსა და განლაგების დიზაინერს. შეაგროვეთ მარტივი ასოები საფოსტო სამსახურის რედაქტორში; ისინი ადაპტირებულია ნაგულისხმევად.
- შეამოწმეთ შედეგი ჩაშენებულ რედაქტორში და, თუ თქვენი ბიუჯეტი საშუალებას იძლევა, მესამე მხარის სერვისებზე. განლაგების დიზაინერისგან წერილის მიღებისას, მოითხოვეთ ეკრანის ანაბეჭდები, რომლებიც დაადასტურებენ, რომ ასო სწორად არის ნაჩვენები - მინიმუმ, ელ.ფოსტის პოპულარულ კლიენტებსა და პოპულარულ ბრაუზერებში.
- დარწმუნდით, რომ ნახოთ წერილი თქვენი პირადი ელ.ფოსტის საშუალებით, ყოველ შემთხვევაში ელ.ფოსტის მთავარ კლიენტებში და iOS-სა და Android-ზე არსებული სმარტფონების მოდელებიდან.
პლუს
ვებ საბჭოს ბლოგის ერთ-ერთმა მკითხველმა მთხოვა მესაუბრა განაწილებისთვის ასოების განლაგების შესახებ. მე თვითონ პრაქტიკულად არ ვაკეთებ ამას. მახსოვს, რომ ოდესღაც ბევრს ვუვლიდი Subscribe.ru-ს შაბლონებს და მახსოვს, რომ ეს საშინელი ამოცანა იყო. პრობლემა ის არის, რომ ელ.ფოსტის სერვისები კარგად არ მუშაობს ბლოკის განლაგებით. და ეს კიდევ უფრო უარესია css სტილებთან დაკავშირებით. ამდენი წელი გავიდა, მაგრამ ყველაფერი ჯერ კიდევ არსებობს. დღესდღეობით, წერილების აბსოლუტური უმრავლესობა ისევ ძველმოდურად არის გაწერილი - ცხრილების გამოყენებით. და ეს არის 2016 წელს, როდესაც html5, css3 და სხვა თანამედროვე სიკეთეები დიდი ხანია მართავენ საიტებს.
პრინციპში, ასოების განლაგების შესახებ ყოვლისმომცველი სტატიები უკვე ხელმისაწვდომია Habré-ზე, აქ და აქ. ასევე გირჩევთ წაიკითხოთ ადგილობრივი მცხოვრები, სახელად არტურ კოხი, რომელმაც დაწერა უამრავი სასარგებლო სტატია ასოების განლაგების შესახებ. მაგალითები: ბმული 1, ბმული 2.
მაგრამ იმისათვის, რომ პოსტი ცარიელი არ აღმოჩნდეს, მე მაინც მოკლედ გამოვყოფ წერილების განლაგების მთავარ პუნქტებს ელექტრონული ფოსტისთვის.
პირველ რიგში, თქვენ უნდა დაივიწყოთ ბლოკის განლაგება და ცალკე ფაილისტილები. ყველაფერი ასახულია ცხრილების გამოყენებით, ხოლო სტილები იწერება პირდაპირ საიტზე, ან სხვაგვარად - Inline. ეს დაახლოებით ასე გამოიყურება:
მეორეც, თქვენ ყოველთვის უნდა აიძულოთ შეწევის, მინდვრების და საზღვრების ნულოვანი მნიშვნელობები, რადგან თითოეული ელ.ფოსტის კლიენტი ცდილობს მათ განსხვავებულად აჩვენოს:
მესამე, თქვენ არ გჭირდებათ შეწუხება დოქტიპის, თავისა და სხეულის ტეგებით. დოქტიპის გარეშე, თქვენი ელ.წერილი ყველგან ერთნაირი იქნება, თავი და სხეული პრაქტიკულად უსარგებლოა, რადგან... კვლავ ამოიჭრება საფოსტო სერვისების უმეტესობის მიერ (მტკიცებულება).
მეოთხე, თუ თქვენს ასოებში იყენებთ სურათებს, აუცილებლად მიუთითეთ მათი ზომები.
ადაპტირებული ელფოსტის განლაგება
ძალიან ხშირად, მეილერი ბლოკავს სურათებს ასოებით და თუ არ დააყენებთ მათ ზომებს, წერილი მოუხერხებლად გამოიყურება. ასევე, აუცილებლად დაამატეთ style=»display:block;. ეს აღმოფხვრის გაურკვეველ ჩაღრმავებთან დაკავშირებულ პრობლემებს (მაგალითად, gmail-ში):
და არავითარ შემთხვევაში არ გამოიყენოთ ერთი პიქსელიანი გამოსახულებები ცხრილის უჯრედებისთვის შუალედებად! თქვენი წერილი გარანტირებული იქნება სპამში. თუ თქვენ გჭირდებათ სპაისერი, მაშინ უნდა გამოიყენოთ სურათი მინიმუმ 20x20 პიქსელის ზომებით, რომელიც იძულებულია დაყენდეს 1x1 პიქსელზე სტილში.
მეხუთე, შესაძლებელია ასოების ადაპტური განლაგება. ის ისევე მოუხერხებლად გამოიყურება, როგორც ზოგადად მაგიდებთან მუშაობა, მაგრამ თევზის გარეშე... გესმით. მოკლედ, იმისათვის, რომ თქვენს წერილს ჰქონდეს გარკვეული ადაპტაციის მსგავსება, მისი შინაარსის ნაწილი უნდა იყოს ჩასმული ცენტრალური ტეგით შესაბამისი სტილით:
და ბოლოს, რამდენიმე სასარგებლო ბმული. აქ შეგიძლიათ ნახოთ რომელი ტეგები მხარდაჭერილია სხვადასხვა ელ.ფოსტის სერვისებით. და აქ ნახავთ კიდევ რამდენიმე სასარგებლო ნივთს - "HTML ელ.ფოსტის განლაგების მახასიათებლები."
თუ ეს სტატია თქვენთვის სასარგებლო აღმოჩნდა, გთხოვთ შეაფასოთ და გააზიაროთ სოციალურ ქსელებში:
(2 ხმები, საშუალო:
დაკავშირებული პოსტები:
ადაპტაციური ასოების განლაგება: მემორანდუმი მარკეტერისთვის
ელ.ფოსტის უმეტესობა სწორად არ არის ნაჩვენები მობილურ მოწყობილობებზე. სურათები განსხვავდება და ტექსტი უნდა იყოს გადახვევა და მასშტაბირება.იმისთვის, რომ ასოები კარგად გამოიყურებოდეს სხვადასხვა პლატფორმაზე, საჭიროა გამოიყენოთ ადაპტური განლაგება.
ეს კურსი განკუთვნილია HTML კოდირებისთვის, დეველოპერებისთვის და ელექტრონული ფოსტის მარკეტოლოგებისთვის, რომლებსაც აქვთ HTML და CSS საბაზისო ცოდნა. თქვენ გაიგებთ რა არის მობილური და რეზინის განლაგება, ბლოკის და ფლანგური ადაპტაცია. ისწავლეთ როგორ მოამზადოთ სურათები ასოებისთვის და გადახედეთ განლაგების ძირითად ინსტრუმენტებს.
კურსის დასრულების შემდეგ, თქვენ შეძლებთ შექმნათ ელ.წერილები, რომლებიც ერთნაირად კარგად გამოჩნდება კომპიუტერებსა და მობილურ მოწყობილობებზე.
2. ადაპტური განლაგების მახასიათებლები
3. ელ.ფოსტის ადაპტაციის მიდგომები
4. ძირითადი საპასუხო ელ.ფოსტის შაბლონი
5. მობილური ადაპტაციის ტექნიკა
6. HTML განლაგების ხელსაწყოები
7. კურსის შეჯამება
8. წერილების ადაპტური განლაგება ელექტრონული ფოსტის მარკეტინგის დროს: საბოლოო ტესტი
ელ.ფოსტის საინფორმაციო ბიულეტენების კრეატიული განლაგების გაუთავებელი შესაძლებლობები, გრაფიკული ელემენტების გამოყენება და საინტერესო შინაარსი იპყრობს კლიენტის ყურადღებას. ასეთი წერილები არ იგზავნება სპამში.
განაწილებისთვის წერილის შექმნა
ელექტრონული ფოსტის მარკეტინგის სისტემის წარმატებით გამოსაყენებლად, ფოსტის გაგზავნისა და შეთავაზების წერილის მარტივი ლოგიკა საკმარისი არ არის.
30 უფასო საპასუხო ელ.ფოსტის შაბლონი
ყურადღების მოსაზიდად ინფორმაცია უნდა იყოს წარმოდგენილი ლამაზ „შეფუთვაში“, საჭირო ბმულებითა და მიმზიდველი სურათებით. ასოს პირველი შთაბეჭდილება არის გარე გარსი, შინაარსი მეორეხარისხოვანია.
მომხმარებლები ყოველდღიურად იღებენ ასამდე წერილს, თქვენ უნდა მიიპყროთ აუდიტორიის ყურადღება შიგნით "ნათელი" და ამაღელვებელი სათაურით და წინადადებით. განაწილებისთვის ელ.ფოსტის დიზაინისა და განლაგების წარმატებით განსახორციელებლად, თქვენ უნდა იფიქროთ პროექტის განხორციელების სტრატეგიაზე:
- დაფიქრდით იდეაზე და კომპეტენტურად დაარეგისტრირეთ ასოების სერია;
- მონიშნეთ მთავარი, მოიპოვეთ კლიენტის ნდობა საინტერესო პროდუქტის მიწოდებით;
- წერილებმა უნდა წაახალისოს მოქმედება, მოტივაცია გაუწიოს პროდუქტის შეძენისას;
- მიმზიდველი დიზაინი, პროფესიონალები გააკეთებენ წერილების html განლაგებას ფოსტისთვის.
სპეციალისტები იზრუნებენ ელ.ფოსტის ასოების ადაპტირებულ განლაგებაზე, რათა დიზაინი მშვენივრად გამოიყურებოდეს ნებისმიერ მოწყობილობაზე. თუ თქვენს ონლაინ მაღაზიას არ აქვს კორპორატიული იდენტურობა, მაშინ ჩვენ შევქმნით ზოგადი ბრენდირებული ასოების განლაგებას, რომელიც იქნება საინფორმაციო ბიულეტენის საფუძველი. მარკეტინგი არის ადამიანში ემოციების გამოწვევის და რაიმეს შეძენის სურვილის გაჩენის უნარი. ჩვენ პროფესიონალები ვართ ამ სფეროში, ამიტომ ჩვენი მუშაობის შედეგები ყოველთვის შესანიშნავია.
html ასოების განლაგება
- პროდუქტის/მომსახურების პოპულარიზაციის იდეა და მისი განხორციელება ტექსტურ ფორმატში.
- წერილის დიზაინი ფოსტისთვის.
- ელფოსტის განლაგება.
- შედეგის ტესტირება ყველა პლატფორმაზე და ელ.ფოსტის სერვისზე.
ასოების მაქსიმალური ეფექტის მიღწევა შესაძლებელია, თუ პროცესის თითოეული ბმული მკაფიოდ და ეფექტურად ასრულებს დავალებას. განლაგების პროფესიონალი დიზაინერები და დიზაინერები იზრუნებენ წერილის ფუნქციონალურობისა და ტექნიკური საფუძვლის დაყენებაზე, კონკრეტული ელ.ფოსტის კლიენტებისთვის განლაგების გათვალისწინებით. ასო სწორად იქნება ნაჩვენები ყველა პლატფორმაზე - ამას ეწოდება cross-mailer layout.
მარტივი ცნობადი შაბლონები, სწორი სიგანე, ინფორმაცია კომპანიის შესახებ და გამოწერის გაუქმების ფორმა - თუ ამ ყველაფერს გაითვალისწინებთ, თქვენი საინფორმაციო ბიულეტენი ნდობას შთააგონებს და კლიენტს არ მოუვა ღილაკზე „სპამის“ დაწკაპუნება.
რას მიიღებთ?
- Crossmailer წერილები შექმნილია ყველა წესის მიხედვით
- ზუსტი ლამაზი დიზაინი
- მაღალი CTR
- გამოწერის გაუქმებისა და სპამში დამატების დაბალი მაჩვენებელი
- გააზრებული ტექსტი, ფოსტის დამიზნება
- ეფექტური სეგმენტაცია
- წერილების სწორი ჩვენება ელ.ფოსტის კლიენტების უმეტესობაში
- საფოსტო პროცესის სწორი ტექნიკური დაყენება
მნიშვნელოვანია არა მხოლოდ ესთეტიკა - მნიშვნელოვანია ფუნქციონალობა. თუ მზად ხართ დაიწყოთ ასოების სწორად წერა - გეპატიჟებით უფასო კონსულტაციაზე.
განახლებული მასალა 20.06.2018
ასოების განლაგება განსხვავდება ჩვეულებრივი ვებ განლაგებისგან, ინტერპრეტაციის თავისებურებების გამო სხვადასხვა ვებ ინტერფეისებში და ელ.ფოსტის კლიენტებში.
მოდით შევხედოთ მაგალითებს, თუ როგორ მივაღწიოთ ელ.ფოსტის კარგ ჩვენებას პროვაიდერებსა და ელ.ფოსტის კლიენტებში.
როგორ გამოიყურება ზოგადი საპასუხო ელ.ფოსტის შაბლონი:
|
iOS 10-სა და iOS 11-ში ელ.ფოსტის ავტომატური სკალირების პრობლემის გადასაჭრელად, ჩვენ დავამატეთ:
ავტომატური მასშტაბის შეცდომის მაგალითი
შემდეგი ჰაკი:
Webkit-text-size-adjust:none; -ms-text-size-adjust: none;
ხელს უშლის iOS მოწყობილობებს ელ.ფოსტის შინაარსის შეცვლაში, რათა გაუადვილოს წაკითხვა. ეს ჩვეულებრივ ეწინააღმდეგება დიზაინს და შეიძლება დაარღვიოს განლაგება:
გადავიდეთ ასოს სხეულზე - სხეულის განყოფილებაზე. ვებ ინტერფეისის ფონის ფერი შეიძლება იყოს განსხვავებული, ასე რომ თქვენ უნდა გადაიტანოთ ყველაფერი მაგიდაზე სასურველი ფონის ფერით, თუნდაც ის თეთრი იყოს, როგორც ამ შემთხვევაში:
| … |
სტილის თვისებების შეზღუდული მხარდაჭერის გამო, როგორიცაა Max-width Outlook 2007–2016 ელ.ფოსტის კლიენტების, ასევე IE-ის მსგავსი Outlook 2003 და Lotus Mail ელფოსტის კლიენტების გამო, აუცილებელია ცხრილის დამხმარე სტრუქტურის აგება პირობით კომენტარებში, რომელიც შეზღუდავს შეტყობინების სიგანე ამ ელფოსტის კლიენტებში:
| ბლოკი 1 | ბლოკი 2 |
კოდი შორის:
იგნორირებული იქნება ყველა ელფოსტის კლიენტის მიერ, გარდა Outlook 2007–2016 და IE მსგავსი ელფოსტის კლიენტებისა.
და თითოეულ ბლოკს ექნება შემდეგი სტრუქტურა:
| ბლოკირება |
ასევე, ხანდახან ასოებით არის სიტუაცია, როდესაც ბლოკები განლაგებულია საჭადრაკო დაფაზე, თუმცა, ხელახლა აშენებისას, სასურველია შევინარჩუნოთ ბლოკების ლოგიკური თანმიმდევრობა და აღვადგინოთ არა მარჯვენა ბლოკი მარცხნივ, არამედ პირიქით - მარცხენა ბლოკი მარჯვენა ქვეშ. ეს შეიძლება გაკეთდეს ტექსტის მიმართულების შეცვლით, ის ასე გამოიყურება:
|
სხვა ელემენტები და ტექნიკა
უხილავი წინამორბედი
თითქმის ყველა ვებ ინტერფეისი ასევე აჩვენებს პირველ ტექსტს წერილის თემის გვერდით:
ფოსტით, ეს არის, როგორც წესი, ტექნიკური ინფორმაცია, როგორიცაა „გააუქმება“ და „გახსნა ბრაუზერში“, რაც აშკარად არ უბიძგებს აბონენტს წერილის გახსნას, თუმცა, ნაჩვენები ტექსტის კონტროლით, შეგიძლიათ მნიშვნელოვნად გაზარდოთ გახსნის შანსი. წერილი.
ამისათვის დაამატეთ კოდი შემდეგი სტრუქტურით ასოს html სხეულის დასაწყისში:
უხილავი პრეჰადერის გამოყენებამ შეიძლება უარყოფითად იმოქმედოს მიწოდებაზე, ამიტომ გამოიყენეთ ეს ტექნიკა ფრთხილად და ყურადღებით აკონტროლეთ მიწოდება ფოსტის მესაზღვრეების მეშვეობით.
ვიდეოები ასოებით
სტანდარტული Mail-ის ელფოსტის კლიენტმა კიდევ ერთხელ დაიწყო html5 ვიდეოების დაკვრა, თუმცა სურათზე განთავსებული YouTube ვიდეოს პირდაპირი ბმულია.
ამ განხორციელებით, ვიდეო გამოჩნდება ფენაზე Mail.ru-ს (დაახლოებით 55%) და Gmail-ის (დაახლოებით 14%) ვებ ინტერფეისებში. ამ შემთხვევაში, უმეტეს მობილურ მოწყობილობებზე ვიდეო გაიხსნება Youtube აპლიკაციაში, ბრაუზერის გახსნის გარეშე.
ამ მიდგომის მინუსი არის დაწკაპუნების სტატისტიკის შეგროვების შეუძლებლობა, რადგან Youtube-ის ბმული პირდაპირი უნდა იყოს და ამ საფოსტო გაგზავნისთვის დაწკაპუნების თვალყურის დევნება უნდა გამორთული იყოს თქვენს ESP-ში.
ტესტირება
განლაგების ყველაზე მნიშვნელოვანი ეტაპი არის ასოების ტესტირება. საუკეთესო გზა მაინც არის წერილის ჩვენების ხელით შემოწმება სხვადასხვა ვებ ინტერფეისებში და ელ.ფოსტის კლიენტებში; ეს დაგეხმარებათ გაგზავნოთ ასოების „დაუმუშავებელი“ განლაგება არქივის სახით. თქვენ უნდა იცოდეთ, რომელ პლატფორმებს იყენებენ თქვენი აბონენტები, ელ.ფოსტის რომელ პროვაიდერებს ანიჭებენ უპირატესობას და ჩაატარეთ ხელით შემოწმება მაინც ყველაზე პოპულარული.
ტესტირების პროცესის დასაჩქარებლად, შეგიძლიათ გამოიყენოთ Litmus და EmailOnAcid სერვისები, მაგრამ ეს არ გამორიცხავს თითოეული ინდივიდუალური ასოს ჩვენების ხელით შემოწმებას.
სტატიაში ნახსენები იყო რამდენიმე სერვისი, რესურსი და ხელსაწყო, რომლებიც უდავოდ გამოადგებათ ასოების განლაგების დიზაინერებს და სხვებს. აქ არის სასარგებლო რესურსების მოკლე სია.
ინსტრუმენტები და მომსახურება:
ელ.ფოსტის ღილაკები - ღილაკების გენერატორი VML გამოყენებით.
- ფონის სურათების ასოებში ჩასმა VML გამოყენებით.
ლაკმუსი - ასოების ჩვენების ტესტირება.
Email On Acid - ლაკმუსის ალტერნატივა: ელ.ფოსტის ჩვენების ტესტირება.
სასარგებლო მასალები:
Litmus ბლოგი არის ბაზრის ლიდერი ელექტრონული ფოსტის ტესტირებაში. საინტერესო შემთხვევები და უახლესი ამბები ელ.ფოსტის მარკეტინგისა და ელექტრონული ფოსტის განლაგების სამყაროდან.
ბლოგი Email On Acid - საინტერესო შემთხვევები და უახლესი ამბები ელექტრონული ფოსტის მარკეტინგისა და ელექტრონული ფოსტის განლაგების სამყაროდან.
- პირველი ბლოგი ელექტრონული ფოსტის მარკეტინგის შესახებ, საუბრობს იმაზე, თუ როგორ გავხადოთ ელ.წერილი ეფექტური.
ტოდის ბლოგი - საინტერესო შემთხვევები და სასარგებლო მასალები განლაგებისა და განვითარების შესახებ.
- თარგმანი
ყველამ, ვინც პერიოდულად კითხულობს ელ.წერილს თავის ტელეფონზე, იცის, რომ გამოცდილება შეიძლება მერყეობდეს სრულიად სასიამოვნოდან სრულიად საშინელებამდე. ის ფაქტი, რომ ბიულეტენიდან ელ.წერილი მშვენივრად გამოიყურება სამუშაო მაგიდაზე, არ ნიშნავს იმას, რომ ყველაფერი კარგად იქნება მობილური ელ.ფოსტის კლიენტში - პატარა ეკრანზე ხშირად არის პრობლემები შრიფტებთან, სვეტების ჩვენებასთან და შაბლონების განლაგება უბრალოდ იშლება.
რატომ გჭირდებათ ელ.ფოსტის ადაპტაცია მობილური მოწყობილობებისთვის?
სხვადასხვა ელექტრონული ფოსტის მარკეტინგის კომპანიების აუდიტორიის მნიშვნელოვანი ნაწილი ათვალიერებს წერილებს მობილურ მოწყობილობებზე. 2011 Campaign Monitor-ის კვლევამ აჩვენა, რომ ელ.ფოსტის გახსნის თითქმის 20% ხდებოდა სმარტფონებსა და პლანშეტებზე, 2009 წელს მხოლოდ 4%-დან. ამ აღმოჩენების თითქმის 90% განხორციელდა iOS მოწყობილობებზე. ახლა ციფრები კიდევ უფრო მაღალია.ამ სახელმძღვანელოში ჩვენ განვიხილავთ მობილურ მოწყობილობებზე ჩვენების გაუმჯობესების რამდენიმე გზას (დაწყებული მედია მოთხოვნების გამოყენებით საპასუხო შაბლონების განლაგებისას და დამთავრებული უფრო მოწინავე ტექნიკით). გარდა ამისა, ჩვენ განვიხილავთ დიზაინის სხვადასხვა საკითხს, რომელიც წარმოიქმნება საინფორმაციო ბიულეტენის დაგეგმვის ეტაპზე, ასევე ვისაუბრებთ იმაზე, თუ როგორ უნდა განვათავსოთ სააბონენტო ფორმები წერილების მისაღებად სმარტფონებსა და ტაბლეტებზე.
დიზაინის ტექნიკა
სანამ ასოების განლაგების სამყაროში ჩავუღრმავდებით, მოდით ვისაუბროთ ამ ბიზნესის ვიზუალურ კომპონენტზე. საინტერესო საკითხია, რომ მასალის ანალიზის დროს ჩვენ შევქმნით ერთი და იმავე წერილის ორ ვერსიას - ერთი შაბლონი შექმნილია ისე, რომ კარგად გამოიყურებოდეს დესკტოპის ელ.ფოსტის კლიენტებზე, ხოლო მეორე სასიამოვნო უნდა იყოს წასაკითხად მოწყობილობებზე პატარა ეკრანებით.აი, მაგალითად, როგორ შეიძლება გამოიყურებოდეს ასეთი წერილი Outlook-ში:
ქვემოთ მოცემულია იგივე ელფოსტა, გახსნილი ფოსტის აპლიკაციაში iPhone-ისთვის. განსხვავება ორ შაბლონს შორის აშკარად ჩანს. მობილური ვერსია უფრო ვიწროა და აქვს ნაკლები სურვილისამებრ ვიზუალური ელემენტები, მაგრამ ისეთივე ადვილად იკითხება, როგორც დესკტოპის ვერსია. განსხვავება ორი მობილური ვარიანტის გარეგნობაში არის CSS-ის გამოყენება.
მარჯვენა ასო არაფრით განსხვავდება მარცხენა ასოსგან, მაგრამ CSS არ იყო გამოყენებული მის განლაგებაში. ტექსტის ზოგიერთი მონაკვეთი ძალიან მცირე აღმოჩნდა და მომხმარებლისთვის თითქმის შეუძლებელია იმის გარკვევა, თუ რა წერია იქ - ეს არის პრობლემა მილიონობით საინფორმაციო წერილში, რომლებსაც მობილური მოწყობილობების მფლობელები ყოველდღიურად იღებენ.
რა უნდა გაითვალისწინოთ შაბლონების შექმნისას
ელ.ფოსტის შექმნა, რომელიც კარგად გამოიყურება მობილურ მოწყობილობებზე, ბევრად უფრო რთულია, ვიდრე უბრალოდ მორგებული CSS-ის გამოყენება. სხვა რამ, რასაც ყურადღება უნდა მიაქციოთ:- ერთსვეტიანი შაბლონები, რომლებიც არ აღემატება 500-600 პიქსელს, უკეთ მუშაობს მობილურ მოწყობილობებზე. ისინი უფრო ადვილად იკითხება და გარკვეული ხარვეზებიც რომ აქვთ, ყველა "ჯამბი" ნებისმიერ შემთხვევაში უკეთ გამოიყურება.
- Apple-ის მითითებების თანახმად, ღილაკებისა და ბმულების მინიმალური სადესანტო არე უნდა იყოს 44 x 44 პიქსელი. არაფერია უფრო „გამოუსადეგარი“, ვიდრე მცირე ზომის ბმულები, რომლებზეც ძნელია ნავიგაცია პატარა მობილური მოწყობილობის ეკრანზე.
- iPhone-ზე ნაჩვენები მინიმალური შრიფტი არის 13 პიქსელი. წერილის ტექსტის შექმნისას აუცილებელია ამ ფაქტის გათვალისწინება - თუ თარგში ტექსტი უფრო მცირე შრიფტით არის აკრეფილი, ის ავტომატურად გადიდდება, რამაც შეიძლება დაარღვიოს მთელი განლაგება.
- წერილი უნდა იყოს ლაკონური და ყველა მნიშვნელოვანი ინფორმაცია უნდა იყოს განთავსებული ზედა. სენსორულ ეკრანებზე თითით გადახვევა უფრო რთულია, ვიდრე დესკტოპზე მაუსით.
- თუ შესაძლებელია, უნდა გამოიყენოთ display:none; თვისება. შაბლონის არჩევითი ელემენტების დასამალად. სოციალური ქსელის გაზიარების ღილაკები შესაფერისია სამუშაო მაგიდაზე, მაგრამ მათი გამოყენება ყოველთვის არ არის მოსახერხებელი სმარტფონზე.
ახლა, როდესაც ჩვენ გავაშუქეთ მობილური პლატფორმების ელექტრონული ფოსტის კამპანიების დიზაინის რამდენიმე მნიშვნელოვანი საკითხი, შეგვიძლია გადავიდეთ მათი განლაგების სხვადასხვა ასპექტზე.
მობილური ასოების განლაგება
რაც შეეხება მობილური სტილებს, ყველაზე ხშირად ეს არ არის ცალკე სტილის ფაილი, არამედ მედია მოთხოვნები. ასე გამოიყურებიან ისინი:
მოდით უფრო ახლოს მივხედოთ, თუ როგორ ხდება @media ანონსი. უპირველეს ყოვლისა, იმისათვის, რომ შექმნათ „მობილური“ CSS, თქვენ უნდა დანერგოთ რაიმე სახის კრიტერიუმი, რომლითაც ელ.ფოსტის კლიენტი განსაზღვრავს რომელი სტილის გამოყენებას.
ამისათვის გამოიყენება @media only ეკრანის ოპერატორი - ეს მიუთითებს, რომ ელ.ფოსტის კლიენტი უნდა იყოს ნაჩვენები ეკრანზე (მაგ., პრინტერზე დაბეჭდვის ნაცვლად). ამის შემდეგ, ზემოთ მოცემულ კოდის მაგალითში, ჩვენ დავაყენეთ მოწყობილობის ეკრანის მაქსიმალური სიგანე 480 პიქსელზე. ეს მნიშვნელოვანია, რადგან ბევრ (მაგრამ არა ყველა) მობილურ მოწყობილობას აქვს ეკრანის ეკრანის ფართობი 480 პიქსელი ან ნაკლები.
ამიტომ, მოწყობილობის მაქსიმალური სიგანე: 480 პიქსელი ხშირად გამოიყენება (ეს არის ასევე წინა iPhone მოდელების დისპლეის სიგანე ლანდშაფტის რეჟიმში), მაგრამ შეგიძლიათ გააფართოვოთ აღწერილობა ეკრანის სხვა ზომის დასაფარად:
@media ეკრანი და (მოწყობილობის სიგანე: 480 პიქსელი) და (მოწყობილობის სიმაღლე: 360 პიქსელი), ეკრანი და (მოწყობილობის სიგანე: 360 პიქსელი) და (მოწყობილობის სიმაღლე: 480 პიქსელი), ეკრანი და (მოწყობილობის სიგანე: 320 პიქსელი) და (მოწყობილობა -სიმაღლე: 240px) (...)
დავუბრუნდეთ ზემოთ განხილულ მობილური წერილის შაბლონს. აი, როგორ გამოიყურება Apple Mail-ში:
ეს მაგალითი იყენებს contenttable კლასს HTML ცხრილებზე, რომლებიც შეიცავს ტექსტს და სურათებს. აქ არის კოდის ნიმუში:
ეს კლასი საინტერესო როლს ასრულებს - როდესაც ელფოსტა იხსნება მოწყობილობაზე, რომლის ეკრანი 480 პიქსელი ან უფრო ფართოა, ეს არაფერზე არ მოქმედებს. თუმცა, როდესაც ეკრანი 480 ან ნაკლებია, ის ავიწროებს ცხრილის სიგანეს 320 პიქსელამდე. Yahoo mail-ში უჩვეულო ხარვეზის თავიდან აცილების მიზნით, გამოიყენება ატრიბუტების სელექტორები. წინააღმდეგ შემთხვევაში, "რეგულარული" CSS გამოიყენება. გარდა ამისა, შეგიძლიათ განათავსოთ შემდეგი რეკლამები:
@media მხოლოდ ეკრანი და (მაქს-მოწყობილობის სიგანე: 480 პიქსელი) ( /* მობილურისთვის სპეციფიკური CSS სტილები გადადის აქ */ ცხრილი ( სიგანე: 325 პიქსელი !მნიშვნელოვანი; ) img ( სიგანე: 325 პიქსელი !მნიშვნელოვანი; ) p ( ჩვენება: არცერთი ! მნიშვნელოვანი; ) )
შემდეგი, ჩვენ განვიხილავთ მობილური მოწყობილობებისთვის მობილური ელფოსტის ადაპტაციის უფრო მოწინავე ტექნიკას.
საპასუხო შაბლონების შექმნა ორი-ერთ სვეტით
ერთსვეტიანი შაბლონების გამოყენება კარგი გზაა თქვენი ელექტრონული ფოსტის კამპანიის ოპტიმიზაციისთვის მობილური მოწყობილობებისთვის. როგორც ითქვა, არსებობს გზები საპასუხო ორსვეტიანი შაბლონების შესაქმნელად მედიის შეკითხვებში ხანგრძლივი CSS-ის საჭიროების გარეშე.ორსვეტიანი შაბლონი საშუალებას გაძლევთ განათავსოთ მეტი კონტენტი დესკტოპის ან ვებ ელ.ფოსტის კლიენტებში ნაჩვენები შეტყობინების ზედა ნაწილში, მაგრამ ამ შეტყობინებების წაკითხვა და ნავიგაცია მობილურ მოწყობილობებზე კიდევ უფრო სახალისოა. ამის გამოსწორება შეგიძლიათ ძველი კარგი კოდით.
ელ.ფოსტის განლაგების ოქროს წესია: „როდესაც ეს შესაძლებელია, გამოიყენეთ HTML CSS-ის ნაცვლად“. ელ.ფოსტის სხვადასხვა კლიენტების მხარდაჭერა CSS შეიძლება მნიშვნელოვნად განსხვავდებოდეს, მაგრამ ისინი ყველა ერთნაირად მუშაობენ HTML-თან. მაგალითად, ატრიბუტები, როგორიცაა align=”left” და cellpadding=”10” ბევრად უფრო საიმედოა, ვიდრე მათი CSS კოლეგები float: left; და padding: 10px; . ეს არის ეს ატრიბუტები, რომლებიც გამოყენებული იქნება ასოების შექმნისას "ორი ერთი სვეტის" ფორმატში.
აი, როგორი შეიძლება გამოიყურებოდეს მსგავსი წერილი Outlook 2007-ში:
ზემოთ მოყვანილი მაგალითი იყენებს 640 პიქსელის სიგანის კონტეინერის ცხრილს, რომელიც შეიცავს ორ 320 პიქსელ ცხრილს, რომლებიც ქმნიან სვეტებს. ამ სვეტებს აქვს cellpadding=”20“ - ეს კეთდება ისე, რომ შინაარსი არ დააჭიროს საზღვრებს.
ვებზე კოდირებისას ჩვეულებრივ გამოიყენება float:left; სვეტების გასწორება. თუმცა, ამის ნაცვლად შეგიძლიათ გამოიყენოთ align = "მარცხნივ". ვინაიდან კონტეინერის ცხრილის სიგანე უდრის ან აღემატება ორი ჩადგმული ცხრილის გაერთიანებულ სიგანეს, HTML-ის გამოყენება კარგად იმუშავებს. ქვემოთ მოცემულია ასეთი ორსვეტიანი შაბლონის გამარტივებული კოდი:
|
შედეგი ასე გამოიყურება:
კონტეინერის ცხრილი 640 პიქსელის სიგანეა, ამიტომ შაბლონი იქნება ორი სვეტი. მაგრამ თუ ეკრანის სიგანე ამაზე ნაკლებია, მაშინ მარჯვენა სვეტის შინაარსი "შეფუთული" იქნება მარცხენას ქვეშ. თუ ჩადგმული ცხრილების სიგანეს 320 პიქსელის ტოლი გახადეთ, მაშინ მობილურ მოწყობილობაზე გამოტანისას მიიღებთ ერთსვეტიან ასოს, რომელიც საერთოდ არ საჭიროებს „გადიდებას“. თქვენ შეგიძლიათ მიაღწიოთ ამ ეფექტს HTML კოდში მედიის მოთხოვნის ერთი ხაზის დამატებით:
პირველი სათაურიჩვენების დამალვა
|
პელენტესკში მცხოვრები მორბი...
Ჩატვირთვა...