@Roweb
Верстальщик

Как научиться адаптировать сайты с позиции дизайна? Что почитать по этому поводу?

Часто приходят макеты в одной декстопной версии, которые нужно верстать адаптивно. С версткой проблем нет. С дизайном не понимаю как лучше делать - размер отступов, размер шрифта заголовков, контента.., когда, что и на сколько уменьшать. Может какие то блоки должны сохранить размер и их лучше не трогать?
  • Вопрос задан
  • 264 просмотра
Пригласить эксперта
Ответы на вопрос 4
dollar
@dollar
uBlock, Ghostery, WOT, TosterComfort, RKN Alert
Пусть присылают второй макет. Потому что обычно мобильная версия сильно отличается от десктопной, по расположению элементов и вообще их наличию, и даже по навигации.

Или берите деньги за мобильный макет, и делайте его сами.

Или можно вообще не заморачиваться, ведь смартфон вполне скушает десктопный сайт. Ну, придется позумить немного, но что поделать, если на мобильную версию средств не выделили.
Ответ написан
e_snegirev
@e_snegirev
лучше все же рисовать отдельные макеты на разные экраны
но если получить мобильный макет не представляется реальным, в таких случаях примерно по такому плану действую

пробегаюсь по всем нужным типовым страничкам, определяю элементы, которые особо в мобилке не нужны. их в итоге закрываем на мобильных разрешениях
затем определить возможные менюшки. малонужные менюшки и хлебные крошки переношу под контент/в футер, основную под бургер скрываю
модалки на мобильном экране начинаем тянуть от края до края экрана
все кнопки стараюсь определять с высотой и шириной минимум 40 пикселей
размеры шрифтов увеличиваются в итоге почти на всех мобильных размерах экрана, но ненамного. заголовки и отступы заголовков уменьшаются
все многоколоночные блоки в планшетке сжимаются в 2-3 колонки, на мобилке желательно в одну
увеличение картинок, если они есть, лучше через какой нибудь лайтбокс попробовать, ибо многие картинки, а тем более всякая инфографика стает часто нечитабельна на мобилке вовсе
предусмотреть переполнение контейнеров во всех возможных местах
вертикальные и горизонтальные отступы между блоками тоже обычно много где сокращаются, ибо мобилка по экрану намного меньше, и место уже начинаешь экономить

вроде все описал как обычно поступаю при заказе на адаптив без мобильных макетов
Ответ написан
@ppskmg
web design
Я делаю 4-5 макетов обычно, если дизайн.

Если заказывают под ключ, то десктопа достаточно, размеры элементов интуитивно подгоняются, главное понимать что важные элементы нужно уместить в 600px +- (единый блок), если первый экран это обычно контакты, офер, форма/кнопка.

Отсюда и шрифты уменьшаются чтобы влезло, но не меньше 13px (требование гугла) и кнопки не слишком мелкие опять же требование гугла и удобство попадать по ним. width: 100%.

Лишние элементы не несущие информационной нагрузки в display: none.
Колоночные элементы: если мелочь то в 2 столбца, остальное в 1.

По шрифтам заголовков: если текст длинный то нужно уменьшать чтобы хотя бы в 3 строки вместить остальные заголовки подгоняются в размер самого длинного, чтобы не было один экран 2 слова крупным, а следующий заголовок занимает 2 экрана.

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

Когда заказывают на тильде вообще не парюсь о таких вещах как мобилка (+3-4 часа на 14+ экранов).
А вот если ручная вёрстка то лучше оплату брать за это. большая часть правок именно на мобилку выливается.
Ответ написан
Sanes
@Sanes
Адаптивная верстка предполагает скрытие блоков на мобильной версии. Начните с приоритетов, какие блоки важные, а какими можно пожертвовать в мобильной версии. Тоже самое касается элементов внутри блоков.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы