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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Пункт 3.8. правил сервиса.
    2. Такое происходит, когда контент больше ширины экрана, поэтому он и увеличивает область видимости.
    Ответ написан
    Комментировать
  • Как протестировать сайт на кроссбраузерность и адаптивность без интернета?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Определенно браузер сам по себе. Несколько браузеров. И дебаггер. Иной раз и виртуалку можно поставить.
    Ответ написан
    2 комментария
  • Адаптация дизайна под ширину устройства - работа дизайнера или верстальщика?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Я придерживаюсь нескольких взглядов:
    1. Все, что нарисовано может быть сверстано (и при этом хорошо, да)
    2. Дизайнер должен понимать, вне зависимости от квалификации, базовые понятия переноса макета в верстку, т.е. в том числе многоколоночное построение. Как минимум для того, чтобы не быть обманутым фичами в редакторе (XD к примеру для мобилки выстраивает 4-колоночную сетку, что в общем неприемлимо для стандартного подхода неимзменяемого количества колонок на всех разрешениях).
    3. Верстальщик должен уметь понимать дизайнера, его условности, чтобы как минимум донести мысль через аппарат бюрократии или просто напрямую.
    4. Верстальщик в идеале должен иметь навык дизверстки.

    При этом да, бюджет, в основном это:
    1. Где-то нанятый недоучка\начинающий дизайнер, который просто срубил деньжат на скорую руку, а его клиент сэкономил. Он, логично, знать про все это еще не знает.
    2. Вы работаете в одном офисе и можно подойти надавать по щам, да пояснить за жизнь.

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

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

    ЗЫ: в работе я вообще достаточно радикализирован, например общаясь с заинтересованными дизайнерами, которые хотят меня сменить я всегда требую сверстать то, что они нарисовали. Всегда глаза по 5 копеек и поэтому у меня до сих пор нет штатного дизайнера.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если сайт плохо отображается на разных устройства это не браузеры плохие, это код гавно. Не едиными медиазапросами адаптив реализуется, но и умением выстроить логику в межбрейкпойнтном пространстве, к примеру.

    Я рекомендую более комплексно подойти к получению знаний и навыков верстки + кроссбраузерности.
    Сайт без адаптива последние годы (есть ряд исключений, да), это днище рынка.
    Ответ написан
  • Как правильно делать адаптив верстки под большие экраны?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Mobile first уже не первый год оправдывает свое существование. Оптимальнее идти от меньше к большему в верстке.
    2. Для использования различных изображений используется srcset в img или picture тегах.
    3. Большой монитор (чаще широкоформатный) != ретина дисплей (дисплей с повышенной плотностью).
    4. Для нестандартных мониторов, в том числе широкофматных нужен макет, либо ответственность за изменения макета (вообще круто, когда широкоформатка отображает подогнанный под нее дизайн), в противном случае центрируй основной контейнер. Даже при подгонке под широкоформатку имеет место быть центрированный контейнер.
    5. Такие изощрения сами по себе никакого отношения к SEO не имеют. Важно, чтобы сайт адаптировался под мобилку, так как поисковая выдача все больше идет на них.
    6. При такой постановке вопроса ты скорее всего запорешь оптимизацию проекта, либо наделаешь кучу ошибок по валидации и без удержания внимания на сайте при естественном продвижении скорее всего будешь болтаться где-то в конце списка.

    Как правильно делать адаптив верстки под большие экраны?

    Иметь макет для подобных форматов или иметь опыт дизверстки.
    Ответ написан
    Комментировать
  • Вопросы новичка?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    0. сonteiner → container.
    1. Да, container просто находится в той же плоскости, что и твоя БЭМ-логика. Так же может стать примесью.
    2. Бред, все, что от тебя требуется — сделать достаточно гибкую верстку.
    3. Адаптивная верстка это в том числе смесь резиновой и фиксированной верстки, при этом не рекомендую отступы формировать на процентах просто так, ты скорее всего прострелишь себе ногу пару раз.
    4. Блок услуг = аккордеон (это жаргонный термин), команда — скорее всего усложненная карусель. Без JS можно, но в долгосрочной перспективе это два пробитых колена.

    Менторство это штука шаткая, лично я делаю бесплатно это тут и по настроению в моем уютном чатике ойтишнигов.

    ЗЫ: твоя логика верстки в header-е приведет к тому, что тебе придется переверстать в будущем. Не стоит смешивать heroscreen с шапкой. Только в том случае, если она железно не плавающая и вообще привязана только к этому блоку с видео (из области лендингов и фантастики).
    Ответ написан
    2 комментария
  • Как адаптивно сверстать такое меню средствами Bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Первое, что следует взять во внимание, navbar яндекс это просто условно готовая база, которая подойдет для большинства решений, но в момент, когда ты упираешься в дизайн, то он [navbar] работать перестает. К слову, в последней версии вроде прямо готовый модуль убрали и заменили на компоновку.

    Дальше, принять тот факт, что тебе придется описывать шапку на 90% самому.

    Структурно же у тебя все вписывается в сетку и логику:
    container-fluid
    →container (верхняя часть шапки)
    →container + отрицательный margin или transform для желтой навигации и к ней тебе с наибольшей вероятностью удобно будет использовать flex + justfy-content: space-between.

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

    PS: в идеале решение должно быть mobile-first (так проще).
    Ответ написан
    Комментировать
  • Не работает атрибут @media?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Заверни media в .header.

    .header {
       @media (max-width: 840px) {
          /*стили для header*/

    Компилятор сам соберет так, как должно быть.

    На счет синтаксиса не уверен, я на Sass пишу, с SCSS уже пару лет не работал.
    Ответ написан
    6 комментариев
  • Как правильно отлаживать адаптивную вёрстку?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Действительно, какая-то дичь. Ежели ты используешь Chrome Devtools, то там есть вывод размера вьюпорта (при эмуляции устройства и если двигать ползунок панели), зачем его скриптом ловить — для меня секрет.

    Дальше в комментариях верно отметили про стандартные разрешения — можно взять за референс популярный Bootstrap и повторять его breakpoints до того, как начнешь понимать, что к чему.

    Естественно, это не убережет от косяков, ибо да хотя бы пользовательский ввод. Или самое косячное — навигация в шапке. Постоянно с этим сталкиваюсь, особенно при введении новых элементов (сейчас у меня на сайте, к примеру, ни в п... короче ни к месту форма входа, правда ее там никогда и не было). Я к тому, что дизайн в любом случае при некоторых масштабных введениях приходится переделывать. А чтобы максимально избегать провисов между популярными viewport-ами, достаточно осваивать переносы и обрезку контента. Если позволяет условия, конечно.

    Например у флексов есть свойство flex-wrap:wrap, а гриды так вообще супер, можно указать минимальный размер для переноса и он будет работать не как в обычных блоках + зависимость от контента. Но, к сожалению это работает по сути только в списках, при верстке специфического контента работают другие условия.

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

    PS: чтобы тестировать, как мужик открывай эмулятор и дергай ползунок, прокручивая страницу. Где-то поехало — переделывай). А потом лови лучи боли от IE, в котором забыл оттестировать или Safari на iOS.

    PSS: самое малое устройство за базу можешь взять 320 по ширине, а больше 1920. Если шире, то оптимально обернуть в контейнер отцентрированный.
    Ответ написан
    Комментировать
  • Нужно ли дублировать блок для адаптивности?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Мыслишь логично, и:
    1. Flex-шаманство
    2. Grid-шаманство
    3. Перемещение элемента с помощью JS
    4. Да, тут уже идут костыли
    Ответ написан
    Комментировать
  • Какие медиа запросы лучше сделать при верстке сайта?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    У css-фрейморков типа бутстрапа есть отработанные медиазапросы, которых в общем и целом хватает за глаза и за уши.

    А дальше надо прыгать от конкретной задачи, например размеры шапки на медиазапросах может напрямую зависеть, как от размера экрана, так и от наполенения навигации в строку. У меня на практике бывали случали, когда добавив 1 пункт меню, приходилось переписывать медиазапросы таким образом, чтобы его не переносило на новую строку и не ломало верстку. Впрочем, это частные случаи.
    Ответ написан
    Комментировать
  • Смещается картинка, что делать?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Вкладывать в Hn в a нельзя (в широком смысле — блочные в инлайновые)
    2. Позиционирование\марджины\трансформирование в помощь
    Ответ написан
    Комментировать