LITMIR.BIZ

Скачать книгу

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

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

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

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

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

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

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

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

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

Ссылки и кнопки

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

Размеры и графика сайта

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

Сокращенная иерархия

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

Интеграция с телефоном

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

      Технологии и их язык

      Говоря про разработку

Скачать книгу