Как правильно адаптивить сайт на очень ограниченное количество экранов?

Question

[Shadowman69]

Вопрос таков, допустим есть верстка лендинга и клиент заказал адаптивность под 3 расширения (экраны): десктоп, планшет и мобильная. И Вы начинаете ссужать размер экрана и еще, не доходя до размера планшетов, уже что то поехало или перескочило на следующую строку. Как быть? Есть ли какое-то общепринятое опытное решение? Или получается так, что неважно сколько экранов заказывает клиент (3-5), все равно нужно делать адаптив под каждые 50-100 пикселей? Интересует мнение опытных верстальщиков.

Answer 1

[Дима Долготер]

если четко просят конкретные экраны, то делай под конкертные ( не забываем про адаптивный режим в инструментах разработчика). Если скажут что едет верстка, то скажи за доп плату. Но лучше предупреди об этом

Answer 2

[dom1n1k]

Моё имхо (мнение хрен оспоришь).

Верстка должна вести себя прилично на абсолютно любом размере экрана от 320 и до бесконечности. Не должно быть жесткой заточки под какие-то фиксированные размеры и ломающегося лейаута между ними. Указанные в ТЗ референсные размеры - это приоритеты, на которых все должно быть подогнано досконально. Между ними допускается, скажем так, "неоптимальный" вид (например, размер элементов несколько меньше или больше оптимального), но ничего не должно ломаться или рассыпаться.

И если бы мне кто-то сказал, что поломанный при какой-то там ширине (типа 675 или 1137) лейаут он будет чинить за дополнительную плату - я был бы в недоумении вплоть до готовности расстаться с таким разрабом.

Да, хороший адаптивный дизайн и верстка - это сложно и муторно. А вы думали в сказку попали?

Comments

[Shadowman69]

Так я не имею ничего против, просто хороший адаптивный дизайн под все разрешения - это много времени, за которое не все заказчики хотят платить. Меня просто убивает тот факт, что дизайн лендинга стоит от 100$, а верстку того же лендинга ценят в 4000 рублей (или 1000 гривен). Сравните насколько верстка сложнее в сравнении с дизайном. а хотят, чтоб ее полубесплатно все делали. Я лично на заказы по верстке. которые <100$ даже смотреть не хочу. Если так пойдет далее, то версткой будут заниматься только школьники или заказчики сами будут ее изучать, и вот тогда попробуют стоит ли оно того. чтоб верстать идеальную верстку на протяжении нескольких дней за 4000 рублей. Извините, это так, просто накипело)

Answer 3

[DmitriySwan]

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

То есть про такие медиа-запросы забудьте:

@media screen and (width:768px) { 
  body { background: #fc0; }
}

Используйте либо mobile first:

@media screen and (min-width:320px) { 
  body { background: #fc0; }
}

Либо же начиная с десктопа:

@media screen and (max-width:1200px) { 
  body { background: #fc0; }
}

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

Comments

[Shadowman69]

То есть неважно сколько экранов заказывает клиент, все равно нужно адаптивить под все разрешения?

[DmitriySwan]

Shadowman69, По сути да, нюанс только какая мобилка: начиная от 320пх или же начиная от 360пх, но по-моему мнению под 320 надо обязательно адаптировать, ибо по СНГ еще высокий процент таких пользователей.

[DmitriySwan]

Shadowman69, При качественной адаптивной верстке клиент вернется, а если сделать тупо фиксированную адаптивку под три экрана - вряд ли. Хоть и сэкономишь время и немного нервов)
Да и может не проканать

[dom1n1k]

Какие 480?! Покажите мне хотя бы один телефон с таким экраном.
Процентов эдак 99 мобил покрываются тремя размерами - 320, 360, 375.
Чуть ли не единственное значимое исключение - "плюсовые" Айфоны, там 400 с небольшим.

[DmitriySwan]

dom1n1k, ошибся, 380 хотел написать) Ну вообще так идет, что на 320 забивают и делают от 360пх, как вот в последнем моем проекте

[Shadowman69]

DmitriySwan, да знаю, всегда под 320 пикселей делаю адаптив, правда иногда это очень даже не легко, не все элементы адекватно вмещаются в такую малую ширину)