Адаптивная вёрстка для NENCOM
![Версии сайта для телефона, планшета и обычного компьютера](/w/nencom/adaptiv-nencom.jpg)
Разделение версий
В процессе вёрстки возник вопрос: как оптимальнее всего обозначить границы для переключения версий? К чему привязаться: к размеру экрана или к назначению устройства? В итоге привязались к назначению, исходя из этого подобрали подходящие граничные значения в пикселях.
Мы решили, что планшет — даже если он большой — это всё тот же планшет, которым управляют жестами и читают, как книгу или журнал. Поэтому на вертикальном планшете отображается самая простая «мобильная версия» (такая же, как на телефонах), а в горизонтальной ориентации — промежуточная «планшетная версия».
Забота о пользователе
Поворот мобильного телефона проходит безболезненно: версия не меняется, размер шрифта остаётся таким же, ничего не мешает комфортно продолжить чтение. Я терпеть не могу решения, когда при повороте на сайте возникают какие-то новые блоки, меняется шрифт, и приходится искать то место, на котором остановился. Единственное заметное отличие — сетка подразделов: две колонки не влезли на вертикальном телефоне, поэтому там одна колонка.
Чем меньше экран, тем меньше блоков видит пользователь, а оставшиеся блоки стремятся занять всю полезную площадь.
Навигация по сайту
В основной версии сайта два меню: вертикальное и горизонтальное (выпадающее, вложенное). В мобильной — комбинированное сокращённое меню, в котором собраны только самые важные пункты. Но это не значит, что мы закрыли доступ к какой-то части контента на сайте. Просто в любой подраздел сайта можно попасть и без использования меню.
Меню сайта в тач-устройствах прячется за кнопку «три полоски» — самое привычное решение на данный момент:
![Меню сохраняет стиль на любых экранах](/w/nencom/menu-responsive.jpg)
GIF и PNG — на помойку
Все элементы сайта — логотип, флажки, иконки — перерисованы в векторе (svg). Это значит, что на любом дисплее (пусть даже из будущего) графика останется чёткой.
![Кнопки социальных сетей при наведении становятся цветными](/w/nencom/social-icons-vector.png)
Иконка сайта
Для закладки на главном экране мобильных устройств нужна большая иконка. На сегодняшний день джентльменский набор инонок сайта выглядит так:
![Современные требования к иконке сайта](/w/nencom/site-icon-trebovaniya.png)
Смотрите также
Комментарии
Дальнейшие комментарии закрыты. По всем вопросам пишите или звоните мне лично, см. раздел Контакты