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

Question

[Roweb]

Часто приходят макеты в одной декстопной версии, которые нужно верстать адаптивно. С версткой проблем нет. С дизайном не понимаю как лучше делать - размер отступов, размер шрифта заголовков, контента.., когда, что и на сколько уменьшать. Может какие то блоки должны сохранить размер и их лучше не трогать?

Answer 1

[dollar]

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

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

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

Answer 2

[Евгений]

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

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

вроде все описал как обычно поступаю при заказе на адаптив без мобильных макетов

Comments

[alex-1917]

под среднестатистический палец лучше ширину 48px.

Answer 3

[Sanes]

Адаптивная верстка предполагает скрытие блоков на мобильной версии. Начните с приоритетов, какие блоки важные, а какими можно пожертвовать в мобильной версии. Тоже самое касается элементов внутри блоков.