Резиновая верстка – Резиновая верстка — линейная зависимость горизонтального положения DIV-ов / Habr

Содержание

Всегда ли нужна «резиновая» верстка? / Habr

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

На написание этого текста меня натолкнули постоянные споры, возникающие за время моей практики как веб-дизайнера. Собственно, первый раз мне пришлось столкнуться с «резиновыми сайтами» благодаря прихоти заказчика. Когда дизайн проекта был полностью готов, а сам сайт сверстан и подключен, заказчик спросил: «А почему он не растягивается?». Было это достаточно давно, но этот вопрос я слышу примерно раз в 4-5 месяцев. О «резиновой» верстке сайтов говорили и писали много. Говорили что она обязательна, и наоборот, что использование ее ошибка. Однозначно, были причины возникновения резиновости. И утверждать, что использование этой технологии на 99% ошибочно, однозначно нельзя. Любую технологию нужно применить, если она нужна. Я хочу очертить примерную границу применения резиновой верстки.

ЗАРОЖДЕНИЕ.

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

Чтобы понять задачи, решаемые резиновостью, стоит начать с истории её возникновения.

Первые сайты с подстраивающейся к размеру экрана версткой (резиновые) появились в период исчезновения мониторов с разрешением 640-480, активного использования разрешения 800-600 и первыми представителями 1024-768. Стоит признать, что площадь 640-480 и 800-600 мала для полноценного восприятия информации. А еще и навигация, и банер повесить надо (в те времена они были эффективнее). Растянув наш сайт в 1,6 раза по горизонтали, мы хоть как то приблизим формат сайта к хорошо воспринимаемому всеми формату листа А4. Сделаем тем самым огромное одолжение владельцам новеньких дорогих «больших» мониторов. Тем более, что мы растягиваем не только элементы по странице, но еще и текстовые блоки, которые уменьшаются по высоте, а это иногда убирает скрол! (а это пикселей 30!). Выгоды очевидны!

Получается, главная задача «резиновости» — дать необходимое пространство для контента, не ущемив достоинство владельцев стареньких мониторов.

Так как мы рассматриваем «резиновую» верстку в наше время, стоит обратить внимание на современный парк мониторов. а это (если забыть про нетбуки) от 1024 х 768 и до 2048 х 1152. Математически, мы получаем разницу в 2 раза, что не намного больше чем лет 10 тому назад.

Соотношение размеров между большими и маленькими мониторами почти сохранилось, сохранились ли ставящиеся перед дизайнерами задачи?

КАК ОНО РАБОТАЕТ.

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

1. Текстовые блоки хорошо поддаются растяжению по горизонтали. Они несут, порою, до 90% всей информации на сайте (а значит, их много! Есть что тянуть!). Но бесконечно растягивать их просто нельзя. Наше внимание имеет определенный запас «усидчивости». Если текстовая строка становится слишком длинной, нам просто тяжело ее читать — мы устаем. Недаром, в газетах используют ограничения по ширине текстового блока примерно в 50-55 знаков, а это, даже при увеличенном межбуквенном расстоянии, меньше половины ширины листа А4. Вообще, самой оптимальной длинной строки для быстрого и удобного чтения считается 45 знаков. Минимум тоже есть, это порядка 20-25 знаков. То есть, текстовый блок может быть увеличен от минимума до удобочитаемого максимума не более чем в 2 раза. Разбивать один текст на несколько колонок, как в газете, не рекомендуется. Потому что когда мы просматриваем текст, скролируя сверху вниз, возвращаться наверх в начало второй колонки будет крайне неудобно. Исходя из этого, если текст это основной блок страницы, то мы не можем ее растягивать даже до 900 px! А лучше меньше.

2. Расстояние между различными элементами сайта. При должном уровне навыков, эти области сайта поддаются масштабированию, казалось бы, без потерь. Но есть одно «Но». Дело в том, что «пустое пространство» это не просто «довесок» на страничке. Промежутки между блоками выполняют вполне конкретные задачи: разделяют, группируют схожие блоки, создают акцент на самом важном. Все эти задачи решаются разницей размеров пробелов. например, несколько блоков, разделенных небольшими промежутками, визуально воспринимаются как родственные, или имеющие одинаковую ценность. Блок, имеющих вокруг себя много свободного пространства однозначно ценный, возможно, главный на странице.

Если исходить только из разницы размеров блоков, то совершенно не имеет значение насколько мы их растянем, ведь они будут растягиваться пропорционально. Вроде бы, они все должны справляться со своими задачами… Но тут появляется очередное «Но». Дело в том, что промежутки еще имеют и свой «характер». Возможно, кому-то, далекому от сферы дизайна, это покажется несущественным, но я напомню вам о работе танцора, музыканта, певца. Непрофессионал-танцор может выполнять те же движения что и мастер, музыкант-новичок будет играть по тем же нотам, певец будет петь ту же песню. Мы будем узнавать произведение, но мы скорее всего почувствуем разницу. Если сделать промежутки между родственными блоками в 5 мм, они будут восприниматься как родственные, но если мы их растянем до 10-15 мм, то они начнут безвозвратно разделять «родственников». И ситуацию не спасет даже то, что пропорционально это самый маленький на странице промежуток.

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

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

4. Растровые картинки при растяжении дают искажения и муар при растягивании в одном направлении. Но можно изменять размер всего изображения, сохраняя пропорции. Либо можно менять размер «окна» картинки, сохраняя ее истинный размер. Увеличивать размер картинок нужно в случаях когда эти картинки нужно показывать в максимально большом размере, например в фотосервисах, в портфолио дизайнеров и фотографов… Однако, так или иначе, это сопряжено с дополнительными техническими усложнениями.

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

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

Кроме чисто художественных аспектов и законов восприятия информации, есть еще проблема «уставания» нашего глаза. Отчасти, это затрагивается выше в санитарных нормах для текстовых блоков. Не буду уходить в цифры. Простой пример: мало кто станет вешать на рабочем месте лист с важной информацией по текущему проекту за спину или сбоку от себя, частенько наброски, схемы и записки вообще клеят в районе монитора. Чем дальше мы бегаем взглядом, тем быстрее мы устаем. В масштабах экрана это кажется менее существенным. Но чтобы рассмотреть 2 разные картинки у левого и правого края 22 дюймового монитора, нам уже приходиться чуть повернуть голову, мониторы уже стали слишком большие для движения только лишь глазами. Через 4-5 часов сетевого серфинга у пользователя достаточно расфокусируется внимание, чтобы на вашем растянутом сайте ему стало трудно найти нужную информацию.

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

ЧТО ИМЕЕМ.

Дизайнеры по прошествии 10 лет все еще решают проблему нехватки рабочего пространства, и решают ее использованием «резиновой верстки», растягивающей все имеющиеся материалы по экрану монитора. Но наши мониторы давно переступили черту нормального восприятия! С этим можно не соглашаться просматривая очередное продолжение саги «STAR WARS» или играя в одноименный шутер. Картинка фильма и игры похожи на то, что мы видим нашими глазами в жизни. В нем очень много лишней информации, даже максимально эффективный угол нашего зрения всего 5°. За счет уменьшенного угла мозг разгружается от лишней информации. Нас не интересуют все детали, а лишь картина в общем. А невоспринимаемое пространство создает лишь дополнительный «антураж» — зеленая масса леса, толпа… Прибавьте к этому факт, о том что лучше всего мы воспринимаем именно центр экрана, и нам крайне неудобно изучать что либо на краях… А страничка сайта это детали, тексты, анонсы и навигация. Да, можно заставить искать человека это все по большому экрану. И как правило, он находит. Человек может читать текст даже в нижнем правом углу экрана 9-м кеглем. Только это происходит ценой дополнительных усилий зрения и внимания, хоть и небольших на первый взгляд. Присоедините к этому лишние часы работы верстальщика и дизайнера на разработку этого типа верстки.

Стоит заметить, очень многие дизайнеры пришли к выводу, что тянуть бесконечно контент нельзя, точно так же как и сжимать. Понимание этого породило «полу-резиновость». Если человеку достаточно комфортно воспринимать информацию на 900 px ширины (немного больше ширины листа А4), то ради решения какой задачи ее растягивать до 1100 px? И это при том, что даже минимальное разрешение современных мониторов укладывается в ширину 1024 px, а значит, и сжимать не придется.

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

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

Частенько можно услышать про «законы веба», вроде как они не имеют ничего общего с типографическими правилами. Однако, главное в типографии — подача печатного текста. А до тех пор, пока видео и звук не заменили текст (который составляет гораздо больше 50% контента сайтов), а мы все еще видим биологическими глазами, было бы глупо отказываться от исследований и опыта, накопленного за несколько сотен лет типографии. Тем более, что текст на мониторах из-за низкого разрешения гораздо хуже печатного (72 dpi против 200 dpi и более), да и сами мониторы не способствуют отдыху глаз.

Для тех, кто сомневается в реальности проблем восприятия, предлагаю посмотреть 4 варианта размещения текстов тут: nano.a5.ru

ОПРАВДАНИЕ.

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

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

Делайте только резиновые сайты = Делайте только сайты красного (зеленого, синего, оранжевого, и т.д.) цвета!

P.S.
Думаю, многим приходилось натыкаться на фразы типа: «Хороший дизайнер должен уметь делать правильную резину!». На мой взгляд, куда важнее умение правильно выбрать: резина или нет?

Разница между фиксированной, резиновой, адаптивной и отзывчивой вёрсткой

«Резиновый», «адаптивный», «отзывчивый» сайт. Что это такое, что выбрать, что лучше, в чём разница?

Я сама использую эти слова как синонимы. Точно также как и «вёрстка», «шаблон», «дизайн». Я делаю неправильно. Это обусловлено, с одной стороны, погоней за ключевыми словами, с другой, тем, что я одновременно являюсь и заказчицей, и исполнителем. Мне не нужно писать самой себе технических заданий. Я вижу конечную цель. А вот при заказе сайта у веб-студии, разница может быть существенной.

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

<style>
#temnyi { display: inline-block; background: cyan; }
#svetlyi { display: inline-block; background: orange; }
</style>

<div>способ</div><div>верстки</div>

И посмотрим как они ведут себя при изменении ширины окна браузера.

фиксированная верстка

фиксированная верстка

резиновая вёрстка

резиновая вёрстка

адаптивная вёрстка

адаптивная вёрстка

отзывчивая вёрстка

отзывчивая вёрстка

Фиксированная верстка

Блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

<style>
#temnyi, #svetlyi { width: 440px; }
</style>

Резиновая вёрстка

Блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.

<style>
#temnyi, #svetlyi { width: 50%; }
</style>

Адаптивная вёрстка

Воплощается с помощью @ Media или благодаря скриптам (например, как для AdSense). Заточен под конкретные известные устройства (320, 768, 1024, т.д.). Любое изменение происходит рывками, после достижения одного из указанных уровней. Однозначно подходит для создания версии для печати. Автор подхода — Aaron Gustafson.

<style>
#temnyi, #svetlyi { width: 430px; }

@media (max-width: 1220px) {
  #temnyi, #svetlyi { width: 380px; }
}

@media (max-width: 1120px) {
  #temnyi, #svetlyi { width: 325px; }
}

@media (max-width: 680px) {
  #temnyi, #svetlyi { width: 200px; }
}
</style>

Отзывчивая вёрстка

Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству. Автор подхода — Ethan Marcotte.

<style>
#temnyi, #svetlyi { width: 50%; }

@media (max-width: 1006px) {
  #temnyi, #svetlyi { width: 100%; }
}
</style>

Мобильная версия сайта

Фактически это другой сайт, с другой вёрсткой и дизайном. Он имеет отдельный URL (поддомен m.site.ru или папка site.ru/m). На него происходит перенаправление пользователя с основного проекта, если тот использует телефон.

Резиновая верстка — линейная зависимость горизонтального положения DIV-ов / Habr

Задача: менять горизонтальное положение блочных элементов по линейной зависимости при изменении размера окна браузера.
Решение: термин «пропорциональность» подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость — это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X — ширину окна, то задача сводится к определению параметров a и b.

Итак, предположим, что у нас есть два варианта макета странички, первый шириной 1000 пикс., второй — 1600 пикс. На первом макете некий синий блок размещён на расстоянии 100 пикс. от левого края окна, а на втором — на 250 пикс. См. рис.

Нужно построить линейную зависимость положения DIV-а от ширины окна браузера. Пусть X1=100, X2=250 — положения DIV, а Y1=1000, Y2=1600 — ширина окна. Немного погуглив и замарав пару листов А4, вспомнил школьный курс и вывел формулу для нахождения значений a и b:
a = (X2-X1)/(Y2-Y1) = (250-100)/(1600-1000) = 150/600 = 0,25
b = X1-a*Y1 = 100-0,25*1000 = -150

Таким образом, уравнение нашей частной прямой приобрело следующий вид: Y=0,25*X-150
Как мы можем это использовать? Лично я делаю так: у абсолютно спозиционированного DIV-а я задаю параметр left в процентах, равный a*100, и смещение margin-left, равное b. То есть в нашем примере стиль блока будет такой:
#mydiv {
width: 100px;
height: 100px;
background: blue;
/*и ниже пошло самое главное*/
position: absolute;
left: 25%; /*это значение a, умноженное на 100*/
margin-left: -150px; /*корректировочное смещение, в нашем частном случае получилось отрицательным*/
top: 30px; /*требуемое положение блока по вертикали*/
}

Работающий пример можно посмотреть тут: e1.nnov.ru/rezina.html
А ещё можно скачать xls-файл, облегчающий расчёты.

что это такое, в чём отличия?

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

Содержание статьи:

Отзывчивый, резиновый и адаптивный дизайн

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

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

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

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

Если вам требуется качественное создание адаптивных сайтов в Харькове, то рекомендую веб-студию seosolution.ua.

Резиновый дизайн

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

Отзывчивый дизайнОтзывчивый дизайн

К тому же в резиновой верстке блоки с контентом не перемещаются. Они остаются фиксированными, увеличиваясь в высоту и ширину.

Отзывчивый дизайн

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

Артём ВысоковАртём Высоков

Артём Высоков

Автор блога о SEO и заработке на сайтах — Vysokoff.ru. Продвигаю информационные и коммерческие сайты с 2013 года.

Задать вопросЗагрузка ...Загрузка ... Загрузка …

Резиновый дизайнРезиновый дизайн

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

Отличия адаптивной и отзывчивой верстки

Среднестатистический посетитель сайта визуально не отличит резиновую и стандартную адаптивную верстку. Опытный веб-мастер быстрее решит подобную задачу, сравнив процесс открытия веб-страницы на разных устройствах. Для этого понадобится тщательное изучение HTML-кода. Например, для адаптивного дизайна используются блоки типа “container”, тогда как в резиновых макетах их место занимает разметка “container-fluid”.

Главные отличия стандартного и отзывчивого макета:

  1. В отзывчивой верстке используются динамические значения, например, проценты от стандартной ширины экрана, тогда как адаптивный веб-дизайн применяет статические пиксели и координаты по осям XY. Существуют модифицированные версии, в которых AWD предполагает использование как процентного соотношения, так и пикселей для разных блоков контента.
  2. Отзывчивый сайт растягивается плавно, напоминая резину (отсюда и название подобного варианта верстки). Адаптивный дизайн резко подстраивается после фиксации показателя ширины.
  3. Весь контент на отзывчивой веб-странице перемещается группой, тогда как в условиях AWD компоненты наполнения сайта будут смещаться по отдельности. Это влияет на плавность просмотра.
  4. Контент подстраивается под изменение высоты и ширины, а прочие компоненты отзывчивой верстки сдвигаются. Колонки с контентом на странице не сжимаются, а перемещаются в свободные участки экрана.
  5. Среди инструментов AWD есть ограничитель максимальной ширины элементов наполнения веб-станицы. Он полезен для просмотра сайтов на крупных мониторах, поскольку использование подобной функции позволит избавиться от чрезмерного растягивания контента. Это крайне важно для комфортного просмотра графических элементов на больших экранах.

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

Что лучше отзывчивый или адаптивный дизайн?

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

мобилопригодностьмобилопригодность

Говоря об отзывчивой верстке, разработчики имеют в виду исключительно вариант макета будущего сайта в рамках стратегии адаптивного дизайна. Классический метод AWD предполагает вычисление размера экрана и последующую загрузку соответствующего стандартного макета с шириной 320, 480, 760, 960, 1200 и 1600. Резиновая компоновка контента использует меньше макетов страниц, поэтому такой подход считается менее надежным, ведь размеры экранов портативных устройств постоянно меняются.

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

Источник: https://seosolution.ua/services/programming.html

Дискретно-резиновая верстка без JS — Хабр Q&A

Задача (можно считать её спортивно-теоретической) состоит в том, чтобы сверстать резиновую страницу, растягивающуюся на всю ширину окна. Но не плавно, а дискретно. К примеру, с шагом 50px.

То есть при ширине клиентской области окна браузера 820px -> ширина контейнера body должна быть 800px. Растягиваем окно до 830, 840, 845, 848px… body остается неизменным, излишки уходят в поля по бокам. Но при 850 ступенчато прыгает до 850. И так далее: 900, 950, 1000…
Аналогично в обратную сторону — уже при ширине окна 849px размер body должен стать 800px.

Понятно, что это можно обрабатывать скриптами. А на чистом CSS/HTML? 🙂
Any ideas?

UPD1
Относительно изящным решением представляются медиа-запросы: htmlbook.ru/css/value/media
Можно директивно прописать ширину body для всех возможных ширин экрана с нужным шагом.
@media screen and (max-width: 799px) {
body { width: 750px; }
}
@media screen and (max-width: 849px) {
body { width: 800px; }
}
@media screen and (max-width: 899px) {
body { width: 850px; }
}
...

Недостатки: громоздко (таких повторов будет несколько десятков), неудобно модифицировать, ограниченная поддержка браузерами. Но это самое естественное, «человеческое» решение.

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

UPD2
Приведу конкретный пример, зачем это может быть нужно.
На странице есть большая числовая таблица со столбцами шириной в те самые 50px. Столбцов очень много, так что таблица гарантированно не умещается на большинстве мониторов. То есть прокрутка в том или ином виде будет непременно.
Но характер данных таков, что значимость столбцов падает слева направо — и несколькими правыми столбцами в принципе можно жертвовать; а если они и будут нужны пользователю — доскроллит.
Ну и у дизайнера возникла мысль всегда показывать только целые столбцы, без обрезков.

4 степени гибкости Вашего сайта Оцениваем адаптивность HTML-верстки

Автор

Миша Радионов

Опубликовано: 06 Окт 2015

Вернуться в блог

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

То же чувство вы испытаете, узнав, что 5, 10 или 25 процентов посетителей вашего сайта откровенно плюются на него и не лестно отзываются о всей вашей компании. Конечно, я говорю о мобильных пользователях, столь быстро привыкших к удобству и отзывчивости таких сайтов, как Тинькофф или Слон. Каждый день таких юзеров все больше и, если вы их игнориуете, рискуете очень скоро остаться в меньшинстве.

1. Фиксированная верстка

Фиксированная верстка — тип верстки, при котором ширина контента жестко задана в пикселях и не меняется в зависимости от размеров окна браузера.

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

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

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

Пример: http://ok.net.ua

6235467253

2. Резиновая верстка

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

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

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

Минусы: Сложнее реализовать, чем фиксированную. Нестабильность дизайна сайта.

Пример: http://mymediacompany.ru

761237861278

3. Адаптивная верстка

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

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

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

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

Пример: http://www.smashingmagazine.com/

781623781263

4. Респонсивная (отзывчивая) верстка

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

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

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

Минусы: Сложнее реализовать, чем адаптивную верстку.

Пример: http://superfriend.ly/

Какая верстка лучше?

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

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


Последние записи блога
Please enable JavaScript to view the comments powered by Disqus.

Может ли email быть «резиновым»? / Pechkin.com corporate blog / Habr

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

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

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

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

В чем ценность HTML-писем

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

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

Многие разработчики и дизайнеры отправляют подписчикам plain text-письма. Они могут быть довольно эффективными, кроме того их легче верстать, не говоря о других важных плюсах (быстро загружаются, отображаются в любом почтовом клиенте и т.п.). При этом, свои плюсы есть и у HTML-версий писем:

  • Гиперссылки — часто бывает так, что из письма пользователя нужно направить на какую-то страницу, а без встроенной ссылки сделать это сложнее (мало кто захочет что-то копировать и вставлять в строку браузера).
  • Дизайн — хорошо сделанные HTML-письма привлекательно выглядят и позволяют компаниям доносить свой фирменный стиль даже до папки входящих.
  • Иерархия — С помощью HTML-верстки легче создать четкую иерархию и выделять важные места сообщения.
  • Отслеживание результатов — HTML позволяет использовать механизмы отслеживания открытий и показателей вовлеченности — это важная информация для оптимизации маркетинговых усилий.

Если вы разработали вылизанное до мелочей приложение, но «забили» на свою почтовую рассылку, то это выливается в три негативных момента: 1) теряется возможность по работе над построением сильного бренда, 2) вы ничего не знаете о том, кто, когда и как вообще читает ваши письма, 3) никак не помогаете пользователям и не отвечаете на их вопросы за пределами приложения.
Почему HTML-письма — отстой

Традиционно считается, что заниматься разработкой HTML-рассылок — худшее занятие для дизайнера и разработчика. Это как сесть в машину времени и отправиться на ней прямиком в «лихие девяностые» табличных шаблонов, инлайн-стилей, несемантической разметки и хаков для каждого клиентского приложения.

Вот лишь краткий список причин, по которым HTML-письма — это больно:

  • Нет никаких стандартов. Да, все используют HTML и CSS, но не как в вебе. Не существует никаких реальных стандартов того, как должны работать почтовые клиенты. Все это временами приводит к появлению по-настоящему безумного кода.
  • Почтовые клиенты. Почтовые программы вроде того же Outlook или Gmail рендерят HTML по-разному, и часто довольно причудливо. Что, в свою очередь, приводит к…
  • Необходимости хаков. Чтобы все работало в разных программах, нужно предусмотреть массу моментов, которые важны для отображения письма в каждой из них.
  • Никакого JavaScript. Один из самых популярных веб-языков в email отсутствует как класс, потому что почтовые клиенты вырезают подобный код из соображений безопасности. Так что прощай интерактивность.
  • Инлайн-стили. Большинство почтовых клиентов вынуждают использовать инлайн-стили и атрибуты по любому поводу.

Нет никаких оснований надеяться на существенные изменения в этом плане в ближайшем будущем. Однако среди дизайнеров и разработчиков email-кампаний есть целое движение людей, которые стремятся привнести в свою область деятельности больше порядка из веба. К ним относятся члены команды специализированных почтовых сервисов, вроде Litmus, MailChimp, Campaign Monitor, Печкин-mail.ru, и индивидуальные профессионалы вроде Anna Yeaman, Nicole Merlin, Fabio Carneiro, Elliot Ross, Brian Graves и dudeonthehorse здесь на Хабре.
Меняющийся инбокс

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

Если говорить в общем, то создание HTML-версии письма можно сравнить с версткой веб-страницы в мире, где ничего неизвестно о веб-стандартах дизайна. HTMl-верстка в email стоит на трех китах: таблицах, HTML-атрибутах и инлайн-CSS. Важно понимать, что из-за особенностей рабоыт разных email-клиентов, которые по-разному поддерживают одни и те же вещи (а многое не поддерживают вообще), работать приходится с очень ограниченным набором HTML и CSS-элементов. Вот здесь представлен отличный график того, что из CSS поддерживают популярные почтовые клиенты.

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

Таблицы

Большинство веб-дизайнеров используют теги вроде div, header, section, article, nav и footer для структурирования веб-страниц. К сожалению, у email-дизайнеров нет такой роскоши, как возможность использования семантических элементов. Вместо этого вы *обязаны* использовать HTML-таблицы для создания шаблонов. И эти таблицы вставляют одна в другую…. много раз.

Для того, чтобы стилизовать эти таблицы, придется использовать атрибуты, которые большинство людей в глаза не видело уже довольно давно: width, height, bgcolor, align, cellpadding, cellspacing и border. В комбинации с инлайн стилями вроде padding, width и max-width, можно уже чего-то добиться.

Ниже представлен пример кода неплохо сверстанного табличного письма:

<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td bgcolor="#333333">
			<div align="center">
				<table border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td>…Content…</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>

Легко увидеть, как вложены таблицы и используются атрибуты border, cellpadding и cellpsacing. На уровне ячеек применяется bgcolor (это более надежный метод, чем background или background-color, хотя последний и применяется).

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

Изображения

Использование изображений в email очень похоже на их использование в вебе за исключением одного небольшого момента: огромное число почтовых программ по-умолчанию отключают показ картинок, показывая пользователям «сломанные» письма:

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

<img src="img/fluid-images.jpg" alt="Fluid images" border="0">

С помощью нашего кода можно привнести в отображаемое письмо чуточку больше смысла:

Призывы к действию

Один из главных плюсов HTML-верстки заключается в возможности использования кликабельных гиперссылок. Помимо использования их в тексте, можно еще делать крупные привлекательные кнопки, на которые так и хочется нажать.

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

Ниже приведен код подобной кнопки, в таблице используются границы (border) — это позволяет понять, что кликабельна вся кнопка, а не только текст на ней:

<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td align="center"><a href="http://alistapart.com" target="_blank">Learn More →</a></td>
	</tr>
</table>

С базовыми вещами мы разобрались, теперь посмотрим на то, как можно сделать письмо по-настоящему «резиновым».

Как работает «резиновая» email-верстка

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

В email-дизайне мы имеем дело с ограниченным набором элементов HTML и CSS. Нельзя использовать свойства и значения, которые дизайнеры используют для адаптивных сайтов в вебе, margin, float, em — все это не работает в большинстве почтовых клиентов. Так что нужно придумывать, как это обходить в каждом конкретном случае.

Гибкие изображения

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

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

<img src="responsive-email.jpg" border="0" alt="Can an email really be responsive?">

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

Теперь, чтобы сделать изображение по-настоящему гибким, нужно использовать медиазапрос в заголовке письма:

img[class="img-max”] {
	width:100% !important; 
	height: auto !important;
}

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

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

А теперь рассмотрим кое-что посложнее.

Гибкие шаблоны

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

Почти у всех наших таблиц есть процентовка ширины. Исключением является лишь таблица-контейнер, которая имеет заданную в пикселях конкретную ширину, ограничивающую общий размер шаблона, чтобы предотвратить его «поломку» в почтовых клиентах, которые плохо работают с процентами (например, во всех версиях Outlook).

Начнем с таблицы-контейнера:

<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>…Content…</td>
	</tr>
</table>

Мы использовали атрибут width, чтобы ограничить ширину таблицы 500 пикселями.

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

Но что хорошего в гибких таблицах, если само письмо все равно всегда шириной 500 пикселей? Взглянем на контейнер снова. Мы включили класс wrapper. Этот селектор будет использоваться для того, чтобы сделать письмо по-настоящему резиновым с помощью медиазапросов.

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

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

Для простоты в нашем примере мы будем нацеливаться на размеры экранов с max-width в 525 пикселей и ниже. Затем, используя wrapper мы отменим HTML-атрибуты и инлайн-стили, заставив таблицу-контейнер отображаться на полную ширину экрана мобильного устройства:

@media screen and (max-width:525px) {
	table[class=“wrapper”] {
		width:100% !important;
	}
}

Мы также можем заставить вложенные таблицы сделать тоже самое — секции контента будут эффективно занимать доступное пространство. Неплохо бы еще было и увеличить размер текста и кнопок:
@media screen and (max-width:525px) {
	body, table, td, a {
		font-size:16px !important;
	}	
	table[id=“responsive-table”] {
		width:100% !important;
	}
}

Главный и довольно крупный минус медиазапросов заключается в том, что они далеко не везде поддерживаются. WebKit-клиенты вроде iOS Mail и дефолтное почтовое приложение Android их поддерживают, но Gmail, Mail.ru, Yandex, приложение Windows Phone 8 — нет.

Однако если аудитория конкретной компании в основном использует iOS и Android — все уже не так плохо.

Заключение

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

Главное на забывать о необходимости тестирования всего, чего только можно. Почтовые клиенты — куда хуже, чем браузеры в плане рендеринга и поддержки HTML и CSS. Тестировать необходимо и на реальных устройствах, и с помощью специальных превью-сервисов (например, от «Печкина»).

Кроме того, необходимо тестировать не только отображение письма, но и искать более эффективные варианты текстов, контента, времени рассылки (вот наш пост с важной статистикой по этому поводу).

В общем, не нужно ставить на email-дизайне крест. Сейчас это «необходимое зло», но с течением времени эта область знаний станет лучше. Различные техники постоянно тестируются и обновляются и отзывчивый дизайн — одна из них. Если компания действительно заботиться о своем продукте и его представлении в вебе, то этого запала должно хватить и на работу с электронной почтой, которая, напомним, является одним из самых популярных и ценных каналов коммуникации.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *