Ето няколко съвета за създаване на перфектното отзивчиво писмо.
Големите пощенски услуги имат вграден редактор на блокове. Той събира прости отзивчиви имейли и това е включено в цената на абонамента. Няма да работи за попълване на сложно творческо писмо в редактора - това е дело на дизайнера и дизайнера на оформление. Първо, нека разберем коя буква е класифицирана като сложна и коя е проста.
След това има "чипове". Някъде можете да зададете точния размер за отделни блокове, но някъде не можете. В един редактор можете да събирате само букви с една колона, в другия няма ограничения за броя на колоните. В някои редактори можете дори да персонализирате кои блокове да се показват на настолната версия и кои само на мобилни устройства.
Дизайнерът и дизайнерът на оформление предлагат индивидуални решения, редакторът предлага стандартни решения. Имайте предвид, че когато сглобявате писмо в редактора, във всеки случай сте ограничени например от набора от шрифтове и техните размери.
Дизайнерът ще го направи както искате. Дизайнерът на оформление ще обмисли как да пренареди блоковете на мобилни устройства - точно както сте планирали. Когато работите в редактор на блокове, разчитате на решенията, предоставени от разработчиците.
Редакторът адаптира буквата според собствения си алгоритъм; алгоритъмът не може да бъде променен.
Ако сте разработили структурата, написали текста и взели снимките, тогава ще отнеме от тридесет минути до два часа, за да създадете писмо. Да припомним, че не плащате за оформлението, работата с редактора е включена в цената на акаунта.
Екип от дизайнер на свободна практика и дизайнер на оформление ще направи писмо за два или три дни, ще струва от 5000 до 15 000 рубли. Ако поръчвате от агенция, това е много по -скъпо. Помните ли историята от увода? За Сергей изборът е очевиден: той сам ще събере писмото, в неговата ситуация е по -евтино и по -бързо.
По-добре е да съберете просто отзивчиво писмо във вградения редактор. Ако искате нестандартни решения, аутсорсирайте.
Как да сглобите писмо във вградения редактор
Тези, които събират писмо в редактора, не трябва да знаят кода. Единственото нещо, от което се нуждаете, е да помислите върху структурата на писмото, да вземете снимки и да напишете текста. Без "ръчно" набиране - ще съберете буква от блокове, точно както в конструктора на целеви страници.
Стъпка 1. Очертание или прототип на писмото
Започнете с груб проект, нарисувайте диаграма на бъдещото писмо на хартия: къде ще бъде заглавието, къде е картината, къде е бутонът и т.н. Ако имате време, съберете пълноправен прототип в Balsamiq или NinjaMock . Не е срамно да покажете такъв прототип на режисьора и да го прехвърлите в работата на дизайнера.
Стъпка 2. Оформление на писмото в редактора
- Добавете необходимия брой колони въз основа на готова схема или прототип
- Плъзнете необходимите елементи в тялото на буквата
Обикновено принципът на плъзгане и пускане работи във вградените редактори. Ако вашият не е такъв, погледнете статиите от базата знания - там са описани принципите на работа в редактора.
- Персонализирайте съдържанието на елементите: подплънки, интервали, подравняване и стил
Тук въвеждате необходимия текст, добавяте снимка или илюстрация, със или без връзки. Не забравяйте, че можете да добавите анимирана картина, повечето редактори поддържат GIF формат.
Просто не прекалявайте с размера на файла. Имейл клиентите не обичат „тежки“ букви и могат да скрият съдържанието си под бутона „Покажи изцяло“ - както например Gmail. Изберете файлове, така че готовото писмо да тежи не повече от 600 KB, това е оптималният размер.
Не забравяйте да персонализирате бутоните и да добавите навигационни връзки към тях.
Стъпка 3. Проверка на отзивчивостта във вградения редактор
Когато имейлът е готов, проверете как се показва на различни устройства.
В 90% от случаите всичко ще бъде наред, блоковете ще бъдат „възстановени“ автоматично. Ако оформлението все още "лети" или резултатът не ви подхожда - проверете стойностите на отстъпите в блоковете, те трябва да са еднакви. Ако единият блок се оттегли с 10 точки, а другият с 30, те може да не бъдат пренаредени правилно в мобилната версия. Ако и двата блока върнат 10 точки назад, най -вероятно ще се оправите.
Стъпка 4. Проверка на адаптивността на услуги на трети страни
Проверете резултата чрез лакмус или имейл върху киселина. Тези услуги ще ви покажат как имейлът ще се показва на различни устройства, в различни браузъри и различни имейл клиенти.
В някои редактори проверката чрез Litmus е интегрирана по подразбиране. Ако вашият редактор няма тази опция, изпратете тестово копие на писмото на специален имейл, който ще бъде предоставен след регистрация в Лакмус.
Услугата е платена, месечният абонамент в Litmus започва от $ 79, в Email on Acid - от $ 45. Ако изпращате едно писмо веднъж месечно, това може да бъде скъпо. В краен случай опитайте Browser Shots, той е стар и неудобен, но безплатен. Не забравяйте, че такива услуги не са 100% гарантирани. Дори ако всичко е наред в Лакмус, това не е причина да стартирате пощенския списък веднага. Изпратете писмото до личната си поща и го отворете там.
Изберете редактор, който показва как изглежда буквата на различни устройства. Идеално, ако редакторът е интегриран с услугата Litmus. Ако няма интеграция, проверете ръчно адаптивността чрез лична поща.
Как да оцените резултата от работата - свой или дизайнер на оформление
Ако събирате писмото сами, проверете адаптивността вътре в редактора и погледнете писмото от личната си поща - това е достатъчно. Ако искате да тествате адаптивността на много устройства, браузъри и имейл клиенти едновременно - след това купете акаунт в Litmus или Email on Acid, вижте резултата там.
Тези, които възлагат оформлението на външни изпълнители, не е нужно да купуват акаунт, попитайте дизайнера на оформлението за екранни снимки от Litmus. Ако е професионалист, той проверява писма в такива услуги, изпращането на екранна снимка не е проблем за него. Когато проверявате, разгледайте по -отблизо пощенските клиенти, най -често тук се появяват джамбове. Не забравяйте да проверите как се отваря имейл в Outlook, Gmail, Yandex и Mail.ru - това са най -популярните имейл клиенти в Русия.
Не губете време за поправяне на оформлението, ако то се показва неправилно на третия iPhone, в седмата версия на Internet Explorer или в пощенския клиент The Bat. Да, винаги ще има такива, които използват третия iPhone, но те са малцинство. Струва ли си да препроектирате оформлението за 1-2% от общата база? Зависи от количеството и "качеството" на основата.
Надяваме се, че сте го сегментирали и знаете всичко за абонатите си. Ако 1-2% са 10 000 души, значи си заслужават проблемите. Ако работите в b2b и тези 1-2% са управляващи компании, собственици на бизнес и други ВИП клиенти, ще трябва да адаптирате писма за тях.
Уверете се, че буквата е показана адекватно в Outlook, Gmail, Yandex и Mail.ru - това е достатъчно.
Бележка на маркетолога
- Решете формата на писмото, какво ще бъде то: стандартно и просто или сложно и творческо. Дайте писма със сложна структура на дизайнера и дизайнера на оформление. Събирайте прости писма в редактора на пощенската услуга, те са адаптирани по подразбиране.
- Проверете резултата във вградения редактор и, ако бюджетът ви позволява, в услугите на трети страни. Когато приемате писмо от дизайнер на оформление, поискайте екранни снимки, които потвърждават, че писмото се показва правилно - поне в популярните имейл клиенти и популярните браузъри.
- Не забравяйте да видите писмото чрез лична поща, поне в основните пощенски клиенти и от актуалните модели смартфони на iOS и Android.
Плюс
Един от читателите на блога на Web Council поиска да говори за оформлението на писмата за пощенския списък. Аз самият почти не правя това. Спомням си, че по едно време се занимавах с шаблони за Subscribe.ru и си спомням, че това беше мрачен бизнес. Проблемът е, че имейл услугите не работят добре с оформлението на блока. И още по -лошо със css стилове. Минаха толкова много години и нещата все още са там. Сега по -голямата част от писмата за пощенски съобщения се набират все по стария начин - с помощта на таблици. И това е през 2016 г., когато html5, css3 и други съвременни сладкиши управляват сайтовете от дълго време.
По принцип изчерпателните статии за оформлението на буквите вече са в Хабре, тук и тук. Препоръчвам също да прочетете местен жител на име Артър Кох, който е написал много полезни статии за оформлението на буквите. Примери: връзка 1, връзка 2.
Но за да не се окаже празният пост, все пак ще изложа накратко основните моменти от оформлението на писма за бюлетини по имейл.
Първо, трябва да забравите за оформлението на блока и отделна таблица със стилове. Всичко е подредено в таблици, а стиловете са написани директно на място или по друг начин - Inline. Изглежда така:
Второ, винаги трябва насилствено да нулирате стойностите на отстъпи, полета и граници, защото всеки имейл клиент се опитва да ги покаже по свой начин:
Трето, не е нужно да се занимавате с етикетите doctype, head и body. Без докттип вашите писма ще бъдат еднакви навсякъде, главата и тялото са почти безполезни, защото все още ще бъде отрязан от повечето пощенски услуги (доказателство).
Четвърто, ако използвате снимки с букви, не забравяйте да запишете техните размери.
адаптивно оформление на букви
Много често пощенските писма блокират изображения с букви и ако не зададете размерите им, писмото ще изглежда тромаво. Също така не забравяйте да добавите style = "display: block;. Това ще се отърве от проблеми с неразбираемо вдлъбнатина (например в gmail):
И в никакъв случай не използвайте еднопикселни изображения като разделители за клетки на таблица! Гарантирано е, че вашето писмо ще се окаже в спам. Ако имате нужда от дистанционер, тогава трябва да използвате картина с размери най -малко 20x20 пиксела, която в стиловете трябва да бъде принудена да има размер 1x1 пиксел.
Пето, възможно е да се направи адаптивно оформление за букви. Изглежда също толкова тромаво, колкото всички работят с маси като цяло, но без риба ... Сами го разбирате. Накратко, за да може вашето писмо да има някакво подобие на отзивчивост, съдържателната му част трябва да бъде оформена с централен маркер с подходящи стилове:
И накрая, няколко полезни връзки. Тук можете да видите кои тагове се поддържат от различни имейл услуги. И тук ще намерите още няколко полезни неща - "Характеристики на оформлението на HTML -букви".
Ако статията се оказа полезна за вас, моля, оценете я и споделете в социалните мрежи:
(2 среден брой гласове:
Свързани записи:
Оформление на отзивчиви имейли: бележка на маркетолог
Повечето имейли не се показват правилно на мобилни устройства. Чертежите се различават и текстът трябва да се превърта и мащабира. Отзивчивото оформление е от съществено значение, за да изглеждат добре имейлите на различни платформи.
Този курс е насочен към HTML кодери, разработчици и имейл маркетолози с основни познания по HTML и CSS. Ще научите какво е мобилно и флуидно оформление, блокова и флангова адаптация. Научете как да подготвяте изображения за букви и помислете за основните инструменти за оформление.
След курса ще можете да създавате букви, които да се показват еднакво добре на компютърни и мобилни устройства.
2. Характеристики на отзивчиво оформление
3. Подходи за адаптиране на имейл
4. Основен отзивчив шаблон за имейл
5. Техники за мобилна адаптация
6. Инструменти за HTML оформление
7. Обобщение на курса
8. Отзивчив имейл маркетинг: последен тест
Безкрайните възможности за творческо оформление на имейл бюлетини, използването на графични елементи и интересно съдържание привличат вниманието на клиента. Такива имейли не се изпращат до спам.
Създаване на пощенско писмо
За успешното прилагане на системата за имейл маркетинг не е достатъчно да имате проста логика за бюлетин и писмо с оферта.
30 безплатни отзивчиви шаблона за имейл
За да привлече вниманието, информацията трябва да бъде представена в красива "обвивка", с правилните връзки и атрактивни изображения. Първото впечатление от буквата е външната обвивка, пълнежът е вторичен.
Потребителите получават около сто писма всеки ден, трябва да привлечете вниманието на публиката с „ярко“ и вълнуващо заглавие и предложение вътре. За успешното изпълнение на дизайна и оформлението на писма за изпращане по пощата трябва да помислите над стратегия за изпълнение на проекта:
- обмислете идея и правилно изградете поредица от букви;
- подчертайте най -важното, спечелете доверието на клиента, като предоставите интересен продукт;
- писмата трябва да насърчават действията, да мотивират за закупуване на продукт;
- атрактивен дизайн, професионалистите ще направят html оформление на писма за изпращане по пощата.
Експертите ще се погрижат за отзивчивото оформление на имейл съобщенията, така че дизайнът да изглежда страхотно на всяко устройство. Ако вашият онлайн магазин няма корпоративна идентичност, тогава ние ще направим общо оформление на писмо с марка, което ще бъде основата за изпращане по пощата. Маркетингът е способността да предизвиква емоции у човек, да формира желание да купи нещо. Ние сме професионалисти в тази област, така че резултатът от нашата работа винаги е отличен.
Оформление на html букви
- Идеята за популяризиране на продукт / услуга и нейното прилагане в текстов формат.
- Дизайн на писма за изпращане по пощата.
- Оформление на имейли.
- Тестване на резултата на всички платформи и пощенски услуги.
Максималният ефект от буквите може да бъде постигнат, ако всяка връзка от процеса ще изпълнява ясно и ефикасно задачата. Професионален дизайнер на оформление и дизайнери ще поемат персонализирането на функционалността и техническата основа на писмото, като вземат предвид оформлението за конкретни имейл клиенти. Писмото ще се показва правилно на всички платформи - това се нарича кръстосана поща.
Прости разпознаваеми шаблони, правилната ширина, информация за компанията и формуляр за отписване - когато всичко това се вземе предвид, вашият бюлетин ще вдъхне доверие, а клиентът дори няма да си помисли да кликне върху бутона „спам“.
Какво получаваш?
- Писма за кръстосана поща, съставени съгласно всички правила
- Прецизен красив дизайн
- Висока CTR
- Нисък процент на отписвания, добавящ към спам
- Добре обмислен текст, насочен към бюлетини
- Ефективно сегментиране
- Правилно показване на букви в повечето имейл клиенти
- Правилна техническа настройка на пощенския процес
Не само естетиката е важна - функционалността е важна. Ако сте готови да започнете да получавате правилно писмата си - каним ви на безплатна консултация.
Актуализиран материал 20.06.2018
Оформлението на буквите се различава от обичайното уеб оформление поради особеностите на тълкуването в различни уеб интерфейси и имейл клиенти.
Нека да разгледаме примери за това как да се постигне добро показване на писмото във всички разновидности на ISP и имейл клиенти.
Как изглежда общ адаптивен шаблон за имейл:
|
За да разрешим проблема с автоматичното мащабиране на имейли в iOS 10 и iOS 11, добавихме:
Пример за грешка при автоматично мащабиране
Следващият хак:
Webkit-text-size-Adjust: няма; -ms-text-size-Adjust: няма;
предотвратява iOS устройствата да променят съдържанието на писмото за четене. Това обикновено противоречи на дизайна и може да наруши оформлението:
Нека преминем към тялото на буквата - частта на тялото. Цветът на фона на уеб интерфейса може да бъде различен, така че трябва да увиете всичко в таблица с желания цвят на фона, дори и да е бял, както в този случай:
| … |
Поради ограничената поддръжка за свойства на стила, като максимална ширина, от пощенски клиенти на Outlook 2007-2016, както и от IE-подобни пощенски клиенти Outlook 2003 и Lotus Mail, е необходимо да се изгради спомагателна структура на таблицата в условните коментари, които ще ограничи ширината на съобщението в тези пощенски клиенти:
| Блок 1 | Блок2 |
Код, затворен между:
ще бъдат игнорирани от всички имейл клиенти с изключение на Outlook 2007-2016 и подобни на IE имейл клиенти.
И всеки от блоковете ще има следната структура:
| Блокиране |
Също така в букви понякога има ситуация, в която блоковете са разположени в шахматно положение, но при възстановяването е препоръчително да се запази логическата последователност на блоковете и да се възстанови не десния блок под лявото, а обратното - левия блок под десния. Това може да стане, като промените посоката на текста, това ще изглежда така:
|
Други елементи и техники
Невидим предзаглавие
Почти всички уеб интерфейси също показват първия текст до темата:
В пощенските списъци това обикновено е техническа информация, като например „отписване“ и „отваряне в браузър“, което очевидно не мотивира абоната да отвори писмото, но чрез контролиране на показания текст можете значително да увеличите шанса за отваряне на писмото.
За да направите това, добавете код със следната структура в самото начало на html-тялото на писмото:
Използването на невидим предзаголовок може да повлияе негативно на доставката, затова използвайте тази техника внимателно и внимателно следете за доставката чрез пощенския майстор.
Видео в имейли
Стандартният пощенски клиент Mail отново започна да възпроизвежда html5-video-директна връзка към youtube-видеото, поставено върху изображението.
С тази реализация видеоклипът ще се показва на слой в уеб интерфейсите Mail.ru (около 55%) и Gmail (около 14%). В същото време на повечето мобилни устройства видеото ще се отваря в приложението Youtube, без да се отваря браузър.
Недостатъкът на този подход е невъзможността да се събират статистически данни за кликванията, тъй като връзката към Youtube трябва да е директна, а проследяването на кликванията за тази поща ще трябва да бъде деактивирано във вашия ESP.
Тестване
Най -важният етап от оформлението е тестване на букви. Най -добрият начин все още е да проверите ръчно показването на писмото в различни уеб интерфейси и имейл клиенти, това може да помогне за изпращане на „сурово“ оформление на писма под формата на архив. Трябва да знаете кои платформи използват абонатите ви, кои доставчици на имейли предпочитат и ръчно да проверите поне най -популярните.
За да ускорите процеса на тестване, можете да използвате услугите Litmus и EmailOnAcid, но това не премахва необходимостта от ръчна проверка на показването на всяка отделна буква.
Статията споменава някои услуги, ресурси и инструменти, които несъмнено ще бъдат полезни за дизайнера на букви и не само. Ето малък списък с полезни ресурси.
Инструменти и услуги:
Бутоните за имейл е генератор на бутони, използващ VML.
- Вмъкване на фонови изображения в имейли с помощта на VML.
Лакмус - тестване на показването на букви.
Email On Acid е алтернатива на Litmus: тестване на показването на имейли.
Полезни материали:
Blog Litmus е лидер на пазара за тестване на имейли. Интересни случаи и най -новите новини от света на имейл маркетинга и оформлението на имейли.
Blog Email On Acid - интересни случаи и най -новите новини от света на имейл маркетинга и оформлението на имейли.
- първият блог за имейл маркетинг, говори за това как да направим имейлите ефективни.
Блогът на Тод - интересни казуси и полезни материали за оформлението и разработката.
- Превод
Всеки, който периодично чете пощата им на телефона си, знае, че преживяването може да бъде толкова приятно, колкото и направо ужасно. Фактът, че имейл от пощенски списък изглежда страхотно на работния плот, не означава, че всичко ще бъде наред в мобилен имейл клиент - на малък екран често възникват проблеми с шрифтовете, показването на колони и оформлението на шаблоните просто изчезва далеч.
Защо трябва да адаптирате имейлите за мобилни устройства
Значителна част от аудиторията на различни компании за имейл маркетинг преглеждат имейли на мобилни устройства. Проучване на Campaign Monitor от 2011 г. установи, че близо 20% от отварянето на имейли е станало на смартфони и таблети, при само 4% през 2009 г. Почти 90% от тези открития са направени на устройства с iOS. Сега цифрите са още по -високи.В този урок ще разгледаме няколко начина за подобряване на дисплея на мобилни устройства (от използване на медийни заявки за отзивчиво оформление до по -усъвършенствани техники). Освен това ще разгледаме различни дизайнерски проблеми, които възникват на етапа на планиране на пощенски списък, както и ще говорим за това как да поставим абонаментни формуляри за получаване на писма на смартфони и таблети.
Техники на проектиране
Преди да се потопите в света на набиращите букви, нека поговорим за визуалния аспект на този случай. Интересен момент е, че по време на анализа на материала ще създадем две версии на едно и също писмо - единият шаблон е проектиран да изглежда добре на имейл клиенти за настолни компютри, а вторият трябва да е приятен за четене на устройства с малки екрани.Например, ето как може да изглежда такова писмо в Outlook:
По -долу е същият имейл, но отворен в приложението Mail за iPhone. Разликата между двата шаблона е ясно видима. Мобилната версия е по -тясна, има по -малко допълнителни визуални елементи, но е толкова лесна за четене, колкото и настолната версия. Разликата във външния вид между двете мобилни опции е в използването на CSS.
Дясната буква не се различава от лявата, но в оформлението й не е използван CSS. Някои части от текста се оказаха твърде малки и за потребителя е почти невъзможно да разбере какво е написано там - това е проблемът с милионите писма с новини, които собствениците на мобилни устройства получават всеки ден.
Неща, които трябва да имате предвид при създаването на шаблони
Създаването на имейли, които изглеждат добре на мобилни устройства, е много по -трудно, отколкото просто използването на персонализиран CSS. Обърнете внимание и на други неща:- На мобилни устройства шаблоните с една колона, не по-широки от 500-600 пиксела, работят най-добре. Те са по -лесни за четене и дори да има някои недостатъци в тях, всички "плитчини" във всеки случай изглеждат по -добре.
- Според указанията на Apple минималната целева площ за бутоните и връзките трябва да бъде 44 x 44 пиксела. Няма нищо повече „извън употреба“ от куп малки връзки, които са трудно достъпни на малък екран на мобилно устройство.
- Минималният шрифт, показан на iPhone, е 13 пиксела. Необходимо е да се вземе предвид този факт при създаването на текста на писмото - ако текстът в шаблона е написан с по -малък шрифт, той ще бъде автоматично увеличен, което може да наруши цялото оформление.
- Писмото трябва да бъде сбито и цялата важна информация да бъде поставена на върха му. Превъртането на сензорни екрани с пръст е по -трудно, отколкото на работния плот с мишка.
- Ако е възможно, използвайте display: none свойство; за скриване на незадължителни елементи на шаблон. Бутоните за споделяне на социални мрежи са подходящи за десктоп, но не винаги са удобни за използване на смартфон.
Сега, когато разгледахме някои от важните въпроси, свързани с дизайна на списъци с пощенски адреси за мобилни устройства, можем да преминем директно към различни аспекти на тяхното оформление.
Въвеждане на мобилни букви
Що се отнася до мобилните стилове, най -често не се има предвид отделен файл със стил, а медийни заявки. Ето как изглеждат:
Нека разгледаме по -отблизо как работи декларацията @media. На първо място, за да създадете "мобилен" CSS, трябва да приложите някакъв критерий, по който пощенският клиент да определи кои стилове да използва.
За да направите това, се използва операторът на екрана @media only - той показва, че пощенският клиент трябва да се показва на екрана (вместо например да се отпечатва на принтер). След това в примерния код по -горе зададохме максималната ширина на екрана на устройството на 480 пиксела. Това е важно, защото много (но не всички) мобилни устройства имат екранна площ от 480 пиксела или по-малко.
Следователно, често се използва максимална ширина на устройството: 480px (това е и ширината на дисплея на предишните iPhone в хоризонтален режим), но можете да разширите описанието, за да покриете други размери на екрана:
@медиен екран и (ширина на устройството: 480 пиксела) и (височина на устройството: 360 пиксела), екран и (ширина на устройството: 360 пиксела) и (височина на устройството: 480 пиксела), екран и (ширина на устройството: 320 пиксела) и (устройство -височина: 240px) (...)
Нека се върнем към дискутирания по -горе шаблон за мобилни имейли. Ето как изглежда в Apple Mail:
Този пример използва съдържателния клас на HTML таблици, съдържащи текст и изображения. Ето някои примерен код:
Този клас играе интересна роля - когато имейлът се отваря на устройство с екран от 480 пиксела или по -широк, това не засяга нищо. Въпреки това, когато екранът е 480 или по -малък, той намалява стената на таблицата до 320 пиксела. Селекторите на атрибути се използват, за да се избегне необичаен проблем в пощата на Yahoo. В противен случай се използва "нормален" CSS. Освен това можете да включите следните реклами:
@media only screen и (max-device-width: 480px) ( / * CSS стилове, специфични за мобилни устройства, отиват тук * / table (width: 325px! important;) img (width: 325px! important;) p (display: none! важно;))
След това ще разгледаме по -сложни техники за адаптиране на мобилни имейли към мобилни устройства.
Създайте отзивчиви оформления на колони два към един
Използването на шаблони с една колона е добър начин за оптимизиране на вашите имейл кампании за мобилни устройства. Като се има предвид, има начини за създаване на отзивчиви оформления с две колони, без да се налага да използвате дълъг CSS в медийни заявки.Оформлението с две колони ви позволява да поставите повече съдържание в горната част на съобщението, показвано в настолни или уеб имейл клиенти, но четенето и навигирането на такива имейли на мобилни устройства все още е удоволствие. Можете да поправите това с добър стар код.
Златното правило на оформлението на имейлите е: „Когато е възможно, използвайте HTML вместо CSS.“ Степента, в която CSS се поддържа от различни имейл клиенти, може да варира значително, но всички те работят по един и същи начин с HTML. Например атрибути като align = ”left” и cellpadding = ”10” са много по -надеждни инструменти от техните CSS колеги float: left; и подложка: 10px; ... Това са атрибутите, които ще се използват при създаване на букви във формат „две към една колона“.
Ето как може да изглежда подобно писмо в Outlook 2007:
Примерът по -горе използва 640px широка таблица с контейнери, която съдържа две 320px таблици, които образуват колони. Тези колони имат cellpadding = "20" - това се прави, така че съдържанието да не се придържа към границите.
Когато кодират за мрежата, те обикновено използват float: left; за подравняване на колоните. Вместо това може да се използва align = ”left”. Тъй като ширината на таблицата с контейнери е равна или по -голяма от комбинираната ширина на двете вложени таблици, използването на HTML работи добре. По-долу е опростен код за подобен модел с две колони:
|
Резултатът изглежда така:
Таблицата на контейнера е широка 640 пиксела, така че оформлението ще бъде с две колони. Но в случай, че ширината на екрана е по -малка от тази, тогава съдържанието на дясната колона ще бъде "обвито" под лявата. Ако направите ширината на вложените таблици равна на 320 пиксела, тогава, когато се показва на мобилно устройство, ще получите буква от една колона, която изобщо не е необходимо да се „мащабира“. Този ефект може да бъде постигнат чрез добавяне на един ред медийна заявка към HTML кода:
Първа заглавиеСкриване на шоуто
|
Пелентески обитаващи морби ...
Зареждане ...