«phpClub» — архив тем ("тредов"), посвящённых изучению PHP и веб-технологий.
Аноним 2019/03/09 22:43:06  №1361773 1
Няши, посмотрите верстку по макету, дайте советов мудрых и ответьте на некоторые вопросы. https://jsbin.com/pofasoviqa/edit?html,css,output
Знаю, код очень корявый, но я хочу стать лучше, потому мне нужны ваши ответа
Можно ли сделать плавный переход по якорям без JS?
Можно ли задать плавное всплывание картинок по нажатию на какую-либо из кнопок?
Копирайт всегда должен быть в футере, можно ли их разделить и будет ли это правильно? Я разделил, потому что так в PSD было. С шапкой также сделал.
Подписи к заголовкам обрамлять в <h> на пункт меньше или <p>?
Почему "margin: 0;" в body не работал и мне приходилось подписывать его к каждому элементу?
Ответы: >>1361774 >>1362602 >>1376424
Аноним 2019/03/09 22:45:54  №1361774 2
.jpg (131, 568x895)
895x568
>>1361773
А, и что еще со значками соц.сетей мне делать нужно было? Я фигурку внутри кружка скачал, а она битая получилась, но я вставил все равно.
Аноним 2019/03/11 17:52:47  №1362602 3
>>1361773
>Почему "margin: 0;"

Выбирай не через body, а через .

{margin: 0; padding: 0;}

>Подписи к заголовкам

В <p>. Our Featured Works и Get in Touch это будет h2.

>Копирайт всегда

@ 2013 Webpaint. All Rights Reserved. - у тебя в футере будет, а область выше это секция (section).

>со значками соц.сетей

У тебя на фото 5 значков, полностью их вырезай из макета, прямо с кружком. Вставляешь каждую по очереди и делаешь их ссылкой. Помести их в блок div.soc-but или типа того, сделай его display:flex и justify-content: space-between.

>плавное всплывание

webref.ru/css/transition

>плавный переход

webref.ru/css/scroll-behavior



Задача по webpaint Аноним 2019/04/06 23:44:06  №1376424 4
>>1361773

Кстати, для выкладывания сайта можно использовать github sites, если ты готов разобраться с гитом. Это будет удобнее для отладки и проверки сайта, так как там не будет постороннего кода. Можно, например, оценить его вес и скорость загрузки.

> Можно ли сделать плавный переход по якорям без JS?

В новых браузерах, как пишет анон, есть scroll-behaviour.

> Можно ли задать плавное всплывание картинок по нажатию на какую-либо из кнопок?

Изучи CSS-переходы (transition) и анимации, и посмотри, есть ли что-то подходящее. Тут трюк в том, что смена некоторых свойств отключает переход или анимацию. Например, смена display с block на hidden. И приходится скрывать элементы каким-то другим способом.

> Копирайт всегда должен быть в футере, можно ли их разделить и будет ли это правильно? Я разделил, потому что так в PSD было. С шапкой также сделал.

В принципе, можно.

> Подписи к заголовкам обрамлять в <h> на пункт меньше или <p>?

Если ты про Consectetur, Tritiquet - то там наверно <p>. Если ты про "We are webpaint", то можно сделать h2 или div. <p> - это абзац текста, тут явно не абзац текста.

> Почему "margin: 0;" в body не работал и мне приходилось подписывать его к каждому элементу?

Если ты про поля по краям окна, то они могут быть заданы не на body, а на html, и не в виде маргина, а в виде паддинга. Стандарта тут нет. Потому надо обнулять и маргин, и паддинг на обоих элементах.

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

Кнопки соцсетей должны реагировать на наведение, например, бледнеть, становиться ярче, еще как-то меняться, ты можешь поискать готовые CSS эффекты. Также, картинки на кнопках очень плохого качества: https://imgur.com/a/WuWquKP в FF66

Надо извлечь из PSD более качественные картинки. Я проверил, значки с кнопок можно извлечь даже бесплатным гимпом, без покупки фотошопа. Увы, гимп извлекает их только в расторовой форме.

Скорее всего ты потерял полупрозрачность. Там иконки полупрозрачные, то есть там есть частично прозрачные пиксели с альфа-каналом. У тебя же альфа-канала в картинке нет и из-за этого иконки стали с угловатыми краями, а не плавными. Почитай про формат PNG, полупрозрачность и альфа-канал.

Для адреса и телефона надо использовать иконки из файла, а не посторонние.

Адаптивность под разные разрешения экрана сделана слабо, для галочки. Вот косяки:

- если мы уменьшаем ширину окна, то надпись "digital & branding agency based ..." криво переносится - она разбивается на 3 строчки разной ширины. Это из-за наличия там br, который надо либо отключать, либо заменить на что-то получше.
- на ширине 700 px меню упирается в правый край окна без отступов, а надпись ниже We Are Webpaint смотрится непропорционально большой. Я бы уменьшил шрифт заголовков до 44 px / 30 px на такой ширине, слегка убавил бы вертикальные паддинги в шапке. Попробуй сам на глаз подобрать размеры, чтобы надписи были бы не слишком большие, и не слишком маленькие, а в самый раз, и чтобы шапка смотрелась пропорционально.
- на ширине в 700px блоки Consectetur, Tristiquet разваливаются и выглядят криво
- на ширине в 540 px меню проваливается вниз
- на ширине 430 px надпись digital & branding agency упирается в края окна, что некрасиво. Вертикальное меню, наверно, тоже не самое удачное решение тут. Лучше наверно сделать его в 2 колонки и сделать расстояние между пунктами больше, чтобы пальцем не промазать. Также, можно сделать кнопку "меню" и спрятать меню за ней, хотя это снижает discoverability пунктов в нем - пользователь о них не узнает.
- на маленькой ширине блок Consectetur лучше было бы выстроить вертикально, в 1 колонку, вынеся картинку влево или убрав ее вообще.
- на маленькой ширине картинки в портфолио очень мелкие. Удобно ли их разглядывать? Хотя, мне нравится компактность и возможность их всех увидеть на одном экране
- На маленькой ширине иконка перед адресом вываливается на отдельную строку
- на маленькой ширине иконки соцсетей и телефон слишком близко и пальцем можно нажать не туда. Нужно предусмотреть отступ от телефона до иконок, сам телефон, кстати можно сделать крупнее. Я для эксперимента поставил ему размер 24px, отступы по 20px, выглядит не так и плохо.

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

По коду. Иконки принято делать не img, а фоновыми картинками. img используется для картинках в контенте - статьях, например. Тут img подходит для картинок портфолио, может быть для блока Consectetur, но не для остальных мест.

Названия css классов должны быть сделаны в одинаковом стиле, а вразнобой. У тебя то минус, то подчеркивания использованы.

> title__of__service

Так длинно, пишут просто service-title. Плюс, тут этот класс вообще не нужен, так как ты можешь использовать стиль .service h3

Завязываться в CSS на тег nav не очень хорошо, так как завтра могут добавить какую-то вторую навигацию и твои стили будут ей мешать, придется переделывать. Это плохо.

Вместо i.font__light проще было бы выделить жирную часть просто тегом strong.

> .service{
>\tdisplay: inline-block;

Стоит тут указывать vertical-align.

Когда ты используешь transition, стоит явно перечислять анимируемые свойства, чтобы не анимировалось ничего лишнего.

Далее, тестировал ли ты кроссбраузерность? Знаешь, где можно генерировать скриншоты? Надо проверить поддержку в разных браузерах. Вот примеры сервисов:

- https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/ для IE (Не отображает сайты с jsbin)
- http://browsershots.org/https://jsbin.com/pofasoviqa/1/edit?output для FF/Chrome (плохо отображают сайты на jsbin)
- есть еще browserstack, он они хотят регистрацию, деньги и тд

Также, если что, для FF/Chromium можно найти портабельные версии, которые можно себе установить. С ИЕ так не получится и ради него придется делать виртуалки (по одной на каждую версию - спасибо Майкрософт). Хотя для этой задачи хватит и скриншотов, но для более серьезной работы удобнее иметь сами браузеры.

Я бы советовал поделить браузеры на 2 категории: новые и не-новые. В новых браузерах макет соответствует дизайну. В не-новых - может отступать от дизайна, если там нет нужной фичи, но оставаться читабельным. Например, если в браузере нет скругления уголков, то в таком браузере можно их сделать квадратными. ИЕ ниже 8 поддерживать не требуется, как и браузеры старше 10 лет.

Картинки в портфолио сделаны в PNG. Посмотри, можно ли их сжать в JPEG без заметных артефактов, чтобы получить меньший объем? Это умеет делать даже бесплатный GIMP.

Задавай вопросы, если что-то непонятно.