Страница 12 из 13
Источник: http://www.targetinternet.com
Есть также другие технологии, которые можно комбинировать с отзывчивым дизайном, чтобы избавиться от его ограничений и создать оптимизированный мобильный интерфейс. Часто этот вариант называют «отзывчивый веб-дизайн плюс серверные компоненты», или коротко – RESS.
Отзывчивый дизайн похож на этакую волшебную палочку, по мановению которой можно решить любые проблемы с мобильными сайтами. Конечно, вы получаете единый сайт, который будет подстраиваться под девайс посетителя. Однако надо учесть следующее.
Сумеет ли сайт с отзывчивым дизайном обеспечить мобильную оптимизацию во всей ее полноте – или придется идти на компромисс из-за технологических ограничений? Разумеется, в большинстве сценариев получить оптимизированный интерфейс легко, но в других случаях многое зависит от того, как именно будет реализован ваш сайт и какой требуется функционал. Например, во многих случаях для сайтов электронной коммерции требуется особая мобильная версия, потому что отзывчивый дизайн недостаточно гибок, чтобы обеспечить необходимый уровень адаптации.
Другая проблема связана со скоростью загрузки. Если отзывчивый дизайн реализован плохо, дело может кончиться тем, что на мобильное устройство загрузится полная настольная версия сайта, просто при этом отобразятся не все элементы. Поэтому, как правило, лучше сразу оценить полезность отзывчивого дизайна, чем потом лихорадочно подгонять то, что плохо прилажено, – «раздутые сайты», которые грузятся очень медленно, не нравятся никому.
В общем, отзывчивый дизайн – не палочка-выручалочка, а просто один из методов, который стоит сочетать с другими.
Принципы мобильного дизайна. Мобильные и десктопные версии
В этом разделе мы рассмотрим основные соображения, связанные с разработкой мобильных сайтов, а также их главные отличия от десктопных версий.
Одна из главных проблем, связанных с мобильными устройствами, – размер их экранов и то, что они в принципе меньше экранов ПК или ноутбуков. Это значит, что место на странице в большой цене, поэтому нужно по максимуму упростить просмотр и усвоение контента.
Это снова указывает на приоритет карты поведения мобильного пользователя и адаптации контента под его потенциальные нужды. Также это означает необходимость фильтровать несущественный контент, чтобы упорядочить взаимодействие пользователя с мобильным сайтом.
Смартфоны, как правило, держат вертикально, как и планшеты. А вот экраны настольных компьютеров обычно ориентированы горизонтально. Это следует учитывать при выборе дизайна, не забывая, что ориентацию мобильных устройств можно менять.
На сайтах активно используются гиперссылки. Что это такое? Просто ссылка в виде текста, ведущая к уточняющей информации. На мобильных устройствах они работают менее эффективно из-за размера экрана по сравнению с нашим инструментом ввода, то есть пальцами. Тут используются кнопки, которые, однако, могут очень неуклюже смотреться на настольных версиях сайта.
Итак, в фокусе нашего внимания – экраны уменьшенных размеров, из-за чего экранное пространство всегда в большой цене. Это приводит к тому, что графика десктопной версии сайта часто не подходит для мобильных: маленькие изображения, занимающие ценное экранное пространство, выглядят нечеткими.
Десктопные версии сайтов предлагают различные способы навигации по контенту: например, иерархические меню и «хлебные крошки», показывающие, в каком месте сайта вы находитесь. Из-за пространственных ограничений приходится удалять многие такие элементы, но при этом важно, чтобы мобильный пользователь не запутался на сайте. Упростит задачу сокращенная иерархия.
У телефонов есть дополнительный функционал, которого не могут предложить настольные устройства, но который часто используется на мобильных сайтах. Мобильное взаимодействие можно улучшить с помощью таких функций, как геолокация, клики по карте, ссылки по тексту и т. д.
Технологии и их язык
Говоря про разработку мобильных сайтов, нужно знать множество технических терминов и названий соответствующих технологий. Ниже вы найдете список самых важных терминов, которые помогут ориентироваться в теме, на равных вести разговор и строить планы относительно ваших мобильных сайтов.
– HTML – язык разметки гипертекста для верстки веб-страниц. Когда мы запрашиваем веб-страницу, то получаем HTML-файлы, а уже браузер превращает их в то, что мы видим.
– CSS – каскадные таблицы стилей, описывающие внешний вид разметки. То есть CSS определяет, как должны выглядеть разные элементы веб-страницы. Для разных устройств можно применить целый ряд стилей для различных раскладок контента.
– JavaScript – клиентский язык программирования (запускается и используется в браузере), обеспечивающий дополнительные функции веб-страниц. Часто его применяют, чтобы выбрать наиболее подходящие CSS для конкретного устройства.
– Отзывчивый дизайн – обеспечивает отображение веб-страниц для разных устройств, подстраивая раскладку и элементы страницы. Эта подстройка производится в браузере.
– Адаптивный дизайн – позволяет направлять конкретную версию веб-страницы на конкретное устройство или браузер. Если устройство и/или браузер известны, на них отправится только соответствующая версия страницы.
– Прогрессивное улучшение – подход к созданию веб-страниц, цель которого – предотвратить загрузку контента на несовместимых с ним основных браузерах. Это значит, что сначала создается базовая версия веб-страницы, которая постепенно подстраивается под более современные браузеры. Наиболее продвинутые элементы сразу не подгружаются, то есть не тратится лишнее время на загрузку.
– RESS – отзывчивый веб-дизайн с серверными компонентами. Метод комбинирования элементов отзывчивого дизайна и других технологий с целью максимально оптимизировать мобильное взаимодействие и устранить недостатки отдельных технических приемов. RESS часто называют «адаптивным дизайном».
– Медиазапросы – элемент CSS, важная часть отзывчивого дизайна. Позволяют адаптировать раскладку под разрешение и раскладку экрана.
– «Резиновая сетка» – принцип состоит в том, что положение и раскладка веб-страницы «растягиваются» вместе с окном браузера, а не являются фиксированными. Это обеспечивает упрощенную адаптацию раскладок под экраны разных размеров.
На нашем сайте есть замечательные практические примеры мобильных сайтов и отзывчивого дизайна (http://www.targetinternet.com/mobilemarketing).
Отзывчивый дизайн на деле
Говоря об отзывчивом дизайне, многие люди имеют в виду ряд различных технологий для оптимизации мобильного взаимодействия. Именно потому, что один и тот же термин используют в различных смыслах, интернет пестрит дискуссиями по поводу достоинств и недостатков отзывчивого дизайна.
Однако, упоминая отзывчивый дизайн, большинство на самом деле говорит о нескольких технических приемах, которые используются одновременно, – это RESS или другие гибридные решения.
Трехэтапное руководство «на скорую руку» по веб-сайтам с отзывчивым дизайном
Я бы многое отдал, чтобы на заре моей карьеры в цифровом маркетинге кто-нибудь дал мне советы, которые я предлагаю ниже. Это избавило бы меня от многих проблем при создании сайтов с нуля, когда приходилось «подгонять под себя» CMS и пререкаться по поводу дорогостоящих усовершенствований функционала.