Мобильная версия сайта. Как вы поступаете?

[Рупорт]

Наконец-то добрался до адаптации сайта под мобильные устройства  .
Вопрос: как лучше поступить - сделать мобильную версию на поддомене m.site.ru или писать адаптивную верстку под все разрешения устройств?
Кто как делает? Что посоветуете? Какие нюансы учесть?

Еще один важный момент. Если странице товара имеется много описания, картинки и т.д. То для мобильной версии (адаптивного дизайна) по этому же адресу должен быть представлен ограниченный набор описаний и элементов товара. Как быть?

Какое максимальное разрешение экрана свидетельствует о том, что это мобильное устройство? Или по каким-то другим параметрам это отслеживать на сервере (в обработчиках скриптов php)?

[Clever]

или писать адаптивную верстку под все разрешения устройств

Современные возможности html 5+ и css 3+ позволяют писать адаптивную верстку с любым поведением.
Могу сказать по собственному опыту, качественная адаптивная верстка не вызывала нареканий ни разу.

Насчет "под все разрешения" - это слишком громоздко звучит. Сейчас актуально от 3 до 5 диапазонов использовать, в зависимости от потребностей. Опять же, по своему опыту скажу - мне обычно хватает и 3. Посмотрите на какой-нибудь адаптивный css фреймворк, точнее на сетку, например flexboxgrid.com, или бутстраповская, они предназначены для создания адаптивных сайтов без необходимости мобильной версии.

Для каркаса можно использовать семантику html 5 и CSS Grid Layout, а внутренние блоки на flexbox. Изображения в статьях перевести в picture, единицы измерения в rem, и т.д.

Также некоторые используют для мобильных версий Amp Google и Turbo Яндекс, но это уже по желанию.
Добавлено: 09-08-2018, 12:50:39

Еще один важный момент. Если странице товара имеется много описания, картинки и т.д. То для мобильной версии (адаптивного дизайна) по этому же адресу должен быть представлен ограниченный набор описаний и элементов товара. Как быть?

Ничего не стоит ограничивать, поисковые системы рекомендуют, чтобы содержимое на основном сайте и на мобильном не отличалось (если мобильная версия есть).
Добавлено: 09-08-2018, 12:58:24

Какое максимальное разрешение экрана свидетельствует о том, что это мобильное устройство? Или по каким-то другим параметрам это отслеживать на сервере (в обработчиках скриптов php)?

Достаточно отслеживать на уровне css:

@media (min-width: 576px) {***}
@media (min-width: 768px) {***}
@media (min-width: 992px) {***}
@media (min-width: 1200px) {***}

[Sorokin Vladimir]

Кто как делает?

У меня как то так повелось, что я еще на этапе верстки шаблона, сразу его (шаблон) адаптирую.
Раньше "@media only screen" прописывал буквально под все существующие размеры, потом понял что перебор, поэтому (как написал  Clever) сократил раз в пять  -  вполне хватает.
А как вы решите  -  это дело ваше, мне удобней так....

[Рупорт]

@media (min-width: 576px) {***}
@media (min-width: 768px) {***}
@media (min-width: 992px) {***}
@media (min-width: 1200px) {***}

А если пользователь поворачивает планшет на 90 градусов, то width автоматически изменяется и сразу действуют другие стили из соответствующего блока?

Добавлено: 09-08-2018, 13:20:02

Ничего не стоит ограничивать, поисковые системы рекомендуют, чтобы содержимое на основном сайте и на мобильном не отличалось (если мобильная версия есть).

Например, на странице товара интернет-магазина есть блок похожие товары. В полной версии сайта там 12-20 похожих товаров. Неужели и в мобильной версии надо тоже их все выводить?

[Clever]

А если пользователь поворачивает планшет на 90 градусов, то width автоматически изменяется и сразу действуют другие стили из соответствующего блока?

На то она и адаптивная верстка, чтобы адаптироваться к изменяющимся параметрам.  Для пропорций масштаба прописывают:

<meta name="viewport" content="width=device-width, initial-scale=1">
и
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

А если есть необходимость еще и с ориентацией экспериментировать (хотя и без этого никто не жаловался), то:
/* Портретная ориентация шаблона */
@media screen and (orientation:portrait) {
    /* Стили для портретной ориентации шаблона */
}
/* Ландшафтная ориентация шаблона*/
@media screen and (orientation:landscape) {
    /* Стили для ландшафтной ориентации шаблона */
}

Например, на странице товара интернет-магазина есть блок похожие товары. В полной версии сайта там 12-20 похожих товаров. Неужели и в мобильной версии надо тоже их все выводить?

А в чем проблема ? На разрешении экрана до 576px все блоки выстраиваются в один вертикальный ряд 100% ширины, и все.

При грамотном подходе проблем с этим нет.

НЕ НУЖНО ВЕРСТАТЬ ПОД РАЗНЫЕ ЭКРАНЫ РАЗНЫЙ HTML КОД
Верстка должна быть единой, а поведение (адаптивность) достигается с помощью css.


Добавлено: 09-08-2018, 14:43:54

Раньше "@media only screen" прописывал буквально под все существующие размеры, потом понял что перебор, поэтому (как написал  Clever) сократил раз в пять  -  вполне хватает.

Мне для шаблона c двумя сайдбарами, адаптирующегося от 240px до 1680px вполне хватает grid каркаса, адаптивной flexbox сетки и 3 размеров экранов:

@media (min-width: 576px) {***}
@media (min-width: 768px) {***}
@media (min-width: 992px) {***}

Также собираюсь начать применять динамические переменные css, это очень удобно.

[Sorokin Vladimir]

Мне для шаблона c двумя сайдбарами, адаптирующегося от 240px до 1680px вполне хватает grid каркаса, адаптивной flexbox сетки и 3 размеров экранов:

@media (min-width: 576px) {***}
@media (min-width: 768px) {***}
@media (min-width: 992px) {***}

аналогично....

[ura1205]

использую плагины для этих целей

[Leonova]

Сначала делала редирект на поддомен или в папку mobile, но ведь если люди уходят на другую папку или поддомен то поиск им засчитывает посещения новых страниц. Поэтому лучше делать так:

@media (min-width: 576px) {***}
@media (min-width: 768px) {***}
@media (min-width: 992px) {***}
@media (min-width: 1200px) {***}

Адреса страниц не меняются, все посещения видны для поиска, нет никаких редиректов и т.д.

[vagner300]

ПИшите адаптив. Тема 100 раз обсуждалась.
Еще подуймайте на турбо и АМП страницами.

[Алексей Наталушко]

Сделайте хорошую адаптивную верстку сайта и не заморачивайтесь! Сайт - это инструмент и ничего более.