Чтение онлайн

на главную - закладки

Жанры

Мобильный маркетинг. Мобильные технологии – революция в маркетинге, коммуникациях и рекламе
Шрифт:

Использовать CMS для управления мобильными сайтами можно по-разному:

– Сайт для десктопа и статичный мобильный сайт на CMS. Это оптимизированный мобильный сайт, для редактирования которого нужен программист или ваши собственные знания по работе с кодом.

– Сайт для десктопа на CMS и отдельная CMS для мобильного сайта. В этом случае придется завести две отдельные CMS, чтобы обновлять разные версии ваших сайтов. Это усложняет движение контента между двумя сайтами, однако само решение простое и ясное.

– Единая CMS

для разных версий сайта.
Позволяет управлять контентом разных сайтов при помощи одной CMS, даже если есть отдельный сайт, оптимизированный под мобильные устройства. Это решение позволяет редактировать контент и «предназначать» для конкретной версии сайта – сложность в том, что CMS должна быть специально разработанной.

Отзывчивый дизайн

Отзывчивый дизайн, который иногда называют адаптивным (хотя это разные вещи, о чем мы поговорим позже), – разработка такого сайта, который хорошо отображается на любом мобильном устройстве. Этот сайт везде будет выглядеть по-разному- и при этом наилучшим образом отвечать конкретным условиям.

Такой подход реализуется путем комбинирования таких интернет-технологий, как каскадные таблицы стилей (CSS) [10] и JavaScript. На основе данных технологий браузер оценивает такие параметры, как устройство, на котором работает посетитель сайта, или ширина и высота дисплея, и в зависимости от этого выбирает отображение страницы. На рисунке 8.1 показан сайт Target Internet. Посмотрите, как можно эффективно использовать отзывчивый дизайн. Слева у нас полная версия, справа – тот же сайт с сокращенным окном браузера. Видите – здесь не просто сузили размеры, но и адаптировали под них функционал.

10

CSS (англ. Cascading Style Sheets – каскадные таблицы стилей) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Отзывчивый и адаптивный дизайн

Термины «отзывчивый дизайн» и «адаптивный дизайн» часто считают взаимозаменяемыми, хотя это разные вещи.

Отзывчивый дизайн предназначен для настройки в самом браузере, то есть страница отправляется в браузер, а он уже выполняет работу по отображению ее корректных элементов. Это называется «клиентская технология», где клиентом выступает браузер.

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

Преимущество адаптивного дизайна в том, что в этом случае в браузер отправляется гораздо меньше контента, а на мобильном устройстве отображается только мобильная версия сайта.

Гибридный подход

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

мобильному сайту, однако позволяет сократить время на управление сайтами.

Рисунок 8.1. Эффективные сайты с отзывчивым дизайном

Источник: http://www.targetinternet.com

Есть также другие технологии, которые можно комбинировать с отзывчивым дизайном, чтобы избавиться от его ограничений и создать оптимизированный мобильный интерфейс. Часто этот вариант называют «отзывчивый веб-дизайн плюс серверные компоненты», или коротко – RESS.

Палочка-выручалочка для мобильных сайтов

Отзывчивый дизайн похож на этакую волшебную палочку, по мановению которой можно решить любые проблемы с мобильными сайтами. Конечно, вы получаете единый сайт, который будет подстраиваться под девайс посетителя. Однако надо учесть следующее.

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

Другая проблема связана со скоростью загрузки. Если отзывчивый дизайн реализован плохо, дело может кончиться тем, что на мобильное устройство загрузится полная настольная версия сайта, просто при этом отобразятся не все элементы. Поэтому, как правило, лучше сразу оценить полезность отзывчивого дизайна, чем потом лихорадочно подгонять то, что плохо прилажено, – «раздутые сайты», которые грузятся очень медленно, не нравятся никому.

В общем, отзывчивый дизайн – не палочка-выручалочка, а просто один из методов, который стоит сочетать с другими.

Принципы мобильного дизайна. Мобильные и десктопные версии

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

Приоритизация контента

Одна из главных проблем, связанных с мобильными устройствами, – размер их экранов и то, что они в принципе меньше экранов ПК или ноутбуков. Это значит, что место на странице в большой цене, поэтому нужно по максимуму упростить просмотр и усвоение контента.

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

Горизонтальная или вертикальная раскладка

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

Поделиться:
Популярные книги

Прометей: каменный век II

Рави Ивар
2. Прометей
Фантастика:
альтернативная история
7.40
рейтинг книги
Прометей: каменный век II

Имперец. Земли Итреи

Игнатов Михаил Павлович
11. Путь
Фантастика:
героическая фантастика
боевая фантастика
5.25
рейтинг книги
Имперец. Земли Итреи

Иной. Том 1. Школа на краю пустыни

Amazerak
1. Иной в голове
Фантастика:
боевая фантастика
рпг
аниме
5.75
рейтинг книги
Иной. Том 1. Школа на краю пустыни

Невеста инопланетянина

Дроздов Анатолий Федорович
2. Зубных дел мастер
Фантастика:
космическая фантастика
попаданцы
альтернативная история
5.25
рейтинг книги
Невеста инопланетянина

Вперед в прошлое!

Ратманов Денис
1. Вперед в прошлое
Фантастика:
попаданцы
5.00
рейтинг книги
Вперед в прошлое!

Измена. Он все еще любит!

Скай Рин
Любовные романы:
современные любовные романы
6.00
рейтинг книги
Измена. Он все еще любит!

Чайлдфри

Тоцка Тала
Любовные романы:
современные любовные романы
6.51
рейтинг книги
Чайлдфри

Диво

Загребельный Павел Архипович
5. Українська класика
Приключения:
исторические приключения
8.58
рейтинг книги
Диво

Курсант: назад в СССР 2

Дамиров Рафаэль
2. Курсант
Фантастика:
попаданцы
альтернативная история
6.33
рейтинг книги
Курсант: назад в СССР 2

Возвышение Меркурия. Книга 4

Кронос Александр
4. Меркурий
Фантастика:
героическая фантастика
боевая фантастика
попаданцы
5.00
рейтинг книги
Возвышение Меркурия. Книга 4

Призыватель нулевого ранга. Том 3

Дубов Дмитрий
3. Эпоха Гардара
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Призыватель нулевого ранга. Том 3

Возвышение Меркурия. Книга 7

Кронос Александр
7. Меркурий
Фантастика:
героическая фантастика
попаданцы
аниме
5.00
рейтинг книги
Возвышение Меркурия. Книга 7

Зайти и выйти

Суконкин Алексей
Проза:
военная проза
5.00
рейтинг книги
Зайти и выйти

Черный Маг Императора 6

Герда Александр
6. Черный маг императора
Фантастика:
юмористическое фэнтези
попаданцы
аниме
7.00
рейтинг книги
Черный Маг Императора 6