Как стать автором
Обновить

Комментарии 47

Привет!

Это отличная статья, спасибо огромное.
Я бы может еще проверял, всякие мета-теги. Для тех же самых шарингов в соц сетях.

Но очень интересует вопрос, как лучше всего проверять верстку на мобильных устройствах, ибо все же мы знаем что есть всевозможные Huawei у которых стандартные браузеры, если девайс ниже версии 4.4.
НЛО прилетело и опубликовало эту надпись здесь
Что-нибудь специфичное можно и в supports обернуть, особенно всякие блюры и шейпы.
Хороший совет на будущее, но пока поддержка supports не особо лучше свойств, с которыми она будет полезна. Есть хорошая статья про supports
Ну, судя по Can I Use, проблема в основном только с IE и UC.
IE 10,11 в CSS можно определять хаком.
НЛО прилетело и опубликовало эту надпись здесь
Вы аргументы в пользу своих слов привести забыли
Спиннер — один из способов скрасить ожидание пользователя. Вы можете использовать другие варианты, главное показать, что интерфейс вас понял и начал свою работу)

+1. Уж лучше спиннер (и обязательно на заблокированной после клика кнопке!!!), чем получить десять одинаковых запросов на бэкенд от особо нетерпеливого пользователя на особо медленном EDGE.

НЛО прилетело и опубликовало эту надпись здесь
Вы это интернету расскажите в моем селе.
НЛО прилетело и опубликовало эту надпись здесь
Думаю, тут имелось в виду то, что если время выполнения запроса мало, то отсутствие спиннера создает у пользователя ощущение, что запрос выполнился быстрее.
НЛО прилетело и опубликовало эту надпись здесь
Отличная статья в целом, только вот это:
Убрать случаное выделение текста по двойному клику (user-select: none)

пожалуйста, не надо делать!

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

Для кого-то и сами препроцессоры — хитрая возможность, так может вообще от них тогда нужно отказаться, лишь бы другим разработчикам комфортно было? Я видел верстальщиков которых даже each в saas-е в тупик ставил, но это не повод отказываться от него.
НЛО прилетело и опубликовало эту надпись здесь
Мой комментарий был про хитрые возможности, про библиотеки вопросов нет, к сожалению оптимизацией вообще в последнее время мало кто озадачивается.
Касательно микроразметки, гугл сейчас всё же больше любит JSON-LD
Я бы добавил ещё один пункт: подготовить favicon для всех поддерживаемых устройств. Для этого есть очень удобный инструмент: http://realfavicongenerator.net/
Тут же можно и проверить как будет отображаться на разных устройствах: Тыц
Спасибо за материал. Большинство моментов на столько важно, что я бы даже назвал статью «С чего нужно начинать вёрстку…», т. к. подобный рефакторинг на этапе сдачи может обернуться болью и осознанием собственной никчемности. Особенно это касается мультиязычных проектов (включая rtl) и компонентов к «клиентогенерируемым» контентом (проверка на «одиннадцатиклассницу»).
Из-за того что на клавиатуре нет нужных клавиш, в вебе используются знаки, которые не соответствуют правилам русского языка.

Клавиши-то есть, а вот раскладка(раскладка Бирмана, например), обычно, отсутствует. Более того типограф ещё добавляет неразрывные пробелы, например.


А так да, прогонять через типограф — обязательное дело :)

Отличная статья. Очень даже во время.
Блистательно! Видно, что в верстке автор большой профи. :epmty для меня в новинку. Полезная вещь для больших систем, где контролы отображаются/скрываются через CMS
Учтите, что :empty не сработает, если, скажем, внутри элемента будет пробел или перенос строки
Статья в целом годная. Но автор сам же нарушает правило «Теория близости» ))

Это правда) Но тут зависит от верстки Хабра. Будет отлично, если они добавят отступ сверху у заголовков.


Кстати, после модерации поста, НЛО добавило отступы между подзаголовками и параграфами. Я вначале их специально делал ближе к тексту:)

Ай спасибо! Просто шик!
Особенно для таких бакендеров как я, на которых просто берут и фронт вешают.
Завтра всем верстальщикам нос утру!

Про анимацию стоит написать, что transition, может быть как входным, так и выходным, очень больно смотреть на тултипы у которых время появление такое же длинное, как и исчезновение. То же самое касается анимации бэкраунда у менюшек.

Добавить привычный курсор руки вместо стрелки (cursor:pointer)

Очень плохая практика пихать везде этот «палец». Он предназначен для ссылок и исключительно для них.
Все любят про спецификации говорить, но одно маленькое предложение в ней для всех видимо совсем маленькое, чтобы его замечать: https://www.w3.org/TR/css-ui-3/#cursor
pointer
The cursor is a pointer that indicates a link.


Хватит тащить в веб эту блаж от дизайнеров не знающих спецификаций веба. Если особо упоротые и требуют — тыкните их носом в эту ссылку. В спеке это не спроста, это нативное поведение, в ОСях (всех, кстати) этот поинтер используется исключительно для ссылок.

Существуют не только текстовые ссылки, но и ссылки блоки. Логотип сайта чаще всего является ссылкой на главную. На новостных сайтах блок новости с картинкой и текстом тоже ссылка.


Эта часть спеки не менялась очень давно и я бы обратил внимание на опыт компаний. Я походил по сайтам и обнаружил, что большинство из них используют pointer на дропдаунах. Часть использует pointer на всех кнопках (например, хабр). Интересно, что 3 бутстрап использовал везде pointer на кнопках, а в 4 версии уже нет.


Мне попалась подробная статья про этот вопрос. Там в том числе приведены и другие аргументы за и против pointer.

Существуют не только текстовые ссылки, но и ссылки блоки.

А причём тут это? Если у элемента есть атрибут href, то курсор автоматом будет pointer. И делать ничего не надо. А если его нет — то pointer там абсолютно лишний, ибо никуда клик по этому элементу не переводит.

Эта часть спеки не менялась очень давно

И это очень хорошо!

Я походил по сайтам и обнаружил, что большинство из них используют pointer на дропдаунах. Часть использует pointer на всех кнопках (например, хабр).

Потому что спеку не читали, и привыкли из дивов городить что угодно, хоть чёрта лысого, а потом обвешивать эти дивы всем, что показалось нужным.

Мне попалась подробная статья про этот вопрос.

У Романа все статьи хорошие, кроме этой. По поводу её появления было бурное негодование в слаке Веб-стандартов. Даже не припомню, был ли на его стороне ещё кто-то.
НЛО прилетело и опубликовало эту надпись здесь
В спеке это не спроста, это нативное поведение, в ОСях (всех, кстати) этот поинтер используется исключительно для ссылок.
Часть использует pointer на всех кнопках (например, хабр).
Потому что спеку не читали


Microsoft, Apple, Google тоже не читали спеков (и пофиг что по-сути они сами их сейчас и создают и развивают). Потому что у них на сайтах все элементы, на которые можно кликнуть и которые при клике запустят какое-то действие — поинтеры. Это и кнопки (как текстовые, типа "войти", так и иконочные, типа лайков), и ссылки, и дропдауны, и таббары. Причём, на главной у МС, например, у меня на слайдере с картинкой поинтер (потому что при нажатии на слайд из этого слайдера открывается другая страница), а внизу на самом слайде 2 кнопки (play/pause). Так вот, одна из них — поинтер, а вторая — стрелка. Мне сразу стало ясно, что та, которая стрелка в данный момент неактивна, эта кнопка не выполнит действия. И да, на практике так и оказалось. Если бы МС следовала вашим советам, то мне было бы совершенно непонятно, произойдёт ли что-то до нажатия на элемент.
С поинтером же всё чётко: если я его вижу при ховере, то я ожидаю какого-то действия при нажатии. Если поинтера нет, то при нажатии на такой элемент ничего не должно случаться. И при этом, в ОС от вышеупомянутых компаний поведение курсора и элемента при ховере отличается от веба.

Вопрос спорный, но вы правы больше, за вас спецификация) Действительно, если убрать pointer у всего кроме ссылок и сделать понятный hover, то этого хватит.


Однако, присутствие pointer не так катастрофично и спека не запрещает его использование. Пользователи уже совсем перестали отличать ссылки от кнопок, особенно после отказа от подчеркиваний. Интересен сам факт, что в очень большом количестве проектов не ленятся ставить cursor: pointer. Ведь его нужно не забыть еще поставить. Значит спрос есть на это)


Было бы интересно посмотреть различные статистики про курсоры. Может какой-нибудь амазон тестировал, что на ссылку с рукой ждут на 10% больше. Или Google.


Я уже не говорю про спорные моменты такие как чекбоксы или радио кнопки внутри лейблов. Многие не знают, что можно нажать текст вместо чекбокса.

Зато ленятся или забывают поставить cursor:default если элемент задизейблен. А это оказывается дополнительно неплохо снимает когнитивную нагрузку, чтоб понять что элемент не активен (как написал выше bromzh)
Курсор в виде руки — это индикатор ссылки и больше ничего. Так исторически сложилось что 99% сайтов используют этот курсор как им пожелается, чаще всего для указания на интерактивность (элемент кликабелен). Это абсолютно противоречит той логике которая в него заложена изначально. Пожалуйста: значение курсора от Apple и от Microsoft. У Микрософта даже есть подробное объяснение почему возникла такая необходимость в отдельном курсоре для ссылок.
Кликабельность можно и нужно показывать другими методами: сменой цвета фона, обводки, анимацией и так далее. Но никак не рукой, которая означает указание на объект, а не возможность по нему кликнуть. А то получится как в Яндекс.Маркете, наводишь на товар и курсор становится в виде руки, пытаешься открыть в новом окне, а не получается. Потом выясняется, что это всего-лишь кнопка для открытия оверлея!

Ну раз 99% сайтов используют его для указания на интерактивность, значит, теперь "здесь так принято". Какая разница, что было заложено изначально, интерфейсы эволюционируют, часто не в том направлении, как предполагалось. И тот же Apple теперь на своем сайте использует его так же, как и все остальные.


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

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

Как вариант можно еще добавить кастомизацию страниц отвечающих за вывод ошибок 4xx,5xx и тд.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации