Что произошло с дизайном веба — почему стали такие большие разрешения для мобильных устройств?

Question

[weranda]

Приветствую.

Какое-то время назад стал замечать, что множество сайтов показывает десктопную версию дизайна только при разрешении большем, чем 1200–1300 пикселей. А ниже этого показывает мне кнопку мобильного меню и другие штуковины для мобильных устройств. Задумываюсь, может быть я что-то где-то упустил?! Неужели столько мобильных устройств появилось с таким разрешением, что надо делать такие дизайны? Посмотрел статистику по мобильным устройствам и, вроде, не нашел большого количества мобильных устройств с таким разрешение, они есть, но их очень мало в общем объеме.

Лично мне не очень удобно разворачивать окно браузера на такую ширину (комфортно примерно 1200px) и часто приходится растягивать окно браузера для просмотра сайта в нормальном для десктопа режиме. Такое ощущение, не знаю, дизайн у некоторых сайтов делают настолько крупным, чтобы его с 10 метров было видно на мониторе, перед которым фактически сидишь в метре.

Поясните ситуацию?

Comments

[Lynn «Кофеман»]

А можно пример? Что-то на 1200 я такого не видел.

[weranda]

Lynn «Кофеман», roistat откройте, там не 1200, а больше 1300 (верхнее меню) и больше 1200 (нижнее меню). И таких сайтов полно.

[Sanes]

weranda, обычный адаптив с минимальным кол-вом контента. Что с ним не так?

[weranda]

Sanes, Меню для десктопа настроено на отображение с 1300 пикселей. Нормально это, или не очень нормально, я не знаю. Мне просто интересно зачем так делать — элементы мобильной версии привносить в десктопную. Наверное, в некоторых моментах это оправдано...

[Sanes]

weranda, ну захотелось им так.

[pavelsha]

Sanes, weranda, Думаю, что такое оправдано, если у тебя дестктоп с сенсорным экраном.
Наверное, Продакт-Овнер тут техно-гик.

Не ищите логичных объяснений там, где нет логики...

[pavelsha]

weranda,
Упасть не встать!
На мониторе ноута (HP Probook 13") на стартовой странице
- Логотип, номер телефона
- кнопка Вход / регистрация
- бургер-меню
- Два предложения текта и какой-то блок пустоты справа.

И все это грузиться 20 с

Офигенная экономия трафика и оптимизация верстки.

[Lynn «Кофеман»]

Ой, ну прямо скрытие левой колонки вдруг стало мобильной вёрсткой…

[Алекс Глебов]

1024 это айпад, с 1200 и делают для ноутов
еще есть айпад горизонтальный 1366

[Antony Bark]

Алекс Глебов, (orientation: %) в помощь

[Алекс Глебов]

Antony Bark, при чем тут orientation?

[Antony Bark]

Алекс Глебов,

.. айпад горизонтальный 1366 ..

*,
к тому, что средства современного CSS вполне сносно помогают определить, с каким устройством мы имеем дело

напр. touch-action + .. + CSS media посредством touch / no-touch + orientation* - в частности приведено для представленного вами примера

[Алекс Глебов]

Antony Bark, ну да, это бы решило проблему. Но touch в сафари не работает, и в ближайшем времени не будет, как и orientation.
И под такие media запросы не только подход к организации css нужно пересматривать, но и системы сеток. Сейчас адаптив делается только относительно ширины экрана.

[Antony Bark]

В отношении touch вы правы частичноСовместимость с браузером Touch, однако, проблемы с iOS это типично частный случай, вполне себе решаемый подключением библиотек / самостоятельным писанием скрипта и т.п.

Сейчас адаптив делается только относительно ширины экрана.

Явление массовое, но "адаптив делается" согласно ТЗ, в моей практике max\min-height встречается в 20-25% ТЗ. Не представляется, что есть более-менее внятная статистика по этой выборке для категоричности суждения.

Answer 1

[Roman K]

1. Доля мобильного трафика достигает 80-90% на большинстве ресурсов
2. Минимальное десктопное разрешение, которое есть у 99% десктопных юзеров — 1366х768 (самые дешёвые 15.6 дюймов ноутбуки, которым уже 10 лет от роду. Я не шучу, с таким разрешением я первый ноут купил в 2010. А в 2009 на ПК уже был моник 1440х900). При этом самое частовстречаемое — Full HD (1920x1080). Всё что ниже — таблетки

Отсюда вытекает вопрос: а зачем ради полутора землекопов сжигать деньги кастомеров/инвесторов, разрабатывая им отдельный интерфейс, если они и мобильной версией могут пользоваться, т.к. сейчас они полнофункциональные? Либо, если не разрабатывать отдельный, то зачем проектировать интерфейсы, ориентируясь на тех 1.5 землекопов, заставляя страдать (условно) остальные 99%?

Более того, эти 1.5 землекопа обычно оказываются неплатёжеспособной аудиторией (раз уж у них до сих пор монитор/ноут старше 10 лет).

Comments

[DevMan]

все это справедливо только при условии разворота браузера на весь экран.
у меня под руками всегда множество дисплеев. в основном от 1440 и выше, обычные и hidpi.
я не землекоп, но не вижу смысла держать браузер развернутым на весь экран; что не так?

[DevMan]

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

[Roman K]

DevMan, если не видишь смысла, значит тебя все устраивает, а если все устраивает - в чем вопрос? :)

[DevMan]

Roman Kitaev, у меня то как раз вопросов нет.
я только указал, что разрешение экрана не всегда совпадает с вьюпортом браузера.

[Shdim]

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

[DevMan]

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

Answer 2

[pavelsha]

Дизайнеры и верстальщики работают на понтовых мониторах 27+ с высокими разрешениями
Руководство, которое принимает их работы сидит за такими же мониторами или на мобильных устройствах с Retina-дисплеями ;-)
Если дизайнер и верстальщик работают в офисе, то так и надо "дизайн у некоторых сайтов делают настолько крупным, чтобы его с 10 метров было видно на мониторе". ПРОДАКТ--гОВНЕР идет по опенспейсу, сразу видит что работа идет в нужном ключе и на душе у него благостно.

Исследования целевой аудитории и их устройств также проводятся для галочки.

А результат ты описал выше.

Экономия трафика??? Обработать, сжать/оптимизировать графические элементы перед публикацией? Зачем??
Везде 5Джи и Wifi 6.

Answer 3

[Александр Прохорович]

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

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

Answer 4

[Сергей Арсентьев]

ИМХО многие вообще сейчас забили на десктоп при разработке, потому что уже доля трафиков со смартфонов превышает 70-80% - картина в метрике довольно стандартная .
Поэтому уже особенно не вникают в удобство для десктопа, главное чтобы в мобиле гарантированно смотрелось крупно, четко и без скроллинга )

Answer 5

[Sanes]

Потому что адаптив. Экономят на трафике, соответственно не нагружают страницу контентом. А что бы не смотрелось уныло, увеличивают шрифты и отступы.

Comments

[weranda]

Что значит «экономят на трафике» в вашем понимании? — Покажу я меню так, чтобы оно было видно все или через кнопку — трафика (объема скачиваемой информации) не сэкономит.

[Sanes]

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

[weranda]

Sanes, все равно не понял пояснение к вашему первому сообщению. Вопрос не об отдельной мобильной версии сайта. Все в кашу...

[Sanes]

weranda,
контента мало, поэтому и приходится страдать гигантоманией с крупными шрифтами и большими отступами. Чтобы на десктопе это не выглядело сиротливо.

[pavelsha]

Sanes, Если пукнул в воду, то или признай, или не настаивай на своей правоте.
Обсуждаете явно не то, о чем спрашивает автор вопроса.

[Sanes]

pavelsha, что в этой фразе непонятного?

Такое ощущение, не знаю, дизайн у некоторых сайтов делают настолько крупным, чтобы его с 10 метров было видно на мониторе, перед которым фактически сидишь в метре.

Answer 6

[Андрей Власов]

Вопрос некорректный. Массового явления демонстрации мобильной версии сайта на десктопе нет, есть отдельные сайты, разные версии которых сложно поддерживать — там вообще от десктопной версии отказываются.

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

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