Адаптивная вёрстка

Три разные вещи, которые называют одним словом

• Адаптивная вёрстка. Один сайт и один адрес. Разметка перестраивается под ширину экрана: меню сворачивается, колонки становятся друг под другом, таблицы получают прокрутку, картинки берутся под размер. Содержимое одно и то же.
• Отдельная мобильная версия. Второй сайт со своим адресом. Работает, пока кто-то поддерживает оба: как только правку внесли в один, версии расходятся, и на телефоне посетитель видит прошлогоднюю цену.
• Мобильное приложение. Отдельный продукт, который ставится из магазина приложений. К сайту отношения не имеет и стоит других денег.

Мы делаем первое. Второе не делаем сознательно, третье — это другая задача, и если она у вас есть, честнее обсуждать её отдельно.

Что это значит на практике

Адаптивность — не переключатель, а свойство каждого экрана. В наших темах она сделана на уровне общей основы: правила перестроения живут в базовых стилях сайта, а не дописываются к каждой странице отдельно. Поэтому новая страница, собранная в панели управления, получает адаптивность автоматически — её не нужно «делать адаптивной» отдельной работой.

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

Что проверить при приёмке — у любого подрядчика

Это короткий список, по которому можно проверить работу самому, не разбираясь в вёрстке:

• откройте сайт на своём телефоне и попробуйте отправить заявку — форма и есть то место, где адаптивность либо есть, либо её нет;
• поверните телефон горизонтально: страница не должна ломаться;
• найдите на сайте самую сложную страницу — обычно это таблица цен или каталог с фильтрами — и посмотрите её. Простые страницы адаптивны почти всегда, ломается сложное;
• проверьте на планшете, если он есть: промежуточная ширина — самое частое место, где вёрстку не смотрели.

Про скорость — отдельно и честно

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

Куда дальше

Адаптивность входит в любой наш сайт по умолчанию и отдельной строкой в смете не стоит — от лендинга до интернет-магазина. Общий список работ и цен — на странице услуг.