В статье проводится анализ основных технологий построения и статистики посещения сайтов, описывается процесс проектирования, создания и верстки макета сайта адаптивного web-дизайна. С массовым распространением различных портативных устройств, имеющих выход в Интернет, как никогда стало важно удобство и доступность использования сайтов на небольших разрешениях экрана. Теперь уже недостаточно сделать сайт, который будет хорошо смотреться на мониторе с большим разрешением и корректно отображаться во всех современных браузерах.
Необходимо еще с этапа проектирования сайта думать о возможном просмотре его с мобильных устройств. Технология построения сайтов по принципу адаптивного (англ. responsive) дизайна позволяет создать один сайт, имеющий оптимальное отображение на всех видах устройств, при этом не требующий никаких действий со стороны пользователя (ручной или автоматический переход на мобильную версию, если разрешение меньше заданного). Данная технология исключает использование динамических элементов (например, JavaScript), загрузку которых многие пользователи мобильных устройств по разным причинам отключают, и дублирование информации на различных версиях, что плохо сказывается на позициях сайта в поисковых системах и вебометрических рейтингах.
Содержание статьи
На основе анализа сайтов вебометрического рейтинга были выявлены следующие особенности:
– большинство в течение последних 5 лет не обновляло визуальную и программную составляющую сайтов. В связи с этим элементы новых технологий CSS3 и HTML5 почти не используются, хотя они уже достаточно распространены;
– для большей динамичности на подавляющем большинстве сайтов используется JavaScript или его библиотеки;
– менее половины проанализированных сайтов корректно отображаются в старых версиях браузеров. В подавляющем большинстве случаев, когда сайт отображается некорректно, пользователю не предлагается альтернативного просмотрщика сайта;
– только 10% сайтов имеют версию для мобильных устройств и ни на одну из них нельзя зайти с персонального компьютера;
– 5% web-сайтов созданы с применением принципов адаптивного web-дизайна, хотя еще год назад ни один из проанализированных сайтов их не использовал.
1. Использование резинового типа макета (англ. fluid grid) – макета, в котором значение размера ширины родительского элемента (элементов) задаётся в процентах по отношению к разрешению монитора.
2. Резиновые изображения (англ. flexible images). Все изображения должны масштабироваться, исходя из предельно допустимого значения ширины. Оптимальным является их отображение в натуральную величину. При изменении пользователем окна браузера до размера менее самого изображения, оно автоматически уменьшается, чтобы вписываться по ширине в окно браузера наилучшим образом.
3. Использование media queries – правил CSS3, которые назначаются как атрибуты при вызове других правил из таблицы стилей, основанных на параметрах устройства вывода, таких как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве.
4. Применение постепенного улучшения (англ. progressive enhancement). Идея состоит в том, что сначала создается простейшая разметка документа, которая корректно отображается даже в самых простых браузерах. Затем добавляются стили, интерактивность и прочее, используя каскадные таблицы стилей, JavaScript, SVG, Flash и все остальное, что можно вставить в страницу.
5. Проектирование для мобильных устройств с самых ранних этапов (англ. mobile first). Это подход, при котором проектирование сервиса начинается с мобильной версии, а не с версии для больших экранов, как это делается повсеместно.
6. Модульная сетка страницы – это невидимый «скелет» дизайна, система горизонтальных и вертикальных направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции. Для генерации модульной сетки обычно используют так называемые css-фреймворки, которые созданы для упрощения работы верстальщика страницы, быстроты разработки и исключения максимально возможного числа ошибок вёрстки.
Проведя анализ статистики посещений пользователей существующего сайта и общемировой статистики популярных разрешений экранов , разработано 5 макетных сеток для наиболее типичных групп разрешений: менее 520 пикселей, от 520 до 800 пикселей, от 800 до 1000 пикселей, от 1000 до 1400 пикселей и более 1400 пикселей. После генерации модульных сеток созданы прототипы макетов страниц сайта для различных разрешений.
В соответствии с принципом адаптивного web-дизайна разработан шаблонный макет для всех 5 разрешений. До настоящего момента лучшей практикой считалась разработка ряда решений, исходя из разрешения экрана или методов ввода. Как правило, создавалось лишь две версии сайта – для широкого разрешения (персональный компьютер или ноутбук) и для мобильных устройств (телефона или смартфона).
Преимущества и большие возможности ресурсов, спроектированных по принципу адаптивного дизайна, вполне могут позволить им выступить заменой мобильных версий web-сайтов. Такой подход сэкономит на разработке, повысит удобство и комфортность просмотра web-сайта на всех устройствах, улучшит позиции в результатах выдачи поисковых систем (т.е. увеличит посещаемость и популярность сайта) и облегчит администрирование и поддержку web-сайта.
