Задать вопрос

metaf

Ответы пользователя по тегу Адаптивный дизайн

  • Как правильно сделать адаптивную верстку если дизайн разный?

    @metaf
    Ну так скажите заказчику, что возможности верстки не безграничны и нужно делать 2 версии сайта, например, определять на сервере что за девайс. Ну и опишите все вытекающие, типа поддержки двух версий сайта, что есть ужасный геморрой.
    Почему нужно делать именно так - верстка может быть только последовательной, что не соблюдено в дизайне. Давите на скорость загрузки на мобильной версии и самое главное - на то, что это значительно ухудшит СЕО (зачастую заказчики услышав "плохо для СЕО" становятся шелковыми и слушают каждый ваш совет).
    Пусть выбирает - либо две версии, либо переделывать макет.
    Ответ написан
    Комментировать
    Комментировать

  • Сейчас все используют бутстрап при адаптивной вёрстке?

    @metaf
    А как вы думаете писать разные леяуты? Думаете, везде будут семантичные классы? Даже если писать сетку в css, а не в html, вы в итоге придете к тому, что у вас будет .l-sb, .l-с, всякие col и т.д! Если, конечно, весь ваш сайт не состоит из одной страницы с контентом и сайдбаром.
    А бутстраповские классы - это как единый язык для верстальщиков - видишь их и сразу понимаешь что там написано и как сетка перестраивается под разные разрешения.
    П.с. Я бутстрап не использую и не люблю, но что может так возмутить в той сетке - не совсем понимаю. Сетка там неплохая для шаблонных задач.
    Ответ написан
    Комментировать
    Комментировать

  • Правильный ли подход к адаптивной вёрстке?

    @metaf
    У вас получается desctop-first подход, намучаетесь потом перекрывать всякие десктопные стили на мобилках.
    Наиболее удобно и читабельно организованный код - когда всё в одном файле, а media описаны внутри класса
    .class {
  //general & mobile styles
  color: red;
  @media (min-width: 600px) {
    //tablet & above styles
    color: green;
  }
  @media (min-width: 1200px) {
    //desktop styles
    color: black;
  }
}
    Ответ написан
    6 комментариев
    6 комментариев

  • Как решить проблему с вёрсткой навигационной панели с описанием?

    @metaf
    Я когда только начинала верстать, мне постоянно твердили, что правильно заданный вопрос уже содержит в себе ответ...
    Предположим, у вас структура 
    <li>
	<a href="#">link</a>
	<span>description</span>
</li>

    Когда параграфа нет, под надписью должно быть пустое пространство: a {margin-bottom: Xpx}, где X = высота параграфа.
    Когда параграф есть, пустое пространство должно сбрасываться: a:not(:last-child) {margin-bottom: 0}.
    Параграф должен быть центрирован, не переноситься по словам и растягивать ячейку на свое содержимоеli {text-align: center} span {white-space: nowrap}

    Вам это нужно? codepen.io/olgar/pen/EyNEXK
    Ответ написан
    8 комментариев
    8 комментариев

  • Как правильно поступить с адаптивом в данном случае?

    @metaf
    Почему не можете использовать flexbox? Если из-за поддержки, проверяйте через modernizr и всем неподдерживающим браузерам делайте где возможно через float/display:inline-block+rtl-ltr flexbox polyfill или любые другие хаки css и оставшимся - через jQuery, так % людей, видящих прыгающие или мигающие блоки при загрузке будет ниже.
    Правда, и работы будет в намноооого больше. Ну и обязательно все это обсудите вначале с заказчиком, потом с дизайнером. Я бы за такое раза в 4 больше эстимейт дала)) Может, действительно проще перерисовать или отдельный мобильный сайт сделать?
    Ответ написан
    Комментировать
    Комментировать