9 вещей, которые отличают адаптивный дизайн от отзывчивого дизайна
9 вещей, которые отличают адаптивный дизайн от отзывчивого дизайна
17 ноября 2014

Чем responsive дизайн отличается от adaptive дизайна. Показано наглядно в gif картинках


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

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

2. При использовании для позиционирования дизайн-элементов пикселей как X,Y координаты может возникнуть ситуация, что один экран выглядит странно на другом. Используйте относительные величины, как проценты от экрана, вместо стетических величин, как пиксели.

3. Разделители позволяют макету изменяться в определенных заранее местах, например 3 столбца для десктопной версии, но только один для мобильной.

4. Если размер экрана становится меньше, контент начинает выстраиваться больше по вертикали. И все что ниже начинает сдвигаться вниз. Это называется поток.

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

6. Хотите чтобы на сайте был модный шрифт Futura или Didot? Используйте веб-шрифты! Хотя они выглядят сногсшибательно, помните, что каждый файл со шрифтом будет загружен. И чем больше шрифтов будет на сайте, тем больше времени будет грузится ваша страница. Системные шрифты с другой стороны грузятся молниеносно, кроме случаев, когда шрифт у него не установлен на локальном компьютере. В этом случае произойдет замена на стандартный шрифт.

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

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

9. У ваших иконок много деталей и модных эффектов? Тогда используйте растровое изображение. Если нет – пользуйтесь векторным форматом. Векторное изображение может лучше адаптироваться к различным разрешениям экрана.

А вы используете растровые или векторные иконки?

Источник: www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Почему я бросил работу своей мечты в веб-дизайне?
Почему я бросил работу своей мечты в веб-дизайне?

Что толкает людей на то, чтобы бросить работу в компании, на которую ушло так много времени и усилий?

26.02 0
Тренды веб-дизайна 2017 года
Тренды веб-дизайна 2017 года

Наша команда обращает пристальное внимание на все изменения в мире дизайна. Это помогает всегда держать вас в курсе новостей и новинок этой сферы.

26.02 0
Специфика работы full-stack designer
Специфика работы full-stack designer

Кто такой full-stack дизайнер и в чём заключается специфика его работы? За что full-stack дизайнер несёт ответственность в проекте.

26.02 0
-->


Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.