Пт, 5/04/19 – 9:26 | 2 комментария

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

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Свой сайт

Пять ошибок при создании адаптивного сайта — как их избежать?

15 декабря 2012 Нет комментариев

Создание адаптивного сайта достаточно сложный процесс и нужно преодолеть немало преград,  избегая возможных ошибок, прежде чем ваш проект будет соответствовать основным принципам этой технологии. Брэд Фрост (специалист по мобильным стратегиям из медийного агенства R/GA)  показывает как обойти наиболее неприятные из них:

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

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

Вот основные ошибки, которых нужно избегать при создании адаптивного сайта:

1. Скрытый контент

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

Мобильный пользователь должен осознавать — на этом сайте он получает все то же самое, что доступно для ПК

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

2. Большой вес страниц — проблемы доступности

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

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

Значит пользователи мобильного интернета все еще несут бремя медленной загрузки страниц подобных сайтов.

ошибки при создании сайта: скорсть загрузки и показатель отказов

Обычная страница адаптивного сайта Барака Обамы весит более 4 MB. Это недопустимо никакими стандартами, и особенно скажется на производительности для пользователей EDGE, 3G или при плохом WiFi соединении.

Для сайта имеющего целью обращение к остальному населению (с применением разных устройств – в зависимости от мобильной гонки, мобильной религии…) это вызовет серьезные проблемы доступности.

ошибки при создании сайта: доступность для мобильных

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

3. Игнорирование контекста устройств

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

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

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

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

4. Однообразный подход «на все случаи жизни»

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

Функциональность адаптивного сайта должна соответствовать возможностям устройств пользователей

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

5. Не стоит полагаться на разрешения экранов

320px…  480px…  768px…  1024px…  Неужели!.. Неужели тут все по-прежнему…
Дело в том, что мы не можем регулировать и управлять ни размерами браузеров наших посетителей, ни разрешениями экранов, которые производители решают установить на свои модели. Поверьте, они пробуют любое подходящее из существующих.

Примите участие в мобильной эволюции

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

Оставить комментарий