ADAPTIVE WED DESIGN & WEBSITE: theory and analysis of typical situations in practice

[@luxarmiger5729]

Аннушка, спасибо, будь счастлива.

[@ПашаЧернов-ф7э]

Вроде все понятно, все делаешь, как в видео, которые пересмотрел уже не одно. Но присутствует одно НО - есть у меня страничка с навигационной панелью, которая обвернута в блок и имеет фон, скажем зеленого цвета. Задаю параметры, начинаю сжимать, блоки постепенно и равномерно располагаются на странице. Но начиная с 600 пикселей навигационное меню располагается равномерно по ширине экрана, а сам блок, в котором оно находится, становится меньше ширины экрана, т.е справа начинает проявляться длинная полоса фона body. И чем сильнее мы начинаем сужать экран, тем сильнее она начинает проявляться и по итогу при 320 пикселях происходит следующее - Вкладки из навигационного меню расположены равномерно по ширине экрана, а вот сам блок, в который они завернуты почему-то по ширине занимает только половину ширины экрана, т.е 160px. И как я писал ранее, этот блок имеет фон, что по итогу имеет весьма странный вид, пол экрана фона от навигационного блока, пол экрана фона от body, а по середине навигационные вкладки, которые вышли за рамки своего блока. И вот вопрос - почему вкладки из навигации равномерно растягиваются по заданной ширине, а блок, в котором они находятся, какого-то черта принимает только половину ширины.

[@TamaraNikolaevna]

До этого видео у меня были вопросы по media-запросам, не очень была понятна разница между mobile first и desktop first. Оказалось, что не так и сложно. Спасибо, Анна.

[@annblok_webdev]

❤️

[@nefedoff3679]

Спасибо огромное за видео, теперь для меня решены многие мои проблемы в вёрстке.

[@dedmazay74]

Анечка умничка. Как всегда, все просто и доходчиво. Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме. А то автофокус иногда не успевает отработать))

[@ЕвгешаГуденко]

Адаптивный дизайн довольно молодая «тема» - радует что Майл.ру начали её использовать, т.к до недавнего времени вся вёрстка проектов угнетала своей несовершенностью и отсутствием доступности. Всё здорово , так держать - это верное направление!

[@СергейЯстребцев-и3р]

На мой взгляд как раз таки адаптивность страницы влияет на количество привлекаемой аудитории Если ты зашел на сайт с необходимой информацией, а он просто не удобен в навигации, то ты уйдешь с него очень быстро.

[@tawt6260]

как приятно смотреть на красивую умную девушку , лайк поставил однозначно, и спасибо за труды=)

[@AFROsamuraist]

Анна, расскажите пожалуйста как правильно вставлять картинки чтобы при адаптиве они не ломались и выглядели хорошо! Спасибо!

[@НатальяБондарева-с7т]

Спасибо, что так подробно провели разбор типичных ситуаций на практике.

[@ВладимирЗлатомрезов]

Да вы сами тут такой интенсив устроили что после вас хоть сразу в бой. Спасибо за видео

[@dmitrybaimukhametov9084]

Интересный ролик, сразу видно мастера своего дела. Просто супер!

[@RuslanBereza]

Как всегда, все просто и доходчиво. Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме. А то автофокус иногда не успевает отработать...

[@valera010rgatc]

пишу из будущего, где всё делается наоборот сначала я зарегистрировался на участие в новогодней битве 2021 от htmlAcademy, а потом нашёл твоё видео, которое было сделано год назад, а оно, как видишь, всё ещё актуально

[@ИринаП-т9з]

Да, обзор очень полезный и нужный, много необходимой информации предоставили, которую можно использовать на практике.

[@ВладимирЩербаков-ш9р]

Очень интересный ролик. Благодаря Вам я узнал массу полезной информации.

[@ИннаОдинцова-д5ш]

Интересно было узнать, как работать с адаптивностью сайта. Спасибо за Ваши советы!

[@van777ok3]

Привет:) Спасибо за видео! С наступающим!) Достижения новых высот в новом году💪🏻

[@annblok_webdev]

Спасибо большое 😊

[@d.travina]

Большое вам спасибо за видео и ваши ценные советы! Желаю вам дальнейших успехов на ютьюб и в жизни! От меня ловите лайк.

[@Natik1865]

С Наступающим Новым Годом.

[@mikhailvidil122]

Спасибо за видео. Очень актуально для меня

[@Сома-р2х]

Спасибо за интересные видосы. Очень помогают, особенно если ты только начинающий верстак))

[@Fovaxus]

Большое спасибо за видео, и отдельное спасибо за шпаргалку :)

[@Lubov_Golub]

Обзор очень полезный и нужный, много хорошей информации.

[@Terentich83]

Однозначно-лукас!

[@ВикторАлексеевич-т3ч]

Отличное видео, очень хороший разбор, будет полезным ;)

[@Орбита-х5б]

Спасибо за видео, очень помогло)

[@drino955jug3]

Спасибо за видео! ☺️

[@ВладимирЗлатомрезов]

Вообще умница! Вот это я понимаю видео!

[@addwonyou7195]

А какой лучше всего использовать Mobile first или Desktop first ?

[@Nazar5545]

Очень круто!! Спасибо :)

[@tyrykin]

лучшее обьяснение

[@Галина-к5ъ]

Отличное видео, очень хороший разбор

[@MsDiese1]

Спасибо за видео!

[@ruspoli4487]

Благодарю за видео. Вопрос такой: как делать адаптивность удобнее, после того когда сверстал всю страницу с макета, или может сразу, после создания каждого блока?

[@annblok_webdev]

Я делаю адаптив только после верстки всей страницы

[@ИмяФамилия-э4ф7в]

Я думаю так, как тебе удобнее. Попробуй так и так, и определись.

[@BLGamesChannel]

я делаю после каждого блока его адаптивность

[@Djamalstudio]

Понятно и детально спасибо

[@тонятоня-г5с]

Необычно видеть такую умную девушку в этой отрасли.

[@ИванЖуков-е9й]

спасиба за отличную и полезную информацию!!!

[@12389441]

Анна, а подскажите пожалуйста сервисы или инструменты для теста сайта под разными андроидами от 5 до 9 и разными мобильными браузерами. Устанавливать на ПК кучу эмуляторов неохота. Проблема в том что ВордПресс премиум темы с енванто, ведут себя по-разному, особенно на стоковых браузерах, приходится править вёрстку под старые андроиды. Благо мобильный хром отображает на всех версиях андроида одинаково.

[@erjan816]

browserstack.com

[@aleksejsaleksejevs7818]

Привет. Слышал как то, что скоро ИИ будет верстать сайтики. Готовы ли вы к этому? Если да, то как? 🤔

[@annblok_webdev]

Привет, уже есть сервисы, которые делают это по фото и прочему, но до сих пор нет совершенного продукта, тк есть вещи, которые способен решить только человек)

[@aleksejsaleksejevs7818]

Типичный Верстальщик • Анна Блок , да я слышал и про сервисы, и про недоработку данной ИИ. Я не совсем правильно поставил вопрос. Готовы ли вы к тому, когда ИИ, по данной теме, доведут до ума? Если да, то как? 🤔

[@34shadows]

Aleksejs Aleksejevs человек без работы никогда не останется)

[@Философствующийсантехник]

Пока заказчики не научатся чётко,подробно и правильно ставить ТЗ этого не произойдёт.А этому они не научатся никогда))

[@АнастасияВыхристюк-о6ю]

Анна, а как можно менять текст при переходе из одной версии в другую?

[@ethereaim1353]

Подскажите, пожалуйста, что за шрифт использовался при объяснении структуры media запроса?

[@annblok_webdev]

Geometria

[@sergeypetrovetsky3431]

А как получается такое что делаешь адаптив,берешь конкретные значение например из Boostsrap 1200,992 и тд.. когда в media ставишь тот же 992 ничего не происходит,а при 991 уже начинаются изменения? Хотя даже если повторяешь верстку за кем то и всегда такая проблема,точные значения не работают только на 1пх меньше?

[@sergey_zatsepin]

А как ты собираешь пункты меню в бургер-меню для моб. устройств? С помощью Js?

[@ЕвгенийБражкин]

Собирается через css, а через Js делается открытие меню при нажатии на кнопку(ну или с помощью чекбокса)

[@endurenzmusic6617]

Спасибо детка !

[@Dik131WZD]

А что делать с широкими блоками?

[@ВладимирЗлатомрезов]

Блин, в чем вы это делаете? Мне очень понравилось когда сразу хтмл сиэсэс и сразу вид страницы!

[@annblok_webdev]

Сайт Codepen

[@ВладимирЗлатомрезов]

@@annblok_webdev спасибо, надо ещё среди линуховских редакторов посмотреть. Я думаю там найдётся достойный софт для разработчика.

[@РоманШевчук-в4г]

спасибо очень интересная инфа

[@robereds245]

все ясно спасибо!

[@ДокторнаПриколе]

Thank you

[@millyamillya9426]

малопонятно, и у телефона и у монитора и у планшета идет одно и тоже FullHD расширение, и как быть в таком случае?

[@car_sketch_and_render]

Спасибо! А ссылка на codepen есть?

[@annblok_webdev]

Случайно закрыла браузер и забыла сохранить, но постараюсь восстановить материал из видео 😄

[@car_sketch_and_render]

@@annblok_webdev Спасибо! С Наступающим Вас новым годом! Спасибо за Ваш труд!:)

[@annblok_webdev]

Спасибо, вас тоже 😊

[@Punjabi-Rajma]

самое сложное в адаптивке у меня было это, расчёт rem и em все остольное изи

[@annblok_webdev]

Об этом я кстати рассказывала в видео про единицы измерения kzbin.info/www/bejne/moHdoHV6Z79pbqM 😄 Однако это проще, чем перераспределять все значения px, особенно если много блоков и страниц на сайте

[@vvkbees6473]

Спасибо!

[@СергейЕрёмин-у9я]

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

[@annblok_webdev]

Добрый вечер. Ок, учту в следующих видео 👍

[@user-yl3vj9ms3c]

Ходят слухи, что из-за того, что у мобильных устройств ресурсов меньше, лучше делать вёрстку mobile first, так как она менее ресурсоёмкая для данных устройств.

[@annblok_webdev]

Не совсем слухи, скорее очевидный факт) Но скорость интернета сейчас порой не сильно уступает скорости Wi-Fi, как и мощности по сравнению с ПК, поэтому каждый проект нужно рассматривать индивидуально.

[@user-yl3vj9ms3c]

@@annblok_webdev С батареей только печалька.

[@user-sergeyklimov]

почему то смотря на девушку не могу уловить смысл ее разговора.очень красивая девушка.

[@ДмитрийДоробалюк-ц4и]

nice!

[@Viktor_V.]

Чего-то сколько ни смортю про адаптивность - никто не объясняет что будет, если у мобильника высокое разрешение экрана. Не размер, а плотность пикселей. Например при ширине от 1024 то уже считается что у пользователя в руках ноутбук.. Но у того же айфона разрешение 2532 × 1170, при небольшом экране. И что ему отгрузится??? версия сайта для ноута, ? Опорная точка в 1024 - и пользователю отгрузится версия для ноутбука???!! Хоть бы кто прояснил этот вопрос...

[@rahim6821]

It-принцесса

[@tigranartashesyan184]

OCHEN INTERESNI KONTENT ZASLUJIVAET MILION PROSMOTROV.

[@tamarastepanova5070]

в mobile first узнали как верстать

[@limoh4ik661]

АВЕ тебе ^_^

[@ИванАкулов-й2ь]

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

[@alla6361]

Спасибо!