ТЕХНОЛОГИИ
#HolyWarModeOn: Адаптив и таблицы
Холиварили на тему того, как сделать таблицу красиво на мобилках
Маленькая рабочая неделя закончилась небольшим холиваром. Обсуждали одну из основных болячек адаптивных сайтов: таблицы. Из проекта в проект тестеры, смакуя, расписывают их недостатки, дизайнеры пытаются спрятать пару блоков, клиент хочет, чтобы было видно всё и как на компьютере, менеджер проектов тихо плачет в подушку. Чтобы в будущем прекратить эти мучения, на холиваре обсудили все варианты адаптации таблиц.
На любом e-commerce без таблиц никуда. В первую очередь — корзина, зачастую ещё и таблицы размеров. С учетом растущей аудитории мобильных устройств разработчики обязаны заботиться о комфорте пользователя при просмотре подобной информации. Предлагаемые решения, по сути, ничего инновационного в себе не несут, ведь это уже давно устоявшиеся методы работы с таблицами на мобильных. Какие делать — надо исходить из контента конкретного проекта, и выбирать самое подходящее решение из возможных. Где-то хватит скроллера, где-то — развернуть таблицу вертикально и скрыть нерелевантные поля, а где-то не обойтись без умелой руки дизайнера.
Дина
Менеджер проектов
Если вы — занятой и деловой, и не можете позволить себе посмотреть двадцатиминутное видео, краткий пересказ для вас:
- Прекрасная на мониторе таблица не влезает в смартфон. Страдают все: пользователь, дизайнер, разработчик.
- Выход есть, даже два. Первый: типовое решение для таблиц. Это готовый плагин или кусок кода, который сделает всем щастье. Быстро, дёшево, но не всегда красиво и можно сломать контентом. Второй выход — уникальный дизайн. Красивый и хорошо юзабельный, но не универсальный, дорогой и придётся помучиться над вариантами для разных разрешений.
- Типовых решений достаточно: выбирай и не ной. Можно скрыть лишнее, развернуть вертикально, совместить эти 2 способа или сделать каждую строку отдельным блоком.
- Можно закрепить первый столбец, а остальные — горизонтально скролить.
- Приз зрительских симпатий получил вариант со сворачиванием строк.
- Дина показала нижнее бельё (вы всё ещё не хотите посмотреть видео?).
- Любите таблицы, не такие уж они и проблемные.
Почитать по теме: