Григорий Коченов. «Адаптивный веб-дизайн»


Инструменты | 14 Апреля 2011 | 1

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

Кембрийский взрыв

Мы живем в эпоху взрывного роста мобильного интернета в мире. Для миллионов жителей Индии и стран Африки телефон - это первое окно в сеть. Во всем мире мобильные устройства становятся основными точками доступа, обгоняя домашний проводной интернет. Показателен пример Японии, где количество просмотров веб-страниц с мобильных устройств обогнало традиционные PC и ноутбуки еще в 2007 году. По прогнозам morgan stanley в 2012 это явление будет носить уже глобальный характер. Российская статистика также радует: сейчас по распространенности мобильный интернет вплотную подошел к домашнему и неминуемо его скоро обгонит. Каждый второй россиянин старше 12 лет пользуется интернетом, а каждый третий из них использует для выхода в сеть мобильные устройства. При этом надо помнить, что классические настольные компьютеры все еще здесь и никуда не уходят. Безумное разнообразие устройств обещает стать одним из ключевых при разработке современных веб-ресурсов.

В поиске единственно верного решения

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

Полная адаптация

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

Григорий Коченов. «Адаптивный веб-дизайн»

Еще один пример - http://edenspiekermann.com/en/about. Обратите внимание на работу с текстом. Оригинальная трех-колоночная верстка, не характерная для веб, и перестраивание элементов. Большие шрифты и читаемость на любых дисплеях.

Григорий Коченов. «Адаптивный веб-дизайн»

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

Основа метода в верстке колонками. При 1024px это 10 колонок, cледующая ступень  - 8 колонок для планшетных компьютеров (или вертикально расположенного Ipad) 768 пикселей. Далее следуют мобильные телефоны - 420 и 380 пикселей соответственно (5 и 3 колонки).  Эти разрешения охватывают практически все возможные устройства для выхода в интернет - на любом из них сайт, созданный по этой технологии, будет работать и выглядеть одинаково. Эти градации и подробное описание того, как работает система есть на сайте Less Framework. Там же доступны готовые шаблоны, защищенные  MIT license - это значит, что вы можете их совершенно свободно использовать, лишь указав в своем коде источник. Разумеется, для конкретных задач лучше будет разработать свои решения, взяв за основу сам принцип.

Григорий Коченов. «Адаптивный веб-дизайн»

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

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

последние публикации

Комментарии

Loreleya | 15.04.2011, 11:24
все так меняется, как жить

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

doc id = 8945

Каталог рекламных компаний России

Talant Base. Поиск по всем специалистам, работавшим над рекламными кампаниями с 2009-2015г


Adindex Print Edition - справочный журнал, посвященный рекламе и маркетинговому продвижению.
В издании систематизированы информационные, аналитические и статистические данные по ряду важнейших направлений отрасли.
Периодичность: ежеквартально.
При поддержке Agency Assessments International.
Цель проекта — создать новый инструмент на рынке коммуникационных услуг, презентующий объективную информацию о структуре рекламной индустрии и ее основных игроках.
все разделы

Нестандартная Реклама

AdIndex Market

Новости партнеров

Кейсы