yandex-mobile

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

Совсем недавно, а если быть точным – 2 февраля, подписчики блога Яндекса, получили письмо “Как быть мобильным”. В данном письме указано только два условия, по которым Яндекс считает страницы пригодными для мобильных устройств:

  • не должно быть горизонтальной прокрутки;
  • не должно быть элементов, которые не работают в популярных мобильных платформах.

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

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

table

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

Для реализации такого вида адаптивности таблиц необходимо добавить следующий код в таблицу стилей:

А какой способ используете вы?


Буду признателен за каждый лайк:


Комментарии:

    • ApollonGuru -  29.06.2016 - 23:26

      Данные необходимо добавлять в таблицу стилей css. Вам ли не знать)

      Ответить
  1. Ирина -  14.03.2017 - 17:35

    Большое спасибо, делаю качественные сайты на UCOZ, Ваше решение отлично подошло!

    Ответить
  2. Андрей -  21.03.2017 - 15:00

    Вау отлично? спасибо уважаемый? что старался для нас! Все быстро сделал и получилось, спасибо огромное.

    Ответить

Reply Cancel

Введенный e-mail не будет виден другим пользователям :

Back to Top