В настоящее время интернет-пользователей смартфонов и планшетов стало больше, чем тех, кто пользуется настольными ПК.
Это заставило многих опытных маркетологов выбрать отдельную мобильную платформу, где они могли бы продвигать свой бренд и использовать трафик, исходящий от портативных гаджетов. Однако эта практика требует дополнительных затрат, поскольку включает в себя разработку и поддержку мобильных веб-сайтов наряду с настольными.
К счастью, эти методы стали практически устаревшими благодаря адаптивному веб-дизайну, который появился с появлением HTML5 и CSS3. Адаптивный веб-дизайн избавляет от необходимости иметь отдельный мобильный веб-сайт, поскольку он дает веб-мастеру возможность представить веб-сайт, который может изменить свой размер или соответствовать размеру экрана любого устройства: настольного компьютера, ноутбука, планшета или телефона.
Что может быть менее очевидно для многих дизайнеров и разработчиков, так это то, что существует несколько способов, которыми ваш адаптивный дизайн может потерпеть неудачу. Если вы не хотите тратить свою тяжелую работу, заканчивая посредственным или ошибочным отзывчивым сайтом, я рекомендую вам знать, в частности, о следующих четырех подводных камнях.
Контрольные точки
Многие дизайнеры тратят свое время на настройку макета RWD, который в основном основан на «точках разрыва ширины устройства», в коротких размерах устройства. Имейте в виду, что если ваше мышление основано на измерении устройства, то вы не говорите об истинно адаптивном веб-макете. Адаптивные макеты — это те, которые можно настроить под любой размер экрана, на котором они находятся.
Учитывая, что в настоящее время компании выпускают устройства каждого размера экрана, который есть в книге, важно отказаться от этой практики и вместо этого создавать макеты, использующие «точки останова на основе дизайна», в которых вносятся корректировки в зависимости от дизайна.
содержание
Часто дизайнеры скрывают или отбрасывают контент веб-сайта, чтобы подогнать его под устройство меньшего размера или размер экрана. Это не лучшая практика. Мобильные пользователи ожидают и заслуживают того же, что и пользователи настольного контента. Если вы скрываете контент только для того, чтобы настроить размер экрана меньшего размера, вы лишите его этого опыта. Чтобы получить паритет контента, вам нужно изменить контент адаптивного сайта, чтобы его могли просматривать все.
Размер файла
Четность контента не означает наполнение вашего сайта ненужным или чрезмерным контентом до такой степени, что он замедляется. Если вы посмотрите вокруг, вы найдете много сайтов, которые имеют файлы такого размера, что они становятся вялыми. Важно помнить, что более 74% мобильных пользователей покидают веб-сайт, загрузка которого занимает более 5 секунд. Поэтому не стесняйтесь сокращать лишний контент, сохраняя при этом отличный пользовательский опыт.
Картинки
В обычных веб-дизайнах мы никогда не беспокоимся об использовании изображений любого размера или типа. Это привело к ситуациям, когда страницы масштабируются для соответствия размеру экрана устройства, а изображения — нет. То, что вы должны научиться делать, это включить управление изображениями в ваши rsponsive методы веб-дизайна. Мы должны использовать методы адаптивного управления изображениями, которые автоматически определяют размер экрана и масштабируют изображения, а также текстовые контейнеры соответственно.
Вывод
Некоторые из этих ловушек могут показаться противоречащими друг другу и сделать вашу задачу невозможной. И все же, если вы посмотрите внимательно, вы увидите, что есть способы добиться действительно адаптивного веб-дизайна и все же избежать вышеупомянутых ловушек.
Важный ключ — всегда помнить конечного пользователя. Уточните свой контент так, чтобы он действительно служил правильной цели — и вы поймете, что становится намного понятнее, какой контент всегда должен быть видимым или легкодоступным, а что можно спрятать, чтобы получить его одним щелчком или касанием. Подумайте о том, как ваши пользователи могут расставить приоритеты в своих потребностях в контенте, когда вы используете настольный компьютер, ноутбук, планшет или телефон, и спроектируйте свое веб-присутствие соответствующим образом.
Два других важных момента, о которых следует помнить, это то, что вы не должны настолько увлекаться созданием технологии, что в конечном итоге вы будете кодировать для устройства, а не кодировать для пользователя устройства, и проводить надлежащее пользовательское тестирование, чтобы установить, что на самом деле работает, а что нет для ваших пользователей.
Имея в виду эти предостережения, вы обнаружите, что можете проектировать и разрабатывать не только быстро, но ответственно и, в конечном счете, успешно.