Какие есть учебные материалы по адаптивному дизайну на русском?

Question

[gleendo]

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

Какие есть достаточно емкие и хорошие учебные материалы по этой теме, что посоветуете? Статьи, видео, желательно книги.

Answer 1

[Сергей ZSA]

Графика:
1. max-width: 100%; у img
2. svg где это возможно и по башке дизайнеру если он делает иконки растром
3. Опционально от вменяемости дизайнера - кадрирование картинок ну и знаменитый тег пикчер с его супер-способностями почти @media (это для ретины и для адаптива сразу у картинок) https://habrahabr.ru/post/237991/ тут про суперспособности

Всякое:
1. требовать промежуточные макеты хоть какие-то (моб, планшет, десктоп, большой десктоп если там резина сайт)
2. бить об стол дизайнера и/или заказчика если он хочет крутой адаптив а дизайна других версий нет и не будет (пошли все куда по дальше, адаптива тогда тоже не будет или платите в 3 раза больше за то чтоб делал верстальщик адаптивный макет в .psd)
3. Mobile first @media запросы изучать
4. Опционально и на любителя - юзать бутстрап или ковыряться че там да как
5. Опционально и на продвинутого - flexbox

Инфы слишком много чтоб это всё описывать тут, поэтому вперед на каналы: open-education.net/services/spisok-youtube-kanalov... где-то из них 100% найдете то что надо. К примеру у "Серёги" (по началу видео поймете кто это) хороший курс про flexbox а у loftblog масса разной инфы про svg, графику и тп.

Comments

[Сергей ZSA]

P.S. : бОльшая часть ваших вопросов гуглится и в выдаче максимум на 3м месте уже прямо сочная свежая горячая как только приготовленный шашлык информация про ну вообще всё, что надо знать.