Задать вопрос
@Inacheinache
адаптивный-дизайн

Какую ширину и высоту использовать при создании макетов для адаптивного сайта?

Товарищи, прошу прощения за столь заезженную тему вопроса. Но не могли бы посоветовать те размеры которые вы используете при создание адаптивных сайтов. Ответов на данную тему много, но мне пока не удалось собрать все в единый алгоритм и порядок.
  • Вопрос задан
  • 8107 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 2
andrhohlov
@andrhohlov
https://github.com/andrey-hohlov/psd-templates-req...
Ответ написан
1 комментарий
1 комментарий
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
Главное, делайте макет по модульной сетке — верстальщику будет проще понять логику адаптации контента (например, можно взять за основу 12-ти колоночную стетку Bootstrap'а).

Какой аудитории будет больше на сайте? В зависимости от этого выбирайте подход к отрисовке макета: десктоп-first или мобайл-first. Если есть возможность, сделайте макеты для трёх состояний: мобильный (300—600px), планшетный (600—960px) и десктопный (960+px) — для каждой типовой страницы и стайл-гайд для разных состояний элементов. Подробнее: Требования к PSD-макетам > Адаптивный дизайн.

Пример набора контрольных точек:
  • 320 px (смартфон, в том числе iPhone до 6 включительно).
  • 768 px (планшет в портретной ориентации).
  • 1024 px (планшет в альбомной ориентации, ноутбук).
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 2
sfi0zy
@sfi0zy
Creative frontend developer
Ответов на данную тему много, но мне пока не удалось собрать все в единый алгоритм и порядок...


Есть один тайный способ, который гуру UX бережно хранят уже много лет. И простой и сложный одновременно, подходящий для любых сайтов. Только избранный может познать всю мощь идеи, которая в него заложена... Называется он "контент-фёрст дезигн". В переводе со англо-славянского "смотри на контент и делай так, чтобы его было удобно потреблять на любых устройствах". Нет конкретных разрешений, под которые что-то нужно подгонять. Напротив - стоит стремиться делать так, чтобы везде было хорошо. Получится два состояния страницы - хорошо, получится десять - ну значит десять.
Ответ написан
2 комментария
2 комментария
@AnneSmith
самая ленивая
фантазировать можно долго и много, но по факту для реальных бизнес-проектов делают 2 разрешения: декстоп под 1280px неретиновых экранов и усредненный телефонный размер типа 375px

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Senior UX/UI product designer/Старший продуктовый дизайнер [дизайн интерфейсов]
HelloClient CRM
от 100 000 до 180 000 ₽
Продуктовый дизайнер в команду дизайн-системы
Точка
До 240 000 ₽
Арт-директор
ЛАНИТ • Москва
До 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
В wordpress подключить модуль по рассрочке (документацию дам)
23 апр. 2024, в 13:12
4500 руб./за проект
Комплексный линкбилдинг онлайн аптеки
23 апр. 2024, в 13:08
250000 руб./за проект
Многоканальной записи радиовещательных сигналов через SDR-приемник
23 апр. 2024, в 13:05
29707 руб./за проект
Ещё заказы