Новый инструмент для e-mail маркетинга
133,33
рейтинг
25 августа 2015 в 15:36

Разработка → Как сверстать интерактивные вкладки в email-письме перевод



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

Радиоэлементы, ярлыки и псевдокласс :checked


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

Как правило в подобных примерах используется комбинация радиокнопки, ярлыков и псевдокласса CSS3 :checked. Вот как это выглядит:



А вот так выглядит код:

<style>
/* hide radio element */
.myradio {
  display:none;
  height:0px;
  visibility:hidden;
}
.mybox {
 width:100px;
 height:50px;
 background-color: #eeeeee;
 display:none;
 padding:5px;
}
/* change tab to bold */
.myradio:checked + label {
  font-weight: bold;
} 
/* show content */
#radio1:checked ~ .box1,
#radio2:checked ~ .box2
{
  display:block;
}
</style>
 
<input name="myradio" type=radio id="radio1" class="myradio" checked>
<label for="radio1">Tab 1</label> | 
<input name="myradio" type=radio id="radio2" class="myradio">
<label for="radio2">Tab 2</label>
 
<div class="mybox box1">Box 1</div>
<div class="mybox box2">Box 2</div>

Заголовки вкладок «обернуты» ярлыками и размещены под связанным радиоэлементом, который скрыт с помощью стилей. Далее заголовок связывается с радиоэлементом с помощью атрибута for — в итоге клик по заголовку активирует радиоэлемент с id, совпадающим со значением атрибута for.

Затем использование псевдокласса :checked и родственные селекторов adjacent (+) и general (~) можно выборочно выделять жирным шрифтом название и отображать связанный контент вкладки.

Эта простая техника работает на мобильных клиентах и webkit-based почтовых програмаах, таких как приложения в iOS и Android. Однако для отображения в веб-клиентах нужно еще поработать.

Интерактивные вкладки в вебе


В вебе проблемой является невозможность использования определенных CSS-стилей. Например, Gmail вырезает классы и id, Outlook.com не поддерживает псевдокласс :checked, а Yahoo! Mail вырезает селектор (~) и при рендеринге переименовывает id и классы, делая атрибут for бесполезным.

Реализовать поддержку в Yahoo! Mail и Gmail можно с помощью следующих трюков:

1) Радиоэлемент и контент вкладки нужно поместить внутрь ярлыка. Это позволит отказаться от использования атрибута for — клик на ярлыке автоматически будет активировать вложенный в него радиоэлемент.

2) Ярлыки, инпуты и контент будут вкладываться на манер матрешки. Это позволит использовать селектор (+), который требует, чтобы активированные и целевые элементы были связаны друг с другом — в нашем случае это радиоинпут и обертка span.
<label><input type=radio name="tab" id="tab1" checked>
<span><div class="title1">Tab 1</div>
 
    <!-- NESTED TAB 2 -->
    <label><input type=radio name="tab" id="tab2">
    <span><div class="title2">Tab 2</div>
 
        <!-- NESTED TAB 3 -->
        <label><input type=radio name="tab" id="tab3">
        <span><div class="title3">Tab 3</div>
 
        <div class="content3">
        Tab 3 Content
        </div></span>
        </label>
        <!-- /NESTED TAB 3 -->
 
    <div class="content2">
    Tab 2 Content
    </div></span>
    </label>
    <!-- /NESTED TAB 2 -->
 
<div class="content1">
Tab 1 Content
</div></span>
</label>

3) Наконец, мы будем использовать технику lang (ее мы описывали ранее), которая позволит использовать стили в веб-клиенте Gmail.

Работа с неподдерживаемыми клиентами


Также нам надо убедиться в том, что пользователи неподдерживаемых почтовых программ не будут видеть сломанное письмо. Для того, чтобы этого добиться, можно воспользоваться двумя стратегиями. Самый простой путь — полностью скрыть все, что связано с вкладками (это потребует, в частности, оборачивания контента в условные комментарии Outlook — вы же не думали, что это сработает в десктоп-клиенте Outlook?)

Одним из способов такого скрытия для клиентов, которые не поддерживают псевдокласс :checked, заключается в оборачивании контента вкладок в div-контейнер, которые уже будет скрываться. Затем выбранный радиоинпут размещается перед div-элементом, а в блок стилей добавляется селектор, который с помощью :checked отображает div-контейнер, если селектор совпадает:

<style>
.tabcheck:checked + div
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}
</style>
 
<input type=radio class="tabcheck" style="display:none !important;" checked>
<div style="height:0px;max-height:0px;overflow:hidden;">
TABBED CONTENT
</div>

Полное скрытие контента — не идеальный выход из положения. Так что можно еще и извлечь контент первой вкладки и отобразить его по умолчанию, однако завернуть его в div фиксированной высоты с наложением на скрытый контент. Если же активирована вторая вкладка, то контент первой вкладки все еще отображается, но невидим, поскольку вытесняется за пределы видимой части ограниченного по высоте div.

Еще один выход — полностью скрыть вкладки и отображать вместо них отобразить не-интерактивных шаблон (пример описан в этом тексте).

Под спойлером расположен полный код примера (поработать с ним можно на Codepen):

Код примера
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Interactive Tabs for Email</title>
<style>
* { 
  font-family: Helvetica, sans-serif; 
  margin:0;
  padding:0;
}
body {
  -webkit-text-size-adjust:100%; 
}
.tab, .tabcheck {
  display: none;
}
.tabcheck {
  height:0px;
  visibility:hidden;
}  
.title1,.title2,.title3 {
  background-color:#ffffff;
  float: left;
  padding:15px 20px 15px 20px;
  border: 1px solid #888888;
  border-bottom: 0px;
  cursor: pointer;
  border-radius: 5px 5px 0px 0px;
}

.tabcheck:checked + #container {
  height: 363px !important;
  max-height: 363px !important;
}

.tabcheck:checked + div, 
#tab2:checked + span .content2,
#tab3:checked + span .content3
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}

#tab1:checked + span .title1,
#tab2:checked + span .title2,
#tab3:checked + span .title3 {
  background-color:#bbbbbb;
}

/*
 GMAIL [lang] fix
*/

.gfix{}

* [lang=x-title1],
* [lang=x-title2],
* [lang=x-title3]{
  background-color:#ffffff;
  float: left;
  padding:15px 20px 15px 20px;
  border: 1px solid #888888;
  border-bottom: 0px;
  cursor: pointer;
  border-radius: 5px 5px 0px 0px;
}

* [lang=x-tabcheck]:checked + [lang=x-container] {
  height: 363px !important;
  max-height: 363px !important;
}

* [lang=x-tabcheck]:checked + div,  
* [lang=x-tab2]:checked + span [lang=x-content2],
* [lang=x-tab3]:checked + span [lang=x-content3]
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}

* [lang=x-tab1]:checked + span [lang=x-title1],
* [lang=x-tab2]:checked + span [lang=x-title2],
* [lang=x-tab3]:checked + span [lang=x-title3]{
  background-color:#bbbbbb;
}
</style>
</head>
 
<body bgcolor="#ffcc00">
<table width="100%" height="100%">
  <tr>
    <td></td>
    <td bgcolor="#ffcc00">

      <div class="content">
      <table>
        <tr>
          <td>
<form>
<!--[if !mso]><!-- -->
<input type=radio class="tabcheck" lang="x-tabcheck" style="display:none !important;" checked>
<!--<![endif]-->
<div id="container" lang="x-container" style="width:500px;height:310px;max-height:310px;overflow:hidden;">
<!--[if !mso]><!-- -->
<input type=radio class="tabcheck" lang="x-tabcheck" style="display:none !important;" checked>
<div style="height:0px;max-height:0px;overflow:hidden;">
<label><input type=radio name="tab" class="tab" lang="x-tab1"  id="tab1" style="display:none !important;" checked><span><div class="title1" lang="x-title1" >Tab 1</div>

  <!-- NESTED TAB 2 -->
  <label><input type=radio name="tab" class="tab" lang="x-tab2" id="tab2" style="display:none !important;"><span><div class="title2" lang="x-title2">Tab 2</div>

    <!-- NESTED TAB 3 -->
    <label><input type=radio name="tab" class="tab" lang="x-tab3" id="tab3" style="display:none !important;"><span><div class="title3" lang="x-title3">Tab 3</div>
    <div class="content3" lang="x-content3" style="height:0px;max-height:0px;overflow:hidden;clear:left;">
    <table cellpadding="0" cellspacing="0">
      <tr>
      <td colspan="2" height="150" width="500" bgcolor="#bbbbbb" valign=center align=center style="font-size:50px;color:#555555;"><b>Tab 3</b></td>
      </tr><tr>
      <td width="250" height="170" valign="top" style="background: #777777; font-family: Helvetica; font-size: 14px; line-height: 100%; color: #ffffff;"><div style="padding:20px;">
          <H2>Title 3A</H2>
          <p>The quick, brown fox jumps over a lazy dog. 

          <a href="#" style="color: #BDD4FC;">View Deal</a>
          </p>
          </div></td>
      <td width="250" height="170" valign="top" style="background: #555555; font-family: Helvetica; font-size: 14px; line-height: 100%; color: #ffffff;"><div style="padding:20px;">
          <h2>Title 3B</h2>
          <p>The quick, brown fox jumps over a lazy dog. 


          <a href="#" style="color: #BDD4FC;">View Deal</a>
          </p>
          </div></td>
      </tr>
    </table>
    </div></span>
    </label>
    <!-- END NESTED TAB 3 -->

  <div class="content2" lang="x-content2" style="height:0px;max-height:0px;overflow:hidden;clear:left;">
  <table cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="2" height="150" width="500" bgcolor="#bbbbbb" valign=center align=center style="font-size:50px;color:#555555;"><b>Tab 2</b></td>
    </tr>
    <tr>
    <td width="250" height="170" valign="top" style="background: #777777; font-family: Helvetica; font-size: 14px; line-height: 100%; color: #ffffff;"><div style="padding:20px;">
      <H2>Title 2A</H2>
      <p>The quick, brown fox jumps over a lazy dog. 

      <a href="#" style="color: #BDD4FC;">View Deal</a>
      </p>
      </div></td>
      <td width="250" height="170" valign="top" style="background: #555555; font-family: Helvetica; font-size: 14px; line-height: 100%; color: #ffffff;"><div style="padding:20px;">
      <h2>Title 2B</h2>
      <p>The quick, brown fox jumps over a lazy dog. 


      <a href="#" style="color: #BDD4FC;">View Deal</a>
      </p>
      </div></td>
    </tr>
  </table>
  </div>
  </span>
  </label>
  <!-- END NESTED TAB 2 -->

  <!-- TAB 1 Content originally here -->

</span></label>
</div>
<!--<![endif]-->

<!-- TAB 1 Content moved outside nested labels for fallback for non supported clients: Outlook.com/Outlook -->
<table cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="2" height="150" width="500" bgcolor="#bbbbbb" valign=center align=center style="font-size:50px;color:#555555;"><b>Tab 1</b></td>
    </tr>
    <tr>
    <td width="250" height="170" valign="top" style="background: #777777; font-family: Helvetica; font-size: 14px; line-height: 100%; color: #ffffff;"><div style="padding:20px;">
        <H2>Title 1A</H2>
        <p>The quick, brown fox jumps over a lazy dog. 

        <a href="#" style="color: #BDD4FC;">View Deal</a>
        </p>
    </div></td>
    <td width="250" height="170" valign="top" style="background: #555555; font-family: Helvetica; font-size: 14px; line-height: 100%; color: #ffffff;"><div style="padding:20px;">
        <h2>Title 1B</h2>
        <p>The quick, brown fox jumps over a lazy dog.


        <a href="#" style="color: #BDD4FC;">View Deal</a>
        </p>
        </div></td>
    </tr>
</table>
</div>
</form>

          </td>
        </tr>
      </table>
      </div>
                  
    </td>
    <td></td>
  </tr>
</table>


</body>
</html>


Другие материалы о верстке писем в блоге «Печкина»:

Автор: @lol_wat Justin Khoo
Pechkin.com
рейтинг 133,33
Новый инструмент для e-mail маркетинга

Похожие публикации

Комментарии (26)

  • +4
    А зачем использовать интерактивные вкладки в письмах?
    • +3
      Как вариант, для более компактного отображения информации. Понятно, что это средство не на каждый день и не для любой ситуации (я уже в комментах почти к каждому посту это говорю, честно говоря).
      • –4
        троллейбус_из_хлеба.jpg
    • 0
      Об этом вы узнаете в статье: «Зачем использовать интерактивные вкладки в email-письме?»
    • 0
      Я был бы не против, чтобы моя программа бэкапа умела слать письмо с вкладками, по вкладке на каждую задачу. А не как сейчас — 5 писем.
    • 0
      да
  • +3
    Извращения продолжаются, оставьте письма в покое, честное слово. Они не для вашего спама были созданы.
    • 0
      Это так избито, считать все почтовые рассылки спамом, что уже даже не смешно, честное слово.
      • 0
        Ну в вашем случае это уже спам со свистелками и перделками. Не стоит забывать где вы работаете и каким спамом занимается ваша компания. А ваши статьи (переводы) служат только для раскрутки вашей спам компании. Ничего личного.
        • +1
          Хотелось бы, конечно, увидеть, каким спамом занимается наша компания, раз вы такой ужас спамеров, летящий на крыльях ночи. И очень похоже, что все-таки нечто личное тут присутствует.
          • 0
            Специально для вашей чудесной компании. Чтобы все знали кто есть кто:

            Самая малость ваших гребаных рассылок
            78.30.8.140 125.3 bounce_260268+17117=domain.com@pechkinmails.com 17117@domain.com Грандиозное_поступление_втулок_на_склад
            78.30.1.116 125.6 bounce_151292+27013=domain.com@pechkinmails.com 27013@domain.com Выключатели_пакетные_ПВ
            78.30.8.140 126.3 bounce_260268+17117=domain.com@pechkinmails.com 17117@domain.com Гидрораспределители_WALVOIL
            78.30.4.202 123.8 bounce_260268+17117=domain.com@pechkinmails.com 17117@domain.com Аналог_гидронасоса_OMFB_DARK-52_(108-005-05225)
            77.236.132.161 111.7 bounce_715+70893=domain.com@pechkinsender.net 70893@domain.com Торопитесь!_1_февраля_Конец_распродажи!
            77.236.150.60 212.7 bounce_293881+direktor=domain.com@pechkinsender.com direktor@domain.com Сертификация_вашей_продукции
            77.236.150.161 115.1 bounce_290659+lov=domain.com@pechkinsender.com lov@domain.com Приглашение
            78.30.1.154 102.1 bounce_236172+lov=domain.com@pechkinmails.com lov@domain.com семинар_ЖКХ,_новости_по_ТСЖ
            78.30.8.177 110.6 bounce_169690+lov=domain.com@pechkinmails.com lov@domain.com 9_из_10_должников_оплачивают_в_течение_2_дней
            77.236.154.141 109.1 bounce_236172+lov=domain.com@pechkinsender.com lov@domain.com Новые_разъяснения_Минстроя_РФ_по_ОДН
            78.30.8.191 110.6 bounce_236895+press=domain.com@pechkinmails.com press@domain.com Как_работать_в_условиях_постоянного_вызова_
            77.236.150.94 110.6 bounce_236172+lov=domain.com@pechkinsender.com lov@domain.com Обзор_судебной_практики_по_ЖКХ


            маски для ваших гребаных писем
            *pechkinmails*
            *pechkin-newbie*
            *pechkinnewbie*
            *pechkinsender*
            *pechkintrust*


            Ваши гребаные сервера
            77.236.129.32 # mail-129-32.pechkinsender.org
            77.236.129.81 # mail-129-81.pechkinsender.org
            77.236.129.134 # mail-129-134.pechkinsender.com
            77.236.129.169 # mail-129-169.pechkinsender.com
            77.236.129.171 # mail-129-171.pechkinsender.com
            77.236.129.190 # mail-129-190.pechkinsender.com
            77.236.129.198 # mail-129-198.pechkinsender.com
            77.236.129.216 # mail-129-216.pechkinsender.com
            77.236.129.219 # mail-129-219.pechkinsender.com
            77.236.132.31 # mail-132-31.pechkinsender.net
            77.236.132.50 # mail-132-50.pechkinsender.net
            77.236.132.69 # mail-132-69.pechkinsender.net
            77.236.132.89 # mail-132-89.pechkinsender.net
            77.236.132.118 # mail-132-118.pechkinsender.net
            77.236.132.155 # mail-132-155.pechkinsender.net
            77.236.132.161 # mail-132-161.pechkinsender.net
            77.236.132.186 # mail-132-186.pechkinsender.net
            77.236.132.224 # mail-132-224.pechkinsender.net
            77.236.132.235 # mail-132-235.pechkinsender.net
            77.236.132.244 # mail-132-244.pechkinsender.net
            77.236.135.58 # mail-135-58.pechkinsender.net
            77.236.135.64 # mail-135-64.pechkinsender.net
            77.236.135.67 # mail-135-67.pechkinsender.net
            77.236.135.101 # mail-135-101.pechkinsender.net
            77.236.135.116 # mail-135-116.pechkinsender.net
            77.236.135.124 # mail-135-124.pechkinsender.net
            77.236.141.5 # mail-141-5.pechkinsender.com
            77.236.141.9 # mail-141-9.pechkinsender.com
            77.236.141.16 # mail-141-16.pechkinsender.com
            77.236.141.25 # mail-141-25.pechkinsender.com
            77.236.141.32 # mail-141-32.pechkinsender.com
            77.236.141.113 # mail-141-113.pechkinsender.com
            77.236.141.145 # mail-141-145.pechkinsender.com
            77.236.141.161 # mail-141-161.pechkinsender.com
            77.236.141.162 # mail-141-162.pechkinsender.com
            77.236.141.166 # mail-141-166.pechkinsender.com
            77.236.141.178 # mail-141-178.pechkinsender.com
            77.236.141.182 # mail-141-182.pechkinsender.com
            77.236.141.202 # mail-141-202.pechkinsender.com
            77.236.141.211 # mail-141-211.pechkinsender.com
            77.236.141.220 # mail-141-220.pechkinsender.com
            77.236.150.51 # mail-150-51.pechkinsender.com
            77.236.150.60 # mail-150-60.pechkinsender.com
            77.236.150.99 # mail-150-99.pechkinsender.com
            77.236.150.109 # mail-150-109.pechkinsender.com
            77.236.150.120 # mail-150-120.pechkinsender.com
            77.236.150.161 # mail-150-161.pechkinsender.com
            77.236.150.211 # mail-150-211.pechkinsender.com
            77.236.150.213 # mail-150-213.pechkinsender.com
            77.236.150.226 # mail-150-226.pechkinsender.com
            77.236.154.11 # mail-154-11.pechkinsender.com
            77.236.154.35 # mail-154-35.pechkinsender.com
            77.236.154.45 # mail-154-45.pechkinsender.com
            77.236.154.117 # mail-154-117.pechkinsender.com
            77.236.154.122 # mail-154-122.pechkinsender.com
            77.236.154.141 # mail-154-141.pechkinsender.com
            77.236.154.150 # mail-154-150.pechkinsender.com
            77.236.154.162 # mail-154-162.pechkinsender.com
            77.236.154.208 # mail-154-208.pechkinsender.com
            78.30.1.9 # mail-1-9.pechkinmails.com
            78.30.1.36 # mail-1-36.pechkinmails.com
            78.30.1.53 # mail-1-53.pechkinmails.com
            78.30.1.80 # mail-1-80.pechkinmails.com
            78.30.1.116 # mail-1-116.pechkinmails.com
            78.30.1.154 # mail-1-154.pechkinmails.com
            78.30.1.173 # mail-1-173.pechkinmails.com
            78.30.1.174 # mail-1-174.pechkinmails.com
            78.30.1.249 # mail-1-249.pechkinmails.com
            78.30.4.10 # mail-4-10.pechkinmails.com
            78.30.4.17 # mail-4-17.pechkinmails.com
            78.30.4.56 # mail-4-56.pechkinmails.com
            78.30.4.77 # mail-4-77.pechkinmails.com
            78.30.4.151 # mail-4-151.pechkinmails.com
            78.30.4.152 # mail-4-152.pechkinmails.com
            78.30.4.158 # mail-4-158.pechkinmails.com
            78.30.4.164 # mail-4-164.pechkinmails.com
            78.30.4.193 # mail-4-193.pechkinmails.com
            78.30.4.202 # mail-4-202.pechkinmails.com
            78.30.4.226 # mail-4-226.pechkinmails.com
            78.30.4.233 # mail-4-233.pechkinmails.com
            78.30.4.235 # mail-4-235.pechkinmails.com
            78.30.4.237 # mail-4-237.pechkinmails.com
            78.30.8.31 # mail-8-31.pechkinmails.com
            78.30.8.37 # mail-8-37.pechkinmails.com
            78.30.8.67 # mail-8-67.pechkinmails.com
            78.30.8.97 # mail-8-97.pechkinmails.com
            78.30.8.99 # mail-8-99.pechkinmails.com
            78.30.8.119 # mail-8-119.pechkinmails.com
            78.30.8.129 # mail-8-129.pechkinsender.com
            78.30.8.140 # mail-8-140.pechkinmails.com
            78.30.8.158 # mail-8-158.pechkinmails.com
            78.30.8.177 # mail-8-177.pechkinmails.com
            78.30.8.191 # mail-8-191.pechkinmails.com
            78.30.8.200 # mail-8-200.pechkinmails.com
            78.30.8.208 # mail-8-208.pechkinmails.com
            78.30.8.234 # mail-8-234.pechkinmails.com
            78.30.8.253 # mail-8-253.pechkinmails.com
            78.30.50.10 # mail-50-10.pechkinsender.com
            184.173.105.66 # mail-p3.mailpechkin.ru
            184.173.105.67 # mail-p4.mailpechkin.ru
            184.173.153.175 # mail-p1.mailpechkin.ru
          • 0
            Я наблюдаю ваш гребаный спам уже 5 лет. И SpamAssassin ждет его с нетерпением:

            *pechkinmails*
            *pechkin-newbie*
            *pechkinnewbie*
            *pechkinsender*
            *pechkintrust*
            *.mailsoft.org
            *.mailopost.ru

            Займитесь уже чем-то полезным.
    • –1
      Вне зависимости от Вашего или моего желания спама больше или меньше не будет. А вот возможность более удобного представления информации, описанная здесь, может быть кому то полезной.
  • –4
    Сколько можно писать одно и то же на разных сайтах?.. Хотя бы рерайт давайте.
    Ссылка: http://spark.ru/startup/pechkin-mail/blog/11121/kak-sverstat-interaktivnie-vkladki-v-email-pisme
    • –2
      Григорий, в правилах Хабра нет запрета на копирование материалов с сайта на другие площадки. Здесь материал появился первым, то есть это не копипаст, правил мы не нарушаем. Собственно, вам уже там все ответили по вашей ссылке — многие проекты потом репостят свои статьи в блог на Спарке, а напрягаться только ради него одного никто не будет, пока там почти нет просмотров.
  • 0
    Ну и гифки у вас на главной. Успел подумать, что у меня мышка сломалась.
  • +1
    Может быть, для маркетинга эта фишечка и хороша, или для «поиграться». Но в долгосрочной перспективе не практично.
    Представьте случай, когда вы рассылаете полезные письма, и через некоторое время клиенту нужно что-то найти в старых рассылках. Как будет работать поиск по письму при поиске текста на второй вкладке? Текст вроде бы найден, в списке результатов находится, но визуально в письме его нет. Не думаю, что клиенты будут переключать закладки за вас.
    • 0
      Тут даже вопрос не в поиске. Вопрос в том, что мало кому в голову придёт покликать на этих вкладках, воспримут как элемент оформления и всё. Пользователь просто не ожидает от емейла интерактивности.
      • 0
        Думаю, не более чем дань моде. Вкладки — обычный, общепринятый способ структурирования. В емайлах пока не принят, но и в браузерах его когда то не было. Представьте, я застал дискуссии: «нужны ли вкладки в браузере, когда это так неудобно».

        У меня есть примеры (см. выше), где я был бы не против получать письма со вкладками.
        • +1
          Дело не в том, нужны вкладки в письме или нет (хотя я лично считаю что не очень), дело в том, что всё что находится во вкладках, имеет огромную вероятность никогда не быть просмотренным пользователем.
          И аналогия с вебом и браузером неуместна, вероятность того что вкладки станут обычным элементом интерфейса письма исчезающе мала.

          Единственное применение этим вкладкам что я вижу — это разнообразные корпоративные рассылки, когда некоторое количество пользователей привыкает к этому способу взаимодействия в емейлах.
      • 0
        Ну, то что отдельные пользователи не ожидают интерактивности от E-mail'а — это проблема отдельных пользователей…
        А вообще то это много где может пригодиться. Например, пользователь запускает долгоиграющую вычислительную задачу на сервере, а по окончании вычислений получает письмо с результатом на свой E-mail. С графиками, табличками, поясняющим текстом и прочими плюшками. Что плохого в том, что информация будет как то структурирована, а не будет представлена в виде простыни, как лет двадцать тому назад пользователи получали распечатку вычислений на рулоне бумаги длиной в несколько метров.
        • 0
          Зачем генерировать письмо, которое аппириори ограничено по функциональности, вместо html страницы? Она откроется в привычной новой вкладке, на весь экран, а не в малеьком окошке почтовика.
          • 0
            Ну, например, затем, чтобы сохранить результаты счёта. Если Вы запустите на выполнение счётную задачу 10 раз с разными параметрами и захотите сравнить 5 и 8 результаты, то письма открыть легко. А вот как быть со страничками результатов? Последующие затирают предыдущие. Можно, конечно, хранить все результаты на сервере. Только есть задачи, где 99.99% результатов — это мусор и хранить его на сервере: «не есть хорошо».
            А вот, что есть хороший результат, а что есть мусор, легко может решить для себя сам пользователь. В случае надобности он сам свой ящик почистит.

            P.S. Не понял насчёт

            а не в малеьком окошке почтовика.


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

          Структурировать инфу можно и без вкладок, так чтобы пользователь не решал ребусы. Что плохого в простыне и чем она проигрывает вкладкам — неизвестно.

          Нет, я понимаю что можно придумать случаи, когда такое может пригодиться, но из реальных, а не подогнанных под нужный результат случаев, что-то в голову ничего не приходит.
  • +1
    Вот дичь.
  • +2
    Пожалуйста, не надо :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка