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

Автор Тема: Мобильная версия сайта. Как вы поступаете?  (Прочитано 328 раз)

Оффлайн РупортАвтор темы

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 90
  • Сообщений: 352
  • Карма: 19
    • Просмотр профиля

Оффлайн РупортАвтор темы

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

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

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




« Последнее редактирование: 09-08-2018, 07:52:23 от Рупорт »


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 479
  • Сообщений: 939
  • Карма: 84
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн 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) {***}
« Последнее редактирование: 09-08-2018, 12:58:24 от Clever »

Оффлайн Sorokin Vladimir

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 101
  • Сообщений: 433
  • Карма: 8
  • Пол: Мужской
  • Учиться никогда не поздно!
    • Просмотр профиля
    • Сделай сам

Оффлайн Sorokin Vladimir

  • Старожил
  • ****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 101
    • Сообщений: 433
    • Карма: 8
    • Пол: Мужской
    • Учиться никогда не поздно!
      • Просмотр профиля
      • Сделай сам
Кто как делает?

У меня как то так повелось, что я еще на этапе верстки шаблона, сразу его (шаблон) адаптирую.
Раньше "@media only screen" прописывал буквально под все существующие размеры, потом понял что перебор, поэтому (как написал  Clever) сократил раз в пять  -  вполне хватает.
А как вы решите  -  это дело ваше, мне удобней так....
« Последнее редактирование: 09-08-2018, 13:07:59 от Sorokin Vladimir »
Мой девиз:    Делу время, потехе – час!

Оффлайн РупортАвтор темы

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 90
  • Сообщений: 352
  • Карма: 19
    • Просмотр профиля

Оффлайн РупортАвтор темы

  • Старожил
  • ****
@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 похожих товаров. Неужели и в мобильной версии надо тоже их все выводить?
« Последнее редактирование: 09-08-2018, 13:20:44 от Рупорт »

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 479
  • Сообщений: 939
  • Карма: 84
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн 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, это очень удобно.
« Последнее редактирование: 09-08-2018, 14:46:54 от Clever »


Оффлайн Sorokin Vladimir

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 101
  • Сообщений: 433
  • Карма: 8
  • Пол: Мужской
  • Учиться никогда не поздно!
    • Просмотр профиля
    • Сделай сам

Оффлайн Sorokin Vladimir

  • Старожил
  • ****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 101
    • Сообщений: 433
    • Карма: 8
    • Пол: Мужской
    • Учиться никогда не поздно!
      • Просмотр профиля
      • Сделай сам
Мне для шаблона c двумя сайдбарами, адаптирующегося от 240px до 1680px вполне хватает grid каркаса, адаптивной flexbox сетки и 3 размеров экранов:

@media (min-width: 576px) {***}
@media (min-width: 768px) {***}
@media (min-width: 992px) {***}
аналогично....
Мой девиз:    Делу время, потехе – час!

Оффлайн ura1205

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 10
  • Сообщений: 105
  • Карма: -1
  • Пол: Мужской
    • Просмотр профиля
    • Интернет жизнь

Оффлайн ura1205

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


 

Похожие темы

  Тема / Автор Ответов Последний ответ
2 Ответов
1198 Просмотров
Последний ответ 01-04-2013, 20:51:50
от bibika
4 Ответов
1773 Просмотров
Последний ответ 09-10-2013, 23:04:47
от tamkor
10 Ответов
2869 Просмотров
Последний ответ 07-04-2015, 20:06:11
от Dogica
3 Ответов
1275 Просмотров
Последний ответ 23-06-2016, 17:47:32
от viktalina
2 Ответов
619 Просмотров
Последний ответ 25-03-2016, 23:29:22
от Camus