11.01.2013

веб-дизайн, адаптивный, отзывчивый

Перевод статьи "Why 2013 Is the Year of Responsive Web Design" с портала Mashable

http://mashable.com/2012/12/11/responsive-web-design/

Pete Cashmore, Dec 11, 2012

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

Те организации, которые не отреагируют вовремя, могут остаться “за чертой”. Рассмотрим причины, по которым это может произойти.

Эра пост-PC

веб-дизайн, адаптивный, отзывчивый

2012 стал необычным годом в компьютерной индустрии. Впервые с 2001-го продажи персональных компьютеров оказались ниже, чем в предыдущие годы. Итак, какие устройства теперь покупают? Прежде всего это планшеты. В этом году ожидается продажа 100 000 планшетов. Их число может превысить продажи ноутбуков. Не менее популярны и смартфоны. Согласно исследованиям Nielsen, большинство абонентов сотовой связи в США теперь имеют смартфоны вместо традиционнных мобильных телефонов.

Тем временем, переход к мобильности происходит с огромной скоростью. Сегодня 30% трафика Mashable приходит с мобильных устройств. А к концу этого года такой трафик может превысить 50%.

Веб или мобильные приложения? И то и то!

веб-дизайн, адаптивный, отзывчивый

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

Разработка мобильных приложений может показаться очевидным решением. Без сомнения, иметь приложения для основных платформ лучше, чем не иметь, и в то же время вы пишете приложения под каждое устройство? Например, в прошлом месяце на Mashable/линк/ зашли с 2 500 различных устройств. Конечно, можно написать приложения для большого количества платформ, но ведь не для всех.

Когда речь идет о новостных порталах, таких как наш (Mashable.com), есть и другой фактор, который необходимо рассматривать. По опросам Pew Research Center, 60% пользователей планшетов предпочитают читать новости через мобильный веб, нежели в приложении. Я думаю, медиа-компаниям необходимо предлагать приложения и вместе с тем, очевидно, необходимо иметь хороший мобильный веб-сайт.

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

веб-дизайн, адаптивный, отзывчивый

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

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

В случае с Mashable мы также определяем функциональность устройства. Так, на тач-устройствах (управляемых пальцами) мы допускаем перелистывание колонок, как вы привыкли делать на своем смартфоне.

2013: год адаптивного веб-дизайна

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

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

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

Как говорит Итан Маркотт, автор книги “Адаптивный веб-дизайн: “Сейчас, как никогда раньше, перед дизайном стоит задача уметь отображаться на целом спектре интерфейсов и устройств. Адаптивный веб предлагает двигаться вперед, давая нам новые возможности управления информацией".