Школа
Интерфейс

Принципы адаптивности веб‑страниц

Здравствуйте!

Скажите, есть ли какие‑то принципы, которыми руководствоваться при создании адаптивов веб‑страниц для разных устройств? Как бы вы адаптировали такую страницу?

Артём Халеев
19 дек 2023
👁 3395  
Интерфейс

Принципы адаптивности веб‑страниц

Здравствуйте!

Скажите, есть ли какие‑то принципы, которыми руководствоваться при создании адаптивов веб‑страниц для разных устройств? Как бы вы адаптировали такую страницу?

Артём Халеев
19 дек 2023
👁 3395  
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

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

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

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

Например, предположим, что на картинке — автор текста, а примечание относится ко второму абзацу. Тогда:

Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы