«phpClub» — архив тем ("тредов"), посвящённых изучению PHP и веб-технологий.
Аноним 2018/09/27 13:33:03  №1271044 1
Ответы: >>1271238
Аноним 2018/09/28 00:43:48  №1271238 2
>>1271044
>>1266710

Самое главное, что бросается в глаза: не подключен шрифт. У тебя указан шрифт Lato, но если его не установлено на компьютере, то текст отобразится другим шрифтом (sans-serif). Для подключения файла шрифта есть специальное CSS-правило @font-face. Я советую внимательно его изучить. Обрати внимание, что существуют разные форматы шрифтов, и разные браузеры поддерживают разные форматы:

- https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face (в конце есть таблица)
- https://css-tricks.com/snippets/css/using-font-face/ (англ)
- https://caniuse.com/#feat=woff
- https://caniuse.com/#feat=woff2
- https://caniuse.com/#feat=ttf
- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ru (статья на русском)

Сконвертировать шрифты можно конвертором: https://www.fontsquirrel.com/tools/webfont-generator

Обрати внимание, что пока шрифт не загрузится, браузер не показывает текст. Повлиять на это поведение можно новым свойством font-display: https://css-tricks.com/font-display-masses/

Проверить, как шрифты отображаются в разных браузерах, можно напрмер, тут: https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/

Раньше на browserstack была возможность бесплатно делать скриншоты, но не знаю, есть ли она сейчас.

Скриншоты можно сделать еще на http://browsershots.org/, но там нет ИЕ и мобильных браузеров.

Ты заметишь, что процесс довольно хлопотный: надо конвертировать шрифты, настроить правила font-face итд. Вообще, этого можно избежать, если подключать готовые шрифты с Google Fonts, который все сделает сам, но я бы советовал один раз сделать все вручную, чтобы разобраться. Ну и при желании ты можешь как-то shell-скриптами автоматизировать это.

Телефон хорошо бы сделать кликабельным, ссылкой с префиксом tel: https://css-tricks.com/the-current-state-of-telephone-links/

Также, было бы хорошо сделать версию для маленьких экранов. У тебя сделана какая-то минимальная адаптивность, но ее явно недостаточно. Сейчас при уменьшении ширины шапка остается гигантской и смотрится нелогично. Вот список размеров экранов разных устройств: http://viewportsizes.com/ - можно выбрать, например такие значения ширины для проверки:

- 320 (или 360), 640, 960

Стоит на маленьких экранах уменьшить текст в шапке, уменьшить отступы и шрифт в списке преимуществ, может быть даже как-то переформатировать его, например, убрав или сдвинув иконки, в подвале уменьшить шрифт и отступы, а кружочки-ссылки расставит пошире, чтобы в них было удобнее попадать пальцем.

Просто выстроить все блоки вертикально - это очень механически, и этого недостаточно для адаптивности.

> body, html {
> box-sizing: border-box;
Непонятно, зачем тут box-sizing, если для html/body ширина или высота все равно не задана.

> .headerBack {
> width: 100%;
> display: inline-block;
Непонятно, зачем тут inline-block

> .logo {
> display: inline-block;
> float: left;
float подразуемвает display: block

В блоке с Consectetur надо настроить line-height в абзацах как на макете.

Вместо тегов b/i сейчас используют strong/em, с немного другим смыслом (они задают не внешний вид текста, а смысловое выделение).

> <div class="serveicesBlock">
> <div class="img"></div>
Можно использовать псевдоэлемент вместо дива .img

> <input type="radio" id="tabLabel2" name="radiobutton"/>
В указании слеша в конце /> в HTML5 нет необходимости. Это из XHTML.

Надо чтобы при выборе категорий (all/graphic/illustration) часть работ скрывалась, а часть оставалась. Присвоить категории можно через data-атрибуты или CSS классы.

> <div></div>
> <div></div>
Непонятно, зачем пустые дивы.

> .serveicesBlock > p {
> font-size: 14px;
Это плохая идея, вешать стили на p, так как текст может быть и в других тегах (например: ul/li, figure). Лучше просто было задать шрифт на servicesBlock.

> .footerLink > a:nth-child(2) {
> background-position: -42px -11px;
Здесь вместо номеров лучше использовать классы (link-fb, link-tw). Так как с номерами неудобно вставлять или убирать элементы: надо менять все номера. Или нельзя просто переставить 2 ссылки местами. Тут лучше явно указать тип ссылки в HTML.