Газовые пружины suspa 16-2

Test cases

Resize your browser or load on different devices to test the responsive utility classes.

Green checkmarks indicate the element is visible in your current viewport.

Visible on extra small
Extra small

Visible on small or narrower
Small or narrower

Visible on medium or narrower
Medium or narrower

Visible on large or narrower
Large or narrower

Visible on small or wider
Small or wider

Visible on medium or wider
Medium or wider

Visible on large or wider
Large or wider

Visible on extra large
Extra large

Your viewport is exactly extra small
Your viewport is NOT exactly extra small

Your viewport is exactly small
Your viewport is NOT exactly small

Your viewport is exactly medium
Your viewport is NOT exactly medium

Your viewport is exactly large
Your viewport is NOT exactly large

Your viewport is exactly extra large
Your viewport is NOT exactly extra large

Предисловие

В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства. Однако, возникают некоторые нюансы при просмотре – для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.

Основные отличия

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

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

Медиазапросы

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

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

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

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

Современные браузеры имеют обширный перечень современных смартфонов и планшетов для моделирования просмотра на конкретном устройстве.

Ниже представлено отображение этого сайта в режиме устройства в браузере Chrome:

Резиновая сетка (fluid grid).

Во первых…

Сетка (в дизайне) — разделение макета на вертикальные и/или горизонтальные направляющие.

Резиновая сетка — разделение HTML-страницы на вертикальные (реже и горизонтальные) направляющие, меняющие свои параметры (ширина, отступы) в зависимости от параметров экрана.

Расчет проізводітся следуюўім образом:

ШиринаЭлемента / ШиринаРодителя = РезультатВПроцентах

Например для макета:

1000px и двумя колонками 200px и 600px.

.leftColumn {
    float: left;
    width: 20%; /* 200 / 1000 = 0.20 */
}
.contentColumn {
    float: right;
    width: 80%; /* 800 / 1000 = 0.80 */
}

Разделение колонки contentColumn на 2 колонки 500px и 300px:

.innerColumn {
    float: left;
    width: 62.5%; /* 500 / 800 = 0.625 */
}
.rightColumn {
    float: right;
    width: 37.5%; /* 300 / 800 = 0.375 */
}

Первый способ адаптации

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div class="table-wrap">
  table>
   thead>
     tr>
       th>Услугаth>
       th>Описаниеth>
       th>Ценаth>
       th>Скидкаth>
     tr>
   thead>
   tbody>
     tr>
       td>Мобильная версткаtd>
       td>Верстка под телефоныtd>
       td>$3000td>
       td>50%td>
     tr>
     tr>
       td>Посадка на CMS WordPresstd>
       td>Создание сайта с админ. панельюtd>
       td>$3000td>
       td>30%td>
     tr>
   tbody>
 table>
div>  
Услуга Описание Цена Скидка
Мобильная верстка Верстка под телефоны $3000 50%
Посадка на CMS WordPress Создание сайта с админ. панелью $3000 30%

Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap).

1
2
3
4
5
6
7
8
9
10
11
12
13
.table-wrap {
  text-align center;
  display inline-block;
  background-color #fff;
  padding 2rem 2rem;
  color #000;
}
 
@media screen and (max-width: 600px) {
  .table-wrap {
    overflow-y scroll;
  }
}
.table-wrap {
  text-align: center;
  display: inline-block;
  background-color: #fff;
  padding: 2rem 2rem;
  color: #000;
}

@media screen and (max-width: 600px) {
  .table-wrap {
    overflow-y: scroll;
  }
}

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом.
Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Как сделать адаптивный дизайн сайта из фиксированного макета

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

  1. Первым делом делаем резервную копию шаблона (темы), на всякий случай.
  2. Далее нам потребуется программа для редактирования css, это может быть любой редактор кода, например brackets от adobe он бесплатный или Notepad++.
  3. А также браузер google chrome, с его инспектором кода (вызывается клавишей F12).

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

Далее нам необходимо перевести все статические единицы измерения в относительные единицы измерения.

Таковыми являются px, необходимо перевести их в %, а шрифты задать в em. В основном это касается ширин и шрифтов.

Ширину основного контейнера wraper {max-width: 960px;} оставляем без изменения, если записано width измените на max-width. Для остальных контейнеров будем менять ширину на % отношение. Переводить мы будем по формуле:

Например, статичный контейнер тела сайта 720px размер основного контейнера (его родителя), к примеру, стандартный 960px, тогда получим следующее 720/960*100=75% .

Таким образом, мы переведем нашу статичную верстку в резиновую. Далее переведем наши шрифты, если они в px в em для этого опять же воспользуемся формулой:

Например, размер шрифта 32рх, тогда 32/16=2em.

После чего сделаем наши изображения адаптивными. Для этого в css пропишем следующие свойства и значения.

CSS

img {
max-width:100%;
height: auto;
}

1
2
3
4

img {

max-width100%;

heightauto;

}

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

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

Ну, вот наша с вами основа готова, теперь необходимо определить контрольные точки, в которых макет будет перестраиваться, продумать, как будут вести себя блоки, что будем скрывать и записать это все в медиа – запросы. Определять эти самые переломные точки мы будем при помощи браузера google chrome.

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

Определив первую переломную точку, запишем ее в файл style.css в самый конец после всех основных стилей. Допустим наш макет, имеет левый сайдбар и контентную часть с анонсами, и при 910px сайт начинает отображаться не корректно. В данном случае мы запишем следующий медиа запрос.

CSS

@media only screen and (max-width: 910px) {
/* контентную часть мы делаем во всю ширину, отменяем выравнивание*/
section {
width: 100%;
float: none;
}
/* сайдбар мы делаем также во всю ширину, отменяем выравнивание*/
aside {
width: 100%;
float: none;
}
}

1
2
3
4
5
6
7
8
9
10
11
12

@media only screen and (max-width: 910px) {

/* контентную часть мы делаем во всю ширину, отменяем выравнивание*/

section {

width100%;

floatnone;

}

/* сайдбар мы делаем также во всю ширину, отменяем выравнивание*/

aside {

width100%;

floatnone;

}

}

Если у этих блоков есть какие-то отступы (margin, padding) их следует, либо обнулить, либо учесть при написание ширины. К примеру, padding: 2%;  тогда ширину запишет следующим образом width: 96%;.

Таким образом, мы адаптировали наш макет на разрешение меньше 910px. Если окно браузера будет меньше 910px, то контент станет во всю ширину, а сайдбар отпустится под контентную часть и станет также во всю ширину.

По такому же принципу мы создаем и остальные контрольные точки, находим ширину, при которой макет ломается (смотрится не корректно) записываем медиа – запрос, формируем для него стили задаем ширину блоков, можем скрыть менее важные блоки (display: none).

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

Адаптивная верстка писем. Прочие элементы и приёмы

Невидимый прехедер

Практически все веб-интерфейсы выводят рядом с темой письма также и первый текст:

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

Для этого следует добавить в самое начало html-тела письма код со следующей структурой:

Использование невидимого прехедера может негативно сказаться на доставляемости, поэтому используйте данный приём аккуратно и тщательно следите через постмастер за доставляемостью.

Видео в письмах

С выходом iOS 10 стандартный почтовый клиент Mail вновь стал воспроизводить html5-видео, однако оптимальный вариант вставки видео в письмо — прямая ссылка на youtube-видео, поставленная на изображение.

При такой реализации видео отобразится на слое в веб-интерфейсах Mail.ru (около 55%) и Gmail (около 14%). При этом на большинстве мобильных устройств видео будет открыто в приложении Youtube, без открытия браузера.

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

Размеры макетов адаптивного дизайна

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

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

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

Features

  • Responsive layout (desktops, tablets, mobile devices)
  • Built with new Bootstrap 3.3.7
  • Flat UI with clean aesthetic style
  • Boxed View, Fluid view
  • HTML5 & CSS3
  • Responsive video
  • 7 different charts libraries
  • Animations CSS3
  • Various styles of tables
  • Well structured code
  • Drop zone file upload
  • Forum view
  • Truncate feature
  • Two timeline design
  • Google maps
  • Datamaps
  • Markdown
  • Agile Board
  • Copy to clipboard
  • Outlook view
  • Blog view
  • Social feed
  • Tour feature
  • Code editor
  • Foo table
  • Vote list page
  • Small chat
  • Customized modal view
  • Nestable list
  • Validation
  • Landing page
  • PDF viewer
  • SeedProject for all version
  • Loading buttons
  • Mailbox
  • File manager
  • i18 support
  • Masonry
  • Teams board
  • Slick carousel
  • Off canvas menu
  • Metrics/Analytic view
  • Tag input
  • Right sidebar
  • Custom Material Design Skin
  • Pin board with yellow notes
  • Invoice
  • Diff feature
  • Dual select
  • Idle timer
  • User profile
  • Widgets page
  • Ecommerce
  • Clock picker
  • Project detail
  • Form validation
  • Credit card form
  • Projects list
  • Shoping cart view
  • FAQ view
  • Calendar view
  • Gallery view
  • c3 charts
  • Local storage
  • Autocomplete
  • Lock screen view
  • Login, register, error pages
  • Draggable panels
  • and many more…

Основные понятия

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

Что представляет из себя отзывчивый веб-дизайн (responsive web design)? Это прежде всего гибкая, или по другому «резиновая» сетка макета вашего сайта основаная на относительных единицах измерения, которая позволяет использовать один макет для разного типа устройств, гибкие изображения и видеоматериалы, и медиазапросы.

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

Следующая важная тема этой статьи и CSS в целом — это медиазапросы, они позволяют отправлять браузеру различные стили в зависимости от определенных условий, например, таких как тип устройства, разрешение, ориентация и тому подобное.

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

И так, адаптивный веб-дизайн (adaptive web design) включает в себя гибкую сетку макета сайта, гибкие изображения и видеоматериалы, медиазапросы и прогрессивное улучшение (progressive enhancement).

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

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

Какие бывают типы HTML-макетов сайтов?

Для начала небольшая ремарка. В этой конкретной статье, HTML-макетами мы будем называть готовые сверстанные HTML-страницы, а не PSD-макеты.

Я рассмотрю фиксированные, резиновые, адаптивные, отзывчивые и смешанные HTML-макеты. В конце подведу итог.

Фиксированные макеты (static, fixed)

Фиксированный или статичный HTML-макет — такой макет сайта, у которого ширина контента страницы является строго зафиксированной в пикселях. Ширина не зависит и не меняется вслед за изменением размеров окна браузера.

В 2016 году считается, что такие макеты — пережитки прошлого. Раньше, когда веб-технологии еще не получили достаточного развития, ширина вебстраниц была продиктована разрешением популярных экранов устройств пользователей: 800х600, 1024х768, 1200х800 и так далее.

Даже сейчас можно встретить фиксированную ширину макетов сайтов, скажем, в 960 пикселей. Такой макет можно было бы использовать 10 лет назад, но сейчас…

Резиновые макеты (liquid)

Резиновый или тянущийся («жидкий» от англ. liquid) макет — такой макет сайта, при котором контент сайта может принимать размер любого экрана пользователя. Достигается это за счет того, что величины структурных элементов сайта выражаются не в абсолютных показателях (px), а в относительных (%). Т.е., допустим, ширина элемента в css так и прописывается: не 560px, а 50%.

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

Адаптивные макеты (adaptive)

Не путайте с адаптивным веб-дизайном, позже я объясню почему и покажу разницу.

Адаптивный макет базируется на использовании медиа запросов css (css media queries) — так контент адаптируется под разные экраны.

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

Т.е. несколько контрольных точек задают фиксированное положение и размеры контента на разных экранах.

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

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

Тем не менее, этот подход хорош и актуален, если критические точки обуславливаются дизайном самой страницы, а не шириной устройств наиболее часто встречающихся у посетителей сайта.

Отзывчивые макеты (responsive)

В данной классификации макетов, отзывчивые макеты идут еще дальше адаптивных: используют «резину» вместо статики — «%» вместо «px».

Т.е. мы также расставляем контрольные точки при помощи медиа-запросов, но приспособление контента к этим контрольным точкам идет в относительном выражении (процентах), а не абсолютном (пикселях).

Таким образом, некогда «прыгающие» резиновые и адаптивные страницы больше так не делают. Отзывчивый макет плавно изменяется между контрольными точками.

Смешанные макеты (adaptive + responsive)

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

Число контрольных точек увеличивается, для задания величины элементов используются то пиксели, то проценты — по необходимости.

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

Иногда такой подход используется для адаптации и оптимизации существующего макета под мобильные устройства. В этом случае его называют «mobile last».

Итог

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

Вот о веб дизайне и поговорим. Сначала об отзывчивом, потом о «mobile first» и концепции постепенного улучшения, потом об адаптивном веб-дизайне.

Ну и в самом конце отвечу на некоторые вопросы об адаптивных макетах сайтов.

Адаптивная верстка на примере конкретного письма

=»ltr»>Мы будем использовать резиновые таблицы с заданной максимальной шириной в пикселях и специальные комментарии (conditional comments) для Outlook, так как свойство (max-width) этот почтовый клиент «не понимает».

Этап 1. Готовим основу

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

Основная таблица с ограничением максимальной ширины:

Товары по акции

Затем добавляем стили в инлайн. Стили для текста помещаем внутри тега td или любых блочных элементов, типа h1-h6, p, div. На примере выглядит так:

Добавляем специальные комментарии для Outlook:

Товары по акции

Добавляем резиновую картинку, которая растягивается на всю ширину ячейки:

Получаем:

Делаем две колонки, которые съедут одна под другую на мобильных устройствах:

               
               

                 

Товар № 1 — 990 рублей

               
               

                 

Товар № 2 — 990 рублей

               
               

В стандартном состоянии они выглядят так:

Если хотим, меняем порядок колонок в столбце. Так, чтобы сверху оказалась правая, а ниже — левая. Параметр dir:

               
               

                 

Товар № 2 — 990 рублей

               
               

                 

Товар № 1 — 990 рублей

               
               

Смотрим на примере:

Таким способом можно добавлять сколько угодно колонок. Например, пять:

               
               

                 

Товар № 1 — 990 рублей

               
               

                 

Товар № 2 — 990 рублей

              
               

                 

Товар № 3 — 990 рублей

               
               

                 

Товар № 4 — 990 рублей

               
               

                 

Товар № 5 — 990 рублей

               
               

Те самые пять колонок:

Этот способ позволяет выровнять блоки-колонки относительно друг друга как по вертикали (vertical-align:top;), так и по горизонтали (text-align:center;).

Этап 2. Работаем с текстом  

Отредактируйте текст в Типографе. Замените кавычки, тире и другие символы на специальные коды — иначе они могут отобразиться некорректно. С помощью типографа избавьтесь от висячих предлогов и добавьте неразрывные пробелы.

Если хотите подключить красивые веб-шрифты от Гугла, добавьте в

Не забудьте прописать стиль для текста:

текст

И добавить в него специальные комментарии для Outlook:

Если вы этого не сделаете, то Outlook заменит неизвестный ему шрифт на свой любимый Times New Roman. Учитывайте, что «красивые шрифты», как и медиа-запросы, работают не всегда. Если не хотите рисковать, — используйте «безопасные» семейства шрифтов: Arial, Verdana, Times New Roman и прочую «классику».

Этап 3. Вставляем картинки

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

Не забывайте добавлять к картинкам свойство «display:block;». Если вы этого не сделаете, то в Gmail, Mail.ru и других почтовых клиентах появятся 2-3-пиксельные вертикальные отступы, они не нужны.

Этап 4. Вставляем разделители

Присвойте td или любому блочному элементу стиль «border-top: 1px solid #eeeeee;» или «border-bottom: 1px solid #eeeeee;».

Этап 5. Добавляем кнопку

Стандартное адаптивное письмо готово:

Чтобы отшлифовать и довести верстку до совершенства — добавьте медиа-запросы. Так вы решите проблемы с отступами и размерами шрифтов на мобильных и скроете второстепенные элементы, которые в мобильной версии не нужны.

Ссылка на основную публикацию