Как переделать сайт под мобильную версию
В последние годы рост сегмента Mobile вынуждает владельцев e-commerce задуматься о наличии мобильной версии сайта, которая учитывает интересы людей, пользующихся смартфонами, мобильными телефонами, планшетами. Это объясняется тем, что при формировании выдачи Google, да и другие поисковые системы, отдают предпочтение проектам с мобильной адаптацией. А во-вторых, ее присутствие в интернете помогает мобильным пользователям избежать таких проблем, как обрезан контент на странице или сложное меню, часть из которого выходит за рамки экрана.
Переделывая сайт под мобильную версию, вы тем самым обеспечиваете проекту хорошее ранжирование, создаете комфортный доступ ко всей информации, обеспечиваете максимальный охват целевой аудитории.
Если вы не знаете, как переделать сайт под мобильные устройства, обращайтесь в компанию “ABCname”, мы решим вашу проблему максимально быстро и качественно. В работе используем такие технологии, как язык программирования PHP 7, клиентские технологии в виде Node.js, CSS3, SASS, HTML5, JavaScript, новейшие технологии кэширования и другие.
Как работает мобильная версия
Мобильная версия - это урезанная копия вашего ресурса, которая учитывает размер экрана смартфона или планшета.
Как правило, для такого проекта делается отдельная верстка, в которой до мелочей продумывается дизайн, и чем он проще, тем эффективней. Все элементы располагаются таким образом, чтобы не ущемлять интересы пользователей в функционале.
Система устроена так, что она автоматически определяет тип устройства. Если ширина экрана идентифицируется как мобильный гаджет, сервер перенаправляет человека на мобильную версию ресурса путем переадресации HTTP и HTTP-заголовка Vary.
Как переделать ресурс под мобильную версию
Сформировать мобильную версию лучше на отдельном поддомене с редиректом и расположить его на том же домене, что и десктопная версия. В данном случае у десктопной версии будет один URL, а в мобильной - другой, например с субдоменом "m."
На таких поддоменах посетители легко воспринимают мобильную версию. Отличаться между собой они будут размерами, структурой, адресом, расположением элементов и исключением некоторых второстепенных составляющих. Это сделает версию более упрощенной, что ускорит индексирование поисковыми роботами.
Для того, чтобы перевести сайт на мобильную версию необходимо придерживаться следующих этапов:
- Первым делом нужно проанализировать структуру десктопного веб-проекта, чтобы определить возможности и трудозатраты на реализацию мобильной версии;
- Подготавливается ТЗ на разработку с учетом основных моментов;
- Создание прототипа, позволяющего визуализировать размещение структурных элементов, основных блоков, расположение графики, наполнения, внешнего вида;
- Разработка front-end с применением таких языков программирования, как CSS, JavaScript, HTML и back-end, для формирования которого понадобятся системы управления базами данных. Выбор языка программирования зависит от сервера. Это могут быть PHP, Ruby, Java, Python и прочие технологии;
- Тестирование и запуск.
Что требуется учесть при переходе на мобильную версию сайта
И хотя классические правила дизайна не всегда применимы к облегченной мобильной версии, в конечном итоге она характеризуется отличной функциональностью, моментальной загрузкой контента, не требующей высокой скорости соединения с Интернетом. При этом абсолютно не важно, используете вы:
- 3G
- GPRS
- или другую удобную вам сеть
Мобильная версия имеет простое управление и интерфейс, позволяющий быстро и легко ориентироваться, находить нужную информацию и перемещаться со страницы на страницу.
Чтобы переделать сайт под мобильную версию, следует придерживаться некоторых рекомендаций, данных профессионалами.
Грамотно продумать и настроить содержимое
Решить эту задачу следует таким образом, чтобы все элементы рационально располагались на экране, не выходя за горизонтальные рамки и не загромождая интерфейс. Если на экране много кликабельных элементов или они расположены слишком близко, их можно случайно нажать. Поэтому некоторые из них убираются, а оставшиеся (максимально необходимые) адаптируются под анатомические особенности пальцев - делаются крупными для удобного нажатия.
Для заполнения форм лучше разработать настраиваемые клавиатуры, у которых кнопки имеют большой отступ друг от друга. Особе внимание уделяется иконке вызова онлайн-консультанта, она не должна сильно перекрывать контент, поэтому лучше расположить ее в футере или шапке.
Обеспечить качественное функционирование
Чтобы создать аудитории комфортные условия использования мобильной версии, разрабатывается ключевой функционал: форма регистрации, добавления в “Избранное”, сохранение добавленных в корзину позиций, увеличение изображений. Это особенно значимо для интернет-магазинов, для которых внешний вид товара имеет большое значение. Также обеспечивается понятная навигация и взаимодействие с элементами платформы, формируется меню на первом экране, ссылки на главную страницу, добавляются кнопки, кликабельные телефоны, учитываются другие принципиальные моменты.
Так, как на мобильной версии трудно работать с разными вкладками, надлежит решить задачу в рамках окна мобильного браузера. К примеру, создать возможность добавлять в избранное товар без регистрации прямо из листинга.
Скорость загрузки страниц
Учитывая, что редирект для перенаправления на мобильную версию отнимает дополнительное время (около 1,6 сек), нужно позаботиться о высокой скорости путем снижения “веса” страниц, оптимизируя при этом изображения, CSS и JS, используя кэширование, отложенную загрузку скриптов и прочие решения.
Оформление
Для мобильной версии важно, чтобы внешне проект напоминал десктопный вариант, поэтому подбирается соответствующая цветовая схема, стилистика, содержание, размеры шрифта.
Работа над контентом
Здесь тоже есть свои аспекты, ведь лишний контент усложняет навигацию. Нужно создать все условия для комфортного просмотра изображений и видео, оптимизировать крупные изображения. Из-за того, что на мобильных экранах помещается меньше контента, нужно подготовить короткие и содержательные тексты.
