Адаптивная обложка для группы ВКонтакте

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

1. Для чего нужно адаптировать обложки, и нужно ли это делать? Ответ на этот вопрос Вы найдете на странице со статистикой Вашей группы. А именно на вкладке «Охват» и подпункт «Охват устройств». Вероятнее всего, соотношение охватываемых устройств будет в пользу мобильных. Это значит, что огромное число людей заходит в Вашу группу именно с мобильных устройств. Тут-то и кроется самая большая проблема. Сидя ВКонтакте через официальное приложение ВК для мобильных устройств в целях оптимизации и быстродействия, обложки в группах подгружаются не полностью. Чтобы те люди, которые зашли к Вам с телефона, не пропустили ничего важного, нужно адаптировать обложки.
2. Мы выяснили, что адаптация нам нужна, но все еще не понимаем, как это сделать. Все очень просто! Существуют зоны, которые либо отсутствуют при просмотре с мобильного приложения, либо частично прикрыты элементами интерфейса (см. ниже презентационный макет с размерами).

Немного о каждой из них:

• Зона, выделенная красным - здесь мы не размещаем никакой информационный контент. Все, что будет размещено в красной зоне, пользователи с мобильных устройств не увидят, учитывайте это.
• Зона, выделенная желтым – это зона обложки, которая частично прикрывается элементами интерфейса мобильного приложения. Справа и слева находятся эти самые элементы, а сверху расположена полоса с индикаторами Вашего мобильного устройства. Как будет видно из примера ниже, эти элементы прикрывают контент незначительно, и не располагать информацию в данной области достаточно глупо, особенно, когда есть что разместить.
• Синие блоки - это зеркальное расположение кнопок для удобства при размещении призывов.

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

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