Java, UX, HTML, CSS, WEB-design

Примеры передового опыта в современном адаптивном дизайне


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

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

Вот они, дополненные адаптивными представлениями и некоторыми мыслями о том, что они приносят на стол (или, лучше сказать, на планшет?):

Ваш набор инструментов веб-дизайнера
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Вашингтон пост

Одна из самых больших проблем адаптивного дизайна — взять веб-сайт с большим количеством контента и заставить его работать на небольших экранах. The Washington Post проделывает фантастическую работу по максимальному использованию любой доступной экранной недвижимости.

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

99У

99U — это онлайн-журнал Adobe для творческих профессионалов. Один из аспектов, который нравится в этом сайте, — это абсолютная простота его макета на экране любого размера.

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

99У

Голос

Vox — это новостной сайт, который использует мобильную навигацию немного другим путем.

Вместо вездесущего гамбургер-меню стандартная текстовая панель навигации сжимается по мере уменьшения размера экрана. Но вместо того, чтобы пытаться втиснуть несколько элементов в небольшое пространство, категории постепенно удаляются из меню и скрываются в раскрывающемся меню под названием «Еще».

Голос

Этси

Возможно, никто не делает дизайн для своей аудитории лучше, чем Etsy. Хитрый рынок также делает правильный выбор. Среди основных моментов для мобильных устройств — заголовок, который дает вам все основы (логотип, ссылки на «Продать», «Вход» и значок «Корзина») в невероятно четкой и лаконичной форме.

Их раздел магазина по категориям превращается из многоколоночных фотокарточек в чистое вертикальное меню с иконками. Это отличный пример прогрессивного улучшения в действии.

Этси

KFC

KFC, хороший поставщик курицы, от которого просто пальчики оближешь, действительно проделал выдающуюся работу над своим веб-сайтом.

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

KFC

Хонда

Производитель многих вещей, Honda имеет несколько линеек продуктов и брендов, которые могут заинтересовать пользователей. Использование цвета в каждом чередующемся баннере упрощает поиск того, что вы ищете (что особенно круто выглядит на планшетах и ​​телефонах).

Опять же, это сайт, который дает очень похожий опыт в разных окнах просмотра.

Хонда

Национальный

Инди-рокеры The National отлично используют экранную недвижимость. Фактически, их макет в виде сетки для новостей и информации простирается по всей ширине экрана HD.

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

Национальный

Отзывчивая революция

Глядя на упомянутые выше сайты, ни один из них не является революционным сам по себе. Но у каждого есть своя интересная техника и философия того, как должен работать адаптивный дизайн (не говоря уже о множестве проблем, которые нужно преодолеть, чтобы добиться этого). Они могут не быть революционными, но они, безусловно, являются частью революции.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Примеры передового опыта в современном адаптивном дизайне

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Примеры передового опыта в современном адаптивном дизайне

Название: Примеры передового опыта в современном адаптивном дизайне . Краткое описание: ⭐ Со временем адаптивный дизайн довольно хорошо . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»