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

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

Но сначала немного теории.

Впервые понятие Адаптивный дизайн «Responsive web-design» было озвучено в 2011 году дизайнером итальянского происхождения. С того времени все больше пользователей в качестве устройств доступа к интернету, используют планшеты и смартфоны. И технология адаптивного веб-дизайна смогла решить проблему «мобилизации» интернета.

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

График_Адаптивный дизайн_samokhinteam

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

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

Одним из методов разработки адаптивного дизайна является принцип «mobile-first» (сначала проектируется сайт под мобильное устройство, затем разрабатываются прототипы под остальные устройства постепенно добавляя необходимые блоки)

 

Теперь перейдем к практической стороне вопроса и рассмотрим хороший пример адаптивного сайта

 

Структура сайта состоит из 6 блоков:

  1. Шапка
  2. Баннер
  3. Контент с постами
  4. Правый сайдбар (верхний блок)
  5. Правый сайдбар (нижний блок)
  6. Футер

 

Ipad_Адаптивный дизайн_samokhinteam

 

Блок №1

При отображении сайта на Iphone (320×480) мы видим блок под номером 1 (шапка) с кнопкой donate, который уменьшается под разрешение устройства. Остальные элементы в шапке не изменяются в размерах.

Блок №2

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

Блок №3

Для сокращения места и увеличения скорости загрузки страницы, статьи в блоке номер 3 (посты) идут заголовками, а анонс поста убирается в подробное описание. Кликая по ним пользователь переходит в развернутое описание статьи.

Блок №4

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

Блок №5

Блок под номером 5 переносится под блок 4

Блок №6

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

 

Iphone_Адаптивный дизайн_samokhinteam

 

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

1) http://plastilin5.com/tools/

2) http://dfcb.github.io/Responsivator/

 

Примеры хорошего адаптивного дизайна можно посмотреть по этим ссылкам:

1) http://www.barackobama.com/

2) http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

3) http://yiibu.com/

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

 

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

1) Вы не теряете 50% мобильной аудитории, которая в будущем будет только расти, а в 2015 уже превысит количество тех, кто использует настольные ПК.

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

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

4) Вы сокращаете свои ресурсы на разработку нескольких версий сайта. Один сайт – одна версия

5) Такие сайты легче продвигаются в поисковых системах.

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

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

 

В заключении хочется закончить статью фразой из сказки про Алису в Стране Чудес:

Чтобы стоять на месте надо бежать, а чтобы идти, нужно бежать очень быстро.

 

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

Решить вашу проблему

 

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*