Это адаптивный дизайн?

Question

[Mikalai Bulava]

Добрый день.
Хочу заниматься именно дизайном адаптивных сайтов. И если с такими все понятно. Есть фиксированная сетка, несколько контрольных точек, видно когда меняются макеты под разные разрешения, понятно что делать и как делать и т.п., то вот c такими или такими возникают трудности. Я так понимаю, это и есть "отзывчивый" дизайн. По какой сетке они сделаны? Вижу что есть структура, но все равно не понятно. Как правильно "рисовать", чтобы не плевался верстальщик?

Answer 1

[Андрей Хохлов]

Как правильно "рисовать", чтобы не плевался верстальщик?

Вот так: https://github.com/andrey-hohlov/psd-templates-req...

Comments

[Mikalai Bulava]

Отличная памятка! Некоторые вещи узнал для себя, но в основном все так и делал. Тут немного в другом(

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

Да, спасибо большое. Очень нужная вещь.

Answer 2

[goandkill]

По сути технически разница не велика.
Руками придется делать ровно всё то же самое. Но во втором случае, описание дизайна будет длиннее и подробнее. Еще лучше с прототипом.
Эти примеры как небо и земля. Тут вообще не должно быть такого, чтоб верстальщик плевался.
Работа дизайнера не в том чтобы отдать картинки и забыть. Это должна быть связка понимающих и уважающих друг друга специалистов (или в лице одного человека, что реже).

Сетка это частный случай. Какую придумаете - такая и будет. Но велосипед уже изобретен.

Comments

[Mikalai Bulava]

Хорошо. Наверное, я туповат))) Понял, что разница в техническом плане для верстальщика не велика (да, я планирую выучить html и css, но сейчас нужно понять как работать с тем что есть, но предполагаю, что первый случай верстается в px, а второй в %). Возьмем этот сайт где там что? Т.е. я беру 1280 px - отделяю меню в 280px и остальные 1000 с помощью этого разбивается на столько то "резиновых" колонок. После отдельным файлом- приложением, описывается какой блок, как и куда будет тянутся и как себя вести? С разрешения 1280 до 1920 например.

[goandkill]

Chipr: да там вообще две колонки и бэкграунд. Не нужно ничего усложнять;)

[Mikalai Bulava]

goandkill: воот! Супер! Что-то стало проясняться! Если вас не затруднит, могли бы привести пример подобного сайта, но с большим количеством колонок. Благодарю!

[goandkill]

Chipr: навскидку https://www.airforce.com/

Answer 3

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

Я не увидел технического отличия первого сайта и остальных двух. У всех медиа-запросы, а модульная сетка видна только если вглядываться в размеры и пропорции элементов, как таковой в верстке ее нет (то есть нет классов для колонок, а есть присвоенные каждому элементу стили). Сеток может быть сколько угодно. Можно свою адаптивную сетку сделать за минут 10. Тут главное знать, какую сетку будет использовать верстальщик. Если не вариант (например, верстальщика еще не нашли), возьмите классическую 12-колоночную или 16-колоночную. Придумайте от какого разрешения будете плясать. Обычно базовая ширина — 960px. Делите 960 на 12 или 16 и направляющими в фотошопе холст. Чтобы не плевался верстальщик помните одно правило: это сетка, а не струны. За пределы направляющих лучше не выходить, ведь это границы блоков. Говорю это потому, что этим правилом часто пренебрегают.

Comments

[Mikalai Bulava]

Как это нет отличий? И в смысле нет в верстке, такое может быть? Первый я вижу,что тянется только bg и есть четкие границы контента, а вторые тянется вообще все. Это какая-то смесь резины и адаптивности? Делаются все те же 5 макетов (к примеру), но только по резиновой сетке? Есть какой-то стандарт этих сеток? Как бутстрап-овские 1170 и т.д.