1

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

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

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

2
  • 2
    вопрос слишком абстрактный...
    – Air
    30 апр 2018 в 17:48
  • Согласен, не без этого. 30 апр 2018 в 21:33

4 ответа 4

2

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

0
2

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

4
  • Я это понимаю, но представим , что так делать нельзя. На сколько корректно дублировать блок в коде с одинаковыми данными для данной цели? 30 апр 2018 в 17:50
  • 1
    Кто сказал, что нельзя? Можно. А если лень, совсем никак не сделать или не хватает навыков, то приходится.
    – Arbery
    30 апр 2018 в 18:02
  • В общем ошибкой это не является ? 30 апр 2018 в 19:39
  • для ошибок css / html есть валидаторы. Остальное - на усмотрение верстальщика.
    – Arbery
    1 мая 2018 в 8:25
1

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

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

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

1

Как уже отвечали заранее - любое дублирование контента в коде принесет проблемы в 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, да).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.