Разработка мобильных сайтов давно стала необходимой в связи с тем, что люди все чаще пользуются смартфонами для поиска и просмотра информации. Поэтому важно, что контент вашего веб-ресурса одинаково хорошо отображался не только на обычном компьютере, но и на планшете или смартфоне.
Большинство современных компаний при создании своего сайта отдают предпочтение мобильным технологиям, с тем, чтобы убедиться, что их ресурс идеально работает на всех мобильных устройствах (планшетах и смартфонах).
В этой публикации - рекомендации от веб-студии АВАНЗЕТ по оптимизации контента, которые необходимо применять при разработке мобильных сайтов. Мы постарались максимально доступно описать особенности веб-разработки для мобильных сайтов. Ведь основная задача, чтобы весь контент: графика, тексты, формы обратной связи должны корректно отображаться и хорошо визуально восприниматься на всех гаджетах.
Краткие рекомендации по оптимизации и применению CSS
При разработке необходимо адаптировать ваш сайт для просмотра на небольших экранах. Так как все более число пользователей будут переходить на сайт именно при помощи мобильных устройств. Это возможно тремя различными способами:
-
Классическая разработка веб-сайта с адаптивным дизайном.
В этом случае на различных устройствах будут открываться одни и те же страницы с одинаковыми URL. При этом HTML код не меняется. Адаптация веб-страницы под определенную платформу обеспечивается за счет таблицы стилей (CSS).
Для лучшего продвижения Google рекомендует применять именно этот способ. Так как разработка мобильных сайтов и магазинов становится все более популярной в сфере электронной коммерции (e-commers).
-
Использование отдельного HTML кода для разных типов устройств
Это называется динамической версткой. При такой разработке, сайт будет задействовать одинаковый набор URL на любых платформах, но при этом мобильным устройствам и обычным компьютерам будет динамически предаваться различные стили CSS и HTML код.
-
Контент для разных типов устройств размещается на разных сайтах.
Этот способ представления контента очень трудоемкий, так как возникает необходимость обновления и продвижения одновременно двух ресурсов. Для малого и среднего бизнеса этот подход является наименее эффективным и выгодным, потому создание и поддержку второго мобильного сайта уходит много сил и преимущества этого подхода спорны.
Примеры мобильных сайтов, которые разработаны в веб-студии АВАНЗЕТ
Корпоративные мобильные сайты
Мобильные интернет магазины
- Разработка мобильного сайта магазина Пищевое золото г. Москва
- Разработка мобильного сайта магазина NipponDom г. Токио
- Разработка мобильного сайта магазина шин и дисков ст. Каневская
- Разработка мобильного сайта магазина Мария.Мода г. Москва
Адаптивный веб-дизайн
При применении технологии адаптивного веб-дизайна применяются медиа запросы CSS3. В этом случае на все устройства передается одинаковый HTML код, но отображение страницы меняется при помощи различных стилей CSS, которые выбираются автоматически при помощи медиа-запросов.
Основные преимущества адаптивного дизайна:
Контент вашего сайта поисковые роботы обнаруживают более оперативно, так как им не нужно сканировать страницы сайта различными роботами, чтобы найти, различить и проиндексировать содержимое для разных типов устройств.
Поисковые системы лучше ранжируют адаптивные сайты. Пользователям смартфонов, планшетов и телефонов, скорее всего, будут показаны сайты с адаптивным дизайном, динамической версткой или же мобильная версия сайта.
Полезная информация, если вы еще не решили где заказать мобильный сайт:
Вы сомневаетесь какой сайт вам нужен: мобильный или адаптивный?
Тогда не теряйте время, напишите нам прямо сейчас!
Оставить заявкуПрименение динамической верстки для оптимизации контента при разработке сайта
Довольно часто бывает невозможным применение адаптивного дизайна. В этом случае веб-сайт может содержать HTML код, который предназначен для различных устройств и находится на одном URL.
Тогда браузер автоматически определяет тип устройства и пользователю показывается контент, предназначенный для этого гаджета. Это динамический показ. Или происходит подстановка URL, например, www.example.com на m.example.com
Если при разработке сайта вы будет применяться динамический показ, мы рекомендуем использовать заголовок Vary для HTTP протокола. Этот заголовок сообщает прокси-серверам о необходимости кэшировать обе версии ресурса
Это решение дает возможность алгоритмам поисковиков учитывать, что контент видоизменяется в зависимости от устройства. И передает параметры по которым необходимо отображать запрашиваемую страницу.
Рекомендации по оптимизации контента при размещении на разных сайтах
Существует несколько вариантов, как можно реализовать отдельную конфигурацию при создании сайта для мобильных устройств. Мы рекомендуем при помощи комментариев указывать алгоритмам Google то, что страницы вашего ресурса эквивалентны для обычного компьютера и мобильных устройств.
Т.е. необходимо описать взаимосвязь между версиями контента для разных устройств, которые должны восприниматься как идентичные, но для различных платформ. При помощи этих комментариев поисковики обнаружат содержание для смартфонов.
Веб студия АВАНЗЕТ специализируется на разработке адаптивных сайтов и интернет магазинов. Мы так же оказываем услуги по разработке мобильных сайтов на Joomla и WordPress. В том случае, если у вас уже есть веб-ресурс на одной из этих CMS, обращайтесь к нам, поможем создать мобильную версию сайта.
Вам нужна разработка мобильного сайта, чтобы привлечь максимум клиентов, но остались вопросы, позвоните нам чтобы получить консультацию, или заполните форму, чтобы заказать мобильный сайт. Желаем успеха и процветания вашему бизнесу!
25.08.2018
