Читайте все Секреты в Контакте
4 июля на странице блога freesmm.ru Вконтакте я задал вопрос о том, будет ли интересна тема аватарки, а точнее какой она должна быть. После нескольких положительных ответов я решил взяться за написание данной статьи.
В самом начале я думал что это будет простая статейка, которая быстренько опишет то, как должна выглядеть идеальная аватарка для группу В контакте. И я начал писать… Написав порядка 2 000 символов я понял, что все то, что я написал никуда не годится, потому что если бы я был на вашем месте, то я бы ничего не понял 🙂
Поэтому я решил разбить статью на части:
- Часть 1: Высота идеальной аватарки для группы В Контакте
- Часть 2: Миникопия и что должно быть на аватарке В Контакте
- Часть 25: мало ли:)
В первой части будет описан «всего лишь» процесс нахождения высоты для аватарки группы vk.com
Вводная часть: аватарка
Аватарка В Контакте является одним из главных элементов любого сообщества (группы, публичной страницы) и профиля (про него не говорим, поэтому на нем останавливаться не будем).
Аватарка ВКонтакте – это ваше «я» в социально сети. Тысячи, а может и сотни тысяч людей будут видеть её каждый день у себя в ленте новостей в виде мини-копии и на странице вашего сообщество в полном размере.
Делать аватарку по принципу «и так сойдет», или «авось прокатит», или «эта фоточка заебись» – НЕЛЬЗЯ.
Многие делают для своих групп очень качественные аватарки, но в большинстве случаев они пренебрегают некоторыми фактами и свойствами браузера и операционных систем, которые сводят на нет всю красоту и качество.
Максимальные значения для ширины и высоты аватарки ВК — 200*700 (200 в ширину и 700 по высоте)
О том какой должна быть аватарка для группы Вконтакте пойдет речь ниже, а потом и в другой статье..
Часть 1: Высота
Как бы это странно не звучало, но высота аватарки это первое что стоит учитывать при создании аватарки для сообщества ВК. Почему, спросите вы. Именно это я и постараюсь вам объяснить в этой статье
Монитор (разрешение)
Первое, что стоит учитывать при создании аватарки для сообщества, так это разрешения монитора. У В Контактика фиксированная ширина, а высота — «бесконечная» (постоянно подгружается)
Какое же разрешение стоит выбрать?
В феврале 2012 года случилось эпичное событие: разрешение 1024*768 перестало быть самым популярным. С первого места его сместило разрешение 1366*768, которое стоит на большинстве ноутбуков (все пересели с настольных ПК на ноутбуки).
Значит, по высоте мы ограничены в 768 пикселей (на картинке ошибка: перепутал высоту и ширину)
Самая популярная операционная сеть — Win 7, как ни крути. Внизу у нас есть плашка панели задач, которая тоже сжирает место по высоте.
Качество фотографии не ахти. Хотелось порисовать.
И так, минимум панель задач в Вннде 7 сжирает 40 пикселей. Итого у нас по высоте уже 768-40=728. Идем дальше. (на картинке ошибка: перепутал высоту и ширину)
Самый популярный браузер в мире — Google Chrome. Он тоже отнимает драгоценное пространство по высоте
Милый хром своими вкладками сжирает 30 пикселей, а адресной строкой 31 (а может и 30. мерил на глаз). Итого 60-61 пиксель обязательно сожрет браузер и никуда от этого не деться. Про другие браузеры чуть позже.
Кроме вкладок и адресной строки, которые никуда не денешь, у многих пользователей могут быть открыты закладки. Я, например, их постоянно держу развернутыми, так как это экономит время (быстрый доступ к часто используемым сайтам). Закладки отнимают еще 30 пикселей. Итого Google Chrome по высоте может отнимать от 61 до 91 пикселя.
Значит получаем 728 — 61(91) = 667(637) , а это уже меньше максимально допустимой высоты аватарки в 700 пикселей.
Дальше вступают ограничения самого Контакта.
40 пикселей кушает верхняя навигационная панель ВК. Еще 29 пикселей прямоугольник(«тип»), на которой написан тип сообщества и 10 пикселей отступ от «типа» до заветной аватарки.
Итого 40+29+10=79 пикселей на навигацию ВК.
667(637) — 79 = 588 (558 — с панелью закладок)
558 пикселей — максимальная высота аватарки в ВК, которую будет полностью видно на первом экране ноутбука с разрешением 1366*768 пикселей. Но это еще не все!
Если вы хотите, чтобы люди могли подписаться на ваше сообщество легко и без лишних действий, то вам надо учитывать следующие моменты:
Кнопка «подписаться» должна быть на первом экране
Любой специалист по юзабилити скажет вам, что важные элементы должны быть на первом экране. Кнопка «подписаться» таковым элементом является. А это значит, что она уменьшит высоту нашей «идеальной» аватарки.
Давайте разберемся в размерах:
- блок «подписатьсявступить в группу» съедает 77 пикселей
- если это публичная страница и её упоминали в своих записях пользователи, то появляется блок «упоминания» публичной страницы. Вместе со всеми отступами он сожрет 43 пикселя
Итого у нас получается:
- 588 (558) — 77 = 511(481 — с панелью закладок) — для группы
- 588 (558) — (77+43) = 468(438 — с панелью закладок)
Другие браузеры
Я пользуюсь Хромом, потому что он экономит пространство экрана под то, что важно — веб-страницу. Все элементы браузера скомпонованы так, что по высоте он максимум отнимает всего 61-91 пиксель. Тот же Firefox без всякой установленной фигни сожрет больше. Тут еще конечно стоит вспомнить про яндекс.бар и другие панели, устанавливаемые в браузерах типа лисы и осла, наверное и в опере что-то есть, но я ей пользовался всего пару раз.
Так вот, панели. Они тоже отнимают какое-то пространство по высоте, и я бы накидывал к полученным выше значениям высоты аватарки для группы и публичной странице по 50px … то есть отнимал!
Размеры идеальной аватарки для группы и публичной страницы
- для группы — 431 пиксель +50*
- для публичной страницы — 388 пикселей +50*
*50 — это запас для других браузеров. Можно не использовать.
P.s. Если вы хотите посмотреть процесс «рисования» и нахождения высоты «идеальной» аватарки, то это можно сделать здесь, либо в на публичной странице в альбоме http://vk.com/album-38369814_162302457
P.p.s. В статье написано полное ИМХО. Не согласны? Прошу в комментарии обосновать это. Я свою точку зрения обосновал так, что не подкопаешься 🙂
Интересное видео: интересный кейс продвижения Nivea