Версия сайта для компьютера как называется

Обновлено: 04.07.2024

Как быстро и просто сделать адаптацию сайта под мобильные устройства

Зачем нужна специальная мобильная версия сайта?

Все основные поисковые системы лучше ранжируют те ресурсы, которые удобны для использования с любых устройств. Если ваш сайт не адаптирован под мобильные устройства, шансы попасть в ТОП-3 выдачи Яндекса или Google очень малы.

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

Для примера показатели из Метрики одного русскоязычного ресурса без адаптационной верстки:

Показатель отказов при входе со смартфонов в 2,5 раза выше, а с планшетов – почти в 2 раза, чем со стационарных компьютеров или с ноутбуков. Это говорит о потере потенциальных клиентов из-за отсутствия специального сайта для мобильных устройств. А так как количество людей, использующих переносные гаджеты с небольшими экранами, постоянно растет, количество упущенных заявок через интернет-сайт будет постоянно расти, а позиции в поиске – снижаться.

Через Google Analytics тоже можно просмотреть сколько людей зашло на сайт через мобильные устройства. Для этого зайдите в «Обзор аудитории» и нажмите «Добавить сегмент». Там поставьте галочки у интересующих вас источников:

Согласно исследований Equation Research 46 % пользователей не заходят повторно на сайт, если в предыдущий раз им что-то не понравилось. То есть где-то половина из тех, кто составляет статистику по отказам – это те, кого вы упустили практически навсегда.

Что лучше и удобней: адаптивный дизайн или специальная верстка под мобильные устройства?

Благодаря адаптивному дизайну сайт будет хорошо автоматически отображаться с любого устройства. Сделать так несложно, но вес страницы при заходе с мобильного будет таким же, как с компьютера. То есть через мобильный интернет сайт будет открываться чуть дольше, чем со стационарного компьютера или ноутбука, подключенных через вай-фай или провод. Это может привести к закрытию сайта пользователем из-за нежелания ждать.

Так выглядит один и тот же сайт с адаптивным дизайном на разных устройствах

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

Так выглядит сайт на планшете и смартфоне с полноценной мобильной версией

Что дает сайту адаптация под мобильные гаджеты?

Как просмотреть сайт на экранах с разной диагональю без соответствующих гаджетов?

Чтобы увидеть оптимизацию сайта для мобильных устройств или ее отсутствие, используйте:

● Quirktools – просто введите адрес сайта и выберете интересующие вас устройства;

● Ipadpeek – для проверки отображения на гаджетах компании Apple;

● F12 – нажмите на клавишу, а потом на значок с телефоном. Самый простой и доступный вариант, который не требует захода на специальные сервисы.

Оценка удобства сайта для мобильных устройств

Как улучшить сайт под мобильные устройства?

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

Задайте правильные атрибуты у полей

Если на вашем сайте авторизация проходит через ввод имени пользователя и пароля, откажитесь от autocorrect в пользу autocapitalize:

Ваше имя: <input type=text size=20 autocorrect=off autocapitalize=words>

Для удобства ввода адреса почты:

Ваш email: <input type=email size=20>

Удобная ширина экрана для мобильных устройств

Откройте сайт и уменьшайте размер браузера до тех пор, пока контент не станет нечитабельным. Так узнаете минимальную ширину для @viewport.
Пропишите этот тег в head страницы:

Сделайте ширину изображения равной 100 %

Избежать превышения размера используемых изображений на мобильных устройствах можно путем установки ширины для них в 100 % в CSS-коде сайта:

Для фоновой картинки задайте:

Еще одна рекомендация по картинкам:

<meta name=viewport content="user-scalable=no">

Измените ширину полей ввода на 100 %

Для ширины полей input добавьте в CSS-код:

Благодаря этому поля будут по ширине экрана используемого пользователем гаджета.

Читайте также: