Автор: Readymag Team

Awdee и команда 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. С любыми вопросами пишите нам на [email protected].

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

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

Подписывайтесь на «Дизайнерский дайджест». Это еженедельная рассылка главного редактора с лучшими ссылками для графических дизайнеров.