Поисковая оптимизация

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

(2 оценок, среднее: 3,00 из 5)
Загрузка...

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

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

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

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

table

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

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

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tr th:first-child {font-weight:bold;font-size:1.3em;}
tbody td, tbody th {display: block; text-align:center;}
tbody td, tbody th:before {
content: attr(data-th);
display: block;
text-align:center;
}
}

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

9 комментариев

    • ApollonGuru Ответить

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

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

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

  3. Олег, огромное спасибо! Очень долго не могла решить свою проблему по адаптации таблиц под мобильные устройства на сайтах wordpress, пыталась устанавливать плагины, даже тему вордпресс менять, но увы… ничего не помогало. У меня интернет магазин, а товары никак не хотели вставать по 1 в колонке — по 3 шт. в ряд и все тут! Теперь все красиво и за какие-то 3 минуты! Спасибо за помощь.

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

  5. Считаю, не нужно гробить форму представления и структуру информации сложного материала с широкими таблицами и большими картами, древовидными схемами в угоду тупым (именно тупым и неадекватным!) решениям и правилам Яндекса и других поисковиков. Если пользователю нужна эта информация — он сядет за десктоп с широким экраном. Нужно зарубить на носу — НЕ ВСЯКАЯ информация адаптивна для узких вертикальных мобильных устройств. И тут ничего не поделать. Горизонтальная прокрутка — единственно приемлемое решение (или поворот мобильника). Чтобы там Яндекс не говорил.

Reply To Андрей Cancel Reply

Telegram

Подписывайтесь на наш канал в Telegram, будьте лучше ваших конкурентов

Подпишитесь на наш канал

You have Successfully Subscribed!