Перевод статьи «Web Development Bad Habits to Kick».
От редакции Techrocks. В оригинале статьи представленный список ошибок озаглавлен как «плохие привычки в веб-разработке». Но, как отметили комментаторы, многие вещи касаются скорее не разработчиков, а дизайнеров. Тем не менее, мы считаем, что разработчикам тоже имеет смысл обратить внимание на все эти вещи.
Во-первых, многие из нас работают в маленьких стартапах, где приходится совмещать обязанности и разработчик может не только писать код. Во-вторых, не стоит забывать и о собственных проектах. Да, они могут быть маленькими, но лучше, чтобы при этом в них не было хотя бы самых распространенных ошибок.
1. Дизайн, не соответствующий подходу Mobile First
Если вы не знаете, что такое «сложно», возьмите замысловатый дизайн, который идеально выглядит на 24-дюймовом мониторе, и попытайтесь втиснуть его на экран шириной 300 пикселей.
Как решить, что вырезать? Как сделать так, чтобы самая важная информация по-прежнему находилась в верхней части страницы? Для этого нужно вернуться в прошлое и сразу сделать дизайн, ориентированный в первую очередь на мобильные устройства.
Не оптимизировав свой дизайн для мобильных устройств, вы, скорее всего, будете обслуживать большинство пользователей не на должном уровне.
Начните с простого прототипа, который даст пользователям легкий доступ к наиболее важной информации на странице. Добавляйте элементы дизайна по мере масштабирования для больших устройств.
Если вы не дизайнер, воспользуйтесь такими инструментами, как Bootstrap.
2. Непоследовательность
Последовательность помогает пользователям понять, чего ожидать от вашего сайта. Она помогает людям научиться пользоваться сайтом. А непоследовательность может раздражать посетителей и в результате приводить к высоким показателям ухода с сайта.
Непоследовательность ссылок
Однотипные ссылки должны вести себя одинаково. Если одна из ваших внешних ссылок открывается в новом окне, все они должны открываться в новом окне. Не забывайте также о людях, использующих программы для чтения с экрана. Ознакомьтесь с этими советами, чтобы сделать target="_ blank" более доступным.
Все сказанное касается и ссылок на медиаресурсы! Нельзя в одном месте указать, что ссылка открывает PDF-файл, а во всех остальных местах забыть об этом.
Непоследовательность стиля (дизайна)
Очень вероятно, что у вас будет несколько вариантов шаблонов и дизайнов для разных страниц. Но пользователь, переходя по этим страницам, не должен подумать, что перешел на другой сайт.
У вас должен быть базовый набор цветов, а такие вещи как «шапка», навигация и футер должны появляться только там, где это необходимо. Например, если вы создаете браузерную игру (SPA ) на JavaScript, вам, вероятно, не понадобится футер.
У вас может возникнуть соблазн использовать всю палитру цветов и шесть разных Google-шрифтов, но постарайтесь воздержаться. Чем меньше пестроты, тем меньше путаницы. Определите стили CSS для шрифтов (семейства, размеры) и цветов — и используйте их.
3. Жесткое прописывание абсолютных путей
Прекратите эту порочную практику. Вам нравится по нескольку раз делать одно и то же? Прекратите хардкодить абсолютные пути!
Не могу передать, сколько раз меня просили исправить проблему на сайте, которая, как оказывалось, была вызвана жестко прописанным абсолютным путем к источнику изображения или внешней таблице стилей.
Доменные имена в продакшене и среде разработки отличаются. Клиенты тоже могут менять доменные имена уже в процессе разработки. Использование относительных путей позволит вам вносить нужные изменения и отправлять код в продакшен, не возвращаясь и не рыская в поисках ссылок на предыдущее доменное имя.
4. Отсутствие тегов alt у изображений
Серьезно, 2021 год на дворе. Добавление тегов alt к изображениям — это самое простое, что мы можем сделать для повышения доступности наших сайтов и приложений. Это особенно актуально для любых изображений, содержащих текст. Цель в том, чтобы донести информацию на изображении до всех пользователей.
Ознакомьтесь с этим руководством по использованию атрибута alt: оно поможет вам сделать изображения более доступными (с учетом контекста).
5. Увлечение блоками div
Послушайте, все мы любим div-ы. Это прекрасные маленькие коробочки, которые можно использовать практически для чего угодно. Но то, что вы можете это делать, не означает, что это следует делать.
Мы должны стараться использовать div-ы только тогда, когда нет более подходящих — то есть семантических — элементов.
Вы можете использовать div для своего меню, и все будет работать нормально. Но применение для этой цели элемента <nav> поможет тем, кто использует программу чтения с экрана.
Кроме того, применение семантических элементов поможет другим программам (например, поисковикам) лучше понимать смысл вашего кода. Натолкнувшись на тег <nav>, программа поймет, что это не просто блок со ссылками, а элементы навигации, содержащие меню, которое может провести по остальной части сайта.
Вместо div вполне можно использовать другие элементы:
- Чтобы поместить подпись под изображением — используйте
<figure>и<figcaption>. - Если вы хотите, чтобы ссылка, осуществляющая какое-то действие, была похожей на кнопку, — используйте
<button>. (Под действием следует понимать, например, использование JavaScript для открытия модального окна или страницы через многостраничную форму). - Чтобы сгруппировать основную часть страницы, используйте
<main>.
А какие вредные привычки в деле веб-разработки есть у вас? Поделитесь в комментариях!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
