Мне кажется вам еще рано создавать адаптивный сайт, раз спрашиваете об этом. Наберитесь опыта в адаптивности. Ведь адаптивный сайт - это не просто изменение структуры блоков. Это сугубо моё мнение. Иначе наступите на кучу граблей. В первую очередь, нужно знать основы верстки. Без этого никуда. Так вы никогда не поймёте, как работает браузер.
При чем тут мобильное приложение и mobile-first?
Допустим, верстать будем на Bootstrap 3, тогда и вариантов макета должно быть 4 штуки?
Бутстрам вам не скажет, сколько должно быть макетов. Все зависит от вашего дизайна. Если он простой, то макеты вам не понадобятся. Знание сетки бутстрапа вам будет достаточно для перестроения блоков. А так же, использование бутстрапа, накладывает на вас некоторые ограничения. Ведь вам придётся рисовать под него. Выбирайте инструменты по необходимости, а не потому, что так чаще всего делают многие.
Моё мнение - двигаться здесь лучше в обратную сторону, от больших экранов к маленьким
Для начала, нужно вам понять, в чем истина mobile-first и от чего лучше начать. Ибо я уверен, что вы не знаете, в чем разница. Это лишь моё мнение.
Я вижу 3 варианта, для решения проблемы.
1) Рисуете макет на 1920 например. Допустим, у вас фотошоп. Дальше по немногу уменьшаете рабочую область и все элементы, смотрите, что и как выглядит. Все ок? Уменьшаете дальше. Если видите, что выглядит один блок уже не хорошо, текст не влазит или еще что. Вот вам 2й макет. И так вплоть до 320px. Но такой способ не даст вам полной картины. Браузер - это не фотошоп и не иллюстратор. Многое он не умеет, а то, что умеет, работает не всегда так, как в фотошопе. Ну думаю вы и так это знаете)))
Минусы:
- Это очень долго.
- Вы все ровно не предусмотрите все возможные нюансы.
2) Это сидеть с фронтендом и делать прям в живую. Так вы будите видеть как все работает в живую и видеть все проблемы. Ведь о некоторых вещах вы может даже и не подумать. Главное тесно работать с фронтенд разработчиком. Вам проще будет найти точки ширины, высоты для рисования макета.
Плюсы:
Более детальная проработка сайта
Минусы:
Время
3) Чаще всего, рисуют 4 макета. Это десктоп(1920), ноут(1366), планшет(1024 - 768), телефон(480 - 320). А там разработчик по ходу дела сам меняет мелкие моменты.
Плюсы:
Самый простой и быстрый вариант
Минусы:
Разработчик может поменять некоторые элементы на свой вкус, которые не вошли в данные диапазоны, что в итоге может не понравится вам. А переделывать не особо хочется. Или сделает так, как легче ему в плане реализации
