Собираем портфолио на Readymag. Шаг пятый — мобильная версия и публикация

Снова начнем с примеров.

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

• От каких элементов верстки дизайнеры отказались в мобильной версии? 
• Что добавили? 
• Изменился ли способ навигации, меню, анимация?

Теперь начнем работу над мобильной версией вашего портфолио. 

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

После этого вы увидите автоматически созданную мобильную версию (Mobile Auto-Layout).

В автоматически созданной мобильной версии виджеты десктопной версии будут расставлены сверху вниз в одну колонку с зазором в 20 пикселей. Виджеты шириной больше 280 пикселей будут уменьшены до этого размера.

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

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

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

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

Еще одна важная вещь, связанная с мобильной версткой, — быстродействие. Люди часто пользуются мобильными телефонами в условиях медленного интернета, поэтому для мобильной версии мы советуем сжимать большие картинки с помощью TinyPNG, не использовать перегруженные анимации и обязательно тестировать проекты, например, с помощью консоли Google Chrome (Ctrl+Shift+J на Windows / Linux или Cmd+Opt+J на Mac).

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

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

Когда ваше портфолио готово, давайте опубликуем его. Зайдите в настройки проекта.

Нажмите на шестеренку рядом с названием.

Впишите название проекта и его описание — эти поля влияют на индексацию поисковиками и отображение ссылки на проект в соцсетях.

Во вкладке Privacy вы можете закрыть проект паролем — это может быть полезно, например, для тестирования портфолио или если вы собираете портфолио под конкретного работодателя.

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

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

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

Наконец, последняя вкладка — настройки отображения проекта.

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

Перейдите во вкладку Sharing: там вы сможете изменить текст и загрузить свое изображение.

Когда ваш проект будет  готов к публикации, нажимайте Publish. Ваше портфолио опубликовано!

Мы надеемся, вам понравилось работать в Readymag. С любыми вопросами пишите нам на support@readymag.com.

Все части серии:

1. Шаг первый — знакомство с шаблонами
2. Шаг второй — сетка, текст, изображения и фон
3. Шаг третий — геометрические формы и меню
4. Шаг четвертый — фиксированные виджеты, текстовые стили, анимация
5. Вы здесь → Шаг пятый — мобильная версия и публикация