С каких макетов начать изучение адаптивной верстки?

Question

[Uladzimir A]

Здравствуйте! Сейчас начал изучать верстку адаптивных макетов и столкнулся с вопросом, а какой макет можно взять для начала? Во многих статьях написано, что в принципе можно из любого десктопного макета сделать мобильный, правда не всегда из этого выйдет что-то нормальное. И многие пишут, что адаптивный макет должен быть таковым уже на начальных этапах разработки. Вот я не знаю, как поступить мне вначале пути... либо брать любой фикс. макет и пытаться по своему видению адаптировать его (хотя без опыта думаю сложновато это) или искать спец. макеты именно для адаптивной верстки. Кто с чего начинал? Что выбрать? Подскажите пожалуйста!!!

Answer 1

[Денис Инешин]

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

Фича в том, что может быть 2 варианта:
1. Дизайнер все продумал за вас и сам отрисовал макет сайта в нескольких популярных разрешениях (экран смартфона, экран планшета, полноразмерный десктоп). И вам нужно лишь грамотно сделать переход из одного состояния в другое.
2. Дизайнер нарисовал только десктоп версию и вам нужно адаптировать её под мобильные устройства. Тут работает фантазия и здравый смыл. Вот и всё.

Т.е. по сути отличие только в том, продумали за вас внешний вид или нет. В остальном же, верстка обоих типов макетов ничем не отличается.

Comments

[Uladzimir A]

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

[Денис Инешин]

hedin83: не бывает правильных вариантов, в моей практике правильные макеты бывали лишь в 50% случаев. Так что надо просто учиться адаптировать любую хню под разные разрешения, а не только правильные канонические макеты)

[Uladzimir A]

Денис Инешин: Спасибо! Буду пробовать с одним макетом разные варианты, думаю это будет лучшей практикой!

[Zhainar]

hedin83: по сути вам надо разбить любой макет на цельные блоки (например, шапка, меню, боковое меню, контент, блоки с фотографиями и тд) и правильно разместить их для любого размера окна. Например если для окна компьютера три блока "Боковое меню, слайдер акций, популярные товары" расположены в один ряд, то на телефоне лучше разместить их в столбик, и боковое меню сделать удобнее для просмотра (например, спрятать все в одну иконку).

[Horpion]

Насколько я вычитал из интернета ,адаптивная верстка это верстка в px + медиа запросы ,но некоторые используют % . Объясните пжл почему так)

Answer 2

[Андрей Б.]

Да господи, берешь любой адаптивный psd макет либо любой лендинг и делаешь с ним че хочешь.
Ищи по запросу psd responsive templates.

Товарищ Денис Инешин верно написал:

надо просто учиться адаптировать любую хню под разные разрешения

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

Answer 3

[Лучник *range attack +10*]

Зайдите на сайт любого адаптивного фреймворка (bootstrap, zubr, skeleton и т. д.)и посмотрите пример сетки и ее поведения на сайте. Теперь вы наглядно увидели поведение блоков и их размеры на разных разрешениях. Делаете в фотошопе сетку направляющими и дизайните/верстаете.