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

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

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

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

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

Вы наверное заметили, как неудобно просматривать на широкоэкранных мониторах веб страницы, имеющие резиновый дизайн? Экран почти в 2 раза шире обычного, картинки непривычно большие. Вместе с тем замечено, что пользователь использует full HD монитор в режиме 1920х1080pix, если только этот монитор по своим размерам значительно больше обычного. Поэтому для настольных компьютеров работает правило: чем выше чёткость, тем больше геометрические размеры экрана. В этом случае разумнее применить естественные размеры картинок. Для того, чтобы на широкоэкранных full HD мониторах по бокам не возникало пустого пространства, с помощью адаптивного дизайна мы можем назначить различные стили. Например, вместо двух колоночного отображения текста мы можем задать трёх или четырёх колоночное отображение.

Для настольных компьютеров всё ясно – угловые размеры экрана большие и занимают всё или почти всё поле зрения. А как быть с мобильной версией сайта? Давайте сначала разберёмся, для каких устройств она предназначена. Для мобильных телефонов. Это небольшие устройства, которые умещаются на ладони. Угловые размеры экрана маленькие, занимают только небольшую часть поля зрения. Разрешающая способность экрана у смартфонов колеблется в широких пределах, а его размеры не намного отличаются. В том смысле, что они, конечно, разные, но одинаково маленькие. Случай одинаковых геометрических (или угловых) размеров экрана – это идеальный случай для применения резинового дизайна. Поэтому здесь его и надо применять.

Вы можете посмотреть, как реализован резиновый дизайн в мобильной версии сайта Teleport-1M. Смотрится одинаково хорошо на всех смартфонах.

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

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

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

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


  1. servekon
    18.08.2015 12:30
    +2

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


    1. SerDIDG
      19.08.2015 04:18
      +1

      Когда люди путаются в обозначениях, обычно скидывают это демо — www.liquidapsive.com


  1. codemake
    18.08.2015 13:10
    +2

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

    Решение: max-witdh: оптимальный максимум
    Для того, чтобы на широкоэкранных full HD мониторах по бокам не возникало пустого пространства...

    Решение: background-size: cover;
    Разрешающая способность экрана у смартфонов колеблется в широких пределах, а его размеры не намного отличаются.
    В том смысле, что они, конечно, разные, но одинаково маленькие.

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

    Моз взорван!
    Если Ваш клиент скорее всего ищет Ваши товары и услуги со своего мобильного телефона,
    то наверное, основная версия Вашего сайта – мобильная версия.

    Как одно равно другому?


  1. Ashot
    18.08.2015 13:14

    я призываю вернуться обратно к «резиновому»

    А зачем возвращаться к тому, что никто не отменял? Резина как жила, так и живёт.


  1. jmaks13
    18.08.2015 14:50
    +1

    Статья обо всем и не о чем. Адаптивная и резиновая верстка дополняют друг друга, а не исключают. То же самое я считаю относится и к дизайну.


  1. VladimirKlimov
    09.09.2015 20:29

    Не согласен, что статья ни о чём, она о понимании предмета.
    Например, для больших мониторов full HD можно назначить четырёх колоночное отображение текста вместо двух колоночного. Можно, но не нужно…
    Человек читает текст двумя глазами, фокусируя луч зрения в одну точку. Края большого широкоэкранного монитора по краям выходят из поля зрения противоположного глаза, причиняя психологический дискомфорт и заставляя крутить головой то вправо, то влево. Поле зрения двух глаз в сумме широкоформатное, но зона бинокулярного зрения похожа на квадрат. Вот и думаешь, чем бы заполнить периферию широкого экрана, чтобы не отвлекала от чтения.


  1. VladimirKlimov
    09.09.2015 21:15

    Или вот ещё пример:
    В учреждении, где я работал web мастером, меня спросили -«Вам ноутбук купить или обычный компьютер? А если обычный, то с „наворотами“ или бюджетный вариант?» Я ответил, что пойдёт и бюджетный. На утверждение принесли два варианта — с монитором full HD и с обычным монитором 19" 1280х1024 pix. А цена у мониторов одинаковая… И ширина у мониторов одинаковая… Т.е. вместо обычного 19" монитора я могу выбрать тот же самый монитор, только обрезанный сверху и снизу, я же ведь никогда не буду использовать этот монитор в высоком разрешении (мелкий текст будет тяжело читать). Не трудно догадаться, что я выбрал. Зачем мне эта «смотровая щель»?

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


  1. VladimirKlimov
    09.09.2015 21:58

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

    На помощь классическому адаптивному дизайну приходит автоматическое пере направление мобильных пользователей на мобильную версию сайта, содержащую закладку на переключение к обычной версии. Это так называемый RESS (Responsive Web Design with Server Side Components). На примере моей «landing page» Вы можете посмотреть как это работает. Если Вы пойдёте по прямой ссылке
    www.teleport-1m.ru/landing_page.php
    с мобильного телефона, то попадёте на мобильную версию страницы (с возможностью переключения к обычной), а если с обычного компьютера, то увидите классический адаптивный дизайн и если у Вас есть большой full HD монитор, то сможете в полной мере насладиться творческим замыслом и увидеть всё, что скрыто от обычных пользователей.