9 отличий адаптивного дизайна от «резинового» в GIF-картинках

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

Так в чем же разница? «Отзывчивый круче, он под любую ширину экрана сайт адаптирует. А адаптивный имеет три версии: обычную, планшетную и мобильную», — пояснила корреспонденту AIN.UA знакомая веб-дизайнер. Если углубиться, можно выделить девять отличий адаптивного дизайна от отзывчивого.

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

Дизайн на основании пикселей с координатами по осям X и Y приводит к тому, что сайт подходит для конкретного устройства, но на другом выглядит странно. Лучше использовать для просчета такие переменные, как процент экрана — вместо статических переменных, таких как пиксели.

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

 

Прописанные контрольные точки позволяют изменять макет на разных экранах в зависимости от ширины экрана. Например, на десктопе может быть три колонки текста, а на телефоне — только одна.

Объединяя элементы в так называемое «гнездо», вы тем самым обеспечиваете всему набору элементов одновременное перемещение или растягивание. Без гнездования элементы могут смещаться каждый сам по себе.

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

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

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

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

Источник: fastcodesign.com


Теги:

ТОБІ СПОДОБАЄТЬСЯ

Ковідний диван і табурет із газет: чудернацькі меблі як витвір мистецтва

Химерні віртуальні об’єкти, невидиме під дощем крісло та ковідний диван: щось із цього спокійно можна використовувати, а на щось – страшно сідати.

Якої форми набуває сучасний візуальний креатив у арабській культурі

Лабораторія дизайну Archief Cairo бере свій початок із досліджень «вуличного» креативу: наліпки на машинах, вивіски магазинів і навіть сміття під ногами.

Ненудний простір: якби дизайн офісів створювали діти

Агенція Jellyfish нещодавно запропонувала дітям своїх співробітників дати волю уяві і створити дизайн для офісу майбутнього.

Тайванські Центри з контролю захворювань зобразили в стилі аніме персоніфікації хвороб

Тайванські Центри з контролю захворювань (CDC) зображають антропоморфні персоніфікації різних хвороб, уявляючи їх як персонажів аніме.

Бренд рушників Sheridan зобразив властивості своєї продукції танцем

Міцність та красу рушників зображав танцювальний колектив Sydney Dance Company, щоб хореографією показати, чому бренд Sheridan відрізняється від інших.

Анімація на пательні: режисери Wriggles&Robins спекли відео до Дня млинця

Яким би млинцям ви не надавали перевагу, певно ви оціните майстерність режисерів-аніматорів, які спекли 600 млинців, перетворивши їх на відео до Дня млинця.