Новости

Статьи

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

23.08.2018

bg.nencom.com

Разделение версий

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

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

Забота о пользователе

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

Чем меньше экран, тем меньше блоков видит пользователь, а оставшиеся блоки стремятся занять всю полезную площадь.

Навигация по сайту

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

Меню сайта в тач-устройствах прячется за кнопку «три полоски» — самое привычное решение на данный момент:

GIF и PNG — на помойку

Все элементы сайта — логотип, флажки, иконки — перерисованы в векторе (svg). Это значит, что на любом дисплее (пусть даже из будущего) графика останется чёткой.

Иконка сайта

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