«phpClub» — архив тем ("тредов"), посвящённых изучению PHP и веб-технологий.
Аноним 2018/10/20 05:13:29  №1281694 1
Ответы: >>1285907
Аноним 2018/10/28 12:42:32  №1285907 2
>>1281694

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

Для проверки я открыл Developer Tools. В фаерфоксе - есть вкладочка "Шрифты", где написано, какой именно шрифт использован. В хромиуме эту информацию можно поискать на вкладке Computed.

Там видно, что использован шрифт Lato с начертанием normal. А так как у нас элемент em, то браузер сам синтезировал из нормального шрифта косой, механически наклонив буквы. Загадка разгадана.

Для подтверждения я открыл https://fonts.googleapis.com/css?family=Lato:300,400,900 - там нету курсива (кстати, изучи этот файл, там интересная оптимизация сделана).

Тебе надо подключить определения font-face еще для курсивных начертаний Lato.

Далее, почисти кеш (или поставь галочку в devtools) открой вкладку Network и перезагрузи страницу. У тебя там гигантские PNG-картинки с работами, весом под мегабайт в сумме. PNG дает хорошее качество, но совершенно неразумный вес. Попробуй их пережать в JPG, желательно без визуальной потери качества, и посмотреть, будет ли вес меньше. Не советую пользоваться автоматическими конверторами без выбора степени сжатия - они могут слишком сильно сжимать - ее лучше выбрать вручную.

Из бесплатных инструментов ты можешь использовать: imagemagick в командной строке, или Gimp. В последнем есть предпросмотр картинки в выбранном качестве, хотя сделан он немного коряво.

После сжатия ты можешь, если хочешь, использовать дополнительные утилиты для дополнительного уплотнения файла: jpegtran, jpegoptim, mozjpeg.

Из минусов JPEG: в нем нельзя сохранять мелкий текст - он коверкается. Я когда-то для оптимизации даже разделял картинку на JPEG-фон и PNG-текст.

Верстальщик должен разбираться в оптимизации картинок. Потому, советую почитать https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/

Также, есть набор старых, но очень интересных статей по оптимизации картинок: http://chikuyonok.ru/tag/%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F/

Я также советую изучить теги picture и img srcset. Они позволяют указать несколько вариантов картинок, которые могут выбираться в зависимости от размера экрана, плотности пикселей, поддержки браузером формата картинки: https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

> <div class="serveicesBlock">
> <div class="img"></div>
Тег .img разве нельзя убрать и заменить на псевдоэлемент :before? Попробуй сделать, или там какая-то проблема? Этот тег смотрится лишним в разметке.

В картинках - плохо, что картинки дублируются. Этот как минимум может вызвать повторную отправку запросов для них. Браузер всегда загружает картинки, указанные в атрибуте img[src], даже если они скрыты и невидимы. Тут лучше бы убрать дублирование, или что-то мешает так сделать?

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

Для проверки я взял простой сайт https://motherfuckingwebsite.com/ и через devtools подключил твой CSS. Результат - не впечатляет: текст отцентрирован и плохо читабелен, списки выглядят ужасно. Нужно переделать CSS так, чтобы страница с простыми HTML тегами в нем выглядела нормально и в стиле сайта. То есть чтобы при добавлении новой страницы надо было сделать минимум работы и не надо было искать, как отключить центрирование.

> box-sizing: border-box;
Если добавить префиксы вроде -moz-box-sizing и -webkit-box-sizing, то поддерживаемых браузеров будет чуть больше: https://caniuse.com/#search=box-sizing (тебя наверно путают номера версий, не смотри на них, смотри на год выпуска браузера).

Если ты знаком с Node.JS, то можешь установить autoprefixer для автоматизации процесса.

> .serveicesBlock:nth-child(3) > .img {
Это не очень удачная идея. Если добавить, убрать или переставить блоки, то все картинки перепутаются. Лучше поставить уникальный класс на каждый блок. Не надо так делать, что при правке кода в одном месте ломается что-то в другом.

То же касается портфолио. Если возможно, я советую привязать картинки к кнопкам с помощью CSS классов или data-атрибутов. Так проще все это поддерживать.

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

Еще меня беспокоит, что при определенной ширине экрана блоки Consectetur, Tristiquet выстраиваются 3 в один ряд, и один снизу. Было бы красивее по 2 в ряд.

Также, я потестировал сайт в browsershots (а ты потестировал?) и в некоторых браузерах кнопки типов работ (illustration/motion) склеиваются друг с другом, а в некоторых, наоборот, далеко, там всюду разное расстояние. Это плохо:

- http://api.browsershots.org/png/original/a1/a1f0cd30d038c27fa04739dbb02a396e.png
- http://api.browsershots.org/png/original/86/8693a113b4c0c01939393f1d2143e9b5.png
- http://api.browsershots.org/png/original/0c/0c373ab1a4baaeab83f7b28ff643c6ac.png

Также видел склеенные кнопки в одном из IE:

- IE10: https://www.browserstack.com/screenshots/b35082fa437b517d40ea30383c037102943de97e/win7_ie_10.0.jpg

IE10 не такой старый, у тебя явно что-то с версткой. Надо сделать расстояние как на макете. Опять же, ты, как верстальщик, должен обращать внимание на отступы, поля, выравнивание, сетку итд.

Но в общем молодец, у тебя неплохо получается. Советую исправить замечания, почитать теорию по ссылкам, которые я дал, может еще почитать про новшества CSS3 (flexbox, grid итд) и начинающий верстальщик из тебя вполне готов.