Проект на Readymag за месяц: советы от AIC

В августе 2019 года команда AIC запустила проект «Здесь и сейчас. Атлас творческих студий Москвы». Дизайнер Александр Московский поделился планом работы с проектом на Readymag, который позволит оптимизировать работу и избежать проблем.

«Здесь и сейчас» — фестиваль современного искусства, который ежегодно проходит в московском «Манеже». Задача сайта — привлечь посетителей и рассказать им о выставке.

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

От идеи верстать сайт с нуля отказались сразу — не хватило бы времени.

Решили воспользоваться конструктором сайтов, чтобы ускорить работу. Мы рассматривали четыре инструмента: Webflow, Tilda, Сargo Collective и Readymag.

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

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

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

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

• Служба поддержки — быстро помогала решить возникающие проблемы, подсказывала, что нужно прочесть, а также показывала примеры сайтов с похожим решением.
• Статьи на Medium с разборами, как делать проекты.
  
• Удобный Help.
  

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

Если вы делаете одностраничный сайт — отлично, Readymag по умолчанию настроен под вас. Если (как в нашем случае) одной страницей не обойтись — в конце статьи мы написали подробный разбор, как правильно сделать многостраничный сайт на Readymag.

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

Мы использовали встроенную форму сбора e-mail, подключенную к Mailchimp, — введенная почта автоматически отправляется в таблицу в подключенном аккаунте.

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

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

Второй вариант — страница пропорционально уменьшается, подстраиваясь под ширину экрана (для этого нужно включить функцию Scale Layout).

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

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

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

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

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

В Readymag можно управлять версиями для Desktop, Tablet и Mobile. Чтобы упростить работу, лучше использовать на всех версиях один и тот же элемент, модифицируя его. Если где-то придется обновить контент, он автоматически обновится везде. Чтобы сэкономить время, на Tablet можно включить отображение Desktop (но нельзя Mobile).

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

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

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

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

В настройках проекта заходим в раздел Settings > Viewer > Horizontal и отключаем Navigation arrows. Теперь ваш проект состоит из отдельных страниц, каждая — со своими названиями и ссылками.

Структура сайта будет выглядеть так:

• sitename.com
• sitename.com/page1name
  
• sitename.com/page2name1
  

• Один проект, один домен — значит, настраивать домен тоже нужно только один раз.
• Легко переходить между страницами.
  
• Можно сделать общий header или footer, задав нужным элементам параметр Show on All Pages. Если дополнительно включить Above Pages, элементы зафиксируются и будут сохраняться при переходе по страницам. Если на какой-то странице эти элементы не нужны, можно спрятать их в панели слоев.
  

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

• В Readymag весь проект грузится одновременно. Если тяжелого контента будет много, сайт будет загружаться долго.

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

Нужно придумать систему поддоменов, по которой будет строиться сайт, и подключить каждый домен вручную. Структура сайта будет выглядеть так:

• sitename.com
• page1name.sitename.com
  
• page2name.sitename.com
  

Внутри каждой страницы мы можем ориентироваться между частями (pages):

• page1name.sitename.com/1
• page1name.sitename.com/2
  
• page1name.sitename.com/3
  

Этот способ мы использовали для «Здесь и сейчас» — сайт состоит из 27 отдельных страниц (главная и 12 страниц павильонов на двух языках + афиша на русском).

• Каждая страница может быть большой и сложной.

• Грузится только нужная страница — это сделает загрузку сайта быстрее.
  

• Для каждой страницы придется вручную настроить все параметры и привязать домен.

• Также нужно будет создать все поддомены.