Ответы пользователя по тегу Адаптивный дизайн
  • Почему не совпадает верстка с реальными устройствами?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Вы неправильно настроили панель разработчика. У мобильных телефонов количество физических пикселей больше, чем количество «css-пикселей» в браузере. Разница выражается параметром Device Pixel Ratio (DPR) — это коэффициент умножения, сколько физических пикселей в одном «css-пикселе».

    take.ms/v1Ms8

    В режиме Responsive у Хрома по-умолчанию DPR=1.0 (у макбука по-умолчанию 2.0, т.к. retina-экран). Вы выставили ширину вьюпорта 540px, но у вашего телефона, скорее всего, DPR = 1.5 и разрешение в браузере соответствует 360px (540 / 1.5 = 360).

    Вам надо включить отображение DPR и доработать верстку на малых экранах от 540 до 320px.
    Ответ написан
    6 комментариев
  • Удобные средства для адаптивной верстки?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Не понял, какие у вас проблемы с масштабом.

    В хроме удобный эмулятор экранов, как мобильных, так и десктопных, тач и не тач, разной ориентации и плотности пикселей.
    Можно даже имея монитор 1920×1080 посмотреть как сайт будет выглядеть на более крупных экранах, например, 2550×1440
    https://youtu.be/RB2ZDE7WVpk
    Ответ написан
    Комментировать
  • Как правильно пересчитывать поля и отступы из px в em?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Margin и padding в em всегда рассчитываются от размера шрифта своего элемента по формуле:

    margin(em) = margin(px) / font-size(px)

    где font-size(px)вычисленное значение размера шрифта. Хотя сам размер шрифта может быть задан в любых единицах измерения или может быть унаследован от любого своего родителя.

    Когда у цепочки родителей задан размер шрифта в em, очень легко запутаться со всеми этими пересчетами. Ориентируйтесь на вычисленное значение, которое можно посмотреть в инструментах разработчика в браузере (см. правую колонку).

    a23370385b8b4a189b2e98eb727e3fb2.png
    Ответ написан
    3 комментария
  • У кого-нибудь есть описание к "Fluid Responsive Table"?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    thenewcode.com/852/A-Fresh-Approach-to-Responsive-... — эту ссылку нашел в описании к демке.
    Ответ написан
    Комментировать
  • Какие современные требования к верстке?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Для оптимизации кода можно ввести количественную меру: «зеленые» значения в pagespeed.

    Конечно, не все пункты из списка pagespeed сто́ит выдрючивать на этапе верстки, некоторые имеют смысл только на боевом сервере. Но если уж на проекте GIT, то закинуть шаблоны на GitHub Pages и потестить скорость было бы здорово.
    Ответ написан
    Комментировать
  • Как менять css-стили в зависимости от размера окна, но без использования медиа-запросов?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Есть техника эмуляции одного брейкпоинта через min-width, max-width и calc.
    Этот «брейкпоинт» зависит от размеров контейнера, а не от ширины окна — идеально для виждетов.

    codepen.io/paulradzkov/pen/NNgVEO — вот пример.
    https://medium.freecodecamp.com/the-fab-four-techn... — вот статья с описанием принципа работы.
    Ответ написан
    Комментировать
  • Какие книги используете для вдохновения в web дизайне?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    www.awwwards.com/shop — не эти ли книги вы ищите?
    Ответ написан
  • Как UI-дизайнеру с PSD макетами тестировать интерфейсы на экранах разных размеров?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Такое возможно.

    Если у вас все основные состояния уже нарисованы, экспортируйте дизайн в Adobe Edge Reflow
    https://www.adobe.com/ru/products/edge-reflow.html

    Тут вы сможете «докрутить» адаптивность на промежуточных брейкпоинтах без изучения кода.
    Ответ написан
    1 комментарий
  • Подробнее об адаптивной верстке?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Клиентская оптимизация — прямая обязанность верстальщика. Не все рекомендации Page Speed верстальщик может выполнить самостоятельно, но он должен выступать с инициативой и обращаться за помощью к коллегам: включить gzip на сервере, поправить htaccess, чтобы оптимизировать кэширование и т.д.
    Ответ написан
    Комментировать
  • Есть ли готовые хорошие адаптивные шаблоны для интернет-магазина?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Готовые продажные шаблоны https://wrapbootstrap.com/themes/e-commerce
    Ответ написан
    Комментировать
  • Адаптивная вёрстка - как побороть боль?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Методология, которая снимает боль, называется «Mobile First». Bootstrap ее тоже использует.

    Суть кратко: мобильный макет обычно выглядит проще всего, там одна колонка, минимум декора → верстаем его в первую очередь. В css на этом этапе появятся стили для текста, фоны, цвета, какие-то базовые отступы.
    На более крупных экранах макет усложняется, появляются колонки и т.д. При помощи media queries к мобильной версии дописываем layout-стили, переопределяем уже написанные стили, если нужно (например, размер шрифта увеличился). Базовые стили наследуются из уже написанного кода.
    И так для каждого компонента, начиная от маленького экрана заканчивая самым большим, «уточняем» верстку пока не будет все как на дизайне.

    Делал когда-то кодкаст по такой методологии cssdeck.com/labs/adaptive-tabs
    Нажмите кнопку «play» чтобы посмотреть процесс написания кода.

    Если кода не видно, зайдите в режиме инкогнито (без адблока).
    Ответ написан
    Комментировать
  • Как должен меняться размер шрифтов при адаптивной верстке?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Правило, которым пользуюсь я:

    В настольной версии размер основного шрифта (абзацы) не менее 16px. Заголовки от h4 до h1 растут по с коэфициентом 1.250 (Major Third): h4 - 20px, h3 - 24px, h2 - 32px, h1 - 40px. (округленно)

    Для маленьких экранов (<768px) абзацы остаются 16px или уменьшаются до 14px (если много текста). Заголовки h4...h1 пересчитываются от нового размера абзаца с коэффициентом 1.125 (Major Second). В этом случае размеры заголовков растут более плавно: h4 - 18px, h3 - 20px, h2 - 23px, h1 - 26px.

    Промежуточных брейкпоинтов для размера шрифта не делаю, чтобы не усложнять.
    Ответ написан
    2 комментария
  • Мобильный сайт? Мобильная версия сайта или мобильное приложение?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Мобильное приложение делать не стоит. Потому что:
    1. Никто не поставит мобильное приложение, чтобы сделать единоразовую покупку. Мобильное приложение имеет смысл только для постоянных покупателей, но преимуществ по сравнению с браузерной версией почти нет, а недостатков хватает.
    2. Совершать покупки в браузере удобнее: можно открыть несколько вкладок с разными товарами; можно поделиться ссылкой, сохранить страницу или добавить страницу в закладки. Чтобы реализовать эти же функции в своем приложении, придется потратить много усилий (денег), а в браузере все это доступно бесплатно.

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

    Пример из нашей практики:
    До редизайна существовала только настольная версия сайта. По статистике мобильных пользователей было 12%.
    Сделали адаптивную версию — мобильных пользователей стало 60%!
    Теперь переделываем все дизайн процессы с «mobile last» на «mobile first».

    В вашем случае рекомендую делать адаптивный сайт. Самый дешевый вариант: допишите стили к существующей версии, чтобы сделать многоколоночный сайт одноколоночным. Пусть первая версия будет не идеальной и даже корявой, но вы посмотрите, будет ли расти число посещений и покупок с мобильника. Если рост будет, есть смысл вкладываться в правильную адаптивную версию сайта.
    Ответ написан
    4 комментария
  • Под какие разрешения рисовать адаптивный дизайн?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    При рисовании любого дизайна встает техническая задача — уместить элементы сайта в указанную ширину. Уместить в заданную ширину тяжелее, чем растянуть до заданной ширины. Растянуть легко на этапе верстки. Поэтому нужно ориентироваться на минимальную ширину в классе.

    1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

    2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

    3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

    В принципе, этого достаточно, чтобы верстальщик справился.

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

    В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

    Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.
    Ответ написан
    Комментировать
  • Как вывести изображения разного размера, что бы они выгялдели одинаково?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    https://code.google.com/p/resize-crop/ — попробуйте подровнять их скриптом. (не знаю, как он работает с респонсив контентом)

    Второй вариант — сделать обложки фоном с background-size: cover. Но в этом случае обложки не будут индексироваться как изображения, и это понизит «accessibility» сайта.
    Ответ написан
    Комментировать