С каких макетов начать изучение адаптивной верстки?
Здравствуйте! Сейчас начал изучать верстку адаптивных макетов и столкнулся с вопросом, а какой макет можно взять для начала? Во многих статьях написано, что в принципе можно из любого десктопного макета сделать мобильный, правда не всегда из этого выйдет что-то нормальное. И многие пишут, что адаптивный макет должен быть таковым уже на начальных этапах разработки. Вот я не знаю, как поступить мне вначале пути... либо брать любой фикс. макет и пытаться по своему видению адаптировать его (хотя без опыта думаю сложновато это) или искать спец. макеты именно для адаптивной верстки. Кто с чего начинал? Что выбрать? Подскажите пожалуйста!!!
Адаптивная верстка это всего лишь по сути манипулирование media queries для преобразования размера и позиций элементов в зависимости от ширины экрана, плотности пикселей и т.п. Для изучения этой технологии подойдут любые макеты.
Фича в том, что может быть 2 варианта:
1. Дизайнер все продумал за вас и сам отрисовал макет сайта в нескольких популярных разрешениях (экран смартфона, экран планшета, полноразмерный десктоп). И вам нужно лишь грамотно сделать переход из одного состояния в другое.
2. Дизайнер нарисовал только десктоп версию и вам нужно адаптировать её под мобильные устройства. Тут работает фантазия и здравый смыл. Вот и всё.
Т.е. по сути отличие только в том, продумали за вас внешний вид или нет. В остальном же, верстка обоих типов макетов ничем не отличается.
hedin83: не бывает правильных вариантов, в моей практике правильные макеты бывали лишь в 50% случаев. Так что надо просто учиться адаптировать любую хню под разные разрешения, а не только правильные канонические макеты)
hedin83: по сути вам надо разбить любой макет на цельные блоки (например, шапка, меню, боковое меню, контент, блоки с фотографиями и тд) и правильно разместить их для любого размера окна. Например если для окна компьютера три блока "Боковое меню, слайдер акций, популярные товары" расположены в один ряд, то на телефоне лучше разместить их в столбик, и боковое меню сделать удобнее для просмотра (например, спрятать все в одну иконку).
