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

23 апреля, 11:15 Работа 4092 5
Часто приходят макеты в одной декстопной версии, которые нужно верстать адаптивно. С версткой проблем нет. С дизайном не понимаю как лучше делать - размер отступов, размер шрифта заголовков, контента, когда, что и на сколько уменьшать. Может какие то блоки должны сохранить размер и их лучше не трогать?
5 комментариев
Сортировка:
Добавить комментарий
Sania
Sania 2019, 23 апреля, 17:41
0
По шрифтам заголовков: если текст длинный то нужно уменьшать чтобы хотя бы в 3 строки вместить остальные заголовки подгоняются в размер самого длинного, чтобы не было один экран 2 слова крупным, а следующий заголовок занимает 2 экрана. Тяжёлые элементы тоже лучше вырезать или делать ресайз под мобилку. Когда заказывают на тильде вообще не парюсь о таких вещах как мобилка (+3-4 часа на 14+ экранов). А вот если ручная вёрстка то лучше оплату брать за это. большая часть правок именно на мобилку выливается.
Leonid Levchenko
Leonid Levchenko 2019, 23 апреля, 16:27
0
Я делаю 4-5 макетов обычно, если дизайн. Если заказывают под ключ, то десктопа достаточно, размеры элементов интуитивно подгоняются, главное понимать что важные элементы нужно уместить в 600px +- (единый блок), если первый экран это обычно контакты, офер, форма/кнопка. Отсюда и шрифты уменьшаются чтобы влезло, но не меньше 13px (требование гугла) и кнопки не слишком мелкие опять же требование гугла и удобство попадать по ним. width: 100%. Лишние элементы не несущие информационной нагрузки в display: none. Колоночные элементы: если мелочь то в 2 столбца, остальное в 1.
Vova P
Vova P 2019, 23 апреля, 14:24
0
Адаптивная верстка предполагает скрытие блоков на мобильной версии. Начните с приоритетов, какие блоки важные, а какими можно пожертвовать в мобильной версии. Тоже самое касается элементов внутри блоков.
Maks
Maks 2019, 23 апреля, 13:20
0
Лучше все же рисовать отдельные макеты на разные экраны, но если получить мобильный макет не представляется реальным, в таких случаях примерно по такому плану действую, пробегаюсь по всем нужным типовым страничкам, определяю элементы, которые особо в мобилке не нужны. их в итоге закрываем на мобильных разрешениях. Затем определить возможные менюшки. малонужные менюшки и хлебные крошки переношу под контент/в футер, основную под бургер скрываю модалки на мобильном экране начинаем тянуть от края до края экрана, все кнопки стараюсь определять с высотой и шириной минимум 40 пикселей. Размеры шрифтов увеличиваются в итоге почти на всех мобильных размерах экрана, но ненамного. заголовки и отступы заголовков уменьшаются все многоколоночные блоки в планшетке сжимаются в 2-3 колонки, на мобилке желательно в одну. Увеличение картинок, если они есть, лучше через какой нибудь лайтбокс попробовать, ибо многие картинки, а тем более всякая инфографика стает часто нечитабельна на мобилке вовсе предусмотреть переполнение контейнеров во всех возможных местах. Вертикальные и горизонтальные отступы между блоками тоже обычно много где сокращаются, ибо мобилка по экрану намного меньше, и место уже начинаешь экономить.
Ivan
Ivan 2019, 23 апреля, 12:27
0
Пусть присылают второй макет. Потому что обычно мобильная версия сильно отличается от десктопной, по расположению элементов и вообще их наличию, и даже по навигации. Или берите деньги за мобильный макет, и делайте его сами. Или можно вообще не заморачиваться, ведь смартфон вполне скушает десктопный сайт. Ну, придется позумить немного, но что поделать, если на мобильную версию средств не выделили.

IT Новости

Смотреть все