Правильный адаптив сайта сделанного на вебфлоу. Курс сайт под ключ. Урок #10

На мобильных сайт должен выглядеть компактно и максимально информативно, нужно учитывать особенности маленьких экранов и сценарии использования Ссылка на материалы с видео: artstranger.ru/webflow/ Адаптив нужно делать поэтапно, от большего экрана к меньшему. То-есть сначала нужно полное одобрение ПК версии, что бы потом не вносить правки 4 раза)) когда версия для компьютеров заказчика устраивает, тогда делаем планшетную версию, далее для телефонов в горизонтальном положении и для телефонов в вертикальном положении. При этом нужно понимать, что делая изменения на версии для планшетов, ори будут применятся и к телефонным версиям, а вот если внести изменения на мобильной версии, то только там они и применятся, не влияя на версии что выше (планшетную и ПК). При работе над адаптивом, нужно еще учитывать, что если вносить изменения в структурную составляющую (например удалить блок) или менять контент (текст и картинки) то они сменятся и на ПК версии. Если вам нужно что бы на ПК показывалось одно, а на мобильных другое, то нужно делать 2 версии блока, одна будет скрыта на ПК и отображаться на мобильных, а вторая наоборот будет показана на компьютерной версии но скрыта на планшетах и телефонах. Если с этим что-то не понятно, то пишите в комментариях, я сниму подробный ролик на эту тему. Это видеоролик, с плейлиста по курсу разработки сайта под ключ • Трелло для фрилансера, ускоряем свою ... ••••••••••••••••••••••••••••••• — Полезные штуки для webflow freelance-blog.com/webflow/ — Индивидуальное обучение freelance-blog.com/study/ ••••••••••••••••••••••••••••••• БЕСПЛАТНЫЕ курсы по webflow: 👉 • Базовый (для новичка) • Трелло для фрилансера, ускоряем свою ... 👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портфолио в webflow 👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по разработке сайта с... 👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, бесплатный курс по ве... ••••••••••••••••••••••••••••••• Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас — тогда я способен вам помочь! freelance-blog.com/study/ Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас. ••••••••••••••••••••••••••••••• Моя почта — artstrangers@gmail.com Телеграм @artstranger ••••••••••••••••••••••••••••••• 👉 • Портфолио — freelance-blog.com/ 👉 • Инстаграм — www.instagram.com/artstranger... 👉 • Бесплатные плюшки — freelance-blog.com/webflow/ 👉 • Материалы для уроков — freelance-blog.webflow.io/ 👉 • Индивидуальное обучение — freelance-blog.com/study/ ••••••••••••••••••••••••••••••• Таймкоды: 00:00 | Подготовка к адаптиву 01:33 | Начинаем со всплывающей формы 06:48 | Делаем адаптив для меню 17:57 | Проставляем ссылки в меню 21:22 | О том как себя ведет грид на адаптиве 22:07 | Адаптивим сайта под планшеты 45:35 | Адаптив версии для телефона в горизонтальном положении 01:07:07 | Версии под телефоны в вертикальном положении 01:28:00 | Проверяем результат 01:30:40 | Заключение