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

web-fonts-mobile-fonts

 Введение

Как заявляет Гейб Самнер — менеджер по продукции Sitefinity CMS от Telerik — производителя продуктов, используемых в индустрии веб-разработки:

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

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

Динамика интернет трафика к 2015 году

Динамика интернет трафика к 2015 году

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

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

Устройства

Разнообразие устройств по диагонали экрана

Единый сайт для всех устройств

Адаптивный веб-дизайн (АВД) является передовым решением для поддержки множества устройств представленных сейчас на рынке, а также тех, которые только еще будут выпущены. Он основан на стандартах HTML (CSS3), который поддерживается всеми современными вэб-браузерами. Использование АВД позволяет создать единый сайт, который адаптируется к любому устройству, потому что техника создания сайта определяет различные стили для различных устройств.

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

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

Но как насчет создания контента? За последние несколько лет, большинство веб-контента опубликовано не разработчиками, а обычными пользователями. Системы управления сайтом (CMS)  и различные другие инструменты позволили людям, которые ничего не знают о HTML или вэб-разработке создать свои собственные сайты. На самом деле АВД серьезно осложняет этот процесс… Сайт должен преобразовываться на основе типа устройства и его особенностей и авторы контента должны понимать, что то, что они видят при создании публикаций и страниц, не всегда то, что получается в реальности. Хотя АВД остается единственной жизнеспособной стратегией при создании адаптивного контента, его использование далеко не просто в реализации, так как готовых систем управления сайтом на основе АВД практически не существует.

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

  • Корпоративный сайт компании AGIMA, ведущего популяризатора теории и практики адаптивного дизайна в России.
  • Сайт The Boston Globe был модернизирован с использованием технологии адаптивного веб-дизайна в конце 2011 года.
  • Известный англоязычный сайт для дизайнеров Smashing Magazine стал адаптивным в начале 2012 года.
  • Сайт французского часа земли WWF.
  • Сайт университета Ланкастера.
Адаптивный веб-дизайн (АВД) является передовым решением для поддержки множества устройств представленных сейчас на рынке, а также тех, которые только еще будут выпущены.
Адаптивный дизайн для интернет проекта
Дата: 07/01/2013
Адаптивный веб-дизайн (АВД) является передовым решением для поддержки множества устройств представленных сейчас на рынке, а также тех, которые только еще будут выпущены.
Рейтинг: 5

Метки: , , , , , , , , , , , , , , , , , , ,

Просмотров: 1 450

2 комментария на “Адаптивный дизайн для интернет проекта” Следить за обсуждением

  1. maks02 02.07.2013 в 19:51 #

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

  2. Егор 09.07.2013 в 16:58 #

    Вот отличный ресурс для проверки сайтов: как выглядят адаптивне и обычные сайты на разных устройствах:
    http://plastilin5.com/tools/

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

Top