Базовые принципы адаптации сайтов под мобильные устройства

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

Подробнее о том, как адаптировать сайт под мобильные устройства, вы можете узнать из видеозаписи вебинара специалиста по качеству поиска Google Андрея Липатцева, а также из материалов наших рассылок: «Сайт, удобный для мобильных пользователей», «Техники мобильной адаптации сайта» и «SEO для мобильных сайтов».

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

Принцип первый: Flash-элементы

Не используйте Flash элементов в дизайне сайтов для мобильных. Далеко не все мобильные устройства поддерживают Flash, а значит, пользователи смартфонов и планшетов просто-напросто ничего не увидят на вашем сайте. Эта ошибка ведет к увеличению показателя отказов, что негативно влияет на поведенческие факторы ранжирования сайта в целом. Если вы хотите сохранить визуальный эффект, достигаемый с помощью Flash, то рекомендуем использовать JavaScript, который хорошо работает на всех типах устройств. Если же ваш сайт целиком построен на Flash, то для мобильных устройств необходимо сделать его html версию.

Принцип второй: многоступенчатое меню

mnogo-menu

Откажитесь от многоступенчатого меню. Оно хорошо подходит для использования на PC, но абсолютно не подходит для работы на мобильных устройствах: им элементарно невозможно пользоваться. Меню для мобильных сайтов должно быть максимально простым и односложным. Если структура вашего основного сайта не подразумевает односложности, то стоит задуматься о том, чтобы упростить мобильную версию сайта или его навигацию.

Принцип третий: онлайн-формы

Не заставляйте своих пользователей заполнять большие формы регистрации: предлагайте им воспользоваться аккаунтами в социальных сетях. Если форма регистрации все же необходима, то делайте ее максимально простой. Будет лучше, если данные регистрации не нужно будет подтверждать через почту, так как этот процесс усложняет процедуру регистрации и сильно снижает конверсию сайта. То же относится и к другим онлайн формам (опросы, анкетирование и т. д.). Лучше от них отказаться или, как минимум, сделать их максимально простыми для заполнения.

Принцип четвертый: разрешение экрана

smartphone-screen-size

Помните, что у разных мобильных устройств разное разрешение экрана. Идеально сделать несколько мобильных версий сайта, которые будут показываться в зависимости от типа устройства. Как правило, это делается через настроенный внутри кода сайта редирект.

Вот данные по разрешению экранов некоторых популярных моделей смартфонов и планшетов:

  • Apple iPad (планшет): 1024 х 768 пикселей;
  • Apple iPad 2 (планшет): 1024 х 768 пикселей;
  • Apple iPad 3 (планшет): 2048 х 1536 пикселей;
  • Apple iPhone 3 (смартфон): 480 х 320 пикселей;
  • Apple iPhone 4S (смартфон): 960 х 640 пикселей;
  • Apple iPhone 5S (смартфон): 11360 х 640 пикселей;
  • Apple iPhone 6 (смартфон): 1334 х 750 пикселей;
  • Asus Transformer TF101 (планшет): 1280 х 800 пикселей;
  • Asus Transformer Prime TF201 (планшет): 1280 х 800 пикселей;
  • HTC Amaze 4G (смартфон): 960 х 540 пикселей;
  • HTC Evo 3D (смартфон): 960 х 540 пикселей;
  • HTC Flyer (планшет): 1024 х 600 пикселей;
  • HTC Sensation 4G (смартфон): 960 х 540 пикселей;
  • HTC Thunderbolt (смартфон): 480 х 800 пикселей;
  • Lenovo IdeaPad A1 (планшет): 1024 х 600 пикселей;
  • Lenovo ThinkPad (планшет): 1280 х 800 пикселей;
  • Samsung Galaxy S2 (смартфон): 800 х 480 пикселей;
  • Samsung Galaxy S3 (смартфон): 1280 х 720 пикселей;
  • Samsung Galaxy S5 (смартфон): 1920 х 1080 пикселей;
  • Samsung Galaxy S6 (смартфон): 2560 х 1440 пикселей;
  • Samsung Galaxy Tab S 8.4″ (планшет): 2560 х 1600 пикселей;
  • Samsung Galaxy Tab S 10.5″ (планшет): 2560 х 1600 пикселей.

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

Принцип пятый: скорость загрузки

Речь пойдет о скорости загрузки. Сайт на мобильных устройствах должен грузиться мгновенно. Иначе пользователь просто его закроет. Если на PC пользователи готовы долго ждать загрузки сайта, то на мобильных устройствах они ждут от 3 до 5 секунд и без раздумий закрывают сайт, который никак не хочет открываться.

И в заключение хотим предоставить вашему вниманию подборку, которая поможет вам определиться с вариантом дизайна вашего сайта для мобильных устройств: [ссылка на подборку]

Еще раз напоминаем, что наличие мобильной версии сайта обеспечивает вам качественный трафик из мобильной выдачи поисковиков. Нет мобильной версии – нет мобильного трафика. Помните это.

noflashregister-formSite-speedБазовые принципы адаптации сайтов под мобильные устройстваБазовые принципы адаптации сайтов под мобильные устройства

Источник: http://feedproxy.google.com/~r/Seopult/~3/JYdwNFUxJNo/bazovye-principy-adaptacii-sajtov-pod-mobilnye-ustrojstva.html

Заказать сайт, Обслуживание, продвижение, раскрутка, seo сайтов и реклама в Интернете
Внимание Акция! Сайт за 10 дней! Вы можете заказать разработку любого сайта за 10 рабочих дней, с доплатой всего 30% от его стоимости! >>>
Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
VPS