НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

Красивый почтовый ящик

0

1414370277small_2369734521

Кодирование электронной почты может быть сложным делом. Но как только вы ознакомитесь с основными правилами, все должно пойти как по маслу, до тех пора не столкнетесь с некоторыми сложностями.

Как мы знаем, ошибки – это нормальное явление в веб-дизайне – но электронная почта выдает несколько дополнительных сложностей.

Мало того, что получатели писем пользуются разными браузерами, так вам еще придется  разобраться с множеством почтовых провайдеров, устройствами и приложениями и все они по-разному сгенерируют ваш email-код (над которым вы, между прочим, работали день и ночь).

Лучше ознакомиться, без разбора, с каждым канвасом, (а еще и с их примочками) которые ваши пользователи будут использовать для получения писем и которые будут очень хорошо смотреться в папке Входящие. Ниже мы разберем несколько наиболее распространенных ошибок, с которыми приходится сталкиваться из года в год. И, конечно же, научимся их устранять.

Gmail, Yahoo и iOS любят синий

Помните, когда веб-страницы состояли в основном из черного текста и белого фона, с подчеркнутыми синими словами? Пользователи уловили, что это гиперссылка и поняли куда нужно кликать.

Большинство веб-дизайнеров не нарадуются, как это было в 1999, когда с колдовским азартом разделались с этим синим цветом, что и послужило большим комплиментом их дизайнерскому мастерству в использовании цветовой палитры.

К сожалению, рассмотренные Yahoo и Gmail еще немного упрямятся в своей склонности к синим ссылкам. Простое определение нового шестеричного значения в стиле tag не снимет этого с их платформ. Самое простое решение – это ввести добавочный тег , встроенный в тег , определяющий шестеричное значение во вторую очередь.

Gmail не видит мир в черно-белом цвете. Используя шестеричное значение #FFFFFF и  #000000 или определяя цвет ссылки «черным» или «белым», Gmail будет все еще использовать по умолчанию синий для этих значений, и неважно как вы их будете обозначать – , дополнительный   и так далее.

Чтобы отойти от синих ссылок в чистом черном или белом тексте, я заменяю текстовый цвет, который отличается одним значение от обычных «белого» и «черного». То есть получается #FFFFF1 или  #000001 и обозначаем их как и дополнительный тег . Разница едва заметна человеческому глазу и будет соблюдать выбранный вами цвет.

Таким образом iOS автоматически будет переводить телефонные номера, адреса и даты в синие гиперссылки даже если вы не добавите тег .

Почему так происходит? Потому что предполагается, что вы захотите звонить, планировать и вводить блок текста в ваш календарь. Для того, чтобы избежать нежелательных ссылок-сюрпризов, снова перейдите на любой телефонный номер, адрес и любой другой контент со и вручную выберите стиль и цвет на свой вкус.

iOS поддерживает топ-линию CSS и медиа-запросы, так что если у вас куча телефонных номеров, адресов и встреч на вашей почте, вы можете задать цвет единожды и ввести блок программ в код.

1414450124iOS

Белое пространство Outlook и Gmail

Растровые изображения не так уж сильно популярны среди пользователей электронной почты, поэтому лучше всего использовать slice-изображения. Обратите внимание на то, что Outlook и Gmail добавляют белое пространство вокруг изображений, которое создает не очень приятный эффект пустоты, в то время как изображения должны располагаться плотно.

Но благодаря добавлению display:block стиль каждого изображения исключит чрезмерное белое пространство.

1414467682outlook3

Приложение Gmail для Android привносит свою ширину

Время от времени Android устанавливает свою ширину сетки на рабочем столе приложения Gmail. Заметно, что если стол с двумя или более колонками, то одна колонка становится главной, а вторая такая тонкая, что еле помещается на сетке.

Но есть различные пути решения этой проблемы:

– если сетка содержит изображение равной ширины, то сделайте ширину соответственно сетке;

– если сетка не содержит элементы, которые составляют полностью намеченную ширину, добавьте прозрачный GIF как первую линию кода в сетке и установите ширину изображения к желаемой ширине сетки (да, кодируя как в 1999). Это должно заставить сетку расшириться, чтобы удержать изображение и гарантировать, что ваши изображения встанут по нужной ширине.

1414467759android3

iOS создает свои собственные границы

Мы заметили, что эта ошибка происходит в независимости от примененного цвета фона или изображения. iOS использует прежний цвет фона, который видно за пределами стола, поскольку границы исчезают, когда вы увеличиваете масштаб изображения.

Наш совет: добавьте дополнительный стол с определенным основным цветом фона и вложите стол в сетку, которая содержит цвет, который было видно внутри, для того, чтобы убедиться, что весь стол имеет нужный установленный вами цвет.

1414372916border_issue

Очень надеемся, что предложенные варианты устранения ошибок помогут вам сохранить свои нервы. Будьте уверены: новые ошибки не заставят себя долго ждать, так как и пользователи email, и приложения имеют привычку развиваться.

Помните, что всегда нужно пробовать, пробовать и еще раз пробовать различные email приложения на ваших любимых девайсах, а также такие инструменты, как ReturnPath и Litmus.

Также помните, что это совсем не трудно делиться своими собственными способами решения подобных и других проблем – ваши коллеги будут вам благодарны, когда столкнутся с подобными ошибками.

Источник фото – Fotolia.ru

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.