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

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

Согласно теории, адаптивный веб-дизайн (responsive web design, RWD) — это подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра с любого устройства, независимо от размера экрана, будь то настольный компьютер, мобильный телефон или планшет. Этот сайт изначально сделан адаптивным — однако сегодня мы в очередной раз осуществили подстройку его адаптивности согласно пожеланиям некоторых пользователей.

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

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

Так вот, сегодня мы сместили баланс настроек в пользу более крупных шрифтов и большего приоритета центральной колонки. На устройствах с экранами 1280×800 (например, на планшетах) сайт теперь показывается в горизонтальной ориентации со свернутой правой колонкой, а в вертикальной ориентации — со свернутыми обеими боковыми колонками. При этом для большего удобства чтения на планшетах с современными экранами с высокой плотностью точек (всякие «Ретины» и около них) мы рекомендуем ставить в браузерах увеличение 120-150% — текст будет крупнее. В штатном браузере Android 4.4 это делается через меню -> Настройки -> Специальные возможности -> Масштабирование текста.

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

PS. Хорошие веб-дизайнеры всегда делали сайты резиновыми, а плохие — кирпичом. Хороший дизайнер смотрит на споры о необходимости резины с удивлением. Ясен пень, дизайн должен уметь жить при разных размерах экрана, о чём тут спорить? Сайт — не плакат, а глаза пользователей — не микроскопы.

Люк Вроблевски приводит действительно интересную статистику, «Где люди используют мобильные устройства»:

84% дома
80% в свободное время в течение дня
76% в очередях и в процессе ожидания
69% в процессе шоппинга
64% на работе
62% во время просмотра ТВ-программ (альтернативные исследования дают цифру в 84%)
47% во время подготовки к работе

На наш сайт около 15% посетителей заходят с Андроида, и еще около 7% — c Apple iOS. Мы не забываем об этой мобильной аудитории и хотим сделать сайт более удобным и для них тоже — но, разумеется, не ценой неудобств для пользователей полноразмерных компьютеров. Насколько это получится — зависит и от вас тоже, от вашей обратной связи.