Дизайн и конверсия

Как создать адаптивный сайт?

Марина, Киров 334 просмотров

Заказала лендинг для студии эпиляции у фрилансера. На компьютере смотрится нормально, а с телефона кнопки сдвинуты и текст наезжает на фото. Просила адаптивную вёрстку, мне ответили "сделано", но по факту не работает. Как вообще должен выглядеть по-настоящему адаптивный сайт?

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

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

Проверить легко без всякого инструмента: откройте сайт на телефоне и медленно поворачивайте его из вертикального положения в горизонтальное и обратно. У рабочей адаптивной вёрстки ничего не съезжает и не наезжает друг на друга ни на одном шаге. Второй тест - через инструменты разработчика в браузере (F12, значок телефона вверху): там можно за минуту проверить сразу несколько размеров экрана, от старого iPhone SE до широкого планшета.

Если фрилансер сдал вёрстку с наездами текста на телефоне, дело почти всегда в том, что блоки собирали фиксированной шириной в пикселях вместо процентов и гибкой сетки, а проверяли только на своём экране. Просите переделать конкретные блоки с указанием, что именно должно измениться, а не общее "поправьте адаптив" - так фрилансер понимает, что чинить, и не проверяет только заглавный экран. Для себя я всегда собираю макет сразу с проверкой на трёх ширинах - 375, 768 и 1440 пикселей - до сдачи, а не после жалобы клиента.

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

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок