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

Odisseya

Оптимизирую PageSpeed & Performance
Ответы пользователя по тегу Вёрстка

  • Как такое реализовать?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Можно сделать трассировку в векторном редакторе и сохранять как SVG, где тексты останутся таковыми. Для адаптивности — пропишите для svg медиа-запросы и сместите текстовые блоки, чтобы все из них были в зоне видимости.
    Ответ написан
    Комментировать
    Комментировать

  • Скорость страницы после верстки?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Подгружайте вместо видео картинку-заставку. Например, если это YouTube. А по клику на заставку — загружайте видео. Чтоб не тратить время на днс-резолв заставку можно у себя "закэшировать."
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать такой элемент?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance

    Обычно, для декоративных целей трансформируют псевдо-элемент. Если трансформируете родителя, то дочерний элемент надо "детрансформировать" обратно.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как можно сверстать данную секцию?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Ответ написан
    2 комментария
    2 комментария

  • Адаптивная верстка - на некоторых сайтах CSS min-width: 320px; и overflow-x: hidden; пишут для html, а на некоторых - для body. Как правильно?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    overflow чаще прописывают для корневого эл-та — html (:root). Подробнее про различия между <html> и <body> в CSS.
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать у элемента угол скошенный под прямым углом?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    линейный градиент, svg, clip-path
    Ответ написан
    Комментировать
    Комментировать

  • Что писать в техзадании верстальщику?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Типовые требования: валидность CSS&HTML, семантика, кроссбраузерность, адаптивность, стилизация разных состояний интерактивных элементов.

    Тестирование: отсутствие неиспользуемых CSS-селекторов, тест на переполнение блоков, отсутствие ошибок в консоли.

    Быстродействие: Google pageSpeed 90+, Chrome LightHouse audit, gtMetrix скорость загрузки, скорость начальной отрисовки сайта браузером, оптимизация изображений, минификация скриптов и стилей, CriticalPath и приоритизация загрузки некоторых ресурсов, стратегия загрузки шрифтов, профилирование js.

    Простота последующей поддержки проекта: использование БЭМ (или др. методологии именования селекторов), создание универсальной библиотеки блоков из кот. "набираются" страницы, понятное именование классов, единая логика в отступах.

    Экстра: анимации-эффекты для повышения конверсии и удержания пользователя, ретинизация графики, версии шаблонов для А/Б тестирования.

    Технологии на которых все это реализуется могут быть разными — выбирайте из распространенных, чтоб стоимость поддержки была подешевле. Если на верстальщика ложится задача натяжки на CMS, то стоит прописывать нюансы seo-оптимизации, конфигурации движка (и иногда веб-сервера). Перечисленное может звучать устрашающе, но обычно у верстальщика есть стартовая заготовка в которой 50% работы уже подготовлены. Если у вас недостаточно опыта и нет "шарящего" знакомого, можно найти фрилансера исключительно для создания ТЗ и договориться, чтобы он помог вам при приемке заказа от исполнителя.
    Ответ написан
    2 комментария
    2 комментария

  • Как реализовать такой эффект?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Если нужно, чтоб фигуры двигались с разной скоростью, гляньте в сторону параллакса. Если нужен простой способ — можно привязать позицию фона к событию mousemove.
    Пример: https://codepen.io/skyajay/pen/rVVPdX
    Ответ написан
    Комментировать
    Комментировать

  • Договор на верстку?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Обычно финансово-авторские вопросы оговариваются в договоре, а технические — в ТЗ, по необходимости составляются приложения к договору. Ключевая фраза ТЗ: "реализация не оговоренных в техническом задании элементов выполняется на усмотрение исполнителя".
    Ответ написан
    Комментировать
    Комментировать

  • Банальный вопрос, какие правильно использовать теги для кнопок?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Рассмотрим 2 сценария:
    1. у пользователя js включен
    2. js отключен/поломан


    Если при отключенном js контент мод.окна должен быть доступен — вызов мод.окна делаем якорной ссылкой <a href="#id">, т.к. мод.окно изначально должно находиться в потоке (а скрываться средствами js), добавляем блок мод.окна в конец страницы. Например, для лендинга важна форма заявки и она всегда должна быть доступна.

    Если мод.окно не должно быть доступно без js — делаем <button> и исключаем из потока, например, через display:none

    Если при отключенном js мод.окно должно вести на другую страницу (например, форма логина) — делаем ссылку на другую страницу, а в js мод.окна предотвращаем событие по умолчанию.

    Если что, href является не обязательным атрибутом ссылки, так что, можно его вообще не писать.
    Ответ написан
    Комментировать
    Комментировать

  • Почему Spinner съезжает рядом с TextInputLayout?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Действительно, похоже проблемы из-за типографики. На самсунге поехала базовая линия и шрифт отличается:
    5ae2b6e3521f9518012851.jpeg
    А каким эмулятором вы пользуетесь?
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать такой треугольник?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Хвостик в svg, кот. позиционируем абсолютно над блоком.
    Ответ написан
    7 комментариев
    7 комментариев

  • Как сделать адаптивным сайт для мобильных?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Проверьте прописан ли у вас в html 
    <meta name="viewport" content="width=device-width,initial-scale=1">
    или подобное правило. Это нужно, чтобы стили реагировали на условия в медиавыражениях.
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать изображение показанное на картинке?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    1. через img — это контентное изображение (особенно, если понадобится его править через админку).
    2. флекс-бокс.
    3. добавить , внутри которого тег с медиазапросом и атрибутом srcset с ретиновым вариантом.
    4. calc(50% + 15px)

    Форму изображению можно придать несколькими способами:
    • сразу сохранить с наложением фона: jpg/png
    • наложить верхним слоем svg-маску
    Ответ написан
    Комментировать
    Комментировать

  • Зачем нужны отступы в модульной сетке?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Чтобы создать визуальный ритм, который за счет единообразия упрощает и ускоряет восприятие информации.
    Ответ написан
    Комментировать
    Комментировать

  • Не удается добавить тень на стыке блоков. Какие есть решения?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Можно добавить тень псевдо-элементом: jsfiddle.net
    Хотя, тень у вас и так есть.
    spoiler
    .header{
  height: 20px;
  background-color: red;  
  position: relative;
  z-index: 1000;
}

.slider{
  position: relative;
  z-index: 1;
  height: 300px;
  background-color: grey;
}

.slider::before {
  box-shadow: 0 2px 8px #000;
  content: "";
  position: absolute;
  top: -8px;
  width: 100%;
  height: 8px;
}
    Ответ написан
    Комментировать
    Комментировать

  • Проблема верстки?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Сейчас блок «.calling» налазит на флоатный блок «Заслуги», т.к. блочные элементы не видят перед собой флотных блоков, а блок «Заслуги» не имеет clearfix после себя, который это исправит. Т.к. сетка флоатная, стоит всей правой колонке с блоками «Заслуги» и «Связь» сделать общий контейнер, чтобы структура была:
    • контейнер:
      • левая колонка
      • правая колонка (внутри нее уже блоки «Заслуги» и «Связь»)


    А уже каждую из колонок зафлоатить.
    Ответ написан
    Комментировать
    Комментировать

  • Какие нужно учитывать факторы при наборе текста для адаптивных проектов?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    • учитывать висячую типографику,
    • прогнать тексты через типограф,
    • тестировать блоки на переполнение,
    • для маленьких вьюпортов: разрешить переносы слов (hyphens: auto) и возможность разрывов слов по буквам в таблицах.
    Ответ написан
    3 комментария
    3 комментария

  • Почему не обрабатывается height: 100%?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Если вам нужно height: 100% от высоты окна (вьюпорта браузера), то можно использовать:
    height: 100vh;
    Ваш пример.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать верстку кроссбраузерной?

    Odisseya
    @Odisseya
    Оптимизирую PageSpeed & Performance
    Стоит посматривать актуальную статистику используемых браузеров (для рунета).
    Удобно в сервисах вроде browsershots.org прочекать скриншоты, а вживую чекать на самых ходовых браузерах. Сейчас с кроссбраузерностью попроще, чем лет 5 назад, а заморочки возникают, когда нужна поддержка браузеров-динозавров или хочется заюзать что-то из новенького.
    Ответ написан
    Комментировать
    Комментировать