Лекция третья. Адаптивный дизайн

В начале урока проверка домашнего задания.

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

Итак мы выяснили про сайт всё что нас интересовало, утвердили ТЗ у заказчика, остаётся последний вопрос - нужно ли предусмотреть на сайте адаптивность?

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

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

Мобильная версия - это такая урезанная версия сайта, которая хорошо смотрится ТОЛЬКО на телефоне. И мы платим за разработку дизайна этой мобильной версии, потом за вёрстку и программирование. Через год мы узнаём, что наша целевая аудитория перешла на планшеты, тогда мы заказываем версию ещё и для вертикальной ориентации планшетов - это ещё + отдельный дизайн, вёрстка и программирование. То же самое происходит, когда на рынок выходит новый размер гаджета или появляется новое разрешение монитора. Сколько размеров - столько и мобильных версий. Если популярных размеров 8 то и разработку нашего сайта мы умножаем на 8.
Накладно - не правда ли?



Адаптивная вёрстка - это, когда мы делаем (выполняем или заказываем) только 1 сайт (1 дизайн, 1 вёрстку и 1 программирование), но этот сайт умеет подстраиваться под размер любого монитора в пределах от 370 до 1200 пикселей. Есть мониторы и по 5000 пикселей в ширину, но на таком размере неудобно читать текст и его фиксируют в формате учебника. Адаптивной бывает именно вёрстка, а дизайн должен быть под неё подстроен. Web-дизайн не может существовать как чистое искусство именно потому, что в нём всегда завязан на функциональности. В нём должны быть заложены удобства для пользователя, возможности для разработчика и при всём при этом необходимо удержать стилистику. Да, оказывается, что дизайн сайта вторичен. Первична функциональность. Но профессионализм дизайнер именно в том и заключается, чтобы свести все эти точки воедино и создать такой продукт, который и удобен и функционален и красив.

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

Резиновая вёрстка - это вот: https://dribbble.com/
она заполняет собой весь монитор и сжимается в самый минимальный размер.
Она удобна для каталогов, сайтов-портфолио, новостных и мультимедийных сайтов.
Для сайтов, содержащих много текста она не выгодна потому, что трудно читать очень растянутые строки.

Наиболее приемлемый стиль для адаптивного дизайна - это flat

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

Плоская заливка, с точки зрения загрузки, весит меньше чем градиентная.



Чёрный цвет весит больше чем белый.



Тёмная картинка весит больше чем светлая ...



... но светлая весит больше чем заливка одним цветом.



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

Таким картинкам как здесь https://web-design.gretthen.com/web-design/trustgalaxi.html (всем этим прошивкам, металлическим изгибам, деревянным кнопкам со скруглёнными углами) на экране телефона придётся просто исчезнуть, их нельзя системно корректно сжать, их можно только перерисовать под разные размеры, а это, как мы говорили выше, стоимость сайта умноженная на 8.

Шапке этого сайта https://web-design.gretthen.com/web-design/basartov.html тоже нельзя задать уменьшение или системно перестроить, можно только перерисовать под разные версии мониторов.

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

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

Кстати, у меня вопрос к залу:
Я беру на себя смелость утверждать, что слева адаптивная версия, а справа НЕ адаптивная.
Почему?



Адаптивность - важнейшая способность, приобретённая сайтами за время их "привыкания" к мобильным устройствам. Изображения для адаптивных сайтов должны обладать способностью менять размер, пропорции и масштаб в зависимости от размера монитора, на котором они будут открыты, без потери качества. Разумеется, реалистичная картинка не обладает всеми этими возможностями. Максимум на что она способна в масштабировании - это пропорционально уменьшиться в размере. Если окажется, что на ней был расположен текст (картинкой) то он либо станет не читабельным либо (если он выполнен в текстовом редакторе) сползёт вниз. За то обычный прямоугольник, залитый ярким цветом и под монитор подстроится без потерь и текст не упустит.

И, казалось бы, решение найдено. Есть мобильный интернет и есть адаптивный дизайн. Он удобен не только в плане отображения, но и в плане разработки дизайна. Его легко нарисовать. Создать инфографику в стиле flat гораздо быстрее, удобнее и понятнее, чем городить огород из реалистичных картинок. Я не отвергаю реалистичные и псевдообъёмные изображения, но работать с ними гораздо дольше и кропотливей.

В чём проблема плоского дизайна?
Он не нравится нашему человеку )) как это не парадоксально.
Часто бывали случаи, когда мне заказывали дизайн сайта, приводили референсы дизайна в стиле flat, а делала всё о чём меня просили, но в ответ слышала: "Я не ожидал. У вас такое красивое портфолио. Может быть оно не ваше?" А у меня на тот момент флэта и правда не было в портфолио, этот стиль только начинал входить в моду, но человек выбирал именно моё портфолио в надежде получить подобное, а в качестве примеров приводил модные сайты.
Этот период длился года 2. За это время я уже стала недолюбливать плоский стиль потому, что столько разногласий с заказчиками у меня не было даже на заре моей дизайнерской карьеры.
Я долгое время пыталась понять где тут собака порылась и нашла этому объяснение, которое изложила в своей статье "О вкусах не спорят".

Сейчас люди уже признали, не взирая на моду, что отличаться от конкурентов только фотографиями им не хочется и слово флэт всё меньше звучит в употреблении.
Есть этому и практическое объяснение - фотографии. Шедевры плоского дизайна изобилуют красивыми фотографиями.
Хорошо если вы делаете дизайн сайта для крупной фешн компании. Качественные фото - это их конёк. Хорошо, если заказчик готов заказать фото сессию специально для сайта. Владелец завода "Коммунар" (входные двери, Харьков) перед тем как заказать дизайн сайта, заказал всем работникам фирменную одежду с логотипом фирмы, фото сессию и уже с этим пришёл к исполнителю. Да, такое бывает, но ооочень редко. Но что же делать, если к Вам пришёл заказчик у которого хороший вкус, который подобрал прекрасные референсы, составил хорошее ТЗ, внёс предоплату, но сделать ему нужно сайт какой ни будь провинциальной плотины и хороших фотографий нет, а за авторские рисунки он платить не намерен??

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

Вот пример сайта в стиле флет http://demo.aggressivemotions.com/barcelona/ с прекрасными фотографиями.



Вот пример того же сайта, но без фотографий. Наверно, так выглядел его прототип (я просто закрыла картинки). Тут мы видим, что он не имеет собственного оформления.



А здесь картинки не отображены вообще:



А вот пример сайта, который имеет оформление http://taurussoft.ru/ и он адаптивный. Кто-то может сказать о том, что наука не стоит на месте, мобильный интернет становится всё более мобильным, но это сайт 2012 года.



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