Адаптивный дизайн E-mail рассылки: Увеличение мобильной аудитории

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

Почему же снова адаптивный дизайн?

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

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

Если вы один из тех, кто пользуется электронной почтой, то скорее всего не знаете, что приблизительно 20% электронных писем во всем мире читают со смартфонов или планшетов (в 2011 году – почти на 16% больше, чем в 2009). Удивительно или нет, примерно 90% этих устройств находятся под управлением iOS.

Таким образом, каждый пятый ваш читатель использует портативные устройства для доступа  к своему почтовому ящику. Несколько лет назад, люди были обеспокоены тем, как будут выглядеть письма в Gmail или Outlook. Теперь, важно позаботится, как они будут выглядеть на портативных устройствах.

Устройства для чтения

адаптивный дизайн

Вы можете спросить себя, для каких устройств лучше всего разрабатывать свой адаптивный дизайн, ответ будет простым – для всех. С устройствами под управлением iOS не должно быть никаких проблем, так как они очень хорошо оптимизированы под HTML и CSS. Вы можете столкнуться с некоторыми проблемами на устройствах под управлением Android, но все эти проблемы исчезают с регулярными обновлениями от Google.

Элементы адаптивного дизайна

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

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

Для того что бы разметка хорошо смотрелась на небольшом экране, нужно учитывать некоторую CSS специфику:

  • Столбцы – Не должно быть более одного столбца шириной от 500 до 600 пикселей.
  • Ссылки и кнопки - Должны быть размером не менее чем 44 х 44 пикселей. Это гарантия того что вы сможете нажать на неё и она будет хорошо смотреться на небольшом экране.
  • Размер шрифта - Убедитесь, что минимальный размер шрифта составляет 13 пикселей. Если будете использовать более крупный шрифт, это может привести к поломке макета.
  • Длина - Сообщения, отображаемые на портативных устройствах, как правило, очень короткие и лаконичные. Важные элементы должны быть в верхней части, а прокрутка должна быть как можно меньше.
  • Скрытые элементы - На рабочем компьютере вы можете позволить себе использовать гораздо больше места, чем на мобильной платформе. Поэтому лучше воспользоваться простым свойством CSS - display: none, чтобы скрыть различные элементы. Один из элементов, которые необходимо скрыть - социальные кнопки, в то время как они могли бы быть полезными на рабочем компьютере, они загромождают макет на мобильном телефоне.

В целях развития проекта, советую вам сразу создавать две разметки, для компьютера и портативных устройств. Имейте в виду, что на мобильном у вас гораздо меньше пространства выше "сгиба" - и это то место, где должны быть размещены все важные элементы, в том числе кнопка CTA. Пользователь не должен прокручивать страницу для того, чтобы увидеть её.

Давайте посмотрим на некоторые части кода

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

html адаптивная верстка

Декларация медиа запросов, это все для распознавания размера экрана. Она указывает, что этот стиль может быть использован только на экране, размер которого не больше чем 480 пикселей. Это значение можно изменить в соответствии с разрешением необходимых вам устройств.

Если вы хотите создать ультра-специфичный адаптивный дизайн, Вы можете использовать тот же тип декларации для различных размеров экрана, как показано ниже.

адаптивный дизайн

Другие приемы адаптивного дизайна

Если вы разрабатываете макет с одной колонкой и собираетесь просто сузить её (что было бы намного проще), вы можете создать один макет с двумя колонками для компьютера и настроить его для мобильных устройств, поставив столбцы друг на друга с помощью CSS.

Ещё одна вещь, которую вы можете использовать, это так называемая "техника прогрессивного раскрытия". Эту технологию использует Wikipedia для мобильных платформ. Суть этого метода заключается в скрытие некоторых элементов под конкретное содержание, которые отображаются, если нажать по ним и наоборот. Это гарантирует, что пользователю не придется прокручивать слишком много для того, чтобы достичь нужного содержания, которое находится в нижней части страницы.

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

Фокус и плавающие элементы

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

В этом коде сказано, что экран должен быть шириной более 320px, но не более 480px. Здесь можно добавить еще одно правило, и ещё одно, и ещё и т.д. Вы можете создать столько значений с размерами экрана устройств, сколько пожелаете.

Медиа-запросы могут быть также использованы для создания плавающих макетов, это означает, что вам не нужно указывать точные размеры экрана устройств, вы будете определять размеры элементов в процентах. Чтобы сузить левое поле, вы просто используете margin-left: 3%. Это будет гарантировать, что независимо от того, узкий или широкий экран, отступ всегда будет 3% от его ширины.

Оптимизация изображений

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

Если вы создаете адаптивный дизайн для устройств от компании Apple, я бы рекомендовал создание миниатюр с двойным размером (если нажать по миниатюре, то оно откроет изображение с его реальными размерами), просто потому, что Retina дисплеи имеют большое разрешение. Эта маленькая хитрость сделает снимки резкими и четкими.

Размеры изображения для плавающих макетов должны быть заданы при помощи background-size: 100%. Однако у свойства background-size: cover есть несколько преимуществ, так что поэкспериментируйте и вы увидите какое свойство больше всего подходит для вашего макета.

Заключение

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

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

Перевод статьи Responsive Email Newsletter Design: Increase Mobile Readership

Тэги: responsivemobileemail

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.