Оглавление
- Что-то нужно спрятать;
- Принципы не работают;
- Скорость загрузки;
- Поговорим о резинках;
- Тестирование на эмуляторах.
Что-то нужно спрятать
Десктопный вариант сайта создается под большую поверхность настольных мониторов. На таких площадях можно отобразить больше элементов навигации или интерактивных деталей, чем на смартфоне.
Скрывать или удалять некоторые компоненты постоянного контента можно и, очень часто, необходимо. Пример, без которого не обойтись при разговоре об адаптации сайтов под мобильные устройства — «бургер-меню». Это норма — в версии для смартфонов скрывать оригинальный вариант главного меню ресурса, а переделывать его, часто целиком, преобразовывая его композицию.
Другой очень сильный пример мобильной адаптации и сокрытия контента — табличные данные. Реконструкция данных в таблицах — занятие очень утомительное. Почти никогда не удается показать их на планшете так же, как на настольном мониторе. Чаще всего, для мобильника отображение табличных данных полностью перекраивается. Потому таблицы, специально созданные для больших экранов скрываются, а для мобильных — отображаются.
Чаще всего издатель ставит такие условия, чтобы в мобильной версии таблицы отображались без прокручивания, поэтому после адаптации она уже совершенно не похожа на таблицу, а, скорее, на список со столбцами. Окончательный вид зависит от потребностей в отображении контента.
На нашем примере таблица в мобильной версии не перестала быть таблицей, однако данные в ней существенно «похудели» и стали отображаться по-другому. Таблица стала значительно меньше в ширину. Однако никаких догм по поводу того, какие данные оставлять, а какие удалять в мобильной версии, не существует. В каждом конкретном случае веб-мастер поступает согласно требованиям издателя к контенту. Нечасто бывает, что контент исчезает бесследно. Как правило он преобразовывается и начинает выглядеть до неузнаваемости по-другому. Чаще всего дизайнеры удаляют насовсем некоторые страницы со очень сложными интерфейсами, с которыми получается взаимодействовать только на настольном компьютере. Например интерактивный сервис построения собственных географических карт разных мест Земного шара. Она не войдет в границы маленького экрана смартфона и с ней будет невозможно работать.
Принципы не работают
Известный всем веб-дизайнерам, верстальщикам и разработчикам тезис mobile-first — это лишь красивый слоган в дополнение к сложному процессу верстки адаптивного интерфейса. В одном случае он выигрышен, а в другом сильно мешает работе из-за проблемной реализации.
Как правило, клиент на начальном этапе не представляет себе вид какого-нибудь сложного сервиса. Например, конфигуратор самостоятельного выбора мест в салоне самолета при приобретении авиабилетов. Страницы с изображённым в разрезе салоном воздушного судна и интерактивными изображениями сидений с отметкой «Занято» или «Свободно» хорошо выглядит только на большом мониторе. Этот сервис должен быть удобен для применения на настольных компьютерах — это основная часть клиентов. Стало быть, «Мобильный сначала» не будет играть в этом случае первостепенной роли.
Важны, также, предпочтения заказчиков. Если им важно сдать в работу сначала настольную версию, а потом сайт для мобильных платформ, то наш принцип «Мобильный сначала» опять не сработает.
Скорость загрузки
Учитывать скорость, с которой загружаются сайты, кончено, важно. Поисковики понижают в выдаче те страницы, которые загружаются медленнее. Те ресурсы ценятся выше, которые подстраиваются под мобильные аппараты и имеют маленькое время загрузки. Достичь хороших скоростей отклика можно, снижая вес картинок, добавляя дополнительные версии пользовательских интерфейсов для мобильной техники.
Но быстрота отображения сайта не всегда имеет первостепенное значение. Например, создавая интерфейс закрытой части сайта, доступ в которую имеют пользователи после приобретения подписки, необходимо понимать, что она не будет проиндексирована поисковиками. Пребывание посетителей в этой части сайта решает его специфические задачи, ради которых он готов подождать загрузки страницы несколько лишних секунд.
Поговорим о резинках
Преимущество «резиновых» макетов в том, что они автоматически подстраиваются под любой тип устройств и хорошо на них смотрятся в горизонтальном и вертикальном положениях экрана. Они не боятся внезапного появления на рынке каких-то нестандартных разрешений, потому что рассчитаны на любое разрешение.
Недостаток «резинок» в сложности производства. Необходимо учесть очень много факторов и условий, контролировать поведение каждого компонента веб-страницы на любых разрешениях экрана сразу.
«Резиновая» страница подстраивается под окно браузера. Пользователь меняет размер экрана — компоненты сайта «ползут» вслед за его полями. При необходимости, уменьшать ширину такой страницы можно почти до нуля. Отличие «резинки» от адаптивной страницы в том, что элементы последней перестраиваются по-новому только в указанных в медиа-запросах точках экрана. В промежутках между этими точками никаких действий на странице не происходит.
«Резинка» тоже ориентируется на такие точки, но они нужны ей для другого — чтобы изменить раскладку интерфейса когда дальнейшее сжатие элементов невозможно.
Тестирование на эмуляторах
Не стоит ограничиваться одним только инструментом, который предоставляет браузер Google Chrome для разработчиков веб-сайтов. Мы о нем подробно писали в материале «5 ступеней к овладению целевой аудиторией». В ходе тестирования будут полезны все доступные виды мобильных устройств. Чем больше аппаратов будет задействовано в тестировании, тем ниже будет риск неправильного отображения страниц. Используйте сервисы, автоматически эмулирующие изменение размеров монитора в случайном порядке.
На старые модели мобильников нужно обращать внимание только в специальных случаях, когда, к примеру, сайт или один из его разделов будет использоваться преимущественно пенсионерами.
Адаптация сайта под большое количество моделей гаджетов, индивидуальная верстка под экзотические расширения экранов — это сверхнормативные финансовые потери для заказчика. Поэтому в общих случаях клиенты соглашаются на компромиссное решение и задействуют приближенную ко всем мобильным устройствам версию сайта.
Желаем вам успехов.
