Автор работы: Пользователь скрыл имя, 21 Апреля 2013 в 13:24, статья
Отзывчивый (адаптивный) веб-дизайн – способ разработки сайтов с целью обеспечения оптимального качества просмотра, легкого чтения и навигации с широкого спектра устройств. В статье приводятся доводы «за» и «против» использования адаптивного дизайна при верстке веб-страниц, даются рекомендации для разработки сайтов с использованием современных веб-технологий.
Князева Г.В.
Адаптивный дизайн веб-страниц
Ключевые слова
Отзывчивый веб-дизайн, адаптивный веб-дизайн, верстка веб-страниц, современные веб-технологии, «сначала для мобильных», гибкий макет на основе сетки, гибкие изображения, медиазапросы.
Responsive web design, RW, layout of web pages, modern web technologies, mobile devices, «mobile first», flexible grid-based layout, flexible images, CSS3 media queries.
Аннотация
Отзывчивый (адаптивный) веб-дизайн – способ разработки сайтов с целью обеспечения оптимального качества просмотра, легкого чтения и навигации с широкого спектра устройств. В статье приводятся доводы «за» и «против» использования адаптивного дизайна при верстке веб-страниц, даются рекомендации для разработки сайтов с использованием современных веб-технологий.
Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). The article contains the discussion on the application of adaptive design in layout of web pages, and recommendations for using modern web technologies.
Компьютер все больше перестает быть основным способом доступа к интерактивной среде. Количество пользователей мобильных устройств в России уже достигло отметки в 40 млн. человек, а продажи коммуникаторов и планшетов в мире в 2011 году превысили сумму проданных ПК и ноутбуков.
С каждым годом количество заходов на сайты с мобильных устройств постоянно возрастает. Пользователи могут просматривать веб-страницы с нетбуков, планшетов, терминалов, мобильных телефонов и телевизоров. Устоявшиеся принципы дизайна и разработки сайтов столкнулись с абсолютно новыми требованиями.
Сначала сайты делали только фиксированными по ширине и этого хватало. Потом появился так называемый «резиновый» дизайн. Сайты стали верстаться с пропорциональным изменением колонок в зависимости от разрешения. Было мнение, что все сайты должны быть резиновыми, за этим будущее, а фиксированный размер уйдет в прошлое. С каждым годом размеры мониторов увеличивались, и строки текста расползались в длину, становились неудобочитаемыми и «резиновый» размер стали фиксировать после 1300-1400px по горизонтали.
С распространением мобильного интернета появилась адаптивная верстка — умный дизайн, способный поддерживать разные разрешения мониторов.
При входе на хорошо знакомый сайт с мобильного телефона или планшета следует попробовать найти нужную информацию, заказать услугу или оформить покупку. Если время и усилия, затраченные на масштабирование страницы, поиск необходимой информации и переход по мелким неразборчивым ссылкам не устраивает пользователя, есть над чем задуматься дизайнерам данного ресурса. Копирайтерам предстоит продумать динамику поведения контента; проектировщикам и дизайнерам - рисовать сайт, используя непривычную для них ранее схему «mobile first» («сначала для мобильных»). Особого внимания в такой ситуации требует графический контент. При существующем многообразии экранов, чтобы добиться адекватного отображения графического и иллюстративного материала при просмотре на любом из устройств, весь комплект графики должен быть продублирован 3 или даже 4 раза, с различным разрешением. Допустим это можно сделать автоматически. Но кроме различного разрешения, можно пойти дальше: например, различные пропорции изображений, более удобные для этого типа устройств, или различная степень детализации.
Адаптивный (отзывчивый) веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключённых к интернет.
Адаптивный подход к проектированию веб-сайтов, несомненно, одно из важных открытий последних лет в сфере веб-технологий, и причиной его появления мы, конечно же, обязаны мобильным устройствам.
Главными причинами
Впервые термин отзывчивый веб-дизайн был использован 25 мая 2010 года в одноименной статье Итана Маркотта, опубликованной в журнале A List Apart.
Отзывчивый веб-дизайн – это технология создания веб-страниц, которая обеспечивает удобство их просмотра на различных устройствах (стационарных компьютерах, ноутбуках, планшетах, смартфонах, телевизорах, имеющих подключение к Интернет (например, через игровую приставку), и т.д.). Целью отзывчивого веб-дизайна является универсальность HTML-разметки веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии отзывчивого веб-дизайна не нужно создавать отдельные версии веб-сайта для каждого конкретного типа устройств.
Отзывчивый веб-дизайн базируется на 3 принципах:
Адаптивный дизайн очень интересное и перспективное направление, однако, его внедрение требует новые более совершенные инструменты по управлению контентом, редактуре, сбору статистики и, разумеется, разработке. Не только сайты, но и дизайнеры, верстальщики, редакторы сайтов должны адаптироваться в новой ситуации. Адаптивный дизайн усложнит жизнь разработчикам, но сделает WWW интереснее и понятнее. Создание таких сайтов надо начинать со структуры контента не только для правильного переплетения и отображения нужных блоков в нужных местах при адаптивном дизайне, а и просто для понимания, из чего будет состоять сайт.
Что касается увеличения разрешения, это в целом не проблема, потому что с увеличением разрешения увеличивается мощность устройств. Можно предположить, что с наступлением эры дисплеев, способных повторить с точки зрения разрешения лист бумаги произойдет своеобразный возврат к классическим типографским приемам и правилам в дизайне. Нынешняя фрагментация дисплеев и форматов заставляет идти на компромиссы и создавать различные программные решения. Но как предусмотреть все возможные ситуации, в которых пользователь вступает во взаимодействие с контентом? В идеальном случае любая система должна самостоятельно подстраиваться под нужды пользователя.
Можно провести пример использования искусственного интеллекта в технической разработке Intelligent Driver Information Manager компании Volvo в автомобилестроении. В зависимости от полученной информации от различных автомобильных сенсоров система отключает, различные каналы коммуникации (радио, телефон), способные отвлечь водителя в критической ситуации и привести к непредсказуемым последствиям. В отношении информационных систем можно провести аналогию и представить, как мобильный телефон пользователя получает возможность узнать, где он находится, и что окружает его хозяина, и в зависимости от этого выдать ему некую выжимку информационного потока, которая будет релевантна в этот конкретный момент.
Надо накапливать и систематизировать информацию о потребителях информации, параллельно убирая барьеры между пользователем и этой информацией. Тот, кто сможет сделать это наиболее эффективно станет победителем в погоне за аудиторией.
Но адаптация сайта под все устройства, т.е. его универсальность – эта концепция вызывает много споров и неоднозначных мнений в среде профессионалов.
Допустим, со временем разработчики найдут решения, освоят новые реалии и научатся создавать сайты по новым стандартам. Это вопрос недалекого будущего.
Бизнес достаточно быстро адаптируется к новому. Разработчики сайтов получат новые заказы на редизайны, переделку корпоративных сайтов, сервисов и интернет-магазинов. Разовьется индустрия поддержки. Но как быть с накопленными информационными ресурсами? Архивами, энциклопедиями, библиотеками, научными, историческими, художественными реестрами? Со всем тем огромным объемом важных знаний, которые являются нашим наследием, но на которых сложно заработать? Это серьезный вопрос.
Кроме этого на рынке почти отсутствуют CMS-решения, которые позволяют создавать семантический и структурированный контент. А когда такие CMS появятся, то от проектировщика потребуется значительно больший уровень технической подготовленности для работы с этими системами.
Концепция дизайна «first mobile»– это перспективное направление, но требует вдумчивого подхода и обоснованных решений.
Стремление унифицировать ресурс под все устройства - задача слишком сложная и рискованная (в данном случае клиент рискует успехом своего бизнеса). Скорее, такое направление больше подходит для блогов и информационных сайтов. Первоочередная задача любого коммерческого проекта - это решение бизнес-задач: продажа товара, услуги. Насколько правильно в этом случае стремление сделать приоритетным мобильную версию сайт? Ведь большие мониторы остаются устройствами самого комфортного веб-серфинга.
Для бизнеса же, важно «выжать» максимум пользы из каждой версии своего представления в глобальной сети интернет. Мобильная версия накладывает значительные ограничения по сетке макетов, пропорциональному соотношению колонок, формату отображения блоков и их изменению на мелких разрешениях. Есть серьезные ограничения по динамике на странице. То есть мобильная версия сайта зачастую отличается не только визуально, но и функционально - это обуславливается даже способами управления.
На сегодняшний день, и в ближайшие «завтра» (пока не наступит эра гигантских сенсорных мониторов) - рациональнее и эффективнее иметь специально разработанную версию мобильного сайта (под группу мобильных устройств) и версию для обычных компьютеров.
Подводя итог, можно сделать следующий вывод.
Адаптивный дизайн – это прогрессивная технология верстки веб-страниц, ориентированная на универсальности с точки зрения комфортного отображения контента на различных устройствах. Несомненно, она должна развиваться и усовершенствоваться. Но при имеющихся накопленных информационных ресурсах нет необходимости переписывать уже опробованные и протестированные временем веб-сайты. Оптимальным решением на данном этапе технического развития является наличие, как минимум, двух версий сайта - для мобильных устройств и для стационарных мониторов.
Список литературы