Размер приложения ВКонтакте
Добавлено: 25 янв 2012, 20:30
Размер приложения ВКонтакте
В этой статье я хочу помочь определиться с выбором ширины и высоты приложения ВКонтакте.
Кто-то делает не широкие приложения, но которые не помещаются на один экран пользователя, кто-то делает широкие, которые растягивают дизайн ВКонтакте.
Опираясь на статистику разрешений экрана пользователей рунета, я провел расчеты.
Самые популярные разрешения экрана пользователей за январь 2012
1366x768 (у меня такое)
1024x768
1280x1024
1280x800
1920x1080
Расширения экранов мобильных устройств в расчет не беру.
Подбирая размер приложения, нужно учитывать чтобы оно поместилось на экран пользователя.
Если эта игра, в которой нужно видеть всю область приложения сразу, а какая-то часть не помещается по высоте, то это очень плохо. Если же не помещается не самая важная часть, например «Топ пользователей», то это не так страшно.
Вычисляем минимальные ширину и высоту расширений экрана:
Ширина 1024, Высота 768.
Из ширины экрана нужно вычесть:
- ширину ползунка прокрутки. Примерно 20px в разных браузерах.
- ширину основного меню ВКонтакте. 146px
- Отступы у контентной части сайта ВКонтакте. 20px
Итого: 1024 - 20 - 146 - 20 = 838px
Максимальная ширина приложения 838px.
Из высоты экрана нужно вычесть:
- вкладки браузера, адресная строка, дополнительные плагины.
У каждого пользователя эта высота может быть своей. Пускай это будет 100px
- Шапка сайта ВКонтакте со всеми элементами до начала контента. Чтобы приложение было видно целиком без прокрутки. 72px
Итого: 768 - 100 - 72 = 596px
Максимальная высота приложения 596px.
Ваше приложение может быть больше по высоте, но постарайтесь, чтобы это не была та часть приложения, которую необходимо видеть пользователю одновременно с другой.
Рекомендуемый максимальный размер приложения 838x596.
Для приложений, в которых не критично использование прокрутки, можно использовать большую высоту.
Ещё один момент, который я бы хотел бы затронуть - это ширина приложения без растягивания дизайна сайта ВКонтакте.
Такая ширина поместиться в экран пользователей, у которых полностью помещается сайт ВКонтакте.
Я просто измерил эту ширину, получилось 627px.
Приложение 627x596 вписывается в контентную часть сайта Вконтакте без его растягивания.
Правда в левом верхнем углу становится заметна белая точка.
В этой статье я хочу помочь определиться с выбором ширины и высоты приложения ВКонтакте.
Кто-то делает не широкие приложения, но которые не помещаются на один экран пользователя, кто-то делает широкие, которые растягивают дизайн ВКонтакте.
Опираясь на статистику разрешений экрана пользователей рунета, я провел расчеты.
Самые популярные разрешения экрана пользователей за январь 2012
1366x768 (у меня такое)
1024x768
1280x1024
1280x800
1920x1080
Расширения экранов мобильных устройств в расчет не беру.
Подбирая размер приложения, нужно учитывать чтобы оно поместилось на экран пользователя.
Если эта игра, в которой нужно видеть всю область приложения сразу, а какая-то часть не помещается по высоте, то это очень плохо. Если же не помещается не самая важная часть, например «Топ пользователей», то это не так страшно.
Вычисляем минимальные ширину и высоту расширений экрана:
Ширина 1024, Высота 768.
Из ширины экрана нужно вычесть:
- ширину ползунка прокрутки. Примерно 20px в разных браузерах.
- ширину основного меню ВКонтакте. 146px
- Отступы у контентной части сайта ВКонтакте. 20px
Итого: 1024 - 20 - 146 - 20 = 838px
Максимальная ширина приложения 838px.
Из высоты экрана нужно вычесть:
- вкладки браузера, адресная строка, дополнительные плагины.
У каждого пользователя эта высота может быть своей. Пускай это будет 100px
- Шапка сайта ВКонтакте со всеми элементами до начала контента. Чтобы приложение было видно целиком без прокрутки. 72px
Итого: 768 - 100 - 72 = 596px
Максимальная высота приложения 596px.
Ваше приложение может быть больше по высоте, но постарайтесь, чтобы это не была та часть приложения, которую необходимо видеть пользователю одновременно с другой.
Рекомендуемый максимальный размер приложения 838x596.
Для приложений, в которых не критично использование прокрутки, можно использовать большую высоту.
Ещё один момент, который я бы хотел бы затронуть - это ширина приложения без растягивания дизайна сайта ВКонтакте.
Такая ширина поместиться в экран пользователей, у которых полностью помещается сайт ВКонтакте.
Я просто измерил эту ширину, получилось 627px.
Приложение 627x596 вписывается в контентную часть сайта Вконтакте без его растягивания.
Правда в левом верхнем углу становится заметна белая точка.