Нужна ли адаптивная вёрстка для компьютерного браузера, если кто-то будет уменьшать окно браузера до мобильной версии?

Question

[yamer5]

Есть сайт Ozon к примеру, если на этом сайте уменьшить окно браузера до мобильной версии, то видим, что там не адаптивная вёрстка, а сделано в зависимости от User agent. Т.е. на компьютере при маленьком окне браузера там блок не уменьшается в размере, а остаётся скролл вправо. А если открыть эту же страницу с мобильным User Agent, то страница выглядит корректно.
Насколько такой подход к разработке правильный? Или лучше не привязывать внешний вид сайта к мобильному User Agent, а делать сразу адаптивным? Навряд ли многие люди так уменьшают окошко браузера вручную и для чего это нужно...

Comments

[Владислав Лысков]

ozon НЕ адаптивный, у него мобильная версия
лучше делать адаптивный

[alexalexes]

Кроме верстки, вы еще должны забыть про user agent, когда проверяете функционал браузера для какой-нибудь технологии JS.
Например, если вам нужны события тачскрина, то нужно не проверять user agent на наличие android или ios, а нужно проверять наличие функций, с которыми работает тач:

if('touchstart' in document)
{
 // тут работаем с тач событиями
}

Answer 1

[ThunderCat]

Насколько такой подход к разработке правильный?

Нинасколько. Так как озон достаточно старая система, проектирование мобильной версии с отдельным мобильным видом наследие периода когда верстку сделать адаптивной было гораздо сложнее, а поисковые роботы еще ориентировались на субдомены по типу м.домен.тлд для отображения результатов поиска с мобильных устройств. Менять что-то с потерей поисковой индексации уже никто не будет.

В сегодняшних реалиях такой подход для новых проектов неприемлем, так как это лишняя работа и лишний код отдельно для мобильной версии, что еще и обслуживание усложняет. Все делают мобайл фирст верстку (так как ~80% траффика это мобилы), и сразу адаптив, так как современный цсс делает это на раз-два. Короче, сейчас так не делают.

Навряд ли многие люди так уменьшают окошко браузера вручную и для чего это нужно...

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

Comments

[yamer5]

Хорошо, а у какого сайта на ваш взгляд идеальная, адаптивная мобильная вёрстка?

[DIVSIDE]

yamer5, Идеально это когда адаптивно-резиновая + в относительных единицах. На озоне реально так потому что это динозавр, и все переписать это гемор

[ThunderCat]

yamer5, Что значит идеальная? Каждый дизайн реализуется под устройства с учетом баланса доступности важных функций в один клик и экономии пространства. Как пример - прям вот этот сайт, он адаптивный, хорошо скэйлится и выглядит нормально на большинстве устройств, основные функции в доступе. Что касается элементов и их расположения - это уже область UI/UX, которая к данному вопросу не относится.

[yamer5]

ThunderCat, хорошо, последний вопрос, а если например меню и оно в другом месте на мобильном устройстве, не в центре экрана, как на компьютере. Вместо того, чтобы это меню отдельно выводить, можно его клонировать на js, удалив при этом меню из ПК версии и подредактировать на js и также в обратном порядке. Так будет правильно? Или лучше в мобильной версии скрыть меню от ПК display:none, а в мобильной версии наоборот показать display:block?

[yamer5]

Хотя нет, не клонировать, а просто если блок перемешать, без клонирования, неправильно выразился.

[yamer5]

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

[ThunderCat]

yamer5,

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

Чет все превращается в лекцию по адаптивной верстке ). Для меню есть специальные приемы по приведению его из строки в гамбургер. Готовую реализацию можно посмотреть например в бутстрапе или почитать по запросу мобильное меню статьи в гугле.

Answer 2

[Refguser]

Или лучше не привязывать внешний вид сайта к мобильному User Agent, а делать сразу адаптивным?

Именно так.

Навряд ли многие люди так уменьшают окошко браузера вручную и для чего это нужно...

Почти все так делают у кого мониторы больше 24". Другой вопрос - насколько.. Но адаптивный дизайн - это не про уменьшение окна, а про комфортную работу на узких экранах.
Привязка же к UA - это тоже не про адаптив. Это про функционал.

Comments

[CzarOfScripts]

А причем тут дюймы монитора?

[Refguser]

CzarOfScripts, при разрешении и физ. размерах.