Разрабатывать ли несколько макетов для разных устройств?

Question

[Артем]

Здравствуйте!

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

Нужно ли для этого разрабатывать несколько макетов? Если да, то сколько? Допустим, верстать будем на Bootstrap 3, тогда и вариантов макета должно быть 4 штуки? Тогда какой размер должен быть у минимального макета?

Если это некая панель управления, типа админки, стоит ли вести разработку по технике mobile-first? В дальнейшем планируется создание мобильных приложений. Моё мнение - двигаться здесь лучше в обратную сторону, от больших экранов к маленьким, в сторону уменьшения функциональности. Но хотелось бы услышать, что советуют опытные разработчики.

Answer 1

[Дима Паутов]

Мне кажется вам еще рано создавать адаптивный сайт, раз спрашиваете об этом. Наберитесь опыта в адаптивности. Ведь адаптивный сайт - это не просто изменение структуры блоков. Это сугубо моё мнение. Иначе наступите на кучу граблей. В первую очередь, нужно знать основы верстки. Без этого никуда. Так вы никогда не поймёте, как работает браузер.

При чем тут мобильное приложение и mobile-first?

Допустим, верстать будем на Bootstrap 3, тогда и вариантов макета должно быть 4 штуки?

Бутстрам вам не скажет, сколько должно быть макетов. Все зависит от вашего дизайна. Если он простой, то макеты вам не понадобятся. Знание сетки бутстрапа вам будет достаточно для перестроения блоков. А так же, использование бутстрапа, накладывает на вас некоторые ограничения. Ведь вам придётся рисовать под него. Выбирайте инструменты по необходимости, а не потому, что так чаще всего делают многие.

Моё мнение - двигаться здесь лучше в обратную сторону, от больших экранов к маленьким

Для начала, нужно вам понять, в чем истина mobile-first и от чего лучше начать. Ибо я уверен, что вы не знаете, в чем разница. Это лишь моё мнение.

Я вижу 3 варианта, для решения проблемы.
1) Рисуете макет на 1920 например. Допустим, у вас фотошоп. Дальше по немногу уменьшаете рабочую область и все элементы, смотрите, что и как выглядит. Все ок? Уменьшаете дальше. Если видите, что выглядит один блок уже не хорошо, текст не влазит или еще что. Вот вам 2й макет. И так вплоть до 320px. Но такой способ не даст вам полной картины. Браузер - это не фотошоп и не иллюстратор. Многое он не умеет, а то, что умеет, работает не всегда так, как в фотошопе. Ну думаю вы и так это знаете)))

Минусы:
- Это очень долго.
- Вы все ровно не предусмотрите все возможные нюансы.

2) Это сидеть с фронтендом и делать прям в живую. Так вы будите видеть как все работает в живую и видеть все проблемы. Ведь о некоторых вещах вы может даже и не подумать. Главное тесно работать с фронтенд разработчиком. Вам проще будет найти точки ширины, высоты для рисования макета.

Плюсы:
Более детальная проработка сайта

Минусы:
Время

3) Чаще всего, рисуют 4 макета. Это десктоп(1920), ноут(1366), планшет(1024 - 768), телефон(480 - 320). А там разработчик по ходу дела сам меняет мелкие моменты.

Плюсы:
Самый простой и быстрый вариант

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

Answer 2

[dom1n1k]

По-хорошему - да, создавать.

Мое мнение, что для хорошего адаптивного сайта макетов должно быть как минимум три - 320 (телефоны), 720 или 768 (планшет вертикально) и 1280+ (десктопы, ноуты и некоторые самые большие планшеты). Горизонтальный планшет в этом случае получается из макета на 1280 плюс некоторые словесные описания. Типа такого: берется десктоповый макет, только товаров в ряд 4 вместо 5 и базовый размер шрифта на 1px меньше. Это пример из головы, но суть думаю понятна.
Для тех сайтов, которые тянутся вширь без ограничений максимальной ширины, имеет смысл также добавить 4-ый размер - 1920.

То есть если вопрос "нужно ли?" - ответ "да, очень желательно".
Ну а дальше вопрос вашего бюджета, сроков, требований к качеству результата и пр.

Answer 3

[Oleg_imarketer]

Все просто: три макета. Минимальный 320. Но сделать очень непросто) Если у разработчика не толстое портфолио, не работайте с ним. Фриланс - это не вариант. Не стоит экономить.

Answer 4

[nepster-web]

1) выкинуть Bootstrap 3. Использовать FlexBox. Тудаже PostCss + GULP (WebPack если нужно)
2) mobile-first есть некоторые преимущества и удобства. + Рекомендует гугл. Кстате на mobile-first можно выйти и через десктоп версию. Например вот так:
- Верстаем деск топ версию, а далее при импровизации верстки под телефоны просто выносим, что что нужно за точки (min-width).
3) Что касается макетов, тут все зависит от вашего времени, обычно делают макет для десктопа, а потом импровизация разработчиков. В идеале 3 макета будет достаточно. Тоесть мобилы, планшеты, десктоп.

Comments

[Андрей]

что это за термин такой "импровизация верстки"? и кстати у вас ошибочное представление о mobile-first

[nepster-web]

Андрей: нет, это не у меня ошибочное представление - это требование контор или клиентов - быстрее, дешевле и еще как можно круче.

[Андрей]

nepster09: да нет же. "Кстате на mobile-first можно выйти и через десктоп версию" это бред. есть вообще два понятия Graceful Degradation и Progressive Enhancement а в них уже входит mobile-first и desktop-first