реклама
разместить

Оптимизация крупного контента с адаптивных сайтов на мобильных устройствах

Советы директора по дизайну продуктов Viget Кевина Виньо.

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

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

Характерный пример

Рассмотрим типичную маркетинговую страницу — лендинг Google Nexus. У неё ясный и лаконичный адаптивный дизайн, она красиво форматируется на экране любого размера.

Оптимизация крупного контента с адаптивных сайтов на мобильных устройствах

Однако на смартфоне вам придётся очень долго добираться до конца страницы, постоянно прокручивая экран. На MacBook длина этой страницы составляет около 4500 пикселей, это в шесть раз превышает высоту видимой области окна браузера.

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

Оптимизация крупного контента с адаптивных сайтов на мобильных устройствах

В чём проблема

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

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

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

Оптимизация крупного контента с адаптивных сайтов на мобильных устройствах

Есть ли альтернатива

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

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

Оптимизация крупного контента с адаптивных сайтов на мобильных устройствах

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

Вернёмся на шаг назад

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

Оптимизация крупного контента с адаптивных сайтов на мобильных устройствах
1010
реклама
разместить
9 комментариев

ахереть статья. только начал читать уже закончилась.

10

Ты наверное с десктопа читал просто

21

а теперь как с таблицами поступать расскажите

1

Есть подборка решений по адаптации таблиц: https://medium.com/rofldorf/9ede97d08b26

Раскрывать всегда
Не сокращения, а «оптимизация»: «Сбер» начал увольнять айтишников «Купера», «Мегамаркета», «Сберлогистики» и «Самоката» — СМИ

Сотрудникам предлагают уйти по соглашению сторон, утверждают источники.

Источник фото: «Ъ»
5151
1717
88
55
33
33
11
"СЕО сравнила людей, которых сокращают, с валенками, которые стоят в углу сарая — их жалко выбросить, но пользы от них нет" Какой удачный аллегорический приём. Не зря свой хлеб ест эта СЕО.
реклама
разместить
Ozon отменит сервисный сбор для всех ПВЗ

Компания ввела его в апреле 2024 года.

1212
33
11
Озон сила! ВБ могила.
Владелец TikTok вложит более $12 млрд в ИИ-инфраструктуру в 2025 году — FT

Часть денег потратят на закупки чипов в Китае, говорят источники газеты.

55
11
Adobe добавила в Premiere Pro перевод субтитров в видео и «умный» поиск по содержимому роликов

Доступно в подписке Creative Cloud или Premiere Pro.

Как настроить перевод текста 
22
11
11
Сооснователь Ethereum: семья Трампов запустит «крупный бизнес» на Ethereum

По данным Джо Любина, проектов может быть «несколько».

Источник фото: Coindesk
55
44
11
11
Релокация — как переезд влияет на карьеру в короткой и дальней перспективе

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

Кадр из фильма <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.kinopoisk.ru%2Ffilm%2F2697%2F&postId=1768601" rel="nofollow noreferrer noopener" target="_blank">«Красная жара»</a>
1616
22
11
11
Роскомнадзор обязал Viber хранить данные о пользователях и делиться ими с властями

Хотя в декабре 2024 года заявил о блокировке мессенджера.

Источник: newsbytes.ph 
2626
11
11
11
Товарищ! Перед своим расстрелом не забудь заплатить налоги!
Kling AI добавила бесплатную функцию Elements для создания ролика из изображений персонажа, одежды и локации

Пользователи примеряют образы на моделей и генерируют небольшие фильмы.

1515
1010
55
11
[]