Адаптивный веб-дизайн (Процесс проектирования)

Здравствуйте, хочу научиться разрабатывать адаптивный веб-дизайн сайтов, в интернете перерыл массу информации, но нарывался оч. часто на то, что люди путают резину(responsive) и адаптивный (adaptive) и когда начинается рассказ об том как создается затрагиваются темы технической стороны, такой как:HTML/CSS/JS.
Но меня интересует совсем другое, мне интересен сам процесс создания дизайна адаптивного, именно проектирование (создание в photoshop), все, что я успел узнать, это то, что создается 4 макета. . Я же хочу узнать ка строится модульная сетка,для каждого из них, по каким принципам дизайнер перемещает блоки для отдельных макетов и т.д  Хочу увидеть весь процесс от начала и до конца создания адаптивного веб-дизайна сайта. Посоветуйте пожалуйста, кто, что знает, мне оч ВАЖНА любая информация касающаяся процесса создания ADW(adaptive web design)

ссылка
ссылка
Адаптивный сайт > ссылка

Сталкивался с адаптивным дизайном пару раз в этом году, процесс этот не простой и дорогой, это очень важно понять и самому, и донести до заказчика. Что адаптивная верстка - это не блочная и валидная, а несколько вариантов дизайн по большому счету. Соответственно и заплатить ему придется значительно больше за все этапы - от отрисовки до интеграции верстки. Это пожалуй самое главное в этом вопросе, многие после разумных доводов, отказываются от адаптивного дизайна, и выбирают проверенную и недорогую "резиновую" верстку. А в целом вы правильно понимаете - это от 2 до 4 наборов разных макетов, т.е. если для неадаптивного дизайна нужно рисовать 10 страничек, то для адаптивного 40, и верстать тоже в разы больше, и т.д. Понятно, что не все будет меняться на макетах, и не нужно расценивать каждый вариант разрешения как отдельный сайт, по моим прикидкам каждый вариант увеличивает бюджет на 50%.

Спасибо Вам огромное за ответ. Это оч, полезная информация для.

Познавательно, в интернете и в правду мало информации о "адаптивных". Но все же порекомендовал бы пошарить ютуб, есть немало лекций (особенно за последние 2 года), где затрагивается эта тема и объясняется логика процесса. В плане как это сделать эффективнее, что-бы сэкономить время но при этом дать необходимый результат.

Pow_design,
ссылка
ссылка

Вообще посмотрите Кристиана Холста. У него много практических советов.

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

Разница между резиной и адаптивной версткой по сути в том, что на разных размерах меняется расположение блоков на странице, структура макета, если хотите.
С одной стороны говорят - адаптивные сайты дороже чем простые "резиновые". С другой - адаптив исключает потребность в мобильной версии, чья разработка имхо станет дороже, чем изначально правильно заточенный макет.

Скажу только - с адаптивным макетом сложнее всего продумать, как должны вести себя блоки при изменении ширины.
Как только это сделано (правильно=) - работа с макетом дальше - одно удовольствие.
Пока писал это, совсем забыл, что изначально хотел сказать=)
Вобщем, для адаптивной верстки очень удобно применять flexbox layout. Очень упрощает работу.
Если не особо волнует поддержка древних браузеров - рекомендую посмотреть.

Мне часто как верстальщику приходится выступать в роли дизайнера. Заказчик просит из одного макета стандартной ширины сделать адаптив, ужимаю, бросаю блоки друг под друга, все ненужное выбрасываю и получается моб, все просто. Бывает криворукий дизайнер наваяет макет на 1700 пикс по ширине, тут приходится ухищряться, резинить, адаптивить, чтоб хоть в 1280 пикс запихнуть.
Адаптивный дизайн - обычный дизайн. Представьте что вы создаете несколько отдельных сайтов только разного размера общих по стилистике. Работайте по принципу mobile first, - рисуете сперва для самого маленького разрешения, впихиваете туда все самое нужное, расставляете блоки, упрощаете графику, делаете компактный интерфейс и тп., потом для среднего, группируете блоки уже в ширину, может добавляете чегото, разворачиваете интерфейс, графических эл и красоты добавить, далее для стандарта, там уже есть где разгуляться.

Подброшу статью в тему. По моему тут принцип формирования сетки изложен толково.
ссылка

MobileFirst к сожалению используется достаточно редко, несмотря на очевидные преимущества такого подхода. Учитывая объемы продаж с мобильных и десктопов, клиенты однозначно склоняются к разработке десктопных версих как к первоочередной задаче. Ситуация постоянно меняется в пользу мобильных устройств, но на сегодняшний день, основную конверсию делают десктопы. Поэтому мобильные разрешения часто заказываются в последнюю очередь. 
По своему опыту, могу сказать, что за последние пол года, уже несколько клиентов категорически отказались от разработки адаптивной версии магазинов, предпочтя отдельную мобильную версию. Аналогичные ситуации описывает и несколько моих коллег-дизайнеров.  Не претендую на истину, говорю то, что знаю по своему опыту.

Pow_design, у Итона Маркета есть книга на эту тему. Там весь процесс подробно распсан и показан

AlexLosev, думаю дело не в конверсии, а в цене вопроса для заказчика, т.к. буквально на днях Google опубликовали отчет, согласно которому, мобильные платформы наконец-то "сделали" десктоп.
А в случае с интернет-магазинами, считаю, что именно в этом сегменте разработка отдельной мобильной версии действительно предпочтительнее.

Адаптивный дизайн в 2012-2013 году сулили как единый дизайна для десктопа и мобильных, но по факту в 2014-2015 годах количество мобильный версий только растет. Мобильная версия, в отличии от адаптивной, позволяет вообще не загружать (вместо загрузки и скрытия) часть информации, которая используется в десктопной версии для рюшечек, и не несет существенной информации. В странах, где мобилы выходят в Инет не с вайфая кафе, а подключены к мобильному Интернету с учетом трафика, облегченная мобильная версия просто обязательна. 

Цитата (Wildcat):

Адаптивный дизайн в 2012-2013 году сулили как единый дизайна для десктопа и мобильных, но по факту в 2014-2015 годах количество мобильный версий только растет. Мобильная версия, в отличии от адаптивной, позволяет вообще не загружать (вместо загрузки и скрытия) часть информации, которая используется в десктопной версии для рюшечек, и не несет существенной информации. В странах, где мобилы выходят в Инет не с вайфая кафе, а подключены к мобильному Интернету с учетом трафика, облегченная мобильная версия просто обязательна. 

Совершенно верно. Плюс адаптивный дизайн - это по сути компромиссный вариант в удобстве использования и на десктопах и на мобильных. Т.к.  эргономика у устройств очень отличается. 
Цитата (vovka-morkovka):

думаю дело не в конверсии, а в цене вопроса для заказчика

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

Цитата (AlexLosev):

Цена вопроса для них - это конечный результат.

Ага, только не все из них видят связь между адаптивностью и конечным результатом, зато многие скептически относятся к перспективе "доплатить за адаптивность 50-100%".

Wildcat, скорость интернетов растет (4G итд), стоимость падает. Всё меньше надо думать о том, как облегчить сайт для смартфонов. Полезность мобильных версий стремится вниз, рано или поздно они умрут.
Кстати, вай-фай в текущем его понимании тоже умрет через лет так 7-10. Когда мобильный интернет будет охренительно быстрым, стоить копейки, а покрытие будет везде или почти везде.

В последнее время почти все макет новых сайтов— адаптивные, делаю 4 макета, но начинаю не с маленького, а с десктопа на 1024 когда его утверждаю то создаю остальные. Не знаю правильно я делаю или нет, но придумала такой читкод: во-первых работаю с шаблоном для всех макетов в одном очень широком файле, со своими сетками для каждого размера. Сначала сливаю слои макета на 1024 в один и растягиваю его на 1920 (или меньший размер, но фон 1920) , потом правлю блоки и текстовые слои, согласно растянутого макета 1024. Тоже самое делаю для 760, но в меньшую сторону, меню может на этом размере меняться, некоторые «бантики»  исчезать. Самый последний делаю 320. Меню уже на размере 760 проработано, меняется его ширина и может быть высота, остается только функционал.

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

Добрий день.Подскажите пожалуйста,какая примерная цена создания дизайна для сайта салона?Какова минимальная цена  и время работы ?