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


Оглавление (нажмите, чтобы открыть):

Адаптивный дизайн сайта и стратегия его разработки

С ростом технического прогресса мы имеем все больше и больше возможностей выхода в интернет: теперь это не только стационарные компьютеры, но и разнообразные планшетные устройства, мобильные телефоны, смартфоны, ноутбуки, и даже телевизоры. Разрешение экрана таких устройств может варьироваться от 320 до 2560 пикселей, поэтому традиционный дизайн сайта с фиксированной шириной уходит далеко в прошлое. А на смену ему приходит адаптивный веб-дизайн, особенность которого и заключается в создании таких веб-страниц, которые должны удобно просматриваться с помощью любого устройства, предоставляющего выход в интернет. Таким образом, адаптивный дизайн избавляет разработчиков от необходимости создавать несколько версий веб-сайта для различных устройств, что крайне не эффективно.

Современные тенденции в разработке сайтов

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

Я попытался разобраться в современных трендах разработки веб-сайтов и составил небольшой список.

  1. Минималистичный дизайн
    Минимализм является основным современным направлением в веб-дизайне. Минималистичный дизайн сайта привлекателен для посетителей, потому что из него исключается все избыточное, а используются действительно необходимые элементы взаимодействия с пользователем. Это помогает улучшить доступность и читабельность контента на различных устройствах.
  2. Применение современных технологий HTML5 и CSS3
    Уникальные возможности HTML5 впечатляют: новые элементы для размещения на странице аудио и видео, оффлайн средства, анимация в , новые типы полей в веб-формах и прочие возможности, а в сочетании с CSS3 разработчик может добиться потрясающих результатов. Благодаря новым правилам, появившимся в CSS3, стало возможным создание множества интересных визуальных эффектов, таких как закругленные углы у блоков, тени, градиент в качестве фона, полупрозрачные элементы, CSS-трансформации, использование веб-шрифтов и многое другое. Причем для реализации перечисленных фич, больше не нужно использовать графические изображения и javaScript.
  3. Отказ от использования Flash в пользу HTML5 и JavaScript
    До 2012 года Flash использовался очень широко, но затем доля его применения стала заметно снижаться. В первую очередь это касается мобильных устройств. Так как браузеры в современных мобильных устройствах поддерживают HTML5, использование в них Flash-технологий для отображения анимации и других небольших задач стало не актуально. Но это не значит, что Flash больше нигде не используется. Без него не обходится воспроизведение видео и «продвинутой» анимации.
  4. «Отзывчивый» веб-дизайн. Адаптивная верстка
    Дизайн сайта больше не ограничен фиксированными размерами. «Отзывчивый» (адаптивный) дизайн – это методика создания макета сайта, который правильно отображается на экране любого устройства. Не важно, какого он размера, смартфон ли это, или настольный компьютер. Основной идеей адаптивного дизайна является отказ от создания нескольких вариантов сайта для различных типов устройств и адаптации единственного макета под отображение на экранах с различным разрешением. «Отзывчивый» веб-дизайн начал развиваться в 2012 году и этот процесс продолжается до сих пор.
  5. Одностраничные сайты и использование parallax-эффекта
    В последнее время стало увеличиваться количество одностраничных сайтов, на которых можно увидеть parallax-эффект. Это направление развивается и даже крупные мировые компании используют эффект parallax на своих сайтах. Parallax-эффект заключается в следующем: за счет разной скорости движения слоев макета при прокрутке страницы возникает потрясающий эффект глубины и перспективы. Это привлекает внимание посетителей, а за счет того, что на таких сайтах меню обычно фиксируется (например, сверху или сбоку) и не пропадаем при прокрутке, улучшается взаимодействие с пользователем.
  6. Фиксация блока с меню при прокрутке контента
    Об этом тренде уже было упомянуто только что. Давайте рассмотрим его более подробно. Заключается в том, что блок с навигацией позиционируется относительно окна браузера, а не страницы. Поэтому при прокрутке страницы блок остается на своем месте, в отличие от остального контента, который движется. Таким образом, посетителю не нужно прокручивать страницу вверх, чтобы добраться до меню и перейти в другой раздел сайта. Фиксация блока с меню предоставляет посетителю удобную навигацию на каждой странице сайта.
  7. Слайдеры, адаптированные под мобильные устройства
    Размещение слайдеров на главной странице сайта очень популярно в современном веб-дизайне. Галерея из крупных изображений – самый надежный способ привлечения внимания аудитории. Все слайдеры основаны на jQuery-плагинах (иногда в сочетании с CSS3). При смене изображений в них происходят интересные визуальные эффекты, которые выглядят очень привлекательно. Многие посетители используют для серфинга по сети различные тач-устройства (планшетные компьютеры или смартфоны), поэтому самые известные jQuery-плагины (Fancybox, Lightbox и другие), предназначенные для создания галерей изображений, учитывают это в своей работе. Важно, что кроме поддержки мобильных устройств с тач-скрином популярные слайдеры адаптируют изображения под размеры экранов различных устройств.
  8. Крупные изображения в качестве фона
    Крупные изображения в качестве фона страницы также становятся очень популярными. Их можно использовать на сайтах, связанных с искусством. Например, на сайте с портфолио фотографа, какого-нибудь модного журнала или модельного агентства. Безусловно, там они будут очень выгодно смотреться, и впечатлять посетителей. Но у таких фонов есть один существенный недостаток: за счет их размера страницы сайта могут загружаться довольно длительное время. Чтобы избежать долгой загрузки страницы, дизайнеры делают фоновые изображение немного размытыми. В итоге появляется возможность оптимизировать их размер для более быстрого показа страницы.
  9. Пользовательские интерфейсы на сайтах, как у настольных приложений
    Никто не ожидал, что эту тенденцию продвинет на рынке компания Microsoft, а не Apple. Современный пользовательский интерфейс Modern UI (известный ранее как Metro UI), состоящий из плоских прямоугольников с крупными надписями стал довольно популярным среди пользователей в 2013 году и продолжаем им оставаться сейчас, в 2014-ом. Конечно же, Modern UI вдохновил многих дизайнеров. Они нашли его концепции довольно интересными и создали на его основе шаблоны для сайтов для различных CMS. В основе Modern UI яркие цветные прямоугольники с крупными надписями и современными иконками. При наведении указателя мыши на любой элемент интерфейса – иконки меняют свой внешний вид по средствам анимации. Основными цветами Modern UI являются: фиолетовый, розовый, бирюзовый, синий, зеленый, красный, пурпурный и коричневый.
  10. Плоский дизайн и яркие цветовые схемы
    Как упоминалось выше, минимализм в веб-дизайне стал довольно популярным в последние годы. Плоский дизайн — одна из разновидностей минимализма. При создании такого дизайна используются простые цветовые схемы, к элементам дизайна не применяются различные трехмерные эффекты (тени, тиснение, градиенты и прочие). Тем не менее плоский дизайн не может совсем обойтись без эффектов, но в нем их совсем немного и все эффекты основаны на CSS3. Ключевым моментом плоского дизайна является концентрация внимания посетителя на содержимом сайта, а не на графических элементах дизайна. В нем используются простые макеты, сплошные цвета, различные четкие значки и шрифты без засечек. Если говорить о цветах, то в плоском дизайне применяются яркие, сочные, насыщенные цвета. Иногда в цветовые схемы разбавляются серым или черным цветом. Популярные цветовые схемы, используемые в плоском дизайне, можно увидеть на сайте flatuicolors.com. Плоский дизайн сейчас применяется практически повсеместно: начиная от интерфейсов приложений для Android и Windows phone, до макетов веб-сайтов и интерфейсов настольных ОС. Например, Windows 8. Плоский дизайн был популярен ранее, потом перестал быть таковым. Сейчас его популярность снова растет. Это происходит благодаря появлению интерфейса Modern UI, а также обновления дизайна сервисов Google (Gmail, Google Maps и Google+). Кроме того, при использовании плоского дизайна в макетах сайтов, страницы таких сайтов начинают загружаться намного быстрее.

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

8 типичных ошибок проектирования адаптивного дизайна

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

Пренебрежение аналитикой поведения посетителей

Спешка выхода в мобильный сегмент, заставляет ритейлеров проектировать сайт, без проведения серьезной аналитики поведения посетителей. Анализ поведения посетителей это важнейший этап подготовки, который позволяет выявить наиболее популярные мобильные устройства и оптимизировать сайт для них в первую очередь. Аналитика помогает определить наиболее «популярное» действие пользователей, например, увеличение изображения товара; показывает величину конверсии мобильных посетителей и т. д. Эти данные дадут представление о предпочтении в поведении пользователей и помогут удовлетворить ожидания мобильной аудитории. Анализ мобильного трафика нужно проводить системно и последовательно внедрять результаты, дорабатывая и оптимизируя сайт под нужды покупателей.

Проектирование магазина для настольных компьютеров

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

Тестирование адаптивного дизайна

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

Недостатки адаптивного дизайна легко выявляются предварительным тестированием интернет-магазина, но многие продавцы не имеют на это ресурсов. Для снижения рисков потери денег, протестируйте ключевые маршруты пользователей по сайту в основных браузерах – Chrome, IE, Firefox, Safari и операционных системах – Windows, Mac OS, Android, IOS на популярных мобильных устройствах. Проводите тестирование каждый раз, когда вносите изменения, сервисы типа BrowserStack или Viewport Resizer, помогут сократить время тестирования до нескольких часов.

Мелкие элементы для мобильных экранов

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

Медленная скорость загрузки страниц

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

Разносите контент по разным вкладкам, например страница товара может содержать только базовое изображение, описание, цену и кнопку «Купить». Отзывы покупателей и видеоролики можно вынести на отдельную вкладку и уменьшить «вес» основной части страницы. Кроме контента оптимизируйте и другие элементы влияющих на скорость загрузки – CSS-файлы, изображения и скрипты, отправляйте только необходимые данные. В этом вам помогут инструменты, которые уменьшают размер ресурсных файлов и время их загрузки: Uglify или JSCompress.

Урезание контента для мобильных пользователей

Нередко при разработке мобильного интернет-магазина, разработчики прячут часть контента, чтобы на мобильных устройствах загрузка шла быстрее. Однако часто размер страницы на самом деле не уменьшается, а контент просто не отображается для пользователя. Ваш магазин должен быть способен динамически генерировать страницу, уменьшая ее «вес» и сокращая время загрузки для мобильных посетителей. Кроме того, давать мобильным пользователям меньше контента – плохо, это негативно влияет на потребительский опыт. Как правило, в процессе покупки они используют разные устройства, так делает около 90% покупателей в Интернете. Ограничивать их методами адаптивного дизайна – большая ошибка.

Поддержка изображений только в одном разрешении

Хороший сайт с адаптивным дизайном автоматически меняет разрешение картинок в зависимости от типа устройства, тяжелые изображения увеличивают время загрузки. Существует несколько способов автоматической подстройки размеров изображения под конкретное устройство. «Гибкие» изображения (fluid images) – метод на базе CSS, который позволяет сжимать и растягивать картинку в зависимости от ширины содержащего ее элемента, или элемент HTML5

, позволяющий подгружать картинку нужного размера для каждого тип устройств.

«Неадаптивные» электронные письма

Бывает что c сами сайтом все в порядке, адаптивный дизайн хорошо работает на десктопах и на мобильных устройствах. Но электронные письма не могут похвастаться адаптивностью и мобильным пользователям приходится прикладывать усилия для проверки параметров заказа или прокручивать бесконечный перечень рекомендованных товаров, чтобы добраться до списка совершенных покупок. Электронные письма это ключевая точка контакта с клиентом, встраивайте адаптивный дизайн писем в вашу мобильную стратегию. Проектируйте и проводите тестирование ваших писем и рассылок, шаблоны писем должны быть «легким» и содержать только важную информацию.

Адаптивный дизайн сайта.

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

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

На основе анализа сайтов вебометрического рейтинга были выявлены следующие особенности:

– большинство в течение последних 5 лет не обновляло визуальную и программную составляющую сайтов. В связи с этим элементы новых технологий CSS3 и HTML5 почти не используются, хотя они уже достаточно распространены;

Мастер Йода рекомендует:  Продать товар поможет тизерная сеть Маргет Гид и другие популярные варианты

– для большей динамичности на подавляющем большинстве сайтов используется JavaScript или его библиотеки;

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

– только 10% сайтов имеют версию для мобильных устройств и ни на одну из них нельзя зайти с персонального компьютера;

– 5% web-сайтов созданы с применением принципов адаптивного web-дизайна, хотя еще год назад ни один из проанализированных сайтов их не использовал.

Основные принципы проектирования адаптивного дизайна сайта.

1. Использование резинового типа макета (англ. fluid grid) – макета, в котором значение размера ширины родительского элемента (элементов) задаётся в процентах по отношению к разрешению монитора.

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

3. Использование media queries – правил CSS3, которые назначаются как атрибуты при вызове других правил из таблицы стилей, основанных на параметрах устройства вывода, таких как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве.

4. Применение постепенного улучшения (англ. progressive enhancement). Идея состоит в том, что сначала создается простейшая разметка документа, которая корректно отображается даже в самых простых браузерах. Затем добавляются стили, интерактивность и прочее, используя каскадные таблицы стилей, JavaScript, SVG, Flash и все остальное, что можно вставить в страницу.

5. Проектирование для мобильных устройств с самых ранних этапов (англ. mobile first). Это подход, при котором проектирование сервиса начинается с мобильной версии, а не с версии для больших экранов, как это делается повсеместно.

6. Модульная сетка страницы – это невидимый «скелет» дизайна, система горизонтальных и вертикальных направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции. Для генерации модульной сетки обычно используют так называемые css-фреймворки, которые созданы для упрощения работы верстальщика страницы, быстроты разработки и исключения максимально возможного числа ошибок вёрстки.

Проведя анализ статистики посещений пользователей существующего сайта и общемировой статистики популярных разрешений экранов , разработано 5 макетных сеток для наиболее типичных групп разрешений: менее 520 пикселей, от 520 до 800 пикселей, от 800 до 1000 пикселей, от 1000 до 1400 пикселей и более 1400 пикселей. После генерации модульных сеток созданы прототипы макетов страниц сайта для различных разрешений.

В соответствии с принципом адаптивного web-дизайна разработан шаблонный макет для всех 5 разрешений. До настоящего момента лучшей практикой считалась разработка ряда решений, исходя из разрешения экрана или методов ввода. Как правило, создавалось лишь две версии сайта – для широкого разрешения (персональный компьютер или ноутбук) и для мобильных устройств (телефона или смартфона).

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

Респонсивный Vs адаптивный дизайн: что лучше для пользователя?

Современные веб-разработчики и маркетологи все чаще отдают предпочтение респонсивному дизайну (responsive design), позволяющему создать страницу, доступную для просмотра на любом устройстве. И хотя такой подход достаточно хорош с точки зрения Google, который «любит» респонсивные сайты — это далеко не единственный вариант, способный приспосабливаться под нужды пользователя.

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

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

Респонсивный веб-дизайн

Респонсивный веб-дизайн — это масштабирование интерфейса под устройство пользователя за счет media-queries, или модуля CSS3, позволяющего задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих характеристик.

Применение данного метода лучше подходит для сайтов с гибкой, или «резиновой» структурой. В противном случае разработчики потратят кучу времени и ресурсов на переделывание сайта под планшет и мобильный телефон, чтобы компенсировать имеющийся недостаток гибкости.

Помимо своей изменяющейся структуры, у респонсивного дизайна есть несколько других преимуществ:

1. Одинаковый внешний вид ресурса в разных браузерах и на различных платформах
2. Наличие у сайта одинакового URL, что способствует SEO-оптимизации
3. Разработчикам необходимо обслуживать лишь один сайт, что позволяет сократить время, затрачиваемое на дизайн и контент

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

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

Адаптивный веб-дизайн

Адаптивный дизайн функционирует немного иначе. Он сегментирует пользователей на категории в зависимости от того, с какого устройства они просматривают сайт.

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

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

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

Иными словами, сервер берет на себя всю «тяжелую» работу, вместо того, чтобы заставлять сайт оптимизировать самого себя. Среди достоинств адаптивного дизайна можно выделить следующие:

  1. Изображения загружаются намного быстрее, так как они сжимаются и адаптируются под устройство пользователя
  2. Загрузка сайта происходит быстрее, так как сервер определяет тип устройства пользователя и загружает соответствующий ему программный код
  3. Разработчики пользуются свободой творчества, ведь они могут создавать различные версии сайтов и подгонять их под соответствующие типы устройств, чтобы сделать их более удобными для мобильных пользователей.

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

Какой вариант и для чего подходит?

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

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

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

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

45+ примеров адаптивных веб-сайтов

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

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

1. Simon Collison

Хотя сегодня этот сероватый статичный сеточный шаблон выглядит немного скучным, сайт когда-то произвёл фурор благодаря своему высококлассному адаптивному макету.

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

2. Andersson-Wise Architects

Сайт посвящён архитектурной и дизайнерской студии, поэтому неудивительно, что основной акцент сделан на фотографиях, которые демонстрируют навыки, опыт и мастерство компании.

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

3. Stephen Caver

У Stephen Caver первоклассный сайт в том, что касается адаптивности. Что в нём особенного? Чтобы ответить на этот вопрос, нужно просто взглянуть на главную страницу сайта. Она состоит из:

— огромного заголовка, выделенного с помощью грубого жирного шрифта;

— набора больших блоков, который дублирует главное меню сверху;

— стандартный макет для блога;

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

4. Sparkbox

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

5. Food Sense

Сайт демонстрирует трансформацию из стандартной левосторонней организации журнала в стиле блога с бесчисленными аппетитными картинками в простую последовательную ленту.

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

6. The Boston Globe

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

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

7. Think Vitamin

Think Vitamin было особенно нечем похвастаться касательно дизайна блога. У него такая же разметка, как и у остальных блогов. На сайте была одна колонка, в правом боковом поле были расположены виджеты, сверху логотип, заголовок и навигация, в нижнем колонтитуле информация располагалась блоками.

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

На данный момент сайт выглядит по-другому, так как произошёл ребрендинг и редизайн сайта.

8. Sasquatch! Music Festival

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

Несмотря на это, адаптивный дизайн этого сайта разработан мастерски. Разработчики позаботились о каждой детали, создавая визуально привлекательный вид сайта, который не теряет своей оригинальности даже на маленьком экране.

9. Internet Images

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

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

К сожалению, с апреля 2015 года сайт не работает.

10. Staffanstorp

В этом случае способность сайта адаптироваться как к маленьким, так и к большим экранам, даёт несколько преимуществ:

— прекрасная удобочитаемость, независимо от размера девайса;

— структурированность информационных блоков;

— донесение информации до пользователей с помощью смартфонов и планшетов;

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

11. Seminal Responsive Web Design Example

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

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

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

12. Naomi Atkinson

Naomi Atkinson использует мозаичный стиль для главной страницы. Это решение подходит для тех, кто хочет создать яркое онлайн-портфолио.

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

13. Forefathers Group

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

Вебсайт очаровывает своим невероятным оформлением в ретро-стиле, нарисованными вручную иллюстрациями, текстурированным фоном и удивительной графикой. Всё это взаимодействует с текстом, который занимает особое место в дизайне.

Как вы видите, команде пришлось принять во внимание множество деталей, чтобы превратить свой сайт в комфортный ресурс, который удовлетворит нужды всех онлайн-читателей, независимо от их девайса.

14. Spigot Design

Здесь адаптивное поведение сайта проявляется не только в стандартном сетчатом макете и построчном расположении информации на сайте, но и в интро-видео, динамичной графике и меню.

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

15. New Adventures In Web Design Conference 2012

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

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

16. Illy Issimo

Адаптивность является важным качеством любого высококачественного рекламного сайта, создателям которого известны механизмы привлечения потребителей. Illy Issimo использует гибкую сетку, чтобы:

— сделать сайт удобным для пользователей;

— расширить целевую аудиторию;

— привлечь потенциальных пользователей, использующих мобильные девайсы;

В результате эта рекламная компания является очень успешной.

17. Arrrrcamp Conference

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

Главная страница меняется соответственно изменениям размера окна браузера, сайт поддерживает все разрешения от 1920px до 240px, что очень удобно, так как его читатели явно знают, как пользоваться различными девайсами для поиска конференции в интернете.

18. Robot or Not?

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

19. Earth Hour

Earth Hour является действительно продвинутым и комплексным веб-сайтом, который наполнен различным мультимедийным контентом. Кроме того, это ещё и прекрасная инфографика, которая использует красивые изображения и плавные переходы, чтобы привлечь внимание к проблеме, которой посвящен вебсайт.

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

20. Teixidó

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

Художественная сторона совершенно великолепна. Как насчёт способности адаптироваться к разным девайсам? Здесь всё тоже здорово. Хотя вебсайт достаточно статичен, нет никаких впечатляющих эффектов или каких-либо динамических особенностей, адаптивное поведение обеспечивает максимально удобное пользование сайтом.

21. Ribot

Ribot – это пример высококлассного цифрового дизайна, который специализируется на планшетах и мобильных устройствах.

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

Мастер Йода рекомендует:  Разработка под Андроид советы, инструменты и трюки

22. Deren Keskin

Deren Keskin компактно организовал онлайн-портфолио сайта, следуя правилу, что любой сайт, в том числе и блог, должен умещаться в окно браузера.

То же самое применимо и для мобильной версии сайта. Дизайнеру удалось при этом сохранить все пропорции и соотношение компонентов и выделить приоритетные элементы.

23. Sweet Hat Club

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

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

24. Glitch

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

Однако нерабочее состояние сайта никак не влияет на его адаптивное поведение. Даже сейчас сайт модифицируется, в зависимости от того, с какого устройства пользователи заходят на него.

25. dConstruct

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

— спикерам и преподавателям воркшопов;

Это три составляющие, которые важны пользователям, и которые должны выделяться.

26. Adaptive Web Design

Как подразумевает название сайта, он специализируется на вопросах, связанных с адаптивным дизайном. Точнее, это рекламный сайт, посвящённый книге, которая ответит на все ваши вопросы.

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

27. Authentic Jobs

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

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

28. Five Simple Steps

У сайта Five Simple Steps очень простая главная страница, где вы найдёте несколько прощальных постов и ссылки на полезный контент от тех, кто ранее занимался сайтом.

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

29. Splendid

Splendid – это онлайн-портфолио, задачей которого являлась концентрация внимания пользователей на творчестве. Дизайнер придерживался минималистического подхода, что выгодно отличает его работу от других веб-сайтов с изощрённым дизайном.

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

К сожалению, сейчас веб-сайт не работает.

30. Ryan O’Rourke

Взглянув на онлайн-портфолио Ryan O’Rourke, сразу понимаешь, что дизайнер руководствуется фразой «краткость сестра таланта». Минимализм, минимализм и снова минимализм… Сайт представляет собой всего одну страницу, на которой содержится одно предложение, email и небольшая гифка, демонстрирующая то, чем его создатель занимается.

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

31. FlexSlider

FlexSlider – это лёгкий jQuery слайдер от WooThemes с простой семантической разметкой и огромных количеством функций, который был создан для того, чтобы демонстрировать изображения на любом удобном вам девайсе.

Несмотря на это, веб-страница, рекламирующая продукт, не настолько адаптивна, как сам слайдер. К сожалению, команда разработчиков упустила этот момент.

32. El Sendero del Cacao

Веб-сайт El Sendero del Cacao обладает визуально привлекательной графикой и тёплой спокойной атмосферой, которая создаётся с помощью мягких цветов и эффектных картинок.

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

33. Do Lectures

Do Lectures представляет собой стандартный блог, состоящий из трёх колонок, в которых публикуются посты с картинками. Веб-сайт производит немного старомодное впечатление из-за консервативного макета и отсутствия динамических эффектов.

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

34. St Paul’s School

Сейчас многие учебные заведения заводят свои веб-сайты. St Paul’s School не является исключением. Сайт обладает следующими характеристиками:

— информативная главная страница;

— и, конечно, адаптация для планшетов и смартфонов;

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

35. Naomi Atkinson Design

Naomi Atkinson Design – это небольшая британская дизайн-студия. Сайт, состоящий из блоков, оформлен в минималистическом стиле, чтобы:

— коротко, но полно представить информацию;

— привлечь внимание пользователей к элементам портфолио;

— предоставить пользователям удобное пользование службой поддержки;

Кроме того, такое расположение легко адаптируется к любому формату, так что это достаточно эффективное решение.

36. Ben Handzo Photography

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

37. Stunning CSS3 Media Queries Example

Как можно понять из названия, это сайт посвящён адаптивным решениям media queries, которые очень популярны сегодня среди разработчиков.

Конечно, дизайн, стиль и семантика сайта достаточно примитивны, но это не так важно. Настоящим достоинством этого сайта является адаптивная сетка, которая служит прекрасным примером того, как должен трансформироваться сайт, состоящий из четырёх колонок, при использовании его на различных девайсах.

38. Nordic Ruby Conference

Вебсайт Nordic Ruby Conference оставляет у читателей ощущение, что должно произойти что-то очень интересное. Такие характеристики, как простой дизайн, текстурный фон, чёткий формат сайта, информативная домашняя страница создают приятную профессиональную атмосферу.

Адаптивная сетка, взятая за основу веб-сайта, позволяет сделать презентацию события доступной для широкой аудитории интернет-пользователей.

39. Halifax Game Jam

Вебсайт Halifax Game Jam производит сильное впечатление своей своеобразной, напоминающей флаер страницей с психоделическими иллюстрациями и оригинальным фоном.

Естественно, креативный дизайн поможет сайту выделиться, но отвечает ли он современным стандартам? Несмотря на то, что у сайта всего одна страница, чёткая структура, адаптивная сетка и оптимизация для разных браузеров позволяют ему соответствовать требованиям современного веб-дизайна.

40. Diablo Media

Команда разработчиков определённо принимала во внимание современные тренды, создавая этот сайт. Здесь вы найдёте:

— главную зону, которая приветствует новых посетителей;

— качественную адаптацию для разных девайсов.

41. ASU Online

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

Что касается функциональности, веб-сайт отличают следующие характеристики:

42. 3200 Tigres

Если вашей задачей является привлечение как можно больше внимания к какой-либо актуальной проблеме, вам просто необходимо создать качественный онлайн-ресурс. Всемирному фонду дикой природы это хорошо известно, поэтому их детский проект 3200 Tigres характеризуют:

— современный «плоский» дизайн;

— оптимальная организация информации;

43. Kings Hill Cars

Kings Hill Cars – официальный сайт компании такси. Домашняя страница содержит всю информацию, которая может понадобиться потенциальному клиенту.

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

44. 8 Faces

8 Faces – это печатный журнал, посвящённый типографии, который задаёт своим читателям всего один вопрос: «Если бы вы могли использовать всего 8 разных шрифтов, какие бы вы выбрали?»

Официальный веб-сайт журнала нацелен на популяризацию издания и использует для этого:

— простой элегантный дизайн;

— широкий слайдер изображения;

— способность сайта адаптироваться к экранам любых девайсов.

45. Asbury Agile

Asbury Agile – это конференция для веб-профессионалов. Как правило, если событие касается веб-технологий для высококлассных профессионалов, сайт должен соответствовать современным требованиям и быть хорошо оптимизированным, адаптивным и кроссбраузерным.

46. Alsacréations

Alsacréations – это французское веб-агентство со стандартным онлайн портфолио.

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

47. Sleepstreet

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

— адаптивным макетом для демонстрации различных вариантов;

— ретро-стилем, который создаёт уютную домашнюю атмосферу;

— мультиязыковой поддержкой для максимального охвата аудитории.

FAQ и лучшие практики по реализации адаптивного веб-дизайна

Google официально объявил адаптивный веб-дизайн приоритетным инструментом для создания мобильных версий сайтов. Если у вас есть сайт или блог, пора серьёзно задуматься о переходе на адаптивный дизайн вместо того, чтобы поддерживать разные версии сайта для телефонов и планшетов.

Если вы ещё не особо знакомы с концепцией адаптивного дизайна, у вас могут возникнуть различные вопросы, на которые мы уже подготовили ответы.

Почему я должен переходить на адаптивный дизайн?

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

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

  • Вы экономите время и деньги, поскольку вам не нужно поддерживать несколько сайтов отдельно для экранов компьютера и для экранов мобильных телефонов.
  • Благодаря адаптивному дизайну вырастет поисковая оптимизация сайта (SEO), поскольку у каждой страницы будет один и тот же URL. Вам не нужно будет беспокоиться о том, что некоторые ссылки будут вести на мобильную версию сайта, а другие — на десктопную.
  • В отчётах Google Analytics показатели сайта будут выше, поскольку результаты запросов с мобильных телефонов и с ПК будут синхронизированы.
  • То же самое касается статистики распространения в соцсетях (лайки в фейсбуке, твиты и т.п.), так как у мобильной и десктопной версии сайтов будет одинаковый URL.
  • Сайты с адаптивным дизайном гораздо легче поддерживать, поскольку они не требуют каких-либо серверных компонентов. Нужно лишь модифицировать базовые CSS-стили страницы для изменения внешнего вида (или положения на странице) в зависимости от конкретного устройства.

Что нужно знать перед началом работы с адаптивным дизайном?

Адаптивный дизайн использует чистый HTML и CSS. Вы задаёте правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, по которому при размере экрана менее 320px не будет показываться боковая панель, или при размере экрана более 1920px (широкоэкранный монитор) размер шрифта основного текста будет увеличен до 15px.

Как можно узнать, был ли использован адаптивный дизайн для отдельно взятого сайта?

Всё просто. Откройте этот сайт в любом браузере и измените размер. Если вид веб-страницы меняется, значит, был использован адаптивный дизайн.

Если я перейду на адаптивный дизайн, будет ли мой сайт отображаться в более ранних версиях браузера?

В большинстве случаев — будет. В адаптивном дизайне используются медиазапросы CSS3 и HTML5 (для улучшенной семантики), которые не поддерживаются в более старых версиях IE. Однако можно найти выход, используя решения JavaScript — respond.js и другие средства модернизации, которые адаптируют CSS3 и HTML5 под более старые версии, включая IE6.

Не мешает ли адаптивный дизайн отображению рекламных блоков, например, в Google AdSense?

Если на вашем сайте присутствуют рекламные объявления, вам нужно особенно внимательно подходить к выбору их форматов, потому что широкие блоки (например, баннеры размером 728×60 px) могут не помещаться на экране телефона размером 320px. Мы предпочитаем использовать стандартные прямоугольные блоки (например, 300×250), поскольку они легко подстраиваются как под экраны мобильных устройств, так и под мониторы ПК.

Существуют тысячи различных мобильных устройств. Какие разрешения экрана должен поддерживать сайт с адаптивным дизайном?

Мы бы посоветовали задать как минимум следующие параметры разрешений для медиазапросов в CSS3: 320px (iPhone, ландшафтный режим), 480px (iPhone, портретный режим), 600px (планшеты Android), 768px (iPad и планшеты Galaxy Tab) и 1024px (ландшафтный режим iPad и рабочий стол ПК).


Как мне начать работать с адаптивным веб-дизайном? Есть ли какие-нибудь хорошие туториалы?

Ниже представлены онлайн-ресурсы, которые помогут вам разобраться.

Есть ли какие-то недостатки в использовании адаптивного дизайна?

  • Лишние килобайты на веб-странице, поскольку нужно будет загружать CSS стили и файлы JavaScript, которые в других случаях не нужны.
  • Изображения. В адаптивном веб-дизайне сложно добиться размещения изображений в высоком разрешении на мобильной версии сайта (если только вы не используете обходные серверные решения наподобие Adaptive Images или Sencha).
  • Чтобы добавить адаптивность к существующему сайту, придётся потрудиться. Иногда проще заново создать сайт, чем переделать его под адаптивный дизайн.

Если вас заинтересовала эта тема, вы можете узнать о ней поподробнее в нашем материале, где она разбирается более подробно.

Респонсив и адаптивный дизайн: как не сесть в лужу

В наше время сложно переоценить популярность мобильных устройств. В условиях жёсткой конкуренции каждый разработчик и дизайнер прекрасно понимает, что сайт должен выглядеть идеально на любом девайсе — будь то экран телефона или 27-ми дюймовый моноблок. В связи с этим девиз «дизайн для любого устройства» в последние годы активно использовался и сформировался в целое самостоятельное направление, которое нельзя игнорировать. Проблема создания гибкого дизайна подтолкнула многих дизайнеров и разработчиков к решению острого профессионального вопроса: использовать респонсив или адаптивный дизайн? Эти две методики построения дизайна легко перепутать или сделать неверный выбор. Так что же такое респонсив и адаптивный дизайн?

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

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

В этой статье команда Шуба Lab постарается ответить на эти вопросы.

1.В чём ключевое отличие респонсив от адаптивного дизайна?

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

Адаптивный же веб-дизайн отличается тем, что в нем используется не один лишь гибкий шаблон, который постоянно перестраивается, а предполагает несколько определенных вариантов отображения сайта. Каждый из них будет показан в соответствии с разрешением экрана. Когда пользователь заходит на сайт, сервер выбирает какой из готовых шаблонов отобразить: для мобильного телефона, для планшетов и для компьютерных мониторов. То есть у вас есть несколько шаров разного диаметра, которые можно использовать в зависимости от размера лузы.

2. Насколько гибкий каждый из дизайнов?

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

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

3. Какая из технологий обеспечит более высокую скорость?

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

Если у вас ещё остался вопрос: “Так какой же дизайн мне использовать?”

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

Мастер Йода рекомендует:  Три способа найти самое длинное слово в строке Javascript

Если у вас все еще остались вопросы, то оставляйте на сайте Шуба Lab заявку с пометкой «Спарк» и наша команда поможет выбрать подходящую технологию для Вашего проекта совершенно бесплатно!

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

Дорогие друзья, обращаем ваше внимание на то, что данная статья была опубликована еще в 2013 году. В то время доля мобильного трафика не превышала 28% от общего. При этом уже в 2015 году она приблизилась к отметке в 60%.

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

Если вам нужен именно такой интернет-проект, обратите внимание на рейтинг разработчиков Mobile Friendly сайтов. В нем мы собрали компании, которые специализируются на создании площадок с адаптивным дизайном или мобильной версией.

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

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

Адаптивный дизайн — популярное направление веб-дизайна, но подходит ли он вам?

К 2014 году более половины трафика будут генерировать мобильные устройства. Если веб-ресурс не будет под них оптимизирован, пользователи будут бежать с такого сайта, как от чумы.

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

Если вы раздумываете над созданием адаптивного сайта, следующий текст поможет вам принять верное решение.

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн (responsive web design, RWD) — это подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра с любого устройства, независимо от размера экрана, будь то настольный компьютер, мобильный телефон или планшет, существующее устройство или то, что появится только в будущем.

Помните, как нам говорили, что не царапаются?

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

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

Ниже — пять причин отказаться от адаптивного дизайна при разработке вашего следующего проекта.

«Сначала займитесь мобильной версией» — глупый совет

«Сначала — мобильные» («Mobile first») — боевой клич дизайнеров, применяющих RWD. Он призывает начинать разработку с версии для мобильных устройств и только потом создавать сайт для других платформ.

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

Годами я убеждаю предпринимателей, что, хотя им и нужен контент, оптимизированный для поисковых систем, Google никогда не станет их клиентом. Писать тексты нужно, ориентируясь на идеального клиента, а только потом проверять, «понимают» ли их поисковые системы.

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

Зачастую адаптивный дизайн приводит к неоправданному увеличению времени загрузки сайта на мобильных устройствах

Концепция RWD подразумевает, что пользователи всех платформ получают одинаковый контент, оптимизированный под конкретные разрешения экранов.

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

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

Изображения, оптимизированные под настольные компьютеры, — ещё одна проблема. По словам Хуана Пабло Сармиенто (Juan Pable Sarmiento),

«это наиболее проблемный аспект адаптивного веб-дизайна, так как масштабирование „десктопного“ изображения для отображения на экране мобильного устройства предполагает загрузку изображения, оптимизированного для экрана настольного компьютера. Для просмотра полноразмерных изображений на мобильном устройстве приходится загружать неоправданно большие файлы и изменять их размеры под свой экран».

Пользователи не смогут посмотреть полную версию

На большинстве неадаптивных мобильных сайтов внизу страницы присутствует опция «Переключиться на полную версию» или другая аналогичная кнопка. Она позволяет посетителям просматривать сайт для настольных компьютеров, минуя таблицы стилей для мобильной версии.

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

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

Опять же, стремление разработчиков адаптивного веб-дизайна привести всё к единому знаменателю может восприниматься пользователями как давление.

У вас отличный сайт

Помните: «Сначала — мобильные».

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

Для сайта, построенного на платформе WordPress (на этой популярной CMS работает каждый шестой сайт в мире) можно установить плагин WP-Touch. Сайт flyte new media использует этот плагин, чтобы сделать просмотр сайта более удобным для мобильных пользователей.

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

А с выходом WP-Touch Pro появилась возможность разрабатывать сервисы, ориентированные на пользователей планшетов.

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

Мобильный трафик вашего сайта невелик

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

Единственный способ узнать точные цифры — зайти в Google Analytics и посмотреть, какая доля трафика вашего сайта приходится на мобильных посетителей, и с какой скоростью растёт их число.

Я не предлагаю вам прятать голову в песок! Я говорю о том, что бизнес-решения надо принимать, исходя из того, какую пользу они принесут вашему делу, а не фирме, занимающейся веб-разработкой.

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

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

Выводы и пояснения

Как некоторые из вас могли заметить, сайт The Marketing Agents имеет адаптивный дизайн.

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

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

Но сейчас нельзя забывать и о других способах создания мобильных сайтов.

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

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

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

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

Чтобы у вас была только достоверная и объективная информация, для составления этого рейтинга мы ежегодной изучаем десятки тысяч сайтов, запущенных в Рунете.

Говорить «нужно делать только адаптивные сайты» или «не нужно делать адаптивные сайты» —глупо, так говорят только фанатики. Они исходят не из здравого смысла, а из каких-то своих безосновательных побуждений.

То же самое я часто наблюдаю и при упоминании подхода mobile first: иногда он оправдан (например, если 90% аудитории — мобильная или когда вам просто важно разработать функционал именно под мобильных пользователей), но иногда нужно начинать именно с десктопов. Те, кто применяет только mobile first, просто «потому что он есть», а не потому, что того требует здравый смысл — тоже являются фанатиками, из-за которых появляются противники у responsive web design, готовые часами с пеной у рта ломать копья в бесконечных спорах. Конечно, если пытаться использовать RWD везде, где нужно и где нет — это ни к чему хорошему не приведет. Особенно, если делать это бездумно.

Основной постулат, который мы проповедуем, как компания, продвигающая адаптив на российском рынке веб-разработок — думать! Думать постоянно: нужно ли на этом проекте применять адаптив? Если да, то как это сделать правильно? На каких breakpoint’ах остановиться? С чего начать проектирование (mobile first или desktop first)? Какие технологии следует применить?

Часто адаптивным пытаются назвать сайт, в котором используется одна единственная технология — media queries, тогда как настоящий адаптивный сайт может (и должен) включать в себя уйму параметров:

  • серверная адаптация изображений — это позволит не грузить мобильным пользователям полновесные десктопные изображения, а пользователям экранов с высокой плотностью пикселей — насладиться всей мощью своего дисплея;
  • серверная адаптация layout’a — если какие-то блоки мы все-таки скрываем, логично это делать при помощи сервера, чтобы не отображать лишние элементы разметки пользователям и не заставлять их грузить такие ценные на мобильном интернете килобайты;
  • адаптировать также нужно и интерфейс:
    • o по очевидным причинам нельзя оставлять элементы, работающие по наведению;
    • o различные карусели нужно адаптировать под touch;
    • o нельзя заставлять пользователя бесконечно скроллить разросшуюся за счет перемещенных блоков страницу;
    • o в тоже время нельзя и оставлять его без доступа к нужному контенту, нельзя просто скрывать его: контент должен быть доступен, при необходимости.

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

Решение о том, делать или не делать адаптивный сайт должно быть взвешенным. Возможно, вашему бизнесу нужен именно мобильный, а не адаптивный сайт. А может ему вообще нужно мобильное приложение или вам и вовсе еще рано выходить на мобильный рынок, несмотря на повсеместное растущее потребление интернета с мобильных устройств.

Настоящий адаптивный сайт не будет ни в чем уступать мобильному сайту. Наоборот, он будет превосходить его, ведь мы получаем не статичный, а динамичный сайт. К тому же, он будет уже заранее адаптирован к будущему. Future-friendly web, как мы называем это в агентстве AGIMA. Не важно, какое устройство выйдет завтра — ваш сайт, если он сделан правильно, будет отображаться на нем корректно.

Что нужно знать дизайнеру про современный, адаптивный дизайн 28.12.2015 18:17

Что нужно знать дизайнеру про современный, адаптивный дизайн.

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

На Западе адаптивные сайты делают уже несколько лет. И Google не напрасно в этом, 2015 году, начал понижать в выдаче сайты, которые не адаптируются к устройству пользователя.

Способ разработки дизайна адаптивного сайта называется «Mobile first», что означает- «вначале мобильная версия». Рассмотрим на примере.

Для начала составим список элементов дизайна:

  1. логотип
  2. телефоны
  3. меню
  4. основной контент
  5. подвал (копирайт, контакты, соцкнопки)

Будем создавать разные дизайны для разных устройств.

Адаптивный дизайн для смартфона

Расположим элементы на «экране » смартфона

Адаптивный дизайн для планшета в вертикальной ориентации

Экран планшета больше, но в ориентации «вертикально» количество пикселей не такое и большое. Расставим элементы.

Можно попытаться поставить полное меню, если в нем не много пунктов. Но если они в полной версии занимают все пространство «от края до края», то, скорее всего, меню будет занимать 2 строки. Если для вас это не критично, можете оставить так.

Адаптивный дизайн для планшета

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

Адаптивный дизайн для ноутбука и среднего десктопа

Ширина монитора у компьютеров разная. В 2015 году считается, что в среднем 1280 пикселей по горизонтали.

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

  1. логотип
  2. телефоны
  3. поиск
  4. переключатель языков
  5. социальные ссылки
  6. меню
  7. левое меню (постоянное или контекстное)
  8. основной контент
  9. подвал (копирайт, контакты, соцкнопки) рисуем полносьтю

Для краткости приведу только схемы. Мобильный:

Планшет горизонтально, ноутбук и десктоп

Обратите внимание на следующие моменты.

  • Есть возможность показывать или скрывать элементы в зависимости от устройства (разрешения экрана). В нашем примере в мобильной версии я убрал поиск из шапки и соцкнопки из подвала.
  • Порядок следования элементов желательно соблюдать одинаковый. К примеру, если вы хотите, чтобы логотип в мобильной версии шел первым, в начале шапки, а на планшете он был справа, а на десктопе слева, то это будет сложно сделать. Возможно, но сложно.
  • Элементы могут сжиматься. К примеру, телефоны могут быть написаны в одну строку на десктопе, и в две строки на мобильном. И наоборот.
  • Изображения, как правило, используют большого размера. Но они имеют не фиксированный размер, а «жидкий». В случае, если элемент имеет небольшую ширину, изображение занимает 100% ширины элемента. Если элемент увеличивается, то изображение увеличивается вместе с элементом. К примеру, у некоторых сматфонов ширина экрана может быть 700 пикселей. А в версии для смартфона логотип занимает всю ширину экрана. Значит изображение логотипа должно быть не менее 700 пикселей по ширине.

Особенности вложенности блоков, ширина колонок и отступов.

В центально- расположенном сайте контент делится на горизонтальные блоки- контейнеры. Ширина контейнера зависит от устройства/ ширины экрана. К примеру, для мониторов шириной 1280 и более ширина контейнера будет 1140 пикселей. Для монитора 1024 пикселя может быть 940px. Внутри контейнера находятся «строки», которые, в свою очередь, делятся на колонки с контентом. Справа и слева от контейнера- пустое пространство одинаковой ширины. В результате контейнер расположен посередине экрана.

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

Отступы внутри колонки как правило имеют одну величину. Но она зависит от устройства (ширины экрана). К примеру, на большом мониторе может быть 15 пикселей, а на планшете- 10.

Вот пример, как может быть расположен контент на странице, в привязке к колонкам.

Какие могут быть варианты. Блоки 1 и 2 в десктоп-версии будут располагаться как нарисовано, а в мобильной наоборот, блок 1 будет выше блока 2. Блоки 3 и 4 имеют отступы слева. Блок 5 имеет ширину 10 колонок, а справа от него свободное пространство.

Но в колонке можно расположить еще одну строку, а в ней- еще колонки. В результате получится схема, отображенная на рисунке (см. блок 7):

Зачем это нужно? К примеру, в шапке может быть много элементов. Языки, поиск, еще одно меню, телефоны, слоган, корзина магазина. И расположить все элементы в рамках 12-и колонок бывает очень сложно. А на данном примере видно, что дизайнер может расположить в 5-колоночном блоке разные элементы, которые, в свою очередь, могут меняться местами на разных устройствах (см. блоки 1 и 2).

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