Responsive Web Design

5.1 из 6.8 млрд людей, населяющих сегодня Землю, пользуется различными мобильными устройствами. Общие продажи Playstation 4 и XBOX ONE в первый день превысили 2 млн единиц, а число активированных SmartTV в 2014 году достигнет 123-х млн. Количество разнообразных internet-ready гаджетов увеличивается каждый день.

Мобильный интернет растёт еще быстрее. Только за 2012 год рост составил 10%, а к 2015 году больше половины мирового интернет-трафика будет проходить через планшеты и телефоны.

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

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

На самом деле. В 2010 году из всего спектра доступных потребителю internet-ready устройств насчитывалось примерно 97 уникальных разрешений экрана, в 2013 это число выросло уже до 232. А если добавить к ним различные методы ввода (клавиатура/мышь, тачскрин, ПДУ) и ПО (разнообразие браузеров и операционных систем), то задача создания и поддержки отдельных версий сайта для каждого конкретного устройства из просто бессмысленной превращается в принципиально невозможную.

Как же тогда не разориться, сохранить разум и всё-таки оправдать ожидания (user experience) и туриста из Москвы, использующего для доступа в Интернет телевизор в номере отеля, и хипстера из Уильямсберга с полдюжиной hi-end гаджетов, и рабочего швейной фабрики в Сингапуре с дешёвым контрафактным телефоном на Android’е?

RWD спешит на помощь!

Что такое Responsive Web Design (отзывчивый или адаптивный веб-дизайн)?

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

Чаще всего в качестве главного преимущества RWD-сайтов приводят их возможность адаптироваться под размер экрана. В качестве примера можно рассмотреть сайт Smashing Magazine

• 
• 
• 
• 
• 
• 
• 
• 

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

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

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

Потому что эра доминирования настольных компьютеров уходит в прошлое. Для многих мобильное устройство становится основным способом выхода в Интернет. Уже сегодня 28% американских пользователей используют планшеты и смартфоны для доступа к сети чаще чем “немобильные” гаджеты.

Потому что в 2013 году доля мобильного трафика на ведущих e-comerce сайтах составила 21%, а в 2012 году 62% из всех онлайн-магазинов, реализовавших идеи RWD на своих сайтах, сообщали о росте продаж. Wallmart Canada, например, после редизайна своего сайта по принципам RWD отчитался об увеличении конверсии на 20%, а также о росте продаж с мобильных устройств на 98%.

Потому что в 2013 году 15% ($38.8 млрд.) всех покупок в ведущих онлайн-магазинах было сделано с мобильных устройств, а к 2017-ому году этот показатель вырастет до 25% ($108.6 млрд).

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