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

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

Я пользуюсь распечатками с нужной адаптивной сеткой и рисую карандашом. Или делаю прототип в Balsamiq. Потом, когда идея ясна, рисую макет в фотошопе по той же самой сетке.

Исследуйте нужную вам адаптивную сетку. Например, зайдите на сайт фреймворка Skeleton или Bootstrap, почитайте документацию, посмотрите примеры, поковыряйтесь в сайтах, сделанных на них. А макет делаете в фотошопе, используя размеры колонок сетки для нужного разрешения. Размеры нанести можно направляющими.

Вопрос «Как разработать адаптивный дизайн/макет» появляется на Тостере очень часто. Попробуйте вдобавок ко всему исследовать вопрос при помощи поиска по Тостеру.

С изучения документации конкретной адаптивной сетки/фреймворка.

Используйте модульную сетку и медиазапросы, тогда сам процесс верстки последующих страниц станет проще, дизайн — лучше, а верстка действительно будет адаптивной. Адаптивная верстка предполагает наличие модульной сетки. Размеры блоков в этой сетке прописаны в зависимости от ширины окна браузера. Вот пример.

Есть хороший слайдер, в который можно вставлять видео и html-контент. Использовал его в адаптивных сайтах. Но! Нет автоплея у видео. Хотя можно попробовать тогда вставить видео как html-контент, а не средствами слайдера, и у видео задать атрибут autoplay.

fotorama.io

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

1. Узнаете размеры и поведение сетки, которую использует верстальщик. Например, какая на каком разрешении дисплея ширина одной колонки.
   
2. Делаете несколько соответствующих шаблонов в фотошопе, расставив направляющие и настроив сетку в фотошопе.
   
3. Разрабатывате дизайн, придерживаясь размеров сетки.