Как поступить в изучении адаптивного дизайна?

Question

[Vlad Tytcky]

Есть несколько вопросов по поводу техники адаптивного дизайна. В процессе изучения посредством "гугления" я увидел множество статей на эту тему, но все эти статьи просто объясняют что такое медиа-запросы и как ими пользоваться в "вакууме", то есть просто сверстано несколько колонок без какого либо контента( в лучшем случае с текстом) и несколько простеньких медиа-запросов.
В связи с этим хотелось бы найти проверенный ресурс с более широким содержанием и структурой обучения, чтобы не запутаться в терминах, вырывая их из разных сайтов. Возможно стоит почитать книгу какую-нибудь?Что-то наподобие Mobile-first? Google Developers в своих статьях советовали начинать верстать с мобильников.
И еще хотелось бы узнать, с чего начать при верстке адаптивного шаблона, скачанного с какого-нибудь сайта? С обычной, фиксированной версткой все просто-дается PSD шаблон и по нему верстаешь. А в архиве с адаптивкой как минимум три папки, в каждой свои стили, изображения, index'ы.
P.S стоит ли сразу учиться верстать адаптивно при помощи flex? Учитывая то, что я обучаюсь на долгосрочную перспективу.

Comments

[copal]

Первой что Вам стоит сделать, это научится верстать. Открываете youtube и пишите - "адаптивный NavBar", на что Вам сразу же выдаст множество уроков. Только Вы прежде чем смотреть, пробегите глазами продолжительность роликов и выберите самые коротки по времени. И запомните это раз и навсегда - самые лучшие уроки не должны превышать 10 минут, ну максимум 15. И то 15 это уже сомнительно.
Смотрите два-три урока от разных "производителей" и начинаете верстать что запомнили. Если не получается, подсматривайте в урок, а лучше всего гуглите конкретные задачи. Типа - "как центрировать текст в li", "как вывести список ul горизонтально", "как прижать один div к другому" и т.п.
После того, как сделаете советую отправляйтся на codepen.io и набрать там - "adaptive navbar" и "responsive navbar". Посмотрите, если результаты Вам нравятся больше, то повторяете.

На описанное выше у Вас должно уйти максимум два дня. То есть третью часть адаптивной верстки Вы освоите за два дня. Ну и дальше продолжайте в том же духе и за неделю Вы сможете научится верстать все что угодно.
Черпать вдохновение можно на том же codepen.io, materializecss.com, www.material-ui.com/# и конечно же getbootstrap.com, который после первой недели Вы обязательно должны выучить.
Так же советую почитать о sass, grid, css shapes. Ну и для верстки psd brackets.io для кода https://atom.io/ хотя и первого будет достаточно. Обязательно посмотрите плагины к ним и не видитесь на модные (хотя это было раньше) sublime text 3, стремитесь к WebStorm.

Answer 1

[Александр Пупкин]

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

Ну а по сути, как начать изучать, как я например делал...

Верстаю то что я хочу, переношу на Друпал, там всякие page.tpl и node.tpl настраиваю, потом начинаю по медленному ссужать браузер, смотрю что полный понос и начинаю с шапки сайта, туда сюда, медиа запросы, во, получилось, беру меню и тоже самое.....

Ну а как правильно:
(кто то тут уже писал что то подобное)
Сделал шапку сайта? Ссужай ее до минимум...получилось? окей...Ниже идет меню, ссужай...Шляпа? Да. Уверен. Настраиваем медиа...Настроил? Молодца. Приходи пивка хлопним.

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

Ну в вообщем суть ясна? =) Я пьяненький, так что как то так =)

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