Вопрос об адаптивках

Здравствуйте. Есть проблема. Около половины заказчиков в тз указывают, чтобы дизайн шел резиновый. От таких мне приходится отказываться, потому что css, коды, html для меня - дремучий лес. Если кто занимается адаптивным дизайном или просто знает, по каким книгам/лекциям/видео вы научились этому? Гугл не в помощь, там одни статейки, мне нужна информация, чтобы прям с нуля. Если кто владеет ей или имеет ссылки на хорошие видео-уроки итд, пожалуйста, поделитесь.  Простите за тупость. Заранее спасибо.

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

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

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

Для понимания основ, можете почитать ссылка

Цитата:

Есть проблема. Около половины заказчиков в тз указывают, чтобы дизайн шел резиновый

Если бы половина заказчиков заказывала резиновые сайты, это было бы проблемой. Согласен))

Цитата:

мне нужна информация

Сделали 1170 PC версию. Утвердили. Дальше адаптивка.

Создали 1000 px шириной файл. Поставили отступы по 30 с каждой стороны и в оставшиеся 960 расположили контент. Места стало меньше, а значит, страница будет больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается. 

Создали 768 px шириной файл. Поставили отступы по 30 с каждой стороны и в оставшиеся 708 расположили контент. PC хедер заменили на мобильное меню-гамбургер. Места стало еще меньше, а значит, страница будет еще больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается. 

Создали 640 px шириной файл. Поставили отступы по 30 с каждой стороны и в оставшиеся 580 расположили контент. Места стало еще меньше, а значит, страница будет еще больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается, а заголовки можно немного меньше сделать.

Создали 480 px шириной файл. Поставили отступы по 20 с каждой стороны и в оставшиеся 440 расположили контент. Места стало еще меньше, а значит, страница будет еще больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается, а заголовки можно немного меньше сделать.

Адаптивка готова. Все довольны.

Некоторые блоки на меньших разрешениях можно убирать. Например, большие слайдеры первого экрана убираем на мобилках, и при желании на планшетах. Какие-то баннеры-картинки так же выпиливаем на мобилках.

Некоторые блоки становятся на мобилках (и иногда на планшетах) горизонтальным галереями. Их плюсы в том, что можно расположить 2 слайда или 7 слайдов, а места займет столько же. А листать их большим пальцем по горизонтали намного удобнее, чем по вертикали.

polinasokolova,

Держите PSD сетки ссылка
и вместе с тем что сказал  ссылка просто попробуйте вставить в них свой дизайн.
Помните, что если у вас какой-то элемент пусть и частично, но занял колонку (например, 2,5 колонки на текстовый блок), то раньше чем с левой границы четвертой колонки новые элементы вы не ставите.
То есть помните: условно в вашем распоряжении 12 колонок. Вот в них вы и встраиваетесь. И сразу для удобства сделайте себе слой с отступами по вертикали, чтобы и по высоте все элементы были подчинены определенному шагу. 

Кстати сказать про 1170. Недавно столкнулась с ребятами со стороны заказчика, которые категорически отказались брать Bootsrap 1170 без боковых отступов в 15 пикселей, мотивировав это тем, что: Цитата:

"Согласно настройкам сетки по умолчанию, общий размер контейнера составит: 1140px (12 блоков
по 95px) + «@grid-gutter-width» (ВАЖНО: ОДИН @grid-gutter-width!!! Который равен 30px, т.е. по 15px с каждой стороны) = 1170px."

Честно сказать сколько под Bootstrap рисую, а с таким столкнулась впервые. grid-gutter-widt же не ставится снаружи на 1170? Как объяснили мои верстальщики: им неохота с floating возится.
А как вы этот вопрос решаете, народ?

PSDzavr, спасибо за информацию, я уж испугалась кодов и прочей программистики, в интернете ничтожно мало написано о роли дизайнера в создании таких сайтов.
alexeybychkov, спасибо большое! успехов Вам в работе! 
Mariya_web, спасибо! на самом деле безумно приятно, что на ваблансере такие отзывчивые люди 

Цитата (polinasokolova):

в интернете ничтожно мало написано о роли дизайнера в создании таких сайтов.

Очень много написано об этом. Просто в основном на английском.
ссылка вон сколько всего. Даже есть особенности адаптива под разные CMS

Цитата:

Согласно настройкам сетки по умолчанию

Странный подход изначально. Что мешает изменить умолчательные настройки?

Цитата:

А как вы этот вопрос решаете, народ?

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

А вообще я, конечно, ценю старания дизайнеров(по личной инициативе или - заказчика) упростить нам работу и рисовать макеты по бутстраповской сетке, да еще и со стандартными настройками, но мое глубокое убеждение - так быть не должно. Дизайнер должен думать о UI/UX, а не о том, сможет верстальщик сверстать сетку из 14, а не 12 колонок или нет.

Vovka-morkovka, 
Цитата:

Дизайнер должен думать о UI/UX, а не о том, сможет верстальщик сверстать сетку из 14, а не 12 колонок или нет.

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

Цитата:

по причине того, что все рисуют под бутстрап)

я, например, только админки делаю под бутстрап. Поэтому и делаю всем PC + 1000 / 768 / 640 и 480. И тоже считаю, что
Цитата:

это правильный подход

1 качай с торрента "верстка сайта с нуля- Михаил Русаков" там и HTML и CSS и практика верстки.
2 качай с торрента "практика резиновой верстки - Бернадский Андрей"  это для закрепления.
3 качай с торрента  "JavaScript + JQuery - курс Евгения Попова" - я сейчас его учу.
а далее практика практика+ фреймворки изучать придется.  
на ютубе каналов полно.  

BOXI57, да я посмотрю вы  просто гений, совеетовать дизайнеру курс верстки xD
 

b0nn1e, В 16 лет

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

Особо забавно слушать советы от человека который в соседней ветке спрашивает нужно ли учить JavaScript верстальщику xD
Вы бы еще курс Попова по php посоветовали, а чо пусть посмотрит, точно лишним не будет 

vovka-morkovka, посылайте вы этих бустрап-фанатов.
Бустрап хорош в 2х случаях:
1) макет идеально нарисован под сетку бустрапа
2) когда надо накидать админку (или какой-то другой интерфейс), где дизайн не важен, а важна скорость и удобство

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

nehovaysyatopol, я от бутстрапа беру только сетку(кастомизированную под проект) и ничего более. Меня устраивает идея и принципы именования классов. 
Цитата:

Не раз поражался, когда мне говорили "нужно сверстать на бустрапе", а там макет визитки.

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

vovka-morkovka, неа, люди просто "где-то услышали, что это современно-модно-молодёжно", и хотят, чтобы было "как у людей", при этом что это, и зачем он все-таки нужен - разбираются единицы.