Как сделать мобильную версию сайта (адаптивный сайт)
Как переделать сайт под мобильную версию
- Как работает мобильная версия
- Как переделать ресурс под мобильную версию
- Грамотно продумать и настроить содержимое
- Обеспечить качественное функционирование
- Скорость загрузки страниц
- Оформление
- Работа над контентом
- Проверить отображение веб-ресурса на мобильных устройствах
В последние годы рост сегмента 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 и прочие технологии; - Тестирование и запуск.
Выбор языка программирования зависит от сервера. Это могут быть PHP, Ruby, Java, Python и прочие технологии;И хотя классические правила дизайна не всегда применимы к облегченной мобильной версии, в конечном итоге она характеризуется отличной функциональностью, моментальной загрузкой контента, не требующей высокой скорости соединения с Интернетом. При этом абсолютно не важно, используете вы 3G, GPRS или другую удобную вам сеть. Мобильная версия имеет простое управление и интерфейс, позволяющий быстро и легко ориентироваться, находить нужную информацию и перемещаться со страницы на страницу.
Чтобы переделать сайт под мобильную версию, следует придерживаться некоторых рекомендаций, данных профессионалами.
Грамотно продумать и настроить содержимое
Решить эту задачу следует таким образом, чтобы все элементы рационально располагались на экране, не выходя за горизонтальные рамки и не загромождая интерфейс.
Для заполнения форм лучше разработать настраиваемые клавиатуры, у которых кнопки имеют большой отступ друг от друга. Особе внимание уделяется иконке вызова онлайн-консультанта, она не должна сильно перекрывать контент, поэтому лучше расположить ее в футере или шапке.
Обеспечить качественное функционирование
Чтобы создать аудитории комфортные условия использования мобильной версии, разрабатывается ключевой функционал: форма регистрации, добавления в “Избранное”, сохранение добавленных в корзину позиций, увеличение изображений. Это особенно значимо для интернет-магазинов, для которых внешний вид товара имеет большое значение. Также обеспечивается понятная навигация и взаимодействие с элементами платформы, формируется меню на первом экране, ссылки на главную страницу, добавляются кнопки, кликабельные телефоны, учитываются другие принципиальные моменты.
Так, как на мобильной версии трудно работать с разными вкладками, надлежит решить задачу в рамках окна мобильного браузера. К примеру, создать возможность добавлять в избранное товар без регистрации прямо из листинга.
Скорость загрузки страниц
Учитывая, что редирект для перенаправления на мобильную версию отнимает дополнительное время (около 1,6 сек), нужно позаботиться о высокой скорости путем снижения “веса” страниц, оптимизируя при этом изображения, CSS и JS, используя кэширование, отложенную загрузку скриптов и прочие решения.
Оформление
Для мобильной версии важно, чтобы внешне проект напоминал десктопный вариант, поэтому подбирается соответствующая цветовая схема, стилистика, содержание, размеры шрифта.
Работа над контентом
Здесь тоже есть свои аспекты, ведь лишний контент усложняет навигацию. Нужно создать все условия для комфортного просмотра изображений и видео, оптимизировать крупные изображения.
Из-за того, что на мобильных экранах помещается меньше контента, нужно подготовить короткие и содержательные тексты.
Проверить отображение веб-ресурса на мобильных устройствах
После выполнения всех работ, необходимо протестировать проект в работе, чтобы понять, что видят пользователи, открывающие ресурс с разных планшетов и типов телефона. Для оценки скорости загрузки есть множество сервисов, которые дадут детальную информацию о наличии проблем и рекомендации по их устранению.343 раз уже помогла
Комментарии: (0)Адаптация сайта под мобильные устройства
Адаптация сайта под мобильные устройства
Cодержание:
- Способы оптимизации веб-страницы под мобильные устройства
- Мобильная версия сайта и специализированное приложение
- Использование медиа-запросов CSS
- Адаптация посредством языка Javascript
- Динамически подгружаемая версия разметки
- Особенности мобильной адаптации сайта
Если еще 5 лет назад вопрос о создании мобильной версии сайта для фирмы или организации представлял собой серьезный повод для обсуждения целесообразности вложения средств в данный проект, то на сегодняшний день адаптация любого веб-ресурса под мобильные устройства является прямым требованием современности.
Сочетание высокоскоростного доступа к интернету, удобства обращения с производительным устройством и восприятия информации с большого экрана, меняет психологию современных пользователей интернета. Они хотят получить ответы на свои вопросы «здесь и сейчас», быстро и просто узнать контакты организации, одним касанием пальца набрать телефонный номер и заказать товар или на ходу провести финансовую операцию. В результате объемы интернет-трафика с этих устройств с каждым днем только увеличиваются, а все дискуссии о целесообразности инвестиций в мобильные версии давно ушли в небытие.
Технологии прошлого, такие как например WAP, могли обеспечивать нормальную работу только сильно урезанных версий корпоративных ресурсов и практически не оставляли возможностей для реализации достойного дизайна, а также какой-либо функциональности, поэтому пользователи мобильных устройств не очень активно посещали их.
Прежде всего, это сказывается на монетизации ресурса. Сайт для корпоративного сектора был и остается инструментом продаж – как прямых, так и косвенных. Если в результате того, что ресурс не отвечает техническим возможностям посетителя, фирма начинает терять доход, значит, вопрос адаптации сайта становится очень актуальным. Даже незначительное (в пределах 0,5%) количество отказов пользователей может исчисляться высокими потерями в абсолютном выражении, что является недопустимой ситуацией для собственников бизнеса, которая подлежит как можно скорейшему исправлению.
Наряду с удобством сайта для пользователей, которое повышает конверсию ресурса и лояльность со стороны покупателей, большое значение имеет приоритет таких ресурсов в поисковой выдаче.
Google еще в 2015 году прямо заявил о своем намерении ранжировать адаптивные сайты в результатах поиска выше порталов, рассчитанных только на десктопную версию. Вывод же сайта в Топ-10 поисковой выдачи является конечной целью любого SEO-продвижения и обеспечивает рост продаж. Инструменты поискового продвижения как в Google, так и Yandex, объединяются в консоли, позволяющие проанализировать степень оптимизации веб-страницы относительно возможностей мобильных устройств.
Способы оптимизации веб-страницы под мобильные устройства
В общем случае можно выделить три основных направления разработки, благодаря которым сайт можно адаптировать к различным платформам и размерам дисплея:
- разработка с нуля полноценной версии сайта, предназначенной исключительно для мобильных устройств;
- доработка мобильной версии существующего сайта, включая дизайн и верстку;
- динамическая демонстрация версии сайта, соответствующей типу устройства пользователя.
Каждый из перечисленных способов имеет свои достоинства и недостатки, поэтому рассмотрим их подробнее.
Мобильная версия сайта и специализированное приложение
Такой подход обеспечивает широкие возможности относительно внешнего вида и функциональности мобильной версии, которая предназначена исключительно для смартфонов и планшетов. Технически к реализации такого подхода можно подойти одним из двух способов.
В первом случае с нуля создается еще один сайт, аналогичный по содержанию имеющемуся, однако его дизайн и набор функций полностью ориентированы под мобильные устройства. Главным преимуществом такого решения является гибкость и свобода проектирования с явно заданным конечным результатом. При этом отсутствует ограничения, накладываемые имеющейся архитектурой, которые могут препятствовать воплощению тех или иных идей адаптивной версии. На такой сайт можно устанавливать дополнительные инструменты, полезные при работе со смартфона и не востребованные при посещении с традиционного ПК.
Выбор в пользу указанного подхода зачастую сдерживается рядом его недостатков. К ним относятся:
- сложность и дороговизна разработки. Фактически речь идет о создании нового сайта с соответствующими затратами на дизайн и программирование;
- отличающийся URL мобильного сайта – как правило, мобильная версия имеет приставку m. к существующему адресу (например, m.facebook.com) и требует редиректа для мобильных устройств;
- необходимость двойной работы и двойного контроля за контентом сайтов. Мобильная версия должна обновляться одновременно с десктопной, иметь аналогичное наполнение и требует от контент-менеджера таких же трудозатрат.
Во втором случае речь идет о создании полноценного приложения-оболочки, разработанной под конкретную платформу устройства (Android, iOS, Windows Phone) или кросс-платформенное решение. Оно использует один и тот же программный интерфейс и средства работы с базой данных (прикладной программный интерфейс, Application Programming Interface, API), что и основной сайт, однако его дизайн органичнее смотрится, а и функционал лучше приспособлен для экранов смартфонов и планшетов.
Плюсом такого решения являются все достоинства отдельной мобильной версии и единая точка управления контентом. Содержимое обновляется один раз в одном месте, а затем используется разными оболочками.
В качестве недостатка подобного подхода можно назвать высокую сложность и дороговизну разработки. Такое приложение необходимо поддерживать в актуальном состоянии для различных версий операционных систем и эта забота полностью лежит в сфере ответственности разработчиков. Мобильную версию сайта обрабатывает браузер пользователя, за актуальностью версий и поддержкой стандартов которого следят большие команды. Приложения под API разрабатываются конкретными командами и требуют постоянной поддержки. Стоит отдельно также отметить высокую сложность такой разработки, которая требует глубоких и специфических знаний.
Помимо этого пользователю, чтобы получить доступ к вашему ресурсу, необходимо скачать данное приложение через Google Play или AppStore, в то время как доступ к мобильному сайту открывается при помощи любого браузера.
Пользователь может отказаться от установки приложения, если его поиск будет затруднен или же оно соберет негативные отзывы, либо получит низкий рейтинг. Кроме того, возможны чисто технические проблемы установки – низкая скорость подключения или отсутствие достаточного места на дисковом пространстве устройства, из-за которых пользователь может просто не захотеть устанавливать данную программу.
Что касается третьего способа оптимизации ресурса под мобильные устройства, то здесь существует целый ряд подходов, отличающихся по способу и сложности реализации, а также объему финансовых затрат. Рассмотрим наиболее распространенные из них.
Использование медиа-запросов CSS
Ввод в действие стандарта CSS3 существенно расширил потенциал представления и поведения элементов на странице. В дополнение к новым возможностям, использование медиа-запросов позволяет полностью преобразить внешний вид имеющегося сайта и внедрить эргономичный интерфейс, обращение с которым удобно на небольших экранах.
Огромным преимуществом адаптации сайта посредством CSS является то, что логическая разметка страниц, выполненная при помощи HTML, остается неизменной. Другими словами, не нужно менять шаблоны страниц, достаточно просто изменить их внешний вид.
Такой подход требует опыта и высокой квалификации разработчика, однако позволяет существенно сэкономить средства и трудозатраты на разработку адаптивной версии. Минусом данного решения является то, что не всю имеющуюся разметку можно приспособить под мобильный дизайн, даже при условии правки HTML-разметки. Позиционирование некоторых элементов может достаточно существенно замедлять загрузку страницы (об этом чуть ниже), что сильнее всего как раз сказывается на мобильных браузерах.
На сегодняшний день большинство новых сайтов разрабатывается и создается по принципу «mobile first». Это означает, что дизайн нового сайта отрисовывается в первую очередь так, как он выглядел бы на экране смартфона, затем планшетного ПК и уже после этого разрабатывается его десктопная версия.
Затем по тому же принципу создается HTML-разметка страницы, что в силу определённых причин облегчает работу программисту. При помощи стилей CSS веб-странице придается вид в соответствие с разработанным дизайном и порядком создания веб-интерфейса (смартфон – планшет – десктоп).
Причина такого алгоритма кроется все в том же ускорении загрузки. Когда мобильный браузер рендерит страницу, он применяет только стили для мобильных устройств. Надстройки медиа-запросов для планшетных ПК и десктопов такой браузер игнорирует и тем самым сокращается количество исполняемого кода. При доработке существующего сайта для достижения аналогичного быстродействия требуется переписать всю таблицу стилей, ставя во главу угла мобильные устройства. Стоимость такой операции приравнивается к написанию стилей с чистого листа.
В связи с этим собственник сайта, выбирая вариант адаптации сайта при помощи CSS, должен определить для себя приоритеты – либо более затратная оптимизация такой задачи с осознанным, пусть и небольшим замедлением скорости отрисовки страниц, либо переделка файла стилей изначально под мобильную версию.
Адаптация посредством языка Javascript
Широкое распространение языка Javascript, используемого для придания элементам веб-страниц разнообразного поведения, позволяет активно задействовать его для мобильной адаптации существующего сайта. Он не только дополняет медиа-запросы CSS, но и позволяет активно манипулировать имеющейся разметкой, поэтому реализация такого подхода – это отличный способ максимально выгодно и быстро добиться желаемого результата. Если главным преимуществом мобильной версии является ее изначальная компоновка под мобильные устройства, то использование Javascript может «на лету», то есть в процессе рендеринга, изменять разметку страниц сайта, добавляя, скрывая или удаляя необходимые нам элементы.
Преимуществом использования Javascript является скорость исполнения операций над элементами страниц и гибкость самого языка. Все подобные операции выполняются Javascript на стороне клиента, то есть с задействованием браузера пользователя, при этом потребляя определенный объем оперативной памяти.
Этот факт является одновременно и преимуществом, и недостатком. В случае наличия у пользователя высокопроизводительного устройства с высокими техническими характеристиками, рендеринг мобильного дизайна выполняется очень быстро без потери производительности. Кроме того, все операции, выполняемые на странице сайта, не задействуют ресурсы сервера и не требуют передачи данных по сети.
Однако такая страница может загружаться довольно долго на гаджетах предыдущего поколения, а в наиболее старых браузерах могут поддерживаться не все возможности и механизмы поведения, описанные на языке Javascript. Поэтому в зависимости от целевой аудитории и генерируемого ею дохода, принимается компромиссное решение о глубине кроссбраузерной поддержки при заданных финансовых возможностях. То же самое касается мобильных версий сайта и мобильных приложений, поэтому на их фоне комбинация CSS+Javascript выглядит все же менее затратной и более простой в реализации.
Динамически подгружаемая версия разметки
Этот принцип похож на использование Javascript, однако в данном случае система управления контентом (CMS) сайта анализирует тип устройства пользователя и на серверной стороне подгружает тот вариант шаблона сайта, разметка которого более приспособлена для данного устройства.
Для этого шаблон сайта (называемый еще темой) должен изначально предусматривать подходящие варианты для наиболее популярных размеров и разрешений экрана. На сегодня, как правило, практически все разработчики платных шаблонов обеспечивают данную возможность.
При этом в CMS должен быть установлен соответствующий плагин, который будет управлять данным процессом. На рынке присутствует достаточное количество подобных плагинов под все основные CMS. Они отличаются стоимостью, количеством настроек и позволяют размещать мобильные шаблоны как на отдельном URL-адресе с префиксом m., так и подгружать разметку без редиректа. К преимуществам данного подхода стоит отнести:
- возможность настройки способа вывода контента в зависимости от версии сайта;
- отсутствие необходимости дублирования контента;
- тот факт, что все работы по адаптации разметки к мобильным устройствам уже выполнены разработчиками шаблонов и плагинов;
- невысокие затраты на покупку качественных программных продуктов;
- гибкое управление редиректом.
Существующие недостатки этого метода связаны в основном с рисками поддержки и сторонней разработки. Плагины и шаблоны должны периодически обновляться, чтобы обеспечивать совместимость с версиями CMS и языка программирования, регулярно проверяться на возможные риски и уязвимости. Все это зависит от разработчиков программ (как и в случае с мобильными приложениями) и может производиться на платной основе. Также всегда присутствует вероятность того, что разработчик откажется от дальнейшей поддержки своего продукта.
Еще одним неудобством выступает необходимость перенастройки сайта на другой шаблон, если в имеющемся не предусмотрено соответствующее обновление. Порой это довольно трудоемкий процесс, который может обернуться достаточно высокими финансовыми затратами. В данной ситуации может быть проще доработать сам шаблон через медиа-запросы CSS.
Особенности мобильной адаптации сайта
Как уже было сказано, сайт должен обеспечивать рост продаж – прямых или косвенных.
Достигается это количественным и качественным методами:
- количественный состоит в приросте числа посетителей путем повышения известности и популяризации сайта. На это направлены усилия SEO-специалистов, которые обеспечивают вывод сайта на высокие позиции в поисковой выдаче и точное позиционирование контекстной рекламы;
- качественный включает в себя рост конверсии посетителей в покупателей. Для этого сайт должен предложить пользователю интуитивно понятный интерфейс и навигацию, легкость поиска необходимой информации, продуманный и современный дизайн, удобство восприятия информации.
Поисковые системы Google и Yandex, определяя место сайта в результатах поиска, анализируют огромное количество прямой и непрямой информации, включая релевантность контента, отсутствие ошибок в верстке сайта, скорость загрузки страниц, поведение пользователей на странице. Поэтому при кажущейся на первый взгляд простоте разработки мобильной версии сайта, она должна:
- стать хорошим базисом для качественного SEO-продвижения, максимально удовлетворяя требованиям поисковых систем;
- соответствовать потребностям современных посетителей и повышать их лояльность к сайту.
Адаптация сайта для мобильных устройств является продуктом совместного творчества дизайнеров, SEO-специалистов и непосредственно разработчиков. Сегодня дизайнеры отвечают не только за самобытный, узнаваемый и привлекательный дизайн сайта на различных экранах и устройствах. В сферу их ответственности входит также обеспечение удобства использования адаптивной версии при сохранении полной функциональности и контента веб-ресурса. Взаимодействие сайта и пользователя мобильного устройства существенно отличается от манипуляций человека за настольным компьютером.
Дизайн разрабатывается таким образом, чтобы элементы интерфейса были доступны для экранных жестов одним пальцем, а размер каждого функционального элемента был удобным для прикосновения, то есть имел достаточно крупные размеры и был явно отделенным от остальных. Зачастую работа со смартфоном происходит в движении, поэтому пользователь не должен ломать голову над навигацией или терять много времени на поиск нужного товара или услуги.
При этом он должен видеть крупные и контрастные изображения в высоком разрешении и с хорошей детализации, иметь возможность, не напрягаясь прочитать текст, а также легко ориентироваться в ссылках, пунктах меню и кнопках.
При этом все эти требования не должны нарушать уже существующий стиль и принципы построения дизайна сайта для десктопной версии, предлагая пользователю удобный и привлекательный интерфейс, тем самым завоевывая его доверие.
Требования, выдвигаемые SEO-специалистами к мобильному сайту – отсутствие ошибок в программной части, быстрая загрузка страниц, грамотно подобранный контент. При определении варианта разработки мобильной версии одним из главных требований как раз и является обеспечение максимального быстродействия загрузки его страниц, поэтому при рассмотрении различных вариантов следует уделять повышенное внимание данному вопросу.
Выбор способа адаптации сайта к мобильным устройствам требует тщательного анализа существующей версии ресурса на предмет дружелюбности интерфейса, современного дизайна и готовности сайта к продвижению с точки зрения правильности построения его структуры.
Исходя из данных анализа, принимается решение о способе адаптации на основании рекомендаций SEO-специалистов, которые в дальнейшем будут сопровождать, и оптимизировать данный ресурс, а также разработчиков, способных оценить предстоящие трудовые и финансовые затраты клиента.
При разработке мобильной версии необходимо также учитывать массу нюансов, которые на первый взгляд неочевидны и менее актуальны для десктопных сайтов (например, геопозиционирование, мелкие детали интерфейса, типы данных в полях форм и прочее). Знание этих нюансов является результатом большого опыта работы в подобных проектах и возникает в результате плотного сотрудничества специалистов по продвижению и веб-девелоперов. Обращение к профессиональным командам в данной сфере гарантирует клиенту оптимальное решение с точки зрения затрат, максимально приспособленное к имеющимся исходным данным и конечной цели разработки ресурса.
Поделиться
10 простых способов сделать сайт удобным для мобильных устройств
Вот умопомрачительная статистика: сейчас в мире официально больше мобильных устройств, чем людей.
Угадайте, эта новость была из далекого 2014 года.
Тогда в мире было 7,2 миллиарда гаджетов, которые множились в пять раз быстрее, чем мы. С тех пор Mobilegeddon стал фактом, и Google изменил свой алгоритм, чтобы отдать предпочтение веб-сайтам, оптимизированным для мобильных устройств .
Это привело к серьезному нарушению рейтинга страниц, и сайты, которые ранее хорошо зарекомендовали себя в поиске, полностью выпали из поисковой выдачи Google просто потому, что их сайты не были оптимизированы для мобильных устройств.
После того, как за последнее десятилетие возросло использование мобильных устройств, теперь возможность предоставить вашим потенциальным клиентам положительные впечатления от мобильных устройств стала чем-то вроде основного требования.
Итак, приступим.
Готовы сделать свой сайт мобильным? Получите это 15-шаговое руководство по привлечению мобильного трафика.
Что такое мобильный веб-сайт?
Как следует из названия, мобильных веб-сайтов — это сайты, разработанные, разработанные и оптимизированные для пользователей мобильных устройств — а это и сложнее, и важнее, чем кажется.
Веб-сайт BiQ Cloud — хороший пример веб-сайта, разработанного с учетом потребностей мобильных пользователей.
Он прокручивается, тексты выглядят четкими, изображения видны хорошо, есть много пустого пространства, и самое главное, все, на что вы хотите нажать, кликабельно и работает хорошо!
Если я потенциальный покупатель, который ищет новый SEO-инструмент, просто просмотр таких сайтов на мобильных устройствах — это хорошее первое впечатление, которое может подтолкнуть меня дальше по воронке продаж.
Посмотрите, насколько сайт BiQ удобен для мобильных устройств! Я уверен, что после навигации по сайту у вас будет лучшее представление о том, каким должен быть дизайн, оптимизированный для мобильных устройств.
На самом фундаментальном уровне пользователям нужен контент, который легко просматривать. Если ваш текст и изображения слишком маленькие, они разочаруются и уйдут, поэтому контент соответствующего размера имеет решающее значение.
К сожалению, создать не так просто — мобильные телефоны и планшеты бывают разных размеров и разрешений, поэтому не существует единого формата, который идеально отображался бы на всех устройствах.
Чтобы решить эту проблему, сегодняшние шаблоны веб-сайтов переходят в формат масштабирования, где они могут быстро адаптироваться к устройству, на котором они отображаются.
Прежде чем двигаться дальше, прочтите внимательно о важности мобильных веб-сайтов, когда речь идет о SEO в 2019 году. Тем не менее, в 2019 году мы рассматриваем индексацию, ориентированную на мобильные устройства, которая станет одним из ключевых факторов для вашего рейтинга и коэффициента конверсии.
Подходит ли мой веб-сайт для мобильных устройств?
Проверить, оптимизирован ли ваш вид для мобильных устройств, очень просто — у Google есть тестер веб-сайтов, оптимизированных для мобильных устройств, который называется 9.0025 Инструмент для веб-мастеров , чтобы сделать именно это, и он доступен прямо здесь .
Все, что вам нужно сделать, это ввести URL-адрес вашей веб-страницы и нажать кнопку АНАЛИЗ.
Затем тест Google проанализирует ваш сайт и отобразит результат.
Анализ вашей веб-страницы может занять некоторое время…
Если ваша веб-страница неудобна для мобильных устройств, вы увидите что-то подобное, Google даже перечислит , почему ваша веб-страница неудобна для мобильных устройств, и предложит решения по как сделать сайт мобильным :
В случае успеха вы сможете просматривать мобильную версию своего веб-сайта так, как ее видит робот Googlebot:
Стоит ли беспокоиться о мобильной версии?
В 2018 году процент пользователей, которые выходят в Интернет через какое-либо мобильное устройство, постоянно растет, в то время как процент пользователей настольных компьютеров движется в противоположном направлении.
Просто взгляните на график ниже, и вы получите четкое представление о тенденции, и не нужно много времени, чтобы понять, что в один прекрасный день количество мобильных пользователей будет намного больше, чем пользователей настольных компьютеров.
Данные за период с января 2017 года по август 2018 года показывают, насколько важен сайт, оптимизированный для мобильных устройств.
Если этого графика недостаточно, чтобы убедить вас сделать свой веб-сайт удобным для мобильных устройств, это должно быть сделано — Google недавно обновил свой алгоритм поисковой системы , чтобы отдавать приоритет веб-сайтам, оптимизированным для мобильных устройств, при поиске с мобильных устройств . Это означает, что даже высококачественные веб-сайты не будут занимать высокие позиции в мобильном поиске, если они не оптимизированы для мобильных устройств.
Другими словами, вы можете потерять половину или более ваших потенциальных посетителей. Учитывая сегодняшний поисковый климат, сделать ваш веб-сайт удобным для мобильных устройств чрезвычайно важно для вашего SEO — даже если вам нужно создать совершенно новый сайт — это (относительно) небольшие инвестиции, чтобы вы могли поддерживать постоянный поток посетителей.
Если вы все еще пытаетесь понять, как сделать веб-сайт удобным для мобильных устройств, вот 10 простых вещей, которые вы можете сделать, чтобы улучшить свой код и убедиться, что все работает так, как вы этого хотите.
Как сделать мобильную версию вашего сайта
1) Используйте медиа-запросы
Я знаю, это звучит так, будто вы собираетесь поговорить с репортером или что-то в этом роде, но «медиа» в данном случае — это контент, который вы доставляете пользователю.
В этом случае медиа-запросы являются популярным методом доставки настроенной таблицы стилей на различные устройства.
Медиа-запросы позволяют вам узнать размер устройства, а затем указать браузеру отображать элементы в соответствии с набором CSS. что вы установили.
Медиа-запросы являются ключевой частью большинства мобильных сайтов, но вы должны быть уверены, что система правильно настроена для всех используемых в настоящее время устройств, а не только для двух или трех самых популярных.
Убедитесь, что вы действительно просматриваете список или имеете какую-либо постоянную подписку, которая получает информацию для вас.
2) Используйте такие фреймворки, как Bootstrap
Существует множество фреймворков, которые вы можете использовать бесплатно, например Foundation 3 или Skeleton.
Одним из наиболее популярных фреймворков является Twitter Bootstrap.
Bootstrap — это интерфейсная платформа для вашего сайта, предназначенная для быстрого и автоматического масштабирования вашей веб-страницы на любом устройстве. Использовать готовую систему намного проще, чем пытаться запрограммировать все возможные комбинации самостоятельно, а также гораздо меньше головной боли.
Однако вам нужно будет проверить любую используемую вами структуру на полную совместимость с вашим существующим сайтом и целями.
Чем больше пользовательских кодов и функций есть на вашем сайте, тем сложнее будет убедиться, что все правильно работает на мобильном устройстве — не бойтесь позвать эксперта, если вам действительно нужна помощь.
3) Не отключайте кнопку «Отправить»
Мобильные устройства популярны, но многие из них по-прежнему не совсем надежны — и это может стать головной болью для пользователей, которые нажимают кнопку «Отправить» только для того, чтобы их соединение прерывается, и кнопка отключается, чтобы они не могли повторить попытку.
Попытка предотвратить повторную отправку — замечательная цель, но реалии мобильных подключений означают, что предотвращать их таким образом нехорошо.
4) Используйте адаптивную тему на CMS
Адаптивные темы или шаблоны веб-сайтов для мобильных устройств, например, от Somothemes, упрощают обеспечение высококачественного отображения для ваших пользователей.
Это то, что многие компании упускают из виду, когда они пытаются стать мобильными, и они не должны этого делать, потому что опыт ваших пользователей гораздо важнее, чем то, насколько легко что-то написать.
Современная тема от Somothemes
В идеале вы сможете получить лучшее из обоих миров, а адаптивные темы отлично подходят для обычных сайтов, которые не нуждаются в полной настройке для достижения успеха.
5) Используйте проценты
В прошлом большинство людей думали о изображениях с точки зрения пикселей, но широкое разнообразие разрешений на мобильных устройствах означает, что использование единого размера для изображений по своей сути является плохой идеей.
Это просто не работает — так не делай этого.
Вместо этого настройте такие вещи, как изображения, чтобы они имели определенную ширину на странице — обычно 100%, если у вас нет причин поступать иначе. Это помогает обеспечить единообразие просмотра на многих различных устройствах и гарантирует, что каждое изображение производит максимальное впечатление.
6) Сосредоточьтесь на простом дизайне
Одним из основных отличий мобильных пользователей от пользователей настольных ПК является то, что они предпочитают простой дизайн сайта . Это практический вопрос, а не все остальное — большие и сложные вещи неизбежно станут медленными на мобильном устройстве, и одним из их основных требований является мгновенная доставка контента, который они хотят.
Простой дизайн также позволяет легко удерживать внимание на контенте, который вы хотите, чтобы они увидели – пользователи мобильных устройств часто имеют печально известное короткое внимание охватывает , и определенно есть момент, когда сохранение простоты может быть более ценным, чем инвестирование в сложную, сложную тему.
7) Убедитесь, что вы не заблокировали файлы Javascript, CSS или изображений
Java не является безупречной системой, но она широко используется, и вместе с файлами CSS и изображениями она является одной из основ адаптивный, удобный для мобильных устройств сайт.
Одна из ваших главных целей — сделать ваш сайт универсально совместимым. Он должен отображаться практически на любом устройстве, на котором люди хотели бы его просматривать, и по большей части это означает использование общепринятого программного обеспечения и кодирования. Чем более специализированным является что-то, тем меньше вероятность того, что ваш сайт будет совместим.
8) Оптимизация размера изображения
Когда вы имеете дело с мобильными устройствами, цель состоит в том, чтобы создавать изображения с наименьшим возможным размером файла, но при этом выглядеть четкими и четкими на любом экране, на котором они просматриваются. Это связано с тем, что пропускная способность мобильных устройств намного меньше, чем у настольных компьютеров, и увеличивает время загрузки.
Так что, если вам нужно, чтобы ваши пользователи загружали файл jpeg размером 1 МБ только для того, чтобы увидеть уменьшенное изображение, они будут разочарованы и покинут ваш сайт.
Помните, что удобство для мобильных устройств — это не только приятный дизайн сайта , но и улучшение пользовательского опыта, и время загрузки, через которое они проходят, является основной частью этого опыта. Уменьшение размеров файлов использует меньше их данных (если они на ограниченном плане), помогает быстрее загружать страницу и в целом способствует положительному имиджу вашего сайта.
9) Не используйте Flash
Вообще говоря, мобильные устройства не поддерживают Flash. Причины этого менее важны, чем реальность — если ваш веб-сайт по-прежнему использует Flash, он не будет правильно отображаться на любом мобильном устройстве.
Flash — устаревшая технология, и никто не любит Flash, даже на десктопе. Даже если вы считаете, что вам нужно использовать Flash, вы можете найти другую технологию, которая могла бы заменить Flash, поэтому, чтобы быть разумным и безопасным, не используйте Flash.
Вместо этого переключитесь на совместимую технологию, такую как HTML, и помните, что если вы хотите сделать что-то сложное на мобильном устройстве, лучше перенести это в область приложений.
10) Использовать стандартные шрифты
Пользовательские, креативные шрифты могут помочь веб-сайту выглядеть красиво, но мобильные пользователи не хотят, чтобы им постоянно предлагали загрузить новые шрифты на свой телефон — более вероятно, что они немедленно отклонят любой такой запрос и перейдут к вместо этого другой веб-сайт.
К счастью, большинство современных устройств поставляются с предустановленными шрифтами, и есть вероятность, что вы сможете использовать их при разработке своего сайта. Однако следует отметить еще одну вещь: некоторые шрифты легче (или труднее) читать при разных размерах, поэтому обязательно проверьте читабельность вашего шрифта, прежде чем вы закончите свои обновления.
Последний совет
Наконец, у нас есть еще один совет по дизайну, которым мы можем поделиться с вами: помните ваши указания .
Средний рабочий стол — это горизонтальный экран — конечно, мы можем прокручивать его вверх и вниз, но он широкий.
Мобильные телефоны, с другой стороны, высокие и узкие, поэтому важно учитывать ширину содержимого.
При создании раскрывающихся меню, добавлении изображений или воспроизведении видео всегда помните о направлении устройства и о том, как люди будут просматривать контент.
И если ничего не помогает, нет ничего постыдного в том, чтобы довериться профессионалам, которые исправят ваш сайт, чтобы сделать его удобным для мобильных устройств.
Это может потребовать некоторых вложений, но с ростом числа мобильных пользователей и обновленным алгоритмом Google вы можете сказать, что сделать ваш существующий веб-сайт удобным для мобильных устройств — это продуманное и достойное вложение.
Первоначально этот пост был написан Чжи Юанем и опубликован 12 августа 2015 г. Последний раз он обновлялся 2 июня 2019 г..
Обновлено: 31 октября 2022 г.
Как сделать ваш веб-сайт удобным для мобильных устройств (2022)
Двадцать лет назад никто не осмелился бы предсказать, что большинство людей будут загружать веб-сайты со своих смартфонов. Никто даже не знал, что такое смартфон, разве что Стив Джобс, у которого наверняка уже все было набросано на бумаге. Когда в 2007 году был представлен первый iPhone, все начало меняться.
С течением времени люди стали чувствовать себя более комфортно в Интернете на своих телефонах. Перенесемся в сегодняшний день, когда больше людей загружают свои сайты на мобильные устройства, чем на настольные. Вот почему все, включая вас, должны убедиться, что их веб-сайты оптимизированы для мобильных устройств.
Содержание
- Что такое мобильный сайт?
- Подходит ли мой сайт для мобильных устройств?
- Как оптимизировать сайт для мобильных устройств
- Продолжайте тестирование
- Часто задаваемые вопросы
- Заключение
Что такое сайт, оптимизированный для мобильных устройств?
Мобильный веб-сайт представляет собой сайт, предназначенный для просмотра на смартфонах и планшетах.
Это означает, что дизайн веб-сайта адаптирован для небольших экранов, поэтому каждый элемент доступен и отшлифован на любом мобильном устройстве.
Кроме того, мобильный сайт должен загружаться быстро, потому что он обычно загружается через сети 3G или 4G, а не через быстрый и локальный домашний Wi-Fi.
Подходит ли мой сайт для мобильных устройств?
Если вы запустили свой веб-сайт в последние годы, скорее всего, он уже оптимизирован для мобильных устройств. Новые системы управления контентом (CMS) уже адаптировались к этой потребности и позаботились о том, чтобы каждый сайт хорошо работал на всех современных устройствах. Темы и шаблоны, доступные на WordPress или других популярных платформах, являются адаптивными, что означает, что они могут адаптироваться к вашему экрану, устраняя необходимость в специальной копии оригинала.
Один из способов узнать, подходит ли ваш сайт для мобильных устройств, — прочитать файлы документации используемого вами шаблона или просто загрузить его с нескольких мобильных устройств (в этом могут помочь друзья с разными телефонами).
Тем не менее, это не означает, что вы на сто процентов готовы к работе с мобильными пользователями.
Дизайн сам по себе имеет решающее значение, но вы должны знать, как быстро загружается ваш мобильный сайт. Есть простые тесты, которые вы можете провести онлайн, и они покажут вам, насколько хорошо работает ваш сайт.
Самый быстрый способ узнать, готов ли ваш веб-сайт к работе с мобильными устройствами, — это выполнить тест Google Mobile-friendly, во время которого вы просто вводите URL-адрес своего сайта. Google загрузит ваш сайт в небольшой макет смартфона и поделится с вами результатами.
Если вы хотите узнать больше технических подробностей о своем мобильном сайте, есть еще один отличный тест, который вы можете выполнить онлайн.
GTmetrix позволит вам ввести URL-адрес вашего веб-сайта (так же, как ранее упомянутый инструмент), но вместо того, чтобы просто сообщить вам, оптимизирован ли веб-сайт для мобильных устройств, он также покажет вам отчеты о производительности и структуре вашего сайт, и давать вам оценки на основе этих факторов.
Если вы изучите детали, вы сможете определить слабые места вашего сайта. Это может стать отправной точкой вашего процесса оптимизации.
Как оптимизировать сайт для мобильных устройств
Теперь, когда вы протестировали свой сайт, есть вероятность, что он не на 100% оптимизирован для мобильных устройств. Всегда есть несколько элементов, которые можно улучшить.
Сосредоточьтесь на простом дизайне
Если вы еще не выбрали шаблон для своего веб-сайта, помните о простоте. Мобильные устройства имеют меньшие экраны, а значит, на них может отображаться меньше элементов. Не каждое изображение, которое вы показываете на рабочем столе, должно быть видно на экранах мобильных устройств, и не каждый элемент меню или значок должны быть включены.
Мобильный веб-сайт должен быть простым и помогать посетителям получать необходимую им информацию.
Используйте адаптивные темы
Если вы используете WordPress, убедитесь, что ваша тема адаптивна.
Это означает, что тема была разработана для масштабирования в зависимости от устройства, используемого для доступа к ней. Это сэкономит время и нервы, когда дело доходит до оптимизации всего веб-сайта для мобильных устройств.
Опять же, если вы используете WordPress, есть несколько популярных адаптивных тем, на которые стоит обратить внимание:
- Divi
- Ultra
- OceanWP
- Astra
Использование меню для мобильных устройств
Стандартные меню веб-сайтов плохо подходят для мобильных устройств. Вы не хотите показывать стандартное меню, которое будет загромождать ваш мобильный сайт. Вместо этого мобильное меню будет скрывать все элементы в виджете, который будет отображаться только после того, как пользователь решит показать его, нажав на значок меню.
Пользователям WordPress будет легко создавать мобильные меню с помощью бесплатных плагинов, таких как Responsive Menu, которые позволят создать его за считанные минуты.
Этот бесплатный плагин позволяет с легкостью выбирать шаблон, изменять значки, цвета и назначать меню WordPress.
Этот инструмент уже закодирован с учетом скорости, поэтому вы можете расслабиться, зная, что он будет работать в вашу пользу и что меню сайта будет отличным, где бы вы его ни открыли.
Используйте стандартные шрифты
Немногие новички знают, что шрифты «тяжелые». Загрузка нестандартных шрифтов на ваш сайт увеличит время ожидания для мобильных пользователей и сделает его менее удобным. Я знаю, что вы хотели, чтобы этот конкретный абзац был окрашен в особый цвет и написан рукописным шрифтом, который вы видели на сайте друга. Но стандартный шрифт может выглядеть так же хорошо, и имейте в виду, что он ускорит загрузку вашего сайта. Вы действительно хотите пожертвовать посетителями только из-за стиля шрифта?
Если вы хотите убедиться, что стандартные шрифты по-прежнему хорошо выглядят, просто взгляните на список стандартных шрифтов.
Использование медиа-запросов
Медиа-запросы — это специальный метод CSS, используемый при разработке веб-сайтов, удобных для мобильных устройств.
Они позволяют вам изменить внешний вид вашего сайта на определенных размерах экрана. Используя эту технику, вы можете отображать или скрывать определенные элементы на экранах определенных размеров.
Например, если вы используете огромное главное изображение (основное изображение вашего веб-сайта, которое является первым фокусом вашего сайта для настольных компьютеров), было бы разумным скрыть это изображение для мобильных пользователей, чтобы вы не создать большую нагрузку на мобильный сайт. Медиа-запросы позволят вам это сделать.
Или, в другом примере, вам придется уменьшить заголовок, чтобы он лучше подходил для мобильных экранов. В этом случае вы должны использовать следующий запрос:
@media only screen and (max-width: 600px) {
h3 {
размер шрифта: 20px;
}
}
Это всего лишь простой пример, и объяснение деталей выходит за рамки этой статьи. Если вы хотите узнать больше о медиа-запросах, W3 Schools — хорошая отправная точка.
Оптимизация файлов изображений
Одно из самых больших положительных изменений, которые вы можете внести на свой сайт, – оптимизировать изображения. Одно неоптимизированное изображение может сделать ваш мобильный веб-сайт непригодным для использования. Представьте разницу при загрузке 2 МБ вместо 40 КБ данных. Да, речь идет о секундах, даже десятках секунд при загрузке из более медленной сети.
При работе с файлами изображений следует обратить внимание на несколько моментов:
- Изменение размера изображений — не загружайте изображения больше, чем вам нужно.
- Скрыть большие изображения — скрыть большие изображения с мобильных сайтов с помощью медиа-запросов или загрузить их уменьшенные версии.
- Сжатие изображений — более низкое качество не будет очевидным, но вы улучшите скорость своего сайта.
- Ленивая загрузка изображений — показывать изображения только тогда, когда пользователь прокручивает их. Вы можете использовать Smush, бесплатный плагин для этого.
Вы можете использовать Smush, бесплатный плагин для этого.Для оптимизации изображений вы можете использовать бесплатные онлайн-инструменты, такие как Kraken, которые позволят вам загружать изображения и выбирать качество вывода.
После того, как вы «выпустите Кракена» и позволите ему творить чудеса, у вас будет гораздо меньшее изображение, которое вы можете безопасно разместить на своем сайте.
Если на вашем сайте уже есть много изображений, изменение каждого из них может оказаться непростой задачей. К счастью, если вы используете WordPress, вы можете использовать специализированные плагины, такие как ShortPixel, которые будут сжимать и оптимизировать изображения на всем вашем веб-сайте.
Избегайте больших фрагментов текста
Не все зависит от скорости. Наличие длинных абзацев текста сделает ваш мобильный сайт нечитаемым. Убедитесь, что вы разбиваете большие фрагменты текста разделителем или просто добавляете пробелы между каждыми несколькими предложениями.
Вы также можете использовать изображения, чтобы сделать текст более интерактивным, но убедитесь, что в этом случае вы используете оптимизированные изображения.
Упрощение форм
Длинные формы на веб-сайтах — обычное дело. Пользователи настольных компьютеров, вероятно, не будут уклоняться от ввода еще нескольких полей, если это необходимо, но мобильные пользователи другие.
Длинные и сложные формы будут выглядеть еще более сложными при отображении на небольших экранах, и люди могут чувствовать себя перегруженными ими. Кроме того, у мобильных пользователей более короткая продолжительность концентрации внимания, поэтому вы хотите, чтобы формы были как можно короче, запрашивая только самую важную информацию.
Убедитесь, что кнопки призыва к действию большие и заметные, чтобы людям не приходилось использовать стилус для их нажатия.
Удаление всплывающих окон
Что бы вы ни предлагали, не показывайте всплывающие окна на своем мобильном сайте.
Людям вообще не нравятся всплывающие окна, но их наличие на мобильных сайтах просто добавляет дополнительную нагрузку на ваш сайт. Они также расстраивают людей, просматривающих со своих телефонов.
Если вам нужно показать специальное предложение или спросить у людей их адрес электронной почты, вы можете сделать это, показав вместо этого простой баннер или виджет на своем мобильном сайте.
Включите функцию поиска
Независимо от того, насколько хорошо структурирован ваш сайт или насколько великолепно выглядит меню на мобильных устройствах, факт в том, что навигация немного сложнее, чем на настольных устройствах.
Вместо того, чтобы позволить людям блуждать по вашему сайту в поисках определенной страницы, помогите им найти то, что они хотят, внедрив функцию поиска. Вы можете разместить форму поиска вверху или внизу страницы, в зависимости от того, насколько это важно для вас.
Еще лучшим вариантом было бы встроить функцию поиска в ваше мобильное меню, чтобы оно всегда было доступно для ваших посетителей.
Сделайте контактную форму легко доступной и дайте людям возможность звонить вам, показав кнопку
Если вы занимаетесь бизнесом, вы хотите, чтобы люди могли связаться с вами. Если они приходят к вам со смартфона, вы должны убедиться, что они могут легко найти вашу контактную информацию.
Первое, что вы должны сделать, это иметь ссылку на вашу контактную форму или ваш адрес электронной почты четко виден в меню. Если вы хотите, чтобы люди связывались с вами по телефону, вы также должны распечатать свой номер телефона. Это позволит людям звонить вам, просто нажав на номер телефона.
Если вы хотите еще больше улучшить это, есть замечательный бесплатный плагин WordPress, который позволяет размещать кнопку вызова на мобильных страницах. WP Call Button поможет вам разработать кнопку, которая всегда будет видна пользователям, приходящим со смартфонов, и позволит им легко позвонить вам.
Позаботьтесь о Core Web Vitals
Недавно компания Google представила набор факторов, важных для взаимодействия с пользователем.
При запуске веб-сайта необходимо учитывать три фактора:
- Производительность загрузки (Самое большое содержание) — сколько времени требуется для загрузки самого большого элемента на вашем сайте (например, самого большого изображения на главной странице).
- Отзывчивость (Задержка первого ввода) — сколько времени требуется вашему сайту, чтобы отреагировать на первое взаимодействие пользователя (например, прикосновение к экрану при открытии сайта на смартфоне).
- Визуальная стабильность (кумулятивный сдвиг макета) — двигаются ли элементы на вашем сайте во время загрузки? Чем стабильнее сайт, тем лучше.
Чтобы начать работу с Core Web Vitals:
- Перейдите в Google Search Console и войдите в свою учетную запись Google.
- В левой части экрана найдите вкладку «Производительность».
- Нажмите «Основные веб-жизненные показатели».
Приняв во внимание все три показателя, Google сообщит вам, насколько хорошо работает ваш сайт.
Очевидно, вы хотите, чтобы каждый сегмент был как можно совершеннее. Если требуется улучшение, вы должны ответить.
Например, Google может показать вам, что ваш мобильный сайт загружается слишком медленно. Затем вам нужно будет протестировать свой веб-сайт с помощью различных инструментов, о которых я рассказал выше, и найти проблемный элемент. Допустим, проблема была в одном из изображений — вам придется оптимизировать его и снова загрузить на сайт.
После того, как вы решите, что проблема решена, вернитесь в Google Search Console, где вы сможете повторно подтвердить сайт, нажав кнопку «Подтвердить». Хотя в некоторых случаях это может работать быстрее, обратите внимание, что Google обычно требуется не менее 28 дней, чтобы убедиться, что все работает нормально.
Мобильное удобство
Чуть ниже Core Web Vitals в Google Search Console вы найдете параметр Mobile Usability. Этот простой инструмент постоянно отслеживает ваш мобильный сайт, поэтому он быстро отображает любые найденные ошибки.
Если возникнут какие-либо проблемы, Google перечислит здесь проблемную страницу и покажет более подробную информацию о проблеме.
Наиболее распространенные проблемы (и наиболее важные для устранения) будут перечислены вверху, поэтому начинайте работать сверху вниз. Не торопитесь и проверьте все перечисленные ошибки. Каждая проблема будет сопровождаться объяснением от Google, чтобы вы могли узнать о ней больше и, что более важно, узнать, как ее исправить.
Подробнее об удобстве использования мобильных устройств можно узнать в службе поддержки Google.
Оптимизация JavaScript и CSS
Наряду с большими и неоптимизированными изображениями, CSS и JavaScript являются одними из наиболее распространенных проблем, влияющих на скорость работы мобильного сайта. Хотя код позволит использовать некоторые необычные функции на вашем настольном сайте, если эта конкретная функция не имеет решающего значения, я настоятельно рекомендую не загружать код для мобильных пользователей.
Если вы новичок, возможно, вы уже застряли, но не беспокойтесь. Вам действительно не нужно знать, как программировать или даже распознавать JavaScript и CSS, чтобы удалить ненужные файлы.
- Установите Asset CleanUp, бесплатный плагин для WordPress.
- Включите тестовый режим.
- Просмотрите JavaScript и CSS, которые в данный момент загружаются на вашем сайте.
- Отключите код, который, по вашему мнению, вам не нужен.
Поскольку вы находитесь в тестовом режиме, вы можете свободно экспериментировать. Если вы отключили определенный файл, а на сайте что-то больше не работает, просто включите его снова. С другой стороны, если во внешнем виде сайта нет изменений, вы можете оставить эту функцию отключенной и гордиться собой, потому что вы только что ускорили свой мобильный сайт!
Несмотря на наличие тестового режима, будьте осторожны при использовании этого плагина. Прежде чем вносить какие-либо изменения (и даже перед установкой плагина), убедитесь, что у вас есть свежая резервная копия вашего сайта.
Никогда не знаешь, что может случиться, и хорошо быть готовым.
Еще один способ улучшить JavaScript и CSS — минимизировать код. Что это значит? Вместо того, чтобы иметь большие файлы, в которых хранится весь код, необходимый для бесперебойной работы вашего веб-сайта, минификация — это процесс, который объединяет весь код и сжимает его в файл наименьшего возможного размера. В то время как небольшие сайты могут не увидеть большого эффекта от минификации, более крупные сайты могут значительно улучшить свою скорость.
Не волнуйтесь! Опять же, вам не нужно понимать, как работает код, чтобы минимизировать его. Существуют бесплатные плагины, которые быстро решат вашу проблему, поэтому я предлагаю проверить плагин Fast Velocity Minify.
Продолжайте тестирование
Вы еще не закончили. Наличие хорошего мобильного веб-сайта означает постоянное тестирование. Продолжайте открывать свой веб-сайт на своем мобильном телефоне или планшете и не забывайте спрашивать окружающих, что они думают.
Если у вас много трафика, вы даже можете перейти к следующему шагу, опросив людей об их опыте работы с мобильным сайтом.
Часто задаваемые вопросы
В чем разница между веб-сайтом и мобильным веб-сайтом?
Доступ к классическим веб-сайтам обычно осуществляется через настольные и портативные компьютеры. Эти веб-сайты обычно больше, потому что доступ к ним осуществляется с больших экранов, где пользователи взаимодействуют с ними с помощью клавиатуры и мыши. Мобильные веб-сайты — это дубликаты оригинального веб-сайта с меньшим количеством элементов или адаптивные эквиваленты, которые просто хорошо адаптируются к смартфонам и планшетам.
Как проверить, готов ли мой сайт для мобильных устройств?
Первое, что вы можете сделать, это открыть свой сайт на мобильном телефоне или планшете. Он должен выглядеть иначе, чем настольная версия, но по-прежнему иметь доступ к большинству элементов.
После этого вы должны пройти тест Google для мобильных устройств, а также тест GTmetrix, который предоставит вам более подробную техническую информацию о вашем веб-сайте.
Приложение лучше мобильного сайта?
Мобильные приложения — это более сложные версии мобильных веб-сайтов. Обычно это означает более быструю загрузку, больше настроек и лучший пользовательский интерфейс. Однако создание приложений требует больше времени и денег и обычно имеет смысл только для веб-сайтов с большим количеством посетителей, которые могут извлечь из этого пользу.
Заключение
Если вы запускаете сайт в 2022 году, вы просто не можете забыть о мобильных пользователях. В последние годы многие веб-дизайнеры и разработчики даже начали отдавать предпочтение мобильным пользователям. Будущее находится в руках мобильных пользователей, поэтому убедитесь, что вы следуете тенденциям и всегда имеете оптимизированный и удобный для мобильных устройств веб-сайт, независимо от того, на какой платформе вы работаете.