Респонсивный веб-дизайн (англ. responsive email) — это подход, который помогает оптимизировать ваши письма под устройство, которым пользуется пользователь.
В этом видео от Web Developer Blog рассказывают, чем отличается адаптивный дизайн от респонсивного, а также описывают преимущества и недостатки каждого из них.
Содержание
Практика состоит из сочетания гибких таблиц и макетов, изображений и правильного использования мультимедийных запросов CSS. Когда пользователь переключается со своего ноутбука на iPad, веб-сайт должен автоматически переключаться, чтобы обеспечить разрешение и размер изображения. Другими словами, веб-сайт должен иметь технологию автоматического реагирования на предпочтения пользователя. Это исключило бы необходимость в разработке другого дизайна для каждого нового гаджета на рынке. Попросту говоря, ваш сайт будет отлично смотреться и хорошо работать на ноутбуке, планшете и браузере мобильного телефона.
Преимущества гибкого дизайна для мобильных устройств
Почему респонсивный веб-дизайн важен для бизнеса?
Есть много вещей, которые нужно проанализировать при создании респонсивного макета. Это процесс, который требует системы проектирования и иерархии контента на разных устройствах.
Ключевые компоненты респонсивного веб-сайта
Гибкая сетка
Сетка является решающим элементом для создания гибкого макета. Она обеспечит дизайну гибкость и масштабируемость. Элементы будут иметь согласованное расстояние, пропорцию и могут настраиваться на определенную ширину экрана, основанную на процентах.
Гибкий текст и изображения
Тип способа отображения должен различаться в зависимости от того, с какого устройства пользователь просматривает ваш сайт. На мобильном телефоне есть возможность увеличить размер шрифта и высоту строки (расстояние между каждой строкой текста) для удобства чтения. Гибкие изображения могут оказаться более сложными из-за времени загрузки на более мелкие устройства. Но эти изображения могут масштабироваться, обрезаться или удаляться в зависимости от того, какой контент необходим для опыта.
Медиа запросы
Это код, который обеспечивает гибкость макета. Медиа запросы указывают, что CSS должен применяться соответствующим образом. Медиа-запросы позволяют использовать несколько макетов дизайна, которые используют одну и ту же HTML-кодированную веб-страницу.
Рост использования мобильных устройств — это только начало перехода к более удобному использованию Интернета. Поскольку портативные электронные устройства, такие как смарт-часы, становятся все более популярными, необходимо следить за тем, чтобы ваш сайт можно было просматривать в любом месте и на любом устройстве.
Ресурсы
💙 Могу ли я отправлять респонсивные письма через SendPulse?
Да. Все письма, отправленные с помощью SendPulse, по умолчанию являются респонсивными, поэтому регистрируйтесь и бесплатно отправляйте до 15 000 писем 500 подписчикам совершенно бесплатно.
📱 Почему я должен оптимизировать письма для мобильных устройств?
Потому что более половины всех писем пользователи просматривают со смартфонов и планшетов. Если ваши письма не оптимизированы для мобильных устройств, подписчики могут отписаться или даже отметить рассылки бренда как спам.
💳 Сколько стоит создание респонсивного письма?
Все письма, созданные в SendPulse, респонсивны и бесплатны. Вы можете использовать готовые шаблоны сервиса, создавать их самостоятельно с помощью блочного конструктора писем или загружать в качестве шаблонов письма других компаний через наше расширение для Chrome. Зарегистрируйтесь в SendPulse и отправьте рассылку прямо сейчас.
На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна(responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.
Необходимые знания:
Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS и Устройство CSS.)
Понять базовые концепции и историю отзывчивого дизайна.
Исторические макеты сайтов
В какой-то момент истории при разработке веб-сайта у вас было два варианта:
Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.
Примечание: Посмотрите этот простой жидкий макет: пример, исходный код. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.
Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.
Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.
Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.
Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.
Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.
Гибкий макет до отзывчивого дизайна
Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.
Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
Отзывчивый дизайн
Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.
Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
Медиавыражения
Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.
Вы можете добавлять несколько медиавыражений в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так, чтобы наилучшим образом соответствовать разным размерам экрана. Точки, в которых применяются медиавыражения и меняется макет, известны как контрольные точки.
Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют mobile first дизайном.
Узнать больше о медиавыражениях можно в документации MDN.
Гибкие сетки
Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.
Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.
В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.
Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.
Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:
На более широких экранах они перемещаются в два столбца:
Примечание: вы можете найти живой пример и исходный код этого примера на GitHub.
Современные технологии макетов
Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.
Multicol
Flexbox
В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.
Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: пример, исходный код.
CSS grid
Отзывчивые изображения
Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:
Отзывчивые изображения, используя элемент
и атрибуты srcset и sizes элемента оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.
Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.
Отзывчивая типографика
Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.
Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
В мобильных версиях заголовок меньше:
На компьютерах, однако, мы видим больший размер заголовка:
Примечание: смотрите этот пример в действии: пример, исходный код.
Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
Using viewport units for responsive typography
The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.
This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.
See an example of this in action: example, source code.
The viewport meta tag
If you look at the HTML source of a responsive page, you will usually see the following tag in the of the document.
This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.
Why is this needed? Because mobile browsers tend to lie about their viewport width.
This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.
The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=960px with the actual width of the device, so your media queries will work as intended.
So you should always include the above line of HTML in the head of your documents.
There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.
Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.
Summary
Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.
It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?
С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:
Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
«Отзывчивый веб-дизайн» (Responsive Web Design) является частью более широкого понятия, которое называется «Адаптивный веб-дизайн» (Adaptive Web Design). Когда идет речь об отзывчивом веб-дизайне, то мы имеем в виду только макет веб-страницы (Итан Маркотт, «резиновый» макет, гибкие изображения и медиазапросы).
С другой стороны, «Адаптивный веб-дизайн» включает в себя гораздо больше, чем просто «резиновый» макет. На практике это почти одно и то же, что и прогрессивное улучшение (progressive enhancement), если говорить кратко, то это понятие означает, что мы стремимся предоставить лучшие возможности для максимально широкой аудитории. Также: нельзя смешивать понятия «Адаптивный веб-дизайн» и «Адаптивный макет» (Adaptive layout), т.к. это совершенно разные вещи.
И, наконец, «Адаптивный макет» означает макет, сделанный путем сочетания множества фиксированных горизонтальных размеров (ширины). Сейчас, мне кажется, если все сделано правильно и блоки фиксированной ширины сочетаются с «резиновыми» блоками, то Адаптивный макет можно считать одной из форм отзывчивого веб-дизайна, а не просто его альтернативой. Зельдман уже высказывал немного похожую идею в 2011 году в одной из записей своего блога.
Примечание переводчика. К сожалению, из текста Вильями Сальминена сложно понять, что такое «Адаптивный макет», поэтому я постараюсь объяснить, что это означает своими словами. Подход Итана Маркотта предусматривает использование «резинового» макета (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях). Более развернутое описание данного подхода вы можете найти в статье «Switchy McLayout: An Adaptive Layout Technique» (перевод).
Времена, когда мобильные телефоны использовались только для звонков, остались в прошлом. Современные смартфоны — это практически полноценные компьютеры, заточенные под выполнение разнообразных задач.
Поэтому сегодня разработчики сайтов предпочитают респонсивный дизайн, позволяющий сделать страницу, которая будет хорошо смотреться на любых устройствах.
Респонсивный дизайн: выгодно, просто и удобно
Пусть вас не пугает умное название: респонсивный дизайн очень удобен для пользователей, ведь он позволяет автоматически подстроить весь контент сайта и все элементы, заложенные в его дизайн, под любое устройство. Вам будет легко «шариться» по сайту как с обычного ПК, ноутбука, так и с планшета или с мобилки. С утюга пока не получится, увы 🙂
А теперь немного подробнее. Респонсивный — это такой дизайн, в котором используется «резиновый макет» с гибкой структурой, в котором в котором пропорции и размеры элементов задаются в процентах.
Другими словами, он способен подстроиться: растянуться или сжаться под любой размер экрана.
Если уменьшить ширину такой страницы, то весь ее контент уменьшится относительно друг друга. Например, если у вашего сайта 3-х колончатая структура, то на узком экране вы увидите одну или две колонки.
Для глаз обычного «чайника» такой веб дизайн выглядит как настоящая магия: легкий, удобный, отзывчивый! Кстати, его очень часто так и называют — отзывчивым, ведь он чутко реагирует на то, с какого устройства вы заходите.
Если вы где-то услышите, что сайт с респонсивной версткой может тормозить на планшетах и мобильных, потому что ему не хватает скорости для загрузки изображений и других элементов дизайна, спешим развеять и этот миф. Респонсивному дизайну или не хватает «ровных» рук разработчика или высокой скорости интернета.
Хорошо продуманный дизайн с качественной версткой будет отменно работать на любом устройстве.
Масштабирование интерфейса под ваш гаджет получается за счет media-queries (компонентов языка CSS) или модуля CSS3, гибкой разметки и гибкой сетки веб-сайта. Они позволяют комбинировать различные стили в зависимости от того, с монитора какого размера и разрешения вы просматриваете страницу и делает это так же легко, как вы с утра подбираете себе костюм на работу.
Преимущества респонсивного дизайна
Такой способ верстки сайта — отличное решение для страниц с «резиновой структурой» и дает вам целый ряд существенных преимуществ.
С респонсивным дизайном вам не нужно заморачиваться с разработкой нескольких сайтов для различных типов устройств, что, в свою очередь, тянет за собой необходимость неоднократно вводить и периодически обновлять информацию и прочий контент, проводить SEO-оптимизацию отдельно для каждого сайта. Все это тянет за собой дополнительные финансовые вложения, а они вам нужны?
Единый внешний вид
Причем он сохраняется на разных браузерах и разных платформах: значки, иконки, текст и картинки остаются без изменений. Они могут лишь незначительно перемещаться относительно друг друга.
Все обратные ссылки будут вести на одну страничку, работая таким образом над улучшением ее позиций в поисковой выдаче. Если же у вашего сайта есть отдельная мобильная версия, то она также должна иметь высокий уровень доверия у поисковых систем, причем отдельно от основного сайта.
Сайты с респонсивным дизайном имеют один URL, а это еще один плюс в копилку при SEO-оптимизации. У вашей странички будет меньше перенаправлений с одного URL на другой.
А еще благодаря привычному виду пользователям не придется привыкать к новой разметке или тратить свое время на поиск нужных функций.
Респонсивный дизайн vs Мобильная версия:
Помимо респонсивного дизайна, существует еще один альтернативный вариант — создание отдельной, мобильной версии сайта. Зачастую пользователей перенаправляют на специальный поддомен (m.primer.com).
Мобильная версия сайта — это не подраздел основного, а еще один, самостоятельный сайт, разработанный для соответствующих гаджетов. У него будет свой URL и его контент должен быстро отображаться, быть читаемым и оформленным с учетом использования на мобильном устройстве.
Если вы выбрали для себя мобильную версию сайта, учитывайте, что вести и продвигать придется также два сайта: придумывать для каждого свою стратегию, обслуживать каждый ресурс без ущерба для другого.
Казалось бы, зачем заморачиваться с респонсивом, но мобильная версия сайта — это ограниченные возможности, ведь она является уменьшенной и урезанной версией главной странички. Функционал, который предоставляется посетителям, подбирается на усмотрение разработчика.
Мобильная версия: недостатки
Да, мобильная версия — это по-прежнему легкий, удобный и быстрый сайт, и, если вашим пользователям не принципиально иметь весь функционал основного сайта, казалось бы, можно было бы ей и ограничиться.
Но все не так просто. Такой сайт не может быть идеальным решением для любого сайта и любого устройства, и это одна из причин, почему разработчики отдают предпочтение респонсиву.
Подытожим. У мобильной версии есть 2 основных недостатка:
У основного сайта и его мобильной версии будут свои адреса. Во-первых, это может оказаться неудобным для пользователей, ведь им придется запоминать два адреса. А во-вторых, это больше работы по наполнению контента, разработке стратегии под каждую версию и необходимость отдельной SEO-оптимизации каждой страницы.
Он ведет к частичной потере содержания или ограничению возможностей пользователей.
Какой дизайн в итоге выбрать
Мобильная версия сайта станет хорошим решением для того бренда, чей бизнес в основном сосредоточен на взаимодействии с пользователями мобильных устройств. Например, если вы активно продвигаетесь в социальных сетях с таргетингом, заточенным под аудиторию, использующую мобильные устройства, ваш выбор — мобильная версия.
Она «легкая», хорошо подходит под все потребности аудитории и с ее помощью удобно размещать линки с мобильной версии сайта в группе в соц сети.
Респонсивный дизайн — это универсальный «солдат», который придется по вкусу как пользователям, сидящим с компьютера, так и любителям мобильных гаджетов. Он подойдет тем брендам, для кого важно сохранение единой структуры на всех устройствах. Это «отзывчивый» дизайн, благодаря которому посетителям будет комфортно использовать ресурс.
Специалисты из Zwebra считают, что создание респонсивного дизайна намного проще, чем разработать сайт с адаптивным дизайном.
На практике мы придерживаемся такого подхода: примеры респонсив дизайна вы можете увидеть на наших сайтах мобильного и планшетного вида, а для ноутбуков и широких экранов мы применяем адаптивный дизайн.
Какой бы выбор вы ни сделали, всегда думайте об удобстве ваших пользователей, ведь прежде всего, сайт создается для того, чтобы им было удобнее взаимодействовать с вашим брендом.
Готовы заказать разработку? Специалисты веб-студии знают, как сделать современный респонсивный сайт, отвечающий всем вашим требованиям.
