Адаптированный сайт – это сайт, адаптированный под мобильные устройства

Что такое адаптированный сайт? В 2016 г. этот тренд стал реальной необходимостью. Сайт, адаптированный под мобильные устройства необходим для того, чтобы захватить примерно 40% мобильных пользователей.

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

Одновременно с запуском алгоритма Mobile Friendly в своем блоге Google публикует FAQ самые важные тезисы, на которые нужно обратить внимание:

• Алгоритм в большей степени будет влиять на поисковую выдачу на мобильных устройствах. Ранжирование сайтов для десктопов это обновление пока не коснется.
• Алгоритм Mobile Friendly будет влиять на некоторые страницы (скорее всего по высоко конкурентным запросам), но не на сайт в целиком.
• Узнать, насколько хорошо оптимизирован ваш сайт для мобильных устройств, можно пройти тест.

Протестируйте ваш сайт в search.google

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

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

• Если существующий сайт многостраничный, и он занимает высокие позиции в поисковой выдаче, то для того, чтобы не потерять позиции – лучше создавать отдельную мобильную версию сайта.
• Если сайт активно не продвигался и ему как говорится «не чего терять», в этом случае мы рекомендуем делать новый сайт, адаптированный под мобильные устройства.

Первый вариант имеет как преимущества, так и недостатки: с одной стороны не теряется место в поисковой выдаче, с другой создание мобильной версии сайта не исключает необходимость оптимизации основной версии для всех видов мобильных устройств.

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

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

Требования к адаптивной разработке:

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

Возможно вас заинтересуют эти публикации по теме современного веб дизайна

• 7 тенденций веб-дизайна 2015: создание интерактивного сайта
• Дизайн веб сайта в стиле Flat Design, или чем хорош плоский дизайн
• Что такое адаптивный сайт? Основные принципы создания адаптивного дизайна

Разработка адаптивного дизайна – отличия от отзывчивого веб-дизайна

При разработке сайта, адаптированного под мобильные устройства применяют две технологии: «Отзывчивый веб-дизайн» в переводе Responsive Web Design и «Адаптивный веб-дизайн» в переводе Adaptive Web Design.

Отзывчивый дизайн является частью Адаптивного дизайна. Когда речь идет про Отзывчивый дизайн, то имеется ввиду «Резиновый» дизайн.

• Для его реализации применяются медиа-запросы, которые позволяют с помощью CSS изменять внешний вид страницы при различных размерах экрана пользователя и гибкие изображения.
• Такой дизайн предполагает применение «резинового» дизайн макета, в котором ширина, поля и отступы заданы в процентах.

«Адаптивный веб-дизайн» содержит в себе намного больше, чем «резиновый» дизайн. «Адаптивный макет» - это дизайн макет, который сделан путем сочетания большого количества фиксированных размеров по горизонтали (ширины). Необходимо для каждого размера экрана использовать свой CSS (стилевые правила), которые жестко задают фиксированный размер элементов (в пикселях, а не в процентах).

13.11.2017