Адаптивный дизайн ошибки

Были времена, когда веб-сайт на мобильном телефоне загружался со скоростью улитки, ползущей по склону горы Фудзи. К счастью, они давно прошли. Сегодня мы можем свободно выполнять различные действия в интернете с мобильника благодаря отличной скорости и покрытию связи.

Обратимся к мировой статистике:

На сегодняшний день, сайт, который одинаково корректно отображается и работает и на компьютере, и на смартфоне, и на планшете – не привилегия, а вполне обычное явление. Достигается это с помощью адаптивной верстки сайта.

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

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

№1. Сокращение контента

Если пользователь вынужден переходить на полную версию сайта, чтобы узнать интересующую информацию, зачем ему нужна мобильная? Часть сайта, которую сократили, из-за того, что она не «влазит» на дисплей смартфона, подобна отрезанной руке на фотографии, не поместившейся в объективе фотоаппарата. Версия на мобильном устройстве должна иметь тот же контент, и тот же функционал, что и полная. И никаких исключений.

Пользователь мобильного устройства должен знать, что информация, которую он получает, не отличается от предоставленной пользователю ПК.

№2. Огромный «вес» изображений

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

Как свидетельствуют результаты исследования, проведенного Strangeloop, ели сайт на мобильном гаджете будет загружаться дольше 3 секунд, его покинут 57% пользователей.

№3. Мелкие элементы

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

В адаптивной версии элементы навигации должны быть крупными!

№4. Игнорирование специфики пользования

Особенности адаптивного веб-сайта также зависят от того, когда и как именно люди пользуются тем или иным гаджетом. Важным здесь будет и размер устройства, и способ ввода текста, и качество мобильного Интернета, его скорость, а также другие параметры.

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

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

№5. Проектирование со смартфона на декстоп

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

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

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

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

Основные ошибки при разработке адаптивного дизайна

Адаптивные дизайн становится все популярнее, сегодня это уже не просто модная новая технология. Ниже собраны самые частые ошибки, допускаемые при разработке адаптивного сайта, своеобразный чек-лист.

Скрывать контент

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

Не оптимизировать под touch-устройства

Большинство мобильных устройств с touch-управлением, поэтому нужно обязательно оптимизировать элементы интерфейса под него. Популярные техники описаны в хабратопике Оптимизация сайта для планшетов.

Не оптимизировать типографику

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

Использовать слишком большие файлы

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

Использовать слишком большие изображения

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

Упрощать дизайн

При разработке адаптивно сайта очень заманчиво делать примитивный дизайн, который просто «сложится» на экране смартфона. Нужно делать дизайн, который будет максимально удобен на любом устройстве.

Использовать тяжелые фреймворки, когда это не нужно

Разрабатывать сайт на адаптивном CSS-фреймворке, со всеми надстройками и плагинами, зачастую избыточно. Иногда достаточно простой легкой сетки. Или можно вообще разрабатывать с нуля.

Не думать о контенте

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

Не думать о больших экранах

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

Отключать зум

На многих адаптивных сайтах разработчики отключают возможность ресайза сайта на тач-устройствах, прописывая это в мета-теге viewport, и это может сильно раздражать пользователей. (На всякий случай дам ссылку на документацию Apple по использованию Viewport)

Забывать о Home Screen иконке

Это аналог favicon для iOS устройств, добавляется простым кодом:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

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

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

Масштабирование, “жидкий” макет, адаптивный макет

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

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

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

“Жидкие” макеты отличаются, потому что они масштабируют элементы по отношению к размеру окна просмотра. Это достигается с помощью относительных единиц, таких как em, чтобы преодолеть проблему сокращения текста. Дизайн может быть нарушен масштабированием пользователя.

Выше показан пример “жидкого” макета в различных разрешениях: дизайн жертвует согласованностью для удобства чтения.

Адаптивные макеты ничего не масштабируют. Вместо этого, они изменяют то, что отображается в зависимости от размера окна просмотра.

Выше показан пример адаптивного макета на разных разрешениях.

Катастрофа № 1: размещение меню

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

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

Второй способ заключается в изменении точки останова на нижнее значение. Фактическое число это ширина, при которой ваш navbar имеет недостаток, не конкретный размер устройства.

Третий способ – использование другого меню для устройств, таких как sliding drawer.

Катастрофа № 2: использование изображений фиксированной ширины

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

Выше показан пример плохой фиксированной ширины изображения, которое слишком велико: оно имеет полосу прокрутки и контент выдвинули за экран.

Вы можете избежать этой проблемы, используя относительные единицы для установки ширины изображения, или если вы используете фреймворк, который его поддерживает (например, Bootstrap), вы можете использовать class responsive image (например, class=”img-responsive”).

Выше: тот же элемент с подходом responsive image class, теперь полосы прокрутки нет.

Катастрофа № 3: искажение элемента

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

Выше: столбец становится строкой, искажая содержание.

Решение очевидно, но удивительно, как много людей с этим борются: просто задайте высоту, ширину и отступы элемента явно. Если он выходит из положения и охватывает другие элементы, вы можете заставить его быть там, где вы хотите, переведя его в div и установив поля.

Планирование помогает избежать ошибок

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

Высоких конверсий!

11-03-2016

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

 Пренебрежение аналитикой поведения посетителей

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

 Проектирование магазина для настольных компьютеров

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

Тестирование адаптивного дизайна

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

Недостатки адаптивного дизайна легко выявляются предварительным тестированием интернет-магазина, но многие продавцы не имеют на это ресурсов. Для снижения рисков потери денег, протестируйте ключевые маршруты пользователей по сайту в основных браузерах  — Chrome, IE, Firefox, Safari и операционных системах — Windows, Mac OS, Android, IOS на популярных мобильных устройствах. Проводите тестирование каждый раз, когда вносите изменения, сервисы типа BrowserStack или Viewport Resizer, помогут сократить время тестирования до нескольких часов.

Мелкие элементы для мобильных экранов

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

Медленная скорость загрузки страниц

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

Разносите контент по разным вкладкам, например страница товара может содержать только базовое изображение, описание, цену и кнопку «Купить». Отзывы покупателей и видеоролики можно вынести на отдельную вкладку и уменьшить «вес» основной части страницы. Кроме контента оптимизируйте и другие элементы влияющих на скорость загрузки – CSS-файлы, изображения и скрипты, отправляйте только необходимые данные. В этом вам помогут инструменты, которые уменьшают размер ресурсных файлов и время их загрузки: Uglify или JSCompress.

Урезание контента для мобильных пользователей

Нередко при разработке мобильного интернет-магазина, разработчики прячут часть контента, чтобы на мобильных устройствах загрузка шла быстрее. Однако часто размер страницы на самом деле не уменьшается, а контент просто не отображается для пользователя. Ваш магазин должен быть способен динамически генерировать страницу, уменьшая ее «вес» и сокращая время загрузки для мобильных посетителей. Кроме того, давать мобильным пользователям меньше контента – плохо, это негативно влияет на потребительский опыт. Как правило, в процессе покупки они используют разные устройства, так делает около 90% покупателей в Интернете. Ограничивать их методами адаптивного дизайна – большая ошибка.

Поддержка изображений только в одном разрешении

Хороший сайт с адаптивным дизайном автоматически меняет разрешение картинок в зависимости от типа устройства, тяжелые изображения увеличивают время загрузки. Существует несколько способов автоматической подстройки размеров изображения под конкретное устройство. «Гибкие» изображения (fluid images) – метод на базе CSS, который позволяет сжимать и растягивать картинку в зависимости от ширины содержащего ее элемента,  или  элемент HTML5 <picture>, позволяющий подгружать картинку нужного размера для каждого тип устройств.

«Неадаптивные» электронные письма

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

Адаптивному дизайну довольно трудно научиться, но ему научиться надо. Прошли времена Web 2.0, медленных модемов и ограниченного экранного пространства. Теперь мы создания экранов, всегда старающиеся купить, построить и обучиться всему и везде.

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

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

Трудно читаемый эскиз

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

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

1. Что важно?

Если вы проектируете блог, который получает (или получит) огромные объемы трафика, — заголовки и эскизы должны быть четкими и легко читаемыми. Не слишком большими и не слишком маленькими, в противном случае пользователям придется либо бесконечно прокручивать, либо использовать увеличительное стекло.

Точно так же, если вы проектируете для сайта электронной коммерции, убедитесь, что продукт, и в большинстве случаев цены, легко воспринимаются. Если что-то из двух занимает слишком большое пространство — вы создадите трение, которое повлияет на продажи. Никто не хочет найти что — то, что они искали, (и на что планировали потратить деньги) только что бы понять, что цену на этот товар невозможно найти, или что кнопка «добавить в корзину» пропала в медиа запросе.

«Тестирование и отзеркаливание это абсолютная необходимость в процессе адаптивного дизайна»

2. Кнопки и призыв к действиям (СТА)

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

Если что-то работает не так, не бойтесь немного отойти от плана. В конце концов главное достичь всех целей, а не убедиться в том, что всё скомпоновано.

Решения:

Тестирование и отзеркаливание это абсолютная необходимость в процессе адаптивного дизайна. Никогда не думайте, что только потому, что что — то выглядит хорошо в Photoshop, Illustrator или Sketch, оно будет так же выглядеть на конечном устройстве. Не привязывайтесь к своему дизайну, пока вы его не протестировали.

«Не привязывайтесь к своему дизайну, пока вы его не протестировали.»

Страница слишком долго загружается

Тяжелые изображения и видео замедляют веб сайты

Это становится проблемой, на мобильных устройствах. Если ваши дизайны не перегружены видео и изображениями, то вашему пользователю потребуется больше времени для его просмотра.

Запомните: пользователям нужна уверенность при браузинге с мобильного устройства. Если сайт работает медленно, то пользователи будут переходить с одного сайта, на другой, а поисковики будут индексировать его в последнюю очередь.

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

Решения:

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

Zendesk хорошо с этим справился. Домашняя страница их десктопного веб-сайта содержит вовлекающую анимацию. В мобильной версии ее нет, но это не умаляет основной ценности страницы.

Спросите себя:

• Каковы предназначение и цель сайта?
• Будут ли дополнительные изображения действительно необходимы?

Дизайн убивает функциональность

Адаптивный дизайн может привести к потере функциональности. Клиенты и пользователи не простят вам этого, по крайней мере, какое-то время.

Ничего так не бесит пользователя, как:

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

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

Решение:

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

Помните: пока вы не изложили ваши идее на бумаге перед кем-либо — они остаются вашими идеями. Люди не умеют читать мысли.

Вы не понимаете наших пользователей

Не рассчитывайте на то, что разработчики подберут какой-либо стандартный адаптивный дизайн, и создадут отличное решение. Это просто не справедливо.

Вот почему, как дизайнерам, надо понимать кто, где и когда использует наши проекты.

Вот где пригодится persona marketing. Если у вас под рукой нет маркетолога или отдела маркетинга, создание краткого описания персоны поможет дать ответы на некоторые животрепещущие вопросы вашего дизайна.

«Как дизайнерам, надо понимать кто, где и когда использует наши проекты»

Информация, которую надо учесть при создании персоны:

• Имя: всегда давайте им имена (например, «Дизайнер Дэн») -это очеловечивает процесс.
• Изображение: лица делают процесс более личным и легким
• Профессия: чем он зарабатывает себе на жизнь? Разные профессии предпочитают разные устройства.
• Расположение: если основная часть пользователей расположены в Бразилии, то они скорее всего будут использовать другие устройства, чем люди в Японии.
• Привычки браузинга: как и где они просматривают веб? На диване с планшетом, или за столом на ПК?
• Цели: каковы их цели и как бы они пытались их достичь?
• Вызовы: какие вызовы бросает им жизнь, и как они пытаются их решить?

Решение:

Используйте persona marketing, чтобы узнать побольше о ваших конечных пользователях. Чем больше вы знаете, тем легче будет решить, какие вариации адаптивного дизайна вы должны приоритезировать.

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

«Дотошно продуманный процесс ведет к великим адаптивным решениям»

С persona marketing, вы можете углубляться так далеко, как вам хочется.

Выводы

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

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