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

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

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

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

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

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

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

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

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