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

bg.nencom.com

Версии сайта для телефона, планшета и обычного компьютераВерсии сайта для телефона, планшета и обычного компьютера

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

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

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

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

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

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

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

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

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

Меню сохраняет стиль на любых экранахМеню сохраняет стиль на любых экранах

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

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

Кнопки социальных сетей при наведении становятся цветнымиКнопки социальных сетей при наведении становятся цветными

Иконка сайта

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

Современные требования к иконке сайтаСовременные требования к иконке сайта

Заметка понравилась? → Поделитесь в соцсетях:

Ваш комментарий

comments powered by HyperComments

Следующая заметка

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2015