Как сделать мобильную версию проекта на Readymag
По данным компании Statista, в 2018 году больше половины всех загрузок интернет-страниц производилось с мобильных устройств. Поэтому работой над версией для телефона лучше не пренебрегать. Мы подготовили для вас подробные инструкции по созданию мобильных проектов.
Mobile Auto-Layout — что это и зачем
Кроме стандартного способа просмотра страницы (вьюпорта), рассчитанного на монитор компьютера, Readymag дает возможность отдельно настроить мобильный и планшетный вьюпорты. Если не активировать мобильный вьюпорт, при просмотре с мобильного устройства пользователь увидит ту же верстку, что в десктопной версии (и в горизонтальной, и в вертикальной ориентации экрана).
Как переключиться между вьюпортами в редакторе Readymag
При включении мобильного вьюпорта Readymag создаст Mobile Auto-Layout — черновик мобильной версии. Все виджеты в нем расставлены в одну колонку с интервалами в 20 пикселей. Виджеты шириной больше 280 пикселей будут уменьшены до 280 и расположены так, чтобы зазор между виджетом и краями экрана составлял по 20 пикселей слева и справа.
Виджеты шириной 280 пикселей или меньше не изменятся в размере и будут выровнены по левому краю, на расстоянии в 20 пикселей от края.
Пример работы Mobile Auto-Layout
Важно понимать, что основная функция Mobile Auto-Layout — выполнить подготовительную, механическую часть работы, а не заменить дизайнера. О том, как подойти к дизайну мобильной версии с содержательной точки зрения, читайте в следующем разделе.
Как работает композиция в мобильной версии
«В дизайне очень важны контраст и ритм, но на мобильных экранах не так много места. Поэтому в мобильных версиях контраст стоит дополнительно усилить, — говорит дизайнер Readymag Стас Аки. — Порой приходится сильно переделать проект, чтобы он заработал с композиционной точки зрения».
«Например, в нашем проекте про Чарльза и Рэй Имз заголовки в десктопной версии набраны крупным шрифтом. В мобильной версии я оставил их крупными, но повернул. В результате заголовки перестали помещаться на экран, стало интереснее: когда видишь только часть надписи, хочется пролистать ниже, чтобы прочитать всю». Тот же прием использован в лонгридах Стаса iPencil и Shrtcts.
«Хорошо также обыгрывать шаблонные приемы. Например, в мобильной версии текст и изображения очень часто ставятся в одну колонку — никто не мешает вам осознанно использовать несколько. Вот верстка выпуска Readymag Stories, посвященного Антону Юхновцу».
О чем важно помнить
Синхронизация между версиями
Большинство настроек виджетов одновременно действуют и для десктопной, и для мобильной версий. Поэтому, когда вы вносите правки в одну из версий, стоит проверить, что изменилось в другой.
При этом некоторые настройки можно задать независимо: расположение, размер, прозрачность виджета, настройки анимации, кадрирование изображения, шрифт, размер и межстрочный интервал.
Если вам нужно что-то содержательно изменить специально для мобильной версии (например, задать другой перенос слов или поменять направление текста), мы советуем скопировать виджет, скрыть (не удалить!) исходный и работать с копией. В десктопной версии эта копия автоматически будет скрыта.
Так выглядит мобильная версия Stories в редакторе Readymag
Если что-то пошло не так, вы можете всегда восстановить исходный Mobile Auto-Layout в той же панели, где его включали (нужно нажать restore).
Анимация
В мобильной версии поддерживаются два типа анимации: On Click и On Load. При активации мобильного вьюпорта все виджеты в нем будут статичными, анимация автоматически не переносится. Если вы хотите перенести настройки анимации из десктопной версии без изменений, можно в одно нажатие скопировать их из десктопа и вставить в мобильную версию — для этого используйте Shift+Cmd+C/V в меню настроек анимации этого виджета.
Быстродействие
Мы советуем вам не пользоваться сложной анимацией в мобильных проектах. Во-первых, и мобильный интернет, и процессоры смартфонов медленнее, чем у стационарных компьютеров. Во-вторых, люди читают мобильные проекты в других условиях, чем десктопные: часто на ходу, лихорадочно скролля вниз. «Мне вообще кажется, что любая анимация On Load в мобильной версии сбивает пользователя с ритма чтения и раздражает», — добавляет Стас.
Слишком тяжелые картинки тоже лучше не использовать, чтобы не замедлять проект. «Мы советуем вам оптимизировать изображения с помощью TinyPNG. Это бесплатный сервис, уменьшающий изображения в размере без потери качества », — говорит Яна Юхалова, менеджер технической поддержки Readymag.
Тестирование мобильной версии
Чтобы проверить, как ваши проекты выглядят на разных экранах, откройте консоль в Google Chrome (Ctrl+Shift+J в Windows / Linux or Cmd+Opt+J в Mac) и выберите вкладку с изображением телефона или планшета. Там можно будет посмотреть несколько вариантов. Еще мы рекомендуем BrowserStack (у него есть бесплатный trial). Но, конечно, лучше всего иметь хотя бы небольшой парк устройств и проверять, как проект выглядит на них, напрямую.
Не стесняйтесь задавать нам вопросы о мобильной верстке по почте ([email protected]).