Что такое отзывчивый (также известен как резиновый) дизайн? Это дизайн, благодаря которому сайт выглядит одинаково хорошо и на десктопах, и на экранах мобильных устройств. Все так, но есть нюансы. Многие путают отзывчивый дизайн с адаптивным, который тоже хорош и там, и сям. Но адаптивный и отзывчивый – это не одно и то же – как в жизни, так и в веб-дизайне. Ниже вы найдете девять GIF-изображений, которые наглядно объясняют разницу. А если вы и без нас все знаете, предлагаем семь забавных GIFок о самых распространенных ошибках в веб-дизайне.
Так в чем же разница? “Отзывчивый круче, он под любую ширину экрана сайт адаптирует. А адаптивный имеет три версии: обычную, планшетную и мобильную”, – пояснила корреспонденту AIN.UA знакомая веб-дизайнер. Если углубиться, можно выделить девять отличий адаптивного дизайна от отзывчивого.
Отзывчивый дизайн растягивается как резина в зависимости от ширины экрана или окна, на котором вы просматриваете сайт. Вы можете просто растягивать окно, и сайт будет плавно растягиваться вместе в ним. Адаптивный дизайн подстраивается под ширину рывком, после того, как вы зафиксировали ширину окна.
Дизайн на основании пикселей с координатами по осям X и Y приводит к тому, что сайт подходит для конкретного устройства, но на другом выглядит странно. Лучше использовать для просчета такие переменные, как процент экрана – вместо статических переменных, таких как пиксели.
По мере уменьшения размера экрана, контент занимает больше вертикального пространства, а все, что находится ниже, органически сдвигается вниз. Это называется поток.
Прописанные контрольные точки позволяют изменять макет на разных экранах в зависимости от ширины экрана. Например, на десктопе может быть три колонки текста, а на телефоне – только одна.
Объединяя элементы в так называемое “гнездо”, вы тем самым обеспечиваете всему набору элементов одновременное перемещение или растягивание. Без гнездования элементы могут смещаться каждый сам по себе.
Иногда здорово, когда контент растягивается на весь экран, если это смартфон. С другой стороны, этот же контент на весь экран широкоформатного телевизора может быть нецелесообразен. Поэтому иногда нужно ставить ограничитель на максимальную ширину элементов.
Технически нет никаких отличий: вы можете писать базовую разметку для мобильных и расставлять ключевые точки для десктопов и наоборот. Выберите подходящий вам подход.
Веб-шрифты выглядят красиво, но не стоит забывать, что каждый подключенный шрифт будет загружен. Чем больше шрифтов, тем медленнее загружается страница. С другой стороны, системные шрифты загружаются моментально – за исключением случаев, когда пользователь не имеет локально установленного шрифта, используемого на странице (в таких случаях браузер будет использовать шрифт по умолчанию).
На вашей иконке много всяких стильных штучек и эффектов? Если нет, используйте растровое отображение, а если да – векторное. Векторное изображение лучше адаптируется под разное разрешение экрана.
Источник: fastcodesign.com
