Адаптация таблиц под мобильные устройства
Почти все дизайнеры сталкиваются с проблемой адаптации при отрисовке таблиц в интерфейсах — а именно адаптации таблиц под мобильные устройства. Справедливо также будет отметить полезность статьи для Frontend разработчиков, которые эти самые таблицы верстают.
Проблема
Проблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты таблицы за ширину экрана на мобильном устройстве.
Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.
Подопытный набор данных
Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.
Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы — справа тратится слишком много места.
- С фиксированной шириной и переносом строк
- С шириной по контенту
Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.
Десктоп
В окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине — то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.
Варианты адаптации
Проблема — наша таблица по ширине не влезает в телефон.
- Уменьшать шрифт
- Убирать колонки
- Делать растровую картинку с таблицей и вставлять ее в макет
Возможные верные решения по убыванию
- Каждую строку таблицы делать блоком
- Горизонтальный скроллинг
Первый вариант адаптации — сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.
Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)
Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.
Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скроллинг.
Второй вариант — горизонтальный скроллинг таблицы
Для реализации данного подхода — нам нужно взять таблицу из десктопной версии сайта, и поместить ее в мобильный экран, а весь тот контент, который не помещается по ширине вынести за границы экрана, добавив при этом горизонтальную прокрутку к скрытым столбцам.
Субъективно для меня — это наименее подходящий вариант отображения таблиц в мобильных устройствах — так, как он скрывает большую часть контента за пределами окна устройства — что нарушает визуальную целостность данных контекста каждой строки таблицы (мы не видим строку целиком).
Вывод
Теперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).
Если вы заметили ошибки, или вам есть что дополнить — дайте мне знать, я обязательно это сделаю. Спасибо за внимание!
Как оптимизировать таблицу для мобильной версии 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; > >
Качество целевой страницы
Качество целевой страницы – это показатель соответствия страницы, которая открывается при нажатии на объявление, ожиданиям пользователей. При определении показателя мы сочетаем автоматизированный анализ с оценкой специалистов. От результата зависит рейтинг ваших объявлений и, как следствие, цена за клик и позиция на аукционе. Объявления могут показываться реже (или вообще не показываться), если они ведут на неудобные или неинтересные для пользователей сайты.
Google: почему скорость загрузки важна?
Чем дольше скорость загрузки страницы, тем сильнее это влияет на показатели отказов, например:
- если скорость загрузки замедлить с 1 секунды до 3, то показатель отказов вырастет на 32%;
- если скорость загрузки замедлить с 1 до 6 секунд, то показатель вырастет на 106%;
- страницы, помеченные как медленные, могут быть понижены в поиске Google.
Связался с Google ��
Техническая поддержка Google Ads мне никаких конкретных цифр не дала:
Katarzyna · 10:45 AM Добрый день! Вас приветствует отдел рецепции для новых рекламодателей Google Ads. Меня зовут Екатерина. Чем могу помочь?
Я: Здравствуйте, есть вопрос о влиянии скорости загрузки целевой страницы на стоимость за клик. Где-то попадалось, что показатели PageSpeed Insights ( https://developers.google.com/speed/pagespeed/insights/?hl=RU ) как-то влияют на стоимость клика в Гугл-рекламе. Не могли-бы Вы дать какую-то информацию, ссылки на какие-то документы по этому вопросу. Спасибо.
Пропустим неинтересные моменты знакомства-идентификации, переключения на другого специалиста…
Yuliia · 11:06 AM отвечая на Ваш вопрос — скорость загрузки целевой страницы влияет на показатели качества, а это в свою очередь влияет на то, как часто обьявление может выигрывать в аукционе и по меньшей цене за клик — чем выше показатель качества, тем больше вероятность того, что обьявление выиграет в аукционе, а цена за клик будет ниже
Я: А можете дать ссылки на какие-то документы по этому вопросу? Какие-то конкретные цифры, формулы?
Yuliia · 11:11 AM https://support.google.com/google-ads/answer/1722122 «Фактическая цена за клик. Высокое качество рекламы зачастую позволяет показывать ее по более низкой цене за клик.» подскажите, пожалуйста, что Вы имеете в виду под формулами ?
Я: Я не нашел там ответа как скорость загрузки целевой страницы влияет на качество объявления? под формулами: увеличили скорость загрузки целевой страницы в 2 раза — получили снижение цены в 2 раза )
Yuliia · 11:12 AM скорость загрузки целевой страницы влияет на показатель качества, а это в свою очередь может влиять на цену за клик https://support.google.com/google-ads/answer/2404197?hl=ru вот здесь хорошо описано про качество целевой страницы. Если Вы ее оптимизируете постоянно, если Ваша страница быстро загружается, система система дает ей хорошую оценку. От этой оценки зависит рейтинг обьявлений, и как следствие цена за клик и позиция на аукционе
Я: Да, но хотелось-бы конкретные цифры… А так это общие фразы…
Yuliia · 11:17 AM конкретных формул не могу Вам назвать, это больше касается маркетинговой стороны рекламы, есть общие рекомендации, как повысить качество целевой страницы.
Посему у заказчика встал вопрос по ускорению загрузки сайта интернет-магазина codan.com.ua
Все доработки будем проводить на тестовом сервере, а посему, для корректного сравнения в конце, его необходимо привести его к полному соответствию основному сайту, подключить модуль mod_pagespeed , все основные настройки PHP, .htaccess.
На тестовый сервер был установлен SSL Let’s Encrypt сертификат.
Оба сайта, основной и тестовый, физически находятся на одном VPS-сервере, что сильно облегчает задачу корректного сравнения результатов работы.
Перед началом работы зафиксируем исходные показатели:
Google Search Console показала, что основная масса страниц (376) codan.com.ua с низкой скоростью.
В Google Реклама колонка «Скорость работы на мобильных устройствах»: максимальное значение — 5/10:
Обращаем внимание также на последний столбец — «Доля кликов для мобильных страниц».
Для примерного измерения скорости загрузки сайта воспользуемся online-сервисом: Google Page Speed Insights . Все алгоритмы расчета показателей скорости загрузки для мобильных страниц Google реализовал здесь. Необходимо учитывать, что нагрузка на этот сайт в последнее время огромная и показатели этого сайта очень сильно плавают и зависят от этой нагрузки, поэтому нужно делать несколько, даже много тестов в разное время и ориентироваться на наибольшее значение.
По желанию заказчика, в первую очередь, будем оптимизировать страницу товара. Для доработки была выбрана средняя по наполненности страница товара: Универсальная смазка S6+ Berner .
Pagespeed для мобильных блок 1
Pagespeed для десктоп блок 1
Pagespeed для мобильных блок 2
Pagespeed для десктоп блок 2
Pagespeed для мобильных блок 3
Pagespeed для десктоп блок 3
Для мобильных — 23, Для компьютеров – 52. Невеселые значения, в идеале сайт должен набирать более 90 баллов, чтобы попасть в зеленую зону. Но на практике мало кому это удается (особенно если это касается мобильной версии — здесь даже в «оранжевую» зону мало кто попадает).
И если посмотреть показатели Pagespeed топовых магазинов Украины :
Pagespeed для мобильных Розетка
Pagespeed для мобильных Брейн
Pagespeed для мобильных блок 2
Pagespeed для десктоп блок 2
И тогда становится понятно, что увеличить показатели Pagespeed очень непросто даже для таких монстров ��
А теперь измерим показатели более тонкими, профессиональными инструментами:
gtmetrix.com , правда этот инструмент, бесплатно измеряет только показатели десктопной страницы, но эта информация нам потом пригодится для анализа…
Ну и теперь самый точный, прецизионный инструмент, на его показания не влияет нагрузка на сайт : https://www.webpagetest.org/
Здесь мы видим, что все показатели качества красные…
Кому неинтересны технические детали проделанной работы, приведу кратко то, чего мы добились в результате оптимизации :
Pagespeed для мобильных блок 1
Pagespeed для десктоп блок 1
Pagespeed для мобильных блок 2
Pagespeed для десктоп блок 2
Pagespeed для мобильных блок 3
Pagespeed для десктоп блок 3
Для удобства составил таблицу:
Показатель для мобильных
Как сделать таблицы адаптивными с CSS
От автора: я считаю, что необходимость создавать адаптивные макеты таблиц возникает гораздо чаще, чем ожидают большинство разработчиков. Часто реакцией на это является желание реализовать какую-то собственную систему координатной сетки или использовать предустановленную библиотеку. Не делайте этого – вы можете сделать таблицы адаптивными с помощью простого CSS.
Моя недавняя статья на HackerNews Пишите HTML, как будто сейчас 1999 год, получила намного больше внимания, чем я ожидал. Последовало несколько комментариев, в которых говорилось о том, что элементы table не очень хорошо работают с мобильными устройствами или о невозможности использования удобного макета на небольших экранах. Это просто неправда.
Ниже приведены две отдельные демо-версии, показывающие, как оптимизировать HTML table для мобильных устройств, используя только минимальное количество CSS. Эти реализации могут быть неидеальными, но они намного лучше реализации множества пользовательских элементов div в виде таблиц.
Демо 1: Просто позвольте им прокручиваться
Хорошо, я признаю, что эта реализация не самая лучшая, но я считаю, что она хорошо работает с огромными наборами данных. Просто установите min-width для родительского элемента table, и браузер просто потребует от пользователя прокручивать содержимое по горизонтали.