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

20025
4

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

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

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

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

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

 

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

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

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

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

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

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

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

Оставить комментарий

Комментарии | 4

  • Елси не ошибаюсь, то отзывычивый и резиновый это разные вещи. Как минимум в рускоговорящем сегменте.

    • Иван, Вы правы. Отзывчивый, т.е. responsive (перевод), он в любом сегменте не резиновый.
      Автор явно не понимает о чем пишет.

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

Поиск