Адаптив в веб-дизайне: какой порядок подготовки ресайзов для смартфонов и планшетов лучше?

#адаптив #adaptive #вебдизайн
Поделился наблюдениями: какой из вариантов подготовки ресайзов для смартфонов и планшетов при адаптивном дизайне лучше.
💰❤️ Поддержать канал:
бусти - boosty.to/alex... - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.ne...
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне чуть больше 30 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 15 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov....
15 лет опыта - alexeybychkov....
Пишу - alexeybychkov....
Дизайню - alexeybychkov....
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance

[@alexeybychkov_]

Пришел к тому, что есть три варианта:
1. Постраничный поразмерный
2. Все разрешения по очереди
3. Постраничный поблочный

[@aleksand135]

Спасибо, что показываешь как реально ускорять работу!!! Пока что пользовалась первым способом, но для больших проектов, думаю, удобнее делать третьим. Буду пробовать👍

[@alexeybychkov_]

пожалуйста! Спасибо за просмотр)

[@shkida9930]

Рада, что самостоятельно пришла к такому же варианту, странично-блочному, когда думала как же адаптивить продуктивнее и удобнее) Спасибо, что поделился своим опытом))

[@alexeybychkov_]

круто, молодец!

[@ЯнаВишневская-п5ъ]

Третий способ понравился больше всего)) Спасибо за наглядные примеры, обязательно буду использовать. 😊

[@alexeybychkov_]

Супер!

[@khachatur9826]

Спасибо за совет. Так и работа сразу видна и понятно, сколько осталось)

[@alexeybychkov_]

пожалуйста)

[@advoryanin]

Третий вариант вообще крут! Надо будет попробовать! Пятерку🖐👍

[@alexeybychkov_]

супер))

[@tanais_play]

Как я раньше пропустил это видео? Исправляюсь) Как всегда отличный контент

[@alexeybychkov_]

Спасибо))

[@Mar_marinka]

Видимо 3ий вариант и правда наиболее удобный! Спасибо за видео! Фил Хуг🤗

[@alexeybychkov_]

да постоянно пользуюсь!

[@НикитаМалинин-ъ4о]

Спасибо) Последний способ прям удивил. Лайк)

[@alexeybychkov_]

Супер))

[@ОляКонцевая-ш5й]

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

[@alexeybychkov_]

Ну класс

[@ЕкатеринаБратченя]

Спасибо за примеры!) буду пробовать 3-ий метод))

[@alexeybychkov_]

пожалуйста)

[@hannapapova2175]

Постраничный поблочный метод - кажется самым продуктивным способом! Так и попробую!

[@alexeybychkov_]

ну класс)

[@Alina-e7w7r]

Спасибо что делишься опытом! ♥

[@alexeybychkov_]

Пожалуйста)

[@АннаПетрова-у1ы]

Супер, спасибо за ролик! кажется, что 3й способ правда самый быстрый, и не успеешь заскучать пока только с одним разрешением на всю страницу сидишь :)

[@alexeybychkov_]

тоже так думаю)

[@АлинаЗагородняя-р7з]

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

[@alexeybychkov_]

Спасибо за просмотр)

[@marina.kokhno3671]

как всегда все полезно! конечно, нужно попробовать каждым способом, чтоб понять удобство для себя, но пока мне понравился 1 и 3 способ

[@alexeybychkov_]

спасибо за просмотр)

[@ИнгаКривоблоцкая]

Отличный ролик,мне больше понравился постраничный ,поразмерный)ну и третий вариант тоже классный-видишь свет в конце тоннеля!))спасибо за такую полезную информацию

[@alexeybychkov_]

Спасибо за просмотр)

[@nyusha7573]

Спасибо за видео!)) буду пробовать🔥

[@alexeybychkov_]

пожалуйста)

[@meryul8623]

Канал просто кладезь полезной инфы 🤯 Спасибо! Пошла смотреть следующее видео

[@alexeybychkov_]

Классный план)

[@wayvector]

действительно) мне больше нравится первый способ. Так удобнее потом все просматривать и сравнивать)

[@alexeybychkov_]

Ну класс)

[@Anna-hi4dk]

Сама делаю первым вариантом, но теперь хочу попробовать третьим. Тоже хочу упрощать себе жизнь)

[@alexeybychkov_]

тебе понравится)

[@karolinak3345]

Очень полезно и информативно о адаптивах и порядке их построения-заполнения! Спасибо😉

[@alexeybychkov_]

Спасибо за комментарии под роликами)

[@anku_onku]

Пока делаю способом по блокам) Пока самый удобный для меня, по целой странице не зашло, когда сначала полностью 1000 и т.д.) Видимо с опытом найду для себя что-то оптимальное)) Спасибо за видео ❤️🤗

[@alexeybychkov_]

и тебе спасибо!

[@an_tich]

Класс, очень впечатлил 3ий метод. Обязательно попробую. Спасибо

[@alexeybychkov_]

пожалуйста)

[@anastasiamihodenko1663]

ФилХуг! Мне тоже 3-й вариант понравился ) Спасибо!

[@alexeybychkov_]

супер!

[@Maridm]

У тебя во всем очень крутая логика! прям все по полочкам!

[@alexeybychkov_]

И мне нравится

[@alinafrolkina5832]

По твоей рекомендации делала адаптивы постраничным поблочным методом, удобно и без путаницы)

[@alexeybychkov_]

ну класс)

[@СабинаМамедова-в8э]

крутяк, мне оч понравился третий метод) лайк✌

[@alexeybychkov_]

супер

[@АнастасияКомаренко-г7я]

Спасибо за полезное видео) Актуальная сейчас информация.

[@alexeybychkov_]

Ну класс

[@nadiasheimo7021]

3 способом сразу начала пользоваться и очень удобно, спасибо

[@alexeybychkov_]

Супер

[@МарияМаксимова-щ2ъ]

Спасибо) сегодня мне эта информация пригодится))

[@alexeybychkov_]

пожалуйста!

[@gavrilovamaria9244]

В следующий раз попробую поблочно делать) мне кажется, будет удобнее, чем постранично. У тебя так точно удобнее выглядит

[@alexeybychkov_]

ну класс

[@vaka_paka_vaka]

Последний вариант кажется удобнее. Сразу во всех адапативах один блок 👍

[@alexeybychkov_]

Спасибо за просмотр)

[@magadan2310]

3 способ, на первый взгляд, действительно самый удобный. Проверю на практике)

[@alexeybychkov_]

звучит как план)

[@iamyagubova]

спасибо за классный ролик)) мне понравился 3 вариант)

[@alexeybychkov_]

Спасибо за просмотр)

[@igorzaitsev2058]

А мне постраничный поразмерный как-то удобнее 😀 А вот все расширения по очереди даже и не знал, что так делают. Ну каждому свое😉

[@alexeybychkov_]

да главное, чтобы работалось комфортно

[@U.Kazinets]

Круто ! Буду теперь всегда так делать :)

[@alexeybychkov_]

спасибо за просмотр!

[@ogogoeva6787]

3 метод офигенный, конечно ))

[@alexeybychkov_]

Тоже так думаю)

[@mariakorovina9357]

Спасибо за видео! Надо будет попробовать делать постранично поблочно, интересно удобнее ли так будет или нет)) Обычно делаю всю страницу по очереди на каждое разрешение

[@alexeybychkov_]

пожалуйста!

[@helena_selena]

Спасибо за полезные рекомендации из практики)

[@alexeybychkov_]

Пожалуйста!

[@plrchk]

Спасибо👍🏻 Попробую все три варианта, но уже предчувствую что постраничный поблочный самый удобный будет)

[@alexeybychkov_]

пожалуйста!

[@НатальяВерахина]

Третий вариант явно удобнее☺

[@alexeybychkov_]

вот и хорошо)

[@Tirrotig]

Актуально 👍🏻🔥

[@alexeybychkov_]

супер!

[@МарияСтефаненко-б9р]

Попробовала делать по-первому варианту, но не сильно зашло(
В следующий раз попробую по-третьему (поблочно), думаю будет удобнее)
Спасибо за отличные советы!)

[@alexeybychkov_]

Пожалуйста)

[@ilmira8019]

Делать все разрешения по очереди как-то не очень удобно) Удивительно, что многие этим способом пользуются🤔

[@alexeybychkov_]

спасибо за просмотр)

[@pridari]

Крутой и полезный ролик!)

[@alexeybychkov_]

рад, что полезно

[@fashionhurma]

Спасибо, очень полезно!

[@alexeybychkov_]

рад, что полезно

[@сергейпарфенов-м6ц]

3 вариант огонь

[@alexeybychkov_]

супер!

[@AlevtinaKostyan]

Спасибо!

[@alexeybychkov_]

Пожалуйста!

[@ЮлияХананова-ъ6ж]

Спасибо за ролик

[@alexeybychkov_]

пожалуйста!

[@obalatsun]

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

[@alexeybychkov_]

спасибо за просмотр

[@nikitalarionov-edmin3163]

Не представляю как раньше вы в фотошопе работали, это же просто жесть... Я как-то пробовал дизайном заняться в нём, года 3 назад. Меня хватило на одну страницу примерно)) Так и забросил, пока не увидел тебя с фигмой на ютубе..)

[@alexeybychkov_]

а многие и до сих пор фотошопят(

[@СофияМалания-ь7й]

Мне тоже 3 способ больше нравится! Т.е ты закончил с одним блоком и к нему уже не возвращаешься, это удобно

[@alexeybychkov_]

и мне нравится)

[@jukographica]

Третий метод кажется ахеренным. Испробую!

[@alexeybychkov_]

давай))

[@МаксимСолопов-и1ф]

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

[@alexeybychkov_]

Пожалуйста :)

[@МаринаБогомолова-в5ф]

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

[@alexeybychkov_]

Надо различать дизайн и наполнение. Во всех интернет-магазинах очень много страниц. Сотни, а то и тысячи товаров с разным контентом: разные фотки, тексты, характеристики, цены, смежные товары, теги и т.д. Но дизайн страниц у всех одинаковый. Так вот дизайнер делает дизайн только одной страницы товара. Верстальщик верстает только одну страницу товара (которую сделает дизайнер) и делает натяжку (подключает страницу к админке) только одной страницы товара. А уже потом контентщик (или сам заказчик, или кто-то со стороны заказчика) будет наполнять в админке весь сайт разными товарами: создал страницу -- ввел название товара -- описание -- загрузил фотки для него -- указал теги -- заполнил характеристики и тд -- и на сайте появилась страница товара. Потом второй товар в админке заводит и так товар за товаром.
Что касается страниц в пунктах меню, то дизайнер делает то, что у него закажет заказчик. Некоторые страницы в дизайне очень похожи и их нет смысла заказывать у дизайнера (верстальщик сам справится). Например, страница новости и страница статьи или страница акции -- эти страницы могут совпадать на 90-100%. Или результаты поиска -- на сайте есть полноценная страница с выдачей результатов. Но она на 99% совпадает с каталогом, разница только в заголовке -- будет написано не «Каталог товаров», а «Результаты поиска». Страница понравившихся товаров тоже на 99-100% совпадает с каталогом. А вот страница контактов с каталогом ничего общего не имеет :) В общем дизайнер делает только то, что у него заказывают, и за что ему платят.
Дизайнеру -- чем больше страниц закажут, тем лучше. Заказчику (вернее его кошельку) -- чем больше страниц нужно заказывать у дизайнера -- тем хуже :)

[@МаринаБогомолова-в5ф]

Alexey Bychkov спасибо большое за столь развёрнутый ответ! 👍😁 все очень просто и понятно объясняете ))

[@h2643]

Такие большие сайты делать это надо иметь терпение, но мне хочеться думать, что я готов к этому)

[@alexeybychkov_]

компоненты и автолейаут творят магию в экономии времени

[@ГалинаМихайлова-ш5ъ]

очень хорошее видео, все понятно

[@alexeybychkov_]

супер!

[@taivanskaya]

Мне 3 способ показался логичным и удобным. Попробую делать так. Благодарю за новые знания.

[@alexeybychkov_]

И мне!

[@ilmira8019]

Мне 3 вариант больше нравится, он гораздо удобнее🔥

[@alexeybychkov_]

3 вариант супер!

[@marinanixi]

Спасибо! Ответил на возникший вопрос))))

[@alexeybychkov_]

Супер, если есть еще - задавай))

[@iraerin]

Дякую за відео! Третій варіант прям дуже сподобався))

[@alexeybychkov_]

Супер)

[@olgakhabarina3655]

Поблочный, думаю, самый лучший. Одной информации, что он самый быстрый, уже достаточно для этого) Спасибо за идею!

[@alexeybychkov_]

🥳🎉

[@АнастасияКриворотова-г7и]

Спасибо за кучу полезной инфы! :)

[@alexeybychkov_]

всегда пожалуйста)

[@iam_brightspark]

Такую инфу обычно на пл курсах дают и то не фсе)

[@alexeybychkov_]

спасибо за мнение)

[@bibimoi_ru]

Даже спустя 5 лет информация актуальная и полезная. Есть принципы удобной рабты и они неизменны. Спасибо! Вопрос отпал про адаптивы!

[@alexeybychkov_]

вот и замечательно)

[@Alexandraizotova727]

Я раньше делала первым способом, но теперь хочу попробовать третий, а вдруг будет и в правду удобнее
Спасибо!🔥
Очень полезный ролик

[@alexeybychkov_]

Вот и попробуй!

[@МаринаЮсенбели]

Как-то первый постраничный вариант намного ближе)..Если интернет-магазин делаю, обычно еще создаю страницы в одном файле, главная+адаптивы на одной странице, каталог + адаптивы на другой, и верстальщику такой подход больше нравится, не нужно по всему макету 3 часа гулять))...А последний способ поблочный меня заинтересовал, надо будет обязательно попробовать!
Крутое видео, спасибо, Лёша!)🔥🔥🔥

[@alexeybychkov_]

Спасибо за просмотр)

[@СветланаКузнецова-о1ъ9ц]

Спасибо, Алексей! Действительно, третий способ удобнее.

[@alexeybychkov_]

ну класс)

[@kristinkashidlovskaya8787]

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

[@alexeybychkov_]

спасибо за просмотр)

[@akonyzheva]

Спасибо за то, что делишься опытом! Попробую вариант адаптива поблочно

[@alexeybychkov_]

пожалуйста!

[@Татьяна-ю1р2м]

Да. Последний вариант самый удобный для меня. Спасибо за ролик. Лайк🙃🙃🙃

[@alexeybychkov_]

супер, и тебе спасибо за комменты!

[@yzefinayanovska8211]

Выглядит всё не сложно, а на практике.... Нужно теперь оттачивть навыки) лично для меня первый способ показался самым удобным) Спасибо !

[@alexeybychkov_]

Вот и замечательно!

[@innasapegina7068]

Интересный 3 вариант! Попробую все три метода и веберу лучший для меня)) Спасибо большое что делишься!!!

[@alexeybychkov_]

пожалуйста!

[@КсенияСамигуллина-ш9н]

Кажется, постраничный поблочный самый удобный способ! Буду пробовать) Спасибо за ролик!

[@alexeybychkov_]

мне тоже так кажется))

[@Soffikko]

Спасибо за видео! Третий способ выглядит, конечно, гораздо удобнее и нагляднее) Раньше наиболее очевидным казался первый способ. Буду пробовать и учиться)

[@alexeybychkov_]

Да надо практиковаться

[@juliasizova7799]

Спасибо за лайфхак, теперь будет +100 к скорости работы.
Тот самый случай, когда выбираешь на чём ехать на велосипеде или на Феррари. А тут Лёша тебе сразу ключи от Феррари подарил. 🏎🎀😘😘😘😘🤗🤗🤗

[@alexeybychkov_]

еееее)) круто!

[@alenahalaburda6373]

3 метод, на мой взгляд, самый удобный. Концентрируешься на конкретном блоке, меньше вероятность что-то забыть

[@alexeybychkov_]

тоже так думаю!

[@AnnaVolkova-w3f]

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

[@alexeybychkov_]

💯

[@stanislav6651]

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

[@alexeybychkov_]

Мне третий больше нравится

[@Екатерина-у5й7я]

оказывается несколько вариантов адаптивов бывает) попробую постранично-поблочно)💯👍

[@alexeybychkov_]

ага!

[@SuperNatalyya]

Благодаря ролику беру сразу готовое решение-третий вариант ( наглядно сразу понятен объем работы) . Он к тому же и комментариями подкреплен. Плохого не посоветуешь! Спасибо, Алексей

[@alexeybychkov_]

супер, пожалуйста!

[@ravil77]

Всегда пользовался третьим методом
Теперь попробую что-то другое) Так сказать добавлю разнообразия

[@alexeybychkov_]

лучше 3 пользоваться))

[@ellviira]

поблочный способ адаптации - интересный!) буду пробовать) спасибо за находку 🙃

[@alexeybychkov_]

пожалуйста)

[@oradelight]

Адаптивы еще не делала, но моя логика может только 3 вариант принять. и 1 еще может быть. Мне кажется, так даже быстрее, и сразу видно как конкретный блок отражаться будет на разных устройствах, там и подтюнить можно будет что-то, если нужно, А если по разрешениям делать... я буду делать 2 недели, наверное😅

[@alexeybychkov_]

😀 3 вариант вместе с автолейаутом творит магию

[@МарияКузьмина-з3б]

Прикольно!) Я только про два метода знала) Мне кажется, последний - самый удобный, т.к проще вносить изменения👍

[@alexeybychkov_]

💯

[@ЕкатеринаБаранова-е3и]

Спасибо! Действительно, 3 вариант самый удобный и ускоряет адаптивы

[@alexeybychkov_]

Тоже так думаю)

[@konkova_eks]

Поблочный вариант пока кажется самым привлекательным😉

[@alexeybychkov_]

Спасибо за просмотр

[@Masloboynikova]

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

[@alexeybychkov_]

пожалуйста)

[@marinaviktorova4767]

Тоже удобно постранично по первому методу, действительно прикидываешь сколько сделано и сколько еще осталось)

[@alexeybychkov_]

Спасибо за просмотр)

[@nefedorbondarchuk7662]

Спасибо! 1 и 3 вариант кажутся наиболее удобными. Но как некоторые делают от 360 в большую сторону вообще не представляю)

[@alexeybychkov_]

тоже не представляю

[@АнастасияДжерихова-с7е]

Последний метод огонь! Так не нужно бегать по папкам в слоях. Сделал главную везде - дальше пошел. Пойду так пробовать теперь)

[@alexeybychkov_]

Спасибо за просмотр!

[@ДарьяВасилевич]

Ага, особенно адаптивы круто делать, когда в автолейауте разбрался. Я обалдела, когда сделала 480 размер из 360 рх за 2 клика! Вот это круто, конечно) А заказчикам знать необязательно, что такое иногда можно сделать

[@alexeybychkov_]

Да! Тоже так думаю))

[@EvgeniaKrivonosova]

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

[@alexeybychkov_]

супер)

[@yuliaopolska3991]

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

[@alexeybychkov_]

и мне нраавится)

[@veronikarevutskaya2362]

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

[@alexeybychkov_]

Давай)

[@natashache6699]

Спасибо за полезную информацию! Я только учусь, так что обязательно воспользуюсь советом и буду применять 3-й вариант для создания адаптивов.

[@alexeybychkov_]

это всегда пожалуйста!

[@ОльгаКулик-д1е]

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

[@alexeybychkov_]

это всегда пожалуйста!

[@anastasiiya3674]

Пойду ка тестить 3й метод. Всегда делала как в 1м или 2м способе, ибо фотошоп 🤬😅 Спасибо за видео! Такие вроде бы мелочи, но время экономят солидно 👍

[@alexeybychkov_]

Давай)

[@yulia9274]

Мне нравится больше 3й метод. Не нужно возвращаться к одному и тому же блоку спустя время и так не забываешь, что хотелось показать.

[@alexeybychkov_]

Вот и я так думаю!