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

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

В закладки
Аудио

О проекте

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

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

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

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

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

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

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

Особенности работы на Readymag

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

Во время работы над проектом вам точно поможет:

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

Для начала купите шрифт

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

Определите структуру проекта

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

Разберитесь с интеграциями

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

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

Продумайте лэйаут

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

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

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

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

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

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

Разберитесь с контентом

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

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

Не забудьте про адаптив

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

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

Подключите домен

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

Подготовьте проект к публикации

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

Как сделать многостраничный сайт на Readymag

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

1. Горизонтальное перелистывание - для небольших проектов

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

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

Плюсы:

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

Минусы:

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

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

2. Отдельные проекты — для сайта, в котором много сложных страниц

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

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

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

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

Плюсы:

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

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

Минусы:

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Александр Московский", "author_type": "self", "tags": [], "comments": 12, "likes": 36, "favorites": 105, "is_advertisement": false, "subsite_label": "design", "id": 105455, "is_wide": true, "is_ugc": true, "date": "Thu, 06 Feb 2020 11:01:51 +0300", "is_special": false }
0
12 комментариев
Популярные
По порядку
Написать комментарий...
5

Пока самый крутой сайт на RM, что я видел.

Ответить
4

Мне сайт кажется неудобным и тяжелым. Особенно тяжело зашла стена текста о проекте, на моём мониторе это просто не читаемо

Ответить
2

Межстрочное расстояние еще небольшое, глаза теряются)

Но визуально, конечно, все очень красиво. А пользоваться неудобно

Ответить
3

Вы про интерлиньяж слышали что-нибудь? Невозможно же читать блоки текста - все послипалось нах.

Ответить
0

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

Ответить
1

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

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

Ответить
0

Крутая работа, не подумал бы что на конструкторе такое можно.

Ответить
0

как делали перевод на английский?

Ответить
0

Дублировали страницы и заменяли тексты

Ответить
0

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

Ответить
0

круто! сколько времени ушло?

Ответить

Прямой эфир