Адаптивные сайты подстраиваются под размеры экрана любых устройств, от больших компьютеров до смартфонов. Пример немецкого сайта демонстрирует идеальную адаптивность: на экране сайт отображается корректно, без вылезающих элементов. При увеличении масштаба (например, до 150%, 200% и 500% в Google Chrome) сайт адаптируется, элементы перестраиваются, обеспечивая комфортное отображение. К примеру, большая статья и две маленьких сбоку при увеличении масштаба трансформируются в статьи одинакового размера, а при максимальном — отображаются по одной в строке. Это удобно для мобильных телефонов и планшетов, хотя горизонтальная полоса прокрутки может быть неудобной, но на мобильных устройствах этот недостаток компенсируется вертикальной прокруткой.
Важность адаптивности сайта
Google повышает в поисковой выдаче сайты с адаптивным дизайном или мобильной версией. Адаптивный дизайн и мобильная версия — это не одно и то же.
Адаптивный дизайн
Адаптивный дизайн — это один сайт, подстраивающийся под размер экрана. На большом экране он выглядит как полноценный сайт, на смартфоне — как уменьшенная версия, но это тот же сайт.
Мобильная версия сайта
Мобильная версия сайта — это отдельный сайт, часто на поддомене (например, m.google.com.ua для google.com.ua). Он оптимизирован для мобильных устройств: большие кнопки, маленькие картинки для быстрой загрузки и т.д. Обычно в мобильной версии есть кнопка перехода на полную версию. В адаптивном дизайне такой кнопки нет, поскольку это один и тот же сайт.
Google учитывает адаптивность сайта при ранжировании. Сайт с адаптивным дизайном имеет больше шансов занять высокие позиции в поисковой выдаче, особенно при поиске с мобильного устройства. При поиске с мобильного, Google может указывать наличие или отсутствие мобильной версии, влияя на выбор пользователя.
Наш курс: что мы будем делать
В этом курсе мы создадим простой веб-сайт без PHP, с минимальным количеством JavaScript (только для меню). Сайт будет состоять из одной страницы, адаптирующейся под разные размеры экрана. Основное внимание будет уделено реализации адаптивности. В этом уроке начнём с создания веб-сайта, откладывая детали реализации на второй урок.
В этом уроке мы заложили основу для дальнейшей работы. В следующем уроке мы приступим к созданию веб-сайта и реализации его адаптивности.