Ответы пользователя по тегу Вёрстка
  • Дергается скролл на на телефоне на комп версии прокрутка нормальная?

    @Flying
    В первую очередь вам необходимо профилировать нагрузку на отрисовку через профайлер, "дёргание" означает просадку по fps, а просадка по fps означает что задачи основного потока выполнения не влезают в 16ms чтобы обеспечить 60fps.

    Если открыть сайт в Firefox, то он сразу указывает на возможную причину: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Perform..."

    Быстрый просмотр показывает что это действительно так - у вас подключен jquery.sticky.js, созданный аж в 2012-м и реализующий то, что сейчас делается через position: sticky или IntersectionObserver путём навешивания обработчика на событие scroll. Это приводит к тому что на каждое движение страницы запускается JavaScript обработчик и создаёт изменения в DOM которые приводят к необходимости пересчёта стилей, а то и layout'а.

    Изменения в DOM - в целом довольно дорогая операция, а уж пересчёт layout'а - тем более, так что логично что на более слабых CPU мобильных устройств это не влезает в бюджет по времени.

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

    Таким образом начните с замены jquery.sticky.js на нормальное решение, а потом перепроверяйте результат через профайлер и смотрите что ещё вы можете выбросить. Ваша страница визуально явно не требует тех 900кб скриптов что вы на неё грузите.
    Ответ написан
  • Что из препроцессоров вы используете?

    @Flying
    Использую по возможности всё что есть в Sass и хотелось бы видеть в нём больше. Активно использую и переменные и миксины и функции и placeholder'ы и list'ы и map'ы и т.п. Многие практические задачи намного легче решаются через препроцессор, те же CSS variables ни разу не замена.

    Конечно для того чтобы код не превратился в кровавое месиво - необходимо соблюдать правила, но это справедливо и для любого другого языка программирования. Да и без использования препроцессоров я видел огромное количество write only css который невозможно нормально поддерживать.

    Вопрос поддерживаемости - он не лежит в плоскости используемого инструмента, а является следствием наличия или отсутствия архитектуры в проекте. Если макеты дизайнера сделаны в стиле "я так вижу", без внутренней логики, если всё это сверстал верстальщик по принципу "что вижу - то и сверстал" - то никакое наличие или отсутствие препроцессора на поддерживаемость кода не повлияет.

    С другой стороны наличие определённой архитектуры и следование ей в проекте даёт возможность относительно безболезненного рефакторинга стилей и оставляет код стилей поддерживаемым и расширяемым. Препроцессоры здесь только на пользу.
    Ответ написан
  • Как зарабатывать 1000$ на фрилансе верстальщику?

    @Flying
    Работайте на более дорогих рынках, это позволит либо меньше работать либо больше зарабатывать. Для выхода туда в первую очередь необходимо знание английского языка, к сожалению вы не указали знаете ли вы его на достаточном уровне. Если нет - это прекрасная цель для инвестиции своего времени, если да - то странно что вы продолжаете работать там где за 2 недели можно заработать 15 тысяч рублей.

    Если вам удалось получить достойный рейтинг на одной бирже - то, хоть и не сразу, должно получиться и на другой. Кроме того не редкость когда единичный заказ перерастает в долгосрочное сотрудничество уже на других условиях.

    Позаботьтесь о том как ваша работа представлена в публичном пространстве. Профиль на GitHub где можно оценить вашу работу с кодом, профили на Stack Overflow и Тостере где можно оценить ваши вопросы / ответы и т.п. Портфолио ваших работ которое можно быстро показать чтобы представить вашу работу в выгодном свете - всё это даст вам возможность постепенно повышать ставку и иметь аргументы для её оправдания что, со временем, обязательно приведёт к росту доходов. Сейчас, насколько позволяет об этом судить быстрый поиск по вашему username в интернете, во всех этих областях дела не очень хорошо, поэтому вы не выделяетесь из общей массы исполнителей. А если ещё и соглашаетесь работать "за еду" - то именно так вас и будут оценивать.

    Естественно что самообучение и развитие в актуальных областях тоже являются необходимыми факторами. Также очень важна обратная связь, к примеру здесь нередко просят провести code review, а на Stack Overflow для этого есть даже отдельный раздел. Если бы у вас в профиле были ссылки на портфолио - можно было бы сделать какой-то вывод о вашем нынешнем уровне и его соответствии вашим ожиданиям по оплате.

    Мораль проста: развивайтесь и не продавайте своё время дёшево, тогда всё наладится :)
    Ответ написан
  • Дайте оценку верстке?

    @Flying
    Визуально выглядит вполне пристойно и очевидных косяков почти нет, но если копнуть глубже - возникают вопросы.

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

    Из наиболее заметного - заглавная картинка с автомобилем в PNG которая занимает почти 600кб и из-за этого грузится весьма и весьма неспешно (и заметно для пользователя). В целом это по большей части косяк дизайнера, не приложившего усилий к тому чтобы выбрать правильную графику (автомобиль снят явно на улице и отражения в стёклах дают существенный вклад в визуальный шум и, как следствие, в размер картинки, нужно было выбирать фотографию сделанную в специальном помещении). Кроме того дизайнер, очевидно, не слышал про требования к такси в Нью-Йорке и рисовал как взбредёт в голову, но оставим это на его совести. Сочетание фоновой картинки, на которой весь траффик едет в обратном направлении и делает автомобиль такси нарушающим правила дорожного движения - тоже на совести дизайнера.

    Однако и в этом случае и, тем более, в случае фоновых изображений ниже по странице вы допускаете ошибки с выбором форматов файлов, способами их вставки в страницу и оптимизацией. К примеру из картинки с автомобилем можно выжать почти 100кб просто за счёт использования оптимизаторов. Гораздо грустнее ситуация с фоновыми картинками ниже по тексту. Во-первых вы сохраняете фотографии в PNG, получая на выходе файлы по мегабайту, хотя они же в JPEG занимали бы в 5-10 раз быстрее. Во-вторых вы, скорее всего, сохранили фоновые картинки уже обработанными (затемнёнными). Я не видел макета, но предположу что там эти картинки стоят в их оригинальном виде и на них наложены какие-нибудь фильтры. На первый взгляд кажется что проблемы нет, но на практике (в случае вёрстки для реального сайта) вы вынуждаете человека который будет поддерживать сайт либо готовить картинки с такой же пост-обработкой либо мириться с тем что стиль сайта меняется. Правильное решение здесь - грузить картинки как они есть и реализовывать фильтры на CSS, тем более что здесь это делается элементарно через multi background или псевдо-класс с полупрозрачным фоном. Очевидно также что для таких тёмных картинок вполне можно использовать JPEG с меньшим качеством и тем самым существенно сэкономить пользователям трафик.

    Ещё одна проблема связанная с фоновыми картинками - вы не подкладываете под них близкий по цвету solid color. Попробуйте включить в dev.tools "Network throttling", отключить кэш и перегрузить свою страницу - думаю вы поймёте что я имею в виду - белые блоки с белым текстом стоят довольно продолжительное время, постепенно заполняясь довольно тёмными картинками. Если бы background-color под ними был бы чёрным - проблемы бы не было.

    Далее - логотип. Обычно логотипы разрабатываются отдельно и даже если он выглядит просто набранным шрифтом - это вовсе не значит что это не так. Логотип Google, Microsoft или Яндекс - тоже просто название, но, надеюсь вы не сверстаете их, написав надпись текстом? В общем логотип = картинка, лучше в векторе. Сейчас даже одно съезжание слогана на пиксель влево относительно названия уже рушит всю конструкцию логотипа.

    Обратите внимание на то как вы работаете с формами. Все поля в форме являются <input type="text">, хотя часть названий явно намекает на date / time селекторы, а "Choose Vehicle" - на список выбора.

    Хотелось бы отметить работу с иконками - их всё-таки лучше хранить в SVG и либо требовать с дизайнера либо подбирать на том же Icon Finder. При этом оформление (те пресловутые жёлтые кружки) лучше делать через CSS т.к. это позволяет вам существенно гибче работать с размерами элементов.

    Есть всякие недочёты касающиеся responsive, к примеру, внимание как отображается блок "Our Tariffs" в размере чуть более 600px, в частности название тарифа и описание.

    Пожалуйста обратите внимание на то что вы используете два разных меню для desktop и mobile представления. В целом в вашем случае меню довольно простое и можно было бы обойтись одним. Конечно две копии используют часто, но у этого решения есть свои недостатки (в частности отсутствие синхронизации состояния), так что вы должны осознанно принимать решение по таким вопросам. Кроме того inline обработчики onclick там явно могут быть заменены на элементарный
    document.querySelectorAll('.menu a, .menu-hover a').addEventListener()
    что явно сделает код более простым и поддерживаемым.

    Ещё один важный момент который зачастую опускают при вёрстке - поведение макета с реальными данными. То что дизайнер в макете понапихал везде lorem ipsum и тексты примерно одинакового размера - отнюдь не означает что на реальном сайте эти условия будут соблюдаться. Отсутствие навыка проверять поведение макета в изменяющихся условиях ведёт к множеству ошибок которые не видны в условиях синтетических данных. К примеру попробуйте в блоке "We Do Best Than You Wish" (претензии по поводу английского языка оставим в стороне) в любом из элементов банально увеличить количество текста в 2-3 раза. В Chrome это приводит только к излому сетки, в Firefox - ещё и к изменению размера иконки. При этом я предполагаю что Firefox ведёт себя правильно т.к. пропорции элементов изменились, а ограничения размеров на картинки у вас не заданы.

    В целом похоже что макет верстался и проверялся только в Chrome. К примеру посмотрите как ведёт себя картинка с рукой и телефоном в Firefox при изменении размеров. Опять же Firefox вполне корректен т.к. вы не обрезали картинку корректно, предпочитая выгрузить "как есть" и подгонять положение в CSS, но забыв при этом про overflow: hidden для контейнера.

    Теперь перейдём к CSS:

    Обратите внимание на то как вы подключаете внешний шрифт:
    family=Lato:400,700,700i,900,900i&amp;subset=latin-ext
    . Возникают два вопроса:
    1. Зачем вам subset=latin-ext на сайте где есть только базовая латиница?
    2. Как вы выбирали начертания? У вас подключаются 5 начертаний (400, 700, 900 + два italic'а), при этом grep по CSS даёт значения font-weight 200, 300, 400, 500, 600, 800 и ни одного italic. Вам не кажется что эти множества почти не пересекаются?


    Кроме того вы постоянно забываете про fallback шрифты что на медленном интернете и при отсутствии инструкций для font loading приводит к невидимому контенту страницы на период загрузки.

    Отсутсвие ограничения по ширине для .wrapper приведёт к недопустимо широкому сайту на больших мониторах с высоким разрешением. Можете уменьшить масштаб страницы до 50% и полюбоваться результатом.

    В стилях повсеместно используются достаточно общие названия классов в global namespace. К примеру кто бы мог подумать что стилизует селектор .text? Вы уверены что нигде больше на сайте подобный селектор не встретится? Даже при дальнейшем развитии сайта? Другими словами именование селекторов - важная часть работы, вы можете использовать любую методологию (тот же БЭМ или что-то ещё) или разработать свою, но ваш код не должен ломаться при добавлении ещё пары блоков, особенно если это будет делать другой человек.

    Списки элементов, к примеру тот же .product-cont лучше делать именно списками, а не распихивать элементы по столбцам вручную, благо flexbox и column layout здесь всё прекрасно сделают за вас, зато имея одноранговый список вы обеспечите себе куда большую свободу действий.

    Использование id в качестве CSS селектора - плохая практика, но у вас таких мест немало, 11 штук.

    Уверен что мог бы найти ещё что-то, но надеюсь для затравки хватит, и так много получилось... :)
    Ответ написан
  • Мобильная верстка — почему уменьшается масштаб сайта?

    @Flying
    Проверьте наличие в коде сайта настроек viewport'а, что-то вроде этого должно помочь:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    Ответ написан
  • Как правильно верстать сайт с арабскими и хинди языком?

    @Flying
    Поскольку недавно пришлось добавлять в одном проекте арабский язык - поделюсь полученным опытом:

    Вёрстку как правило переделывать не нужно, обычно достаточно изменения стилей, но только в случае если сам сайт свёрстан с применением современных техник, в первую очередь flexbox. Если у вас там float'ы или таблицы - то ой, задача по сложности вырастет на пару порядков и почти наверняка не обойдётся без доработки html кода. Если же в этом аспекте всё в порядке и ваш проект построен на flexbox - то основная масса изменений сводится к одной строчке CSS:
    body {
        direction: rtl;
    }

    это "перевернёт" все горизонтальные flexbox'ы и по сути сделает за вас всю основную массу работы по адаптированию сайта к RTL языкам. Конечно, в зависимости от того как именно у вас будет подключаться стиль (отдельные стили для RTL или только патч или всё вместе) реальный селектор может быть, к примеру html[dir=rtl] + body, но это уже детали.

    Тем не менее, даже если flexbox автоматизирует для вас кучу ручного труда - есть целый ряд ситуаций когда необходимы доработки вручную. Основных направлений несколько:

    1. Горизонтальные отступы. Это самая большая часть работы по адаптации т.к. вам необходимо будет "перевернуть" и их тоже, заменив, к примеру, margin-left на margin-right и наоборот, то же самое для padding'а
    2. Абсолютное / относительное позиционирование в горизонтальной плоскости. Речь идёт о свойствах left и right, их, как можно догадаться, тоже необходимо поменять местами
    3. Размеры шрифтов. Поскольку, к примеру, арабский шрифт, обычно выглядит меньше и тоньше чем, к примеру, английский - возможно возникнет потребность увеличить размеры шрифтов (font-size, line-height) и, возможно, подстроить стилизацию (font-weight)
    4. text-align - в ряде ситуаций может потребоваться изменить его на противоположный
    5. :first-child и :last-child, стоит быть внимательным и перепроверить корректность получаемого результата, к примеру если к этим псевдо-элементам добавляется дополнительный отступ - вам, возможно, придётся менять местами и селекторы
    6. Нужно адаптировать визуальные элементы содержащие направление, к примеру стрелки / уголки и т.п. В ряде случаев их можно повернуть, но где-то необходимо будет рисовать отдельную версию


    Если вы используете CSS препроцессоры - то я очень рекомендую написать mixin'ы для рендера этих свойств и адаптировать код таким образом чтобы изменяющиеся стили рендерились через них. Я выложил набор mixin'ов которые использовал в своём проекте, среди них нет mixin'ов для отступов и шрифтов т.к. у меня эти вопросы решаются по-другому, но думаю что там не будет ничего сложного.

    Общая схема адаптации которую я использовал в проекте:
    1. Добавление direction: rtl
    2. "Переворачивание" отступов, это самая большая часть работы т.к. они чаще всего встречаются
    3. Проверка вёрстки, для каждого выпавшего элемента добавление патчей с использованием mixin'ов, ссылку на которые я дал выше
    4. Подбор изменений для шрифтов, адаптация шрифтовых параметров


    Пример выдернутого наудачу из проекта куска для демонстрации патчей, это стиль добавления иконки к строке текста, для RTL языка её нужно было опускать ниже:
    &.with-icon {
        $icon-size: 1.85em;
        @include offset(h $icon-size 0);
    
        &:before {
            // Позиция иконки меняется на противоположную
            @include hpos($left: -1em, $auto: true);
            font-size: $icon-size;
            // Подстраивается высота иконки относительно текста
            @include ltr() {
                top: 45%;
            }
            @include rtl() {
                top: 65%;
                // Стоит обратить внимание что для RTL языков иконка дополнительно переворачивается, 
                // там стрелка, так что работает нормально, но в других местах это может быть по-другому
                transform: translateY(-50%) rotate(180deg);     
            }
        }
    }


    Надеюсь это описание будет полезным :)
    Ответ написан
  • Как сделать такую фигуру с помощью css?

    @Flying
    Для реализации на CSS потребуются как минимум conic-gradient() и CSS Masks, и то и другое весьма далеко до широкой поддержки браузерами, поэтому гораздо проще будет просто сделать SVG картинку.
    Ответ написан
  • Какие сетки вы используете в своих проектах? И куда двигаться дальше?

    @Flying
    Использую Susy (пока что 2-ю версию в силу ряда причин, но вообще рекомендую 3-ю). Причина выбора - возможность строить произвольные сетки (в том числе нерегулярные) при полном отсуствии навязывания каких-либо технологий реализации сеток. Мне в этой библиотеке нравится именно её гибкость т.к. она даёт только математику сетки. Одновременно с этим для новичка подобный подход может оказаться слишком сложным, но познакомиться с ним imho стоит. На самом деле сделать базовую сетку самостоятельно - очень несложно, особенно если использовать препроцессоры, имеет смысл разок попробовать ее реализовать.

    Один из моментов который не очень хорошо решается "стандартными" сетками - отсутствие поддержки внешних отступов внутри контейнера когда сетка должна занимать не всю ширину, а (ширину минус отступы). Конечно это решаемое ограничение, но оно имеет место быть. Подход bootstrap с заданием сетки через CSS классы лично мне не нравится т.к. порождает кучу лишних CSS классов которые в случае смены layout'а необходимо менять в коде (а не в стилях) проекта. Но здесь опять же кому что, да и у подхода с CSS классами есть свои плюсы - можно дать возможность бОльшего контроля layout'а разработчикам.

    Также стоит отметить что "правильных" сторон нет, есть множество подходов с которыми стоит ознакомиться и из которых нужно уметь выбрать тот который лучше подходит для решения задачи.
    Ответ написан
  • Почему parallax не работает в Firefox?

    @Flying
    На мой взгляд поведение Firefox вполне допустимо, хотя ситуация неоднозначная и конечно стоит глянуть в спецификации. Вы задаёте top для .banner__content который находится внутри .container-fluid. Разница в подходах в том что Firefox считает отступ от parent элемента, а Chrome - от элемента для которого указан position: relative.

    Если применять top на .banner__content - начинает работать везде.
    Ответ написан
  • Как выглядит современный процесс верстки?

    @Flying
    • Верстаю в PHPStorm (просто потому что ещё и работаю с backend кодом на PHP).
    • Для написания HTML использую Twig (т.к. нравится синтаксис и можно потом без переделки использовать шаблоны на backend'е). Использование шаблонизатора для вёрстки сильно помогает если надо сверстать более 1-2 страниц
    • Для написания стилей использую SCSS + свою библиотечку + несколько PostCSS плагинов.
    • Макеты - в Photoshop, InVision или Zeplin, смотря в чём отдают.
    • Для обычных картинок - Photoshop + оптимизаторы (optipng, pngout, guetzli, xat).
    • Для SVG иконок - Inkscape + руки + svgo, а затем организовываю всё это через icomoon.io, оттуда можно получить либо иконочный шрифт либо запакованный набор SVG элементов.
    • Для сборки проекта использую Gulp с набором различных плагинов, список могу дать отдельно если интересно.
    • Саму структуру проекта обычно просто копирую руками из проекта в проект. Можно конечно сделать какой-нибудь плагин для yeoman или что-то подобное, но меня не ломает скопировать пяток файлов, да и задачи бывают разные - просто вёрстка или вёрстка сразу в контексте сайта.
    Ответ написан
  • Какой стек для верстальщика более актуальный?

    @Flying
    Если соберётесь изучить sass - то для сеток там есть, например, susy, с её помощью можно ваять вообще произвольные сетки, в том числе нерегулярные, аналог сетки bootstrap'а там делается просто элементарно.

    Кроме того т.к. bootstrap 4 сам по себе написан на sass - то можно, банально, подгружать bootstrap как зависимость через npm и включать оттуда только модуль сетки без необходимости тащить в проект всё остальное.
    Ответ написан
  • Хорошая ли верстка моего сайта?

    @Flying
    Сразу отмечу что смотрел только главную страницу.

    HTML код в целом выглядит вполне чисто, PHPStorm ругается только на ul внутри menu что действительно не разрешено.

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

    Меню для десктопа не выравнивается по вертикали т.к. для блоков меню и телефонов в заголовке используется "выравнивание" через margin-top, а не нормальное выравнивание через flexbox с align-items: center.

    Для блоков в разделе "Наши преимущества" не хватает как минимум горизонтальных padding'ов, из-за этого текст в блоках прилипает к границам контейнеров. В этом же блоке у основного заголовка и заголовков блоков потерян letter-spacing (не мерял, на глаз видно). При ширине меньше 980px блоки выезжают за экран, видимо не доделано.

    Блок "Переезд в Болгарию" полностью сломан на ширине 980..1200px, а ещё уже - часть элементов теряет центровку. У блока .move__how та же проблема с горизонтальным отступом что и в блоке выше.

    Блок про недвижимость - та же проблема с центровкой (кнопка), letter-spacing и горизонтальным padding'ом.

    Кстати, посмотрел подробнее - многие проблемы возникают из-за потерянных закрывающихся скобок для media запросов здесь и здесь.

    Блок отзывов: иконки навигации влево / вправо не соответствуют макету, очевидно взяты из font-awesome, хотя в макете они другие. То же, кстати, касается и иконки "fa-angle-down", она в макете тоже не из font awesome. Вертикальное положение иконок навигации не соответствует макету (не должен учитываться блок пагинатора). Отступы внутри блока и letter-spacing - похоже общая больная тема. Из-за того что 3 элемента заголовка отзыва не объединены в общий контейнер - есть проблема с выравниванием и без контейнера она лечится не совсем тривиально. Стрелка в "Москва -> София" не соответствует макету.

    Блок формы: состояние :focus не реализовано (в макете это E-mail), в размерах ниже 768px элементы формы прилипают к краям экрана без какого-либо отступа. Нижний затемняющий градиент блока утерян. Иконка со стрелкой вниз не соответствует макету (здесь и в других местах). Стиль кнопки отличается от макета (бордюр и стиль шрифта)

    Отдельное большое фи - графика и общее отношение к размерам ресурсов:
    • 4.5 мегабайта картинок в PNG, вы это серьёзно? Банальная оптимизация через optipng / pngout даёт почти 800кб. Две фоновые картинки занимают суммарно 3.5 мегабайта, хотя они же в JPEG при качестве в 85% и оптимизацией через guetzly дают 225кб, а можно ужать ещё больше. city.png - почти полностью прозрачная картинка, используемая исключительно на белом фоне - зачем она в PNG с альфа-каналом? JPEG + guetzly даёт 43кб против 376кб.
    • 4 шрифта, при этом размерами 100 и 900, хотя на странице есть ещё как минимум 400, по 700 глифов! Зачем они там если у вас на сайте русский и латиница? Subsetting в Font Squirrel уже отменили? При этом два шрифта italic хотя реально italic используется на данный момент только в тексте комментария (толщиной 100), зачем?
    • Во всех макетах используется суммарно 4 разных шрифтовых иконки (3 стрелки и "спасательный круг"), при этом стрелки, как написано выше, не соответствуют макету. И ради этого грузятся все 1145 (!) иконок font awesome суммарным объёмом (в лучшем случае) почти 100кб. Конечно интернет сегодня быстрый, но зачем вот так сразу-то?
    • На все страницы грузится весь Bootstrap 3.3.7 целиком (почти 120кб CSS) ради Bootstrap grid? Она там в лучшем случае 3-5кб занимает, а остальное не используется? При этом загрузка CSS - блокирующая операция т.е. рендер стоит пока грузится CSS.
    Ответ написан
  • Как поменять стили у дочерних блоков при нажатии на основной при помощи CSS?

    @Flying
    Для того чтобы всё заработало - необходимо чтобы input стоял перед label, а не после. CSS селекторы работают только "вперёд", соответственно если хочется завязать изменение стилей на состояние checkbox - он должен располагаться в DOM раньше чем элементы к которым будут применяться стили, зависящие от состояния checkbox'а
    Ответ написан