Чего нельзя делать в резиновой верстке?

243

02 мая 2018, 01:56

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

В связи с этим хочу задать вопрос.

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

Answer 1

Если без дубля не получается то можно и продублировать. Это гораздо лучше чем вы будете вырезать и вставлять скриптом. Бывает очень много ситуаций когда адаптивный дизайн нарисован без грамотного учета перестановки блоков и как ты не перевёрстывай все равно будет дубль.И это нормально т.к. дизайнеры не обязаны знать как устроена верстка, поэтому подобные вещи лучше решать на этапе проектирования.

Answer 2

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

Answer 3

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

Можно также решить задачу с максимально SEO-friendly подходом: по умолчанию отображать блок для мобильных разрешений (mobile first, всё-таки), а для десктопов пересобирать этот блок с другой разметкой яваскриптом.

P.S. и всё же, до конца не понимаю почему этот блок нельзя «порешать» стилями. Если там неподходящая разметка для отображения дизайнерского замысла, то существующий блок можно просто-напросто переверстать.

Answer 4

Как уже отвечали заранее - любое дублирование контента в коде принесет проблемы в SEO. Для вашего блока можно использовать верстку наподобие такой:

<div class="links-wrapper">
 <div class="link-item">
  <a href="#">
   <span class="link-icon"><img></span>
   <span class="link-text">link here</span>
  </a>
 </div>
</div>

И для скрывать ненужные элементы по медиазапросу. Если иконки предполагаются более-менее одинаковые - можно выводить их через :before к блоку, что сократит html код (но увеличит css, да).