Как оптимизировать таблицу для мобильной версии opencart

Адаптация таблиц под мобильные устройства

Почти все дизайнеры сталкиваются с проблемой адаптации при отрисовке таблиц в интерфейсах — а именно адаптации таблиц под мобильные устройства. Справедливо также будет отметить полезность статьи для Frontend разработчиков, которые эти самые таблицы верстают.

Проблема

Проблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты таблицы за ширину экрана на мобильном устройстве.

Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.

Подопытный набор данных

Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.

Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы — справа тратится слишком много места.

1. С фиксированной шириной и переносом строк
2. С шириной по контенту

Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.

Десктоп

В окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине — то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.

Варианты адаптации

Проблема — наша таблица по ширине не влезает в телефон.

1. Уменьшать шрифт
2. Убирать колонки
3. Делать растровую картинку с таблицей и вставлять ее в макет

Возможные верные решения по убыванию

1. Каждую строку таблицы делать блоком
2. Горизонтальный скроллинг

Первый вариант адаптации — сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.

Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)

Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.

Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скроллинг.

Второй вариант — горизонтальный скроллинг таблицы

Для реализации данного подхода — нам нужно взять таблицу из десктопной версии сайта, и поместить ее в мобильный экран, а весь тот контент, который не помещается по ширине вынести за границы экрана, добавив при этом горизонтальную прокрутку к скрытым столбцам.

Субъективно для меня — это наименее подходящий вариант отображения таблиц в мобильных устройствах — так, как он скрывает большую часть контента за пределами окна устройства — что нарушает визуальную целостность данных контекста каждой строки таблицы (мы не видим строку целиком).

Вывод

Теперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).

Если вы заметили ошибки, или вам есть что дополнить — дайте мне знать, я обязательно это сделаю. Спасибо за внимание!

Как таблицу оптимизировать для мобильной версии

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Больше способов поделиться.

Сейчас на странице 0 пользователей

• Нет пользователей, просматривающих эту страницу.

Покупцям

• Оплата розширень фізичними особами
• Оплата розширень юридичними особами
• Політика повернень

Розробникам

• Регламент розміщення розширень
• Регламент продажу та підтримки розширень
• Віртуальний обліковий запис автора
• Політика просування оголошень
• API каталогу розширень
• Вирішення спорів щодо авторських прав

Корисна інформація

• Публічна оферта
• Політика повернень
• Політика конфіденційності
• Платіжна політика
• Політика передачі особистих даних
• Політика прозорості

Останні розширення

Движок интернет магазина OpenCart (ocStore) — официальный сайт OpenCartForum.com Powered by Invision Community

• Уже зарегистрированы? Войти
• Регистрация

Раздел покупок

ocStore

• Назад
• Официальный сайт
• Демо ocStore 3.0.3.2
• Демо ocStore 2.3.0.2.4
• Скачать ocStore
• Документация
• История версий ocStore

Шаблоны

OpenCart.Pro

• Создать.

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

Как сделать таблицы адаптивными с CSS

От автора: я считаю, что необходимость создавать адаптивные макеты таблиц возникает гораздо чаще, чем ожидают большинство разработчиков. Часто реакцией на это является желание реализовать какую-то собственную систему координатной сетки или использовать предустановленную библиотеку. Не делайте этого – вы можете сделать таблицы адаптивными с помощью простого CSS.

Моя недавняя статья на HackerNews Пишите HTML, как будто сейчас 1999 год, получила намного больше внимания, чем я ожидал. Последовало несколько комментариев, в которых говорилось о том, что элементы table не очень хорошо работают с мобильными устройствами или о невозможности использования удобного макета на небольших экранах. Это просто неправда.

Ниже приведены две отдельные демо-версии, показывающие, как оптимизировать HTML table для мобильных устройств, используя только минимальное количество CSS. Эти реализации могут быть неидеальными, но они намного лучше реализации множества пользовательских элементов div в виде таблиц.

Демо 1: Просто позвольте им прокручиваться

Хорошо, я признаю, что эта реализация не самая лучшая, но я считаю, что она хорошо работает с огромными наборами данных. Просто установите min-width для родительского элемента table, и браузер просто потребует от пользователя прокручивать содержимое по горизонтали.

Как оптимизировать таблицу для мобильной версии opencart

Оптимизация сайта для мобильных устройств — важная часть работы по продвижению проекта. Чтобы сделать интерфейс дружественным и адаптировать сайт под портативные устройства, следует отключать некоторые плагины в мобильной версии.

Оптимизация сайта для мобильных устройств

Оптимизировать мобильную версию сайта необходимо, чтобы успешно продвигать проект, поскольку количество пользователей, посещающих ресурсы с портативных устройств, растет с каждым годом:

После того как Google ввел тест на Mobile friendly и внес правки в алгоритм ранжирования Mobile first, адаптивный дизайн, высокая скорость загрузки и юзабилити мобильной версии стали играть первоочередную роль.

Чтобы обеспечить мобильных пользователей необходимым функционалом и быстрой загрузкой сайта, важно использовать подходящие плагины, которые будут корректно работать на всех девайсах.

Например, при использовании Adobe Flash Player в мобильной версии будет отображаться ошибка: «Используются неподдерживаемые плагины». В такой ситуации контент не будет воспроизводиться и пользователь увидит пустой экран либо сообщение об ошибке:

В большинстве случаев такая ошибка возникает при использовании неподдерживаемого формата видеофайла, который не может воспроизвести мобильное устройство. Также на мобильных устройствах Android и Apple не поддерживаются компоненты Java и Silverlight. Некоторые плагины, модули и расширения также негативно влияют на производительность сайта, вызывая его медленную загрузку на портативных девайсах.

Специалисты Google рекомендуют использовать для проигрывания видеоконтента и анимации в мобильной версии теги HTML5 вместо неподдерживаемых плееров. Также можно отключить ненужные для мобильной версии модули с помощью медиа-запросов. Они позволяют задавать определенные CSS-правила для портативных устройств, исходя из размеров их экрана.

Например, вам необходимо отключить анимационный рекламный блок на мобильных устройствах с разрешением экрана менее 600px. Нужно прописать в таблицу стилей CSS модуля такой медиа-запрос, заменив значение «block-id» на идентификатор блока, который нужно скрыть:

 @media screen and (max-width: 600px) < #block-id < visibility: hidden; display: none; > >