ADAPTIVE WED DESIGN & WEBSITE: theory and analysis of typical situations in practice
2019 ж. 27 Жел.
42 706 Рет қаралды
The game "Javascripton 2020" - tml.io/xc9n9
From December 17 to December 31, the participants are gathering, and with the chiming clock, the next stage will open, which will last until January 6. In the end, all participants will receive access to interactive courses and intensive discounts.
ADAPTIVE WED DESIGN Cheat Sheet - tpverstak.ru/adaptive-cheatsheet/
__
Ask a question to the front-end for free - frontendhelp.me/en
__
Website - tpverstak.ru
VK - vk.com/tpverstak
Instagram - / annblok and / tpverstak
Telegram - t.me/tpverstak
Telegram Chat - t.me/tpverstakchat
__
Courses and marathons - tpverstak.ru/courses/
Reviews - vk.com/topic-149247708_35960122
Спасибо, что так подробно провели разбор типичных ситуаций на практике.
Спасибо огромное за видео, теперь для меня решены многие мои проблемы в вёрстке.
Анечка умничка. Как всегда, все просто и доходчиво. Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме. А то автофокус иногда не успевает отработать))
Интересный ролик, сразу видно мастера своего дела. Просто супер!
Очень интересный ролик. Благодаря Вам я узнал массу полезной информации.
Да, обзор очень полезный и нужный, много необходимой информации предоставили, которую можно использовать на практике.
Большое спасибо за видео, и отдельное спасибо за шпаргалку :)
Отличное видео, очень хороший разбор, будет полезным ;)
Большое вам спасибо за видео и ваши ценные советы! Желаю вам дальнейших успехов на ютьюб и в жизни! От меня ловите лайк.
Привет:) Спасибо за видео! С наступающим!) Достижения новых высот в новом году💪🏻
Спасибо большое 😊
Спасибо за видео. Очень актуально для меня
Анна, расскажите пожалуйста как правильно вставлять картинки чтобы при адаптиве они не ломались и выглядели хорошо! Спасибо!
Обзор очень полезный и нужный, много хорошей информации.
Аннушка, спасибо, будь счастлива.
Спасибо за видео! ☺️
Отличное видео, очень хороший разбор
Спасибо за видео, очень помогло)
На мой взгляд как раз таки адаптивность страницы влияет на количество привлекаемой аудитории Если ты зашел на сайт с необходимой информацией, а он просто не удобен в навигации, то ты уйдешь с него очень быстро.
До этого видео у меня были вопросы по media-запросам, не очень была понятна разница между mobile first и desktop first. Оказалось, что не так и сложно. Спасибо, Анна.
❤️
как приятно смотреть на красивую умную девушку , лайк поставил однозначно, и спасибо за труды=)
Очень круто!! Спасибо :)
Спасибо за видео!
Как всегда, все просто и доходчиво. Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме. А то автофокус иногда не успевает отработать...
Понятно и детально спасибо
Спасибо за интересные видосы. Очень помогают, особенно если ты только начинающий верстак))
Вообще умница! Вот это я понимаю видео!
Интересно было узнать, как работать с адаптивностью сайта. Спасибо за Ваши советы!
Однозначно-лукас!
спасиба за отличную и полезную информацию!!!
Адаптивный дизайн довольно молодая «тема» - радует что Майл.ру начали её использовать, т.к до недавнего времени вся вёрстка проектов угнетала своей несовершенностью и отсутствием доступности. Всё здорово , так держать - это верное направление!
Да вы сами тут такой интенсив устроили что после вас хоть сразу в бой. Спасибо за видео
С Наступающим Новым Годом.
все ясно спасибо!
Анна, а как можно менять текст при переходе из одной версии в другую?
спасибо очень интересная инфа
лучшее обьяснение
Анна, а подскажите пожалуйста сервисы или инструменты для теста сайта под разными андроидами от 5 до 9 и разными мобильными браузерами. Устанавливать на ПК кучу эмуляторов неохота. Проблема в том что ВордПресс премиум темы с енванто, ведут себя по-разному, особенно на стоковых браузерах, приходится править вёрстку под старые андроиды. Благо мобильный хром отображает на всех версиях андроида одинаково.
browserstack.com
Вроде все понятно, все делаешь, как в видео, которые пересмотрел уже не одно. Но присутствует одно НО - есть у меня страничка с навигационной панелью, которая обвернута в блок и имеет фон, скажем зеленого цвета. Задаю параметры, начинаю сжимать, блоки постепенно и равномерно располагаются на странице. Но начиная с 600 пикселей навигационное меню располагается равномерно по ширине экрана, а сам блок, в котором оно находится, становится меньше ширины экрана, т.е справа начинает проявляться длинная полоса фона body. И чем сильнее мы начинаем сужать экран, тем сильнее она начинает проявляться и по итогу при 320 пикселях происходит следующее - Вкладки из навигационного меню расположены равномерно по ширине экрана, а вот сам блок, в который они завернуты почему-то по ширине занимает только половину ширины экрана, т.е 160px. И как я писал ранее, этот блок имеет фон, что по итогу имеет весьма странный вид, пол экрана фона от навигационного блока, пол экрана фона от body, а по середине навигационные вкладки, которые вышли за рамки своего блока. И вот вопрос - почему вкладки из навигации равномерно растягиваются по заданной ширине, а блок, в котором они находятся, какого-то черта принимает только половину ширины.
Спасибо!
А какой лучше всего использовать Mobile first или Desktop first ?
А как получается такое что делаешь адаптив,берешь конкретные значение например из Boostsrap 1200,992 и тд.. когда в media ставишь тот же 992 ничего не происходит,а при 991 уже начинаются изменения? Хотя даже если повторяешь верстку за кем то и всегда такая проблема,точные значения не работают только на 1пх меньше?
Thank you
Спасибо детка !
пишу из будущего, где всё делается наоборот сначала я зарегистрировался на участие в новогодней битве 2021 от htmlAcademy, а потом нашёл твоё видео, которое было сделано год назад, а оно, как видишь, всё ещё актуально
Благодарю за видео. Вопрос такой: как делать адаптивность удобнее, после того когда сверстал всю страницу с макета, или может сразу, после создания каждого блока?
Я делаю адаптив только после верстки всей страницы
Я думаю так, как тебе удобнее. Попробуй так и так, и определись.
я делаю после каждого блока его адаптивность
Подскажите, пожалуйста, что за шрифт использовался при объяснении структуры media запроса?
Geometria
Анна добрый вечер. Не знаю, связано ли это с покупкой нового мака или близким расположение петлички, но очень сильно слышны удары по клавиатуре. Пожалуйста, можно не надо?
Добрый вечер. Ок, учту в следующих видео 👍
малопонятно, и у телефона и у монитора и у планшета идет одно и тоже FullHD расширение, и как быть в таком случае?
А как ты собираешь пункты меню в бургер-меню для моб. устройств? С помощью Js?
Собирается через css, а через Js делается открытие меню при нажатии на кнопку(ну или с помощью чекбокса)
Привет. Слышал как то, что скоро ИИ будет верстать сайтики. Готовы ли вы к этому? Если да, то как? 🤔
Привет, уже есть сервисы, которые делают это по фото и прочему, но до сих пор нет совершенного продукта, тк есть вещи, которые способен решить только человек)
Типичный Верстальщик • Анна Блок , да я слышал и про сервисы, и про недоработку данной ИИ. Я не совсем правильно поставил вопрос. Готовы ли вы к тому, когда ИИ, по данной теме, доведут до ума? Если да, то как? 🤔
Aleksejs Aleksejevs человек без работы никогда не останется)
Пока заказчики не научатся чётко,подробно и правильно ставить ТЗ этого не произойдёт.А этому они не научатся никогда))
Подскажите пожалуйста, как на codepen сделать так же, чтобы окно просмотра было сбоку?
Надо сверху нажать на Change View и выбрать режим
@@annblok_webdev У меня слепота оказывается -__- Спасибо)
nice!
А что делать с широкими блоками?
Спасибо! А ссылка на codepen есть?
Случайно закрыла браузер и забыла сохранить, но постараюсь восстановить материал из видео 😄
@@annblok_webdev Спасибо! С Наступающим Вас новым годом! Спасибо за Ваш труд!:)
Спасибо, вас тоже 😊
Блин, в чем вы это делаете? Мне очень понравилось когда сразу хтмл сиэсэс и сразу вид страницы!
Сайт Codepen
@@annblok_webdev спасибо, надо ещё среди линуховских редакторов посмотреть. Я думаю там найдётся достойный софт для разработчика.
самое сложное в адаптивке у меня было это, расчёт rem и em все остольное изи
Об этом я кстати рассказывала в видео про единицы измерения kzhead.info/sun/l7Szn6Z8aYxsa3k/bejne.html 😄 Однако это проще, чем перераспределять все значения px, особенно если много блоков и страниц на сайте
Было бы интересно узнать как верстать в mobile first
Возможно, будет в формате стрима
@@annblok_webdev а запись этого стрима сохранишь для нас? :)
Скорее да, чем нет
Чего-то сколько ни смортю про адаптивность - никто не объясняет что будет, если у мобильника высокое разрешение экрана. Не размер, а плотность пикселей. Например при ширине от 1024 то уже считается что у пользователя в руках ноутбук.. Но у того же айфона разрешение 2532 × 1170, при небольшом экране. И что ему отгрузится??? версия сайта для ноута, ? Опорная точка в 1024 - и пользователю отгрузится версия для ноутбука???!! Хоть бы кто прояснил этот вопрос...
Необычно видеть такую умную девушку в этой отрасли.
Как то мне прислали адаптивный макет без вертикального скрола. И я прописывал медиа выражения на height. Так вот это очень сложно. Я совсем запутался. А когда начали прописывать настоящий контент то все поехало. Это не реально адаптировать. В макете должен быть хоть один скрол. Чтобы мы могли увеличить блоки если что.
Отсутствие скролла для сайта, который должен листаться как слайдер?
@@annblok_webdev Да. Листается как страницы в книге. Но при этом должен быть адптивный.. Множество разных элементов.
О, знаю такое. Тот еще ад)) Такого плана сайт был моей первой серьезной работой, без опыта как такового было не просто и в итоге мы решили сделать обычный человеческий лендинг)
АВЕ тебе ^_^
It-принцесса
OCHEN INTERESNI KONTENT ZASLUJIVAET MILION PROSMOTROV.
Ходят слухи, что из-за того, что у мобильных устройств ресурсов меньше, лучше делать вёрстку mobile first, так как она менее ресурсоёмкая для данных устройств.
Не совсем слухи, скорее очевидный факт) Но скорость интернета сейчас порой не сильно уступает скорости Wi-Fi, как и мощности по сравнению с ПК, поэтому каждый проект нужно рассматривать индивидуально.
@@annblok_webdev С батареей только печалька.
в mobile first узнали как верстать
почему то смотря на девушку не могу уловить смысл ее разговора.очень красивая девушка.
во первых девушка очень красивая и голубые глаза так и притягивают к себе, поэтому пять минут видео я просто смотрел на нее, а не слушал... во вторых видео ролик очень подробный и важный для веб мастеров, но я не настолько профи
Спасибо!