|
Несмотря на то, что вопросу создания сайтов посвящено множество мануалов, статей и тем на форумах, веб-разработчики не перестают совершать одни и те же ошибки.
Я хотел бы поделиться наиболее распространенными ошибками, которые делают веб-разработчики, и советами как их избежать.
1. Использование устаревшей версии HTML
Ошибка: на заре появления интернета существовало гораздо меньше способов разметки, чем сегодня. Тем не менее, старые привычки отмирают с трудом, и многие до сих пор используют HTML, как будто мы были все еще в 20-м веке. За примерами далеко ходить не надо. Это использование <table> для разметки, <span> or <div> вместо более подходящих элементов или использование тегов, которые не поддерживаются в текущем стандарте HTML, таких как <center> или <font> , а еще злоупотребление .
Последствия: использование устаревшей версии HTML может привести к тому, что разметка будет по разному отображаться в различных браузерах.
Как избежать: Прекратить использовать <table> для разметки контента и ограничить его использование в таблицах. Ознакомиться с современными способами разметки, например, на сайте whatwg.org Для отображения содержимого правильно, используйте CSS (http://www.w3.org/Style/CSS/).
2. В моем браузере все работает
Ошибка: разработчик может быть поклонником какого-либо конкретного браузера или наоборот, относиться к нему предвзято. О кроссплатформенности могут просто забыть
Последствия: Факт в том, что сайт написанный под конкретный браузер может выглядеть совсем не так в других браузерах.
Как избежать: Не забывать тестировать сайт в каждой версии браузера во время разработки. Есть много бесплатных сервисов, которые эмулируют работу различных браузеров: free VMs, site scanners, Visual Studio . Такие сайты как http://browsershots.org/ или https://www.browserstack.com/ предоставят вам скрины того, как страница будет выглядеть в разных браузерах/версия/ платформах. При использовании CSS не забывайте о «переустановке» по умолчанию, как это показано на meyerweb.com.
Если на вашем сайте используются элементы CSS для конкретного браузера, будете внимательны с использование префиксов -webkit-, -moz- или -ms-. Чтобы быть в курсе последних тенденций в этой области, советую ознакомиться со следующими статьями:
Microsoft Edge Dev Blog: A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent
QuirksMode.org: CSS vendor prefixes considered harmful
Bruce Lawson: On Internet Explorer supporting -webkit- vendor prefixes
3. Плохие формы
Ошибка: Требовать от пользователя информацию. Помните, что посетители приходят на сайт за информацией, а не наоборот.
Последствия: многие идет не так, когда пользовательской записи слишком доверяют. Страницы могут отображаться неправильно, когда необходимые данные не предоставляются или полученные данные не совместимы с базовой схемой данных. Еще более серьезной проблемой является умышленное нарушение базы данных сайта через инъекции.
Как избежать: Пользователю должно быть понятно, какие данные вам нужны. Например, просьба оставить адрес вызовет недоумение у пользователя. Что именно вам нужно: домашний адрес, рабочий или может быть адрес электронной почты? Чтобы быть более конкретным, воспользоваться методами проверки данных, доступных в последних версиях HTML, как показано в этой статье. Независимо от того, как данные проверяются на стороне браузера, убедитесь, что они подтверждены и на стороне сервера.
4. Перегруженные страницы
Ошибка: Страницы перегружёны графикой и картинками, HTML разметка тоже может быть излишне сложной и раздутой.
Последствия: Страницы будут загружаться слишком долго, в некоторых случаях может даже появиться сообщение об ошибке и страницу придется перезагружать еще раз.
Как избежать: не стоит рассчитывать на то, что у пользователей будет высокоскоростной интернет. Вместо этого еще раз посмотрите на ваш сайт и подумайте, что может его тормозить. Чаще всего это картинки. Есть несколько способов минимизировать потери.
Действительно эти картинки так необходимы? Если нет, их можно удалить. Проверить сайт на наличие «тяжелых» картинок можно с помощью этого сервиса.
Уменьшите вес изображений с помощью сервисов Shrink O’Matic или RIOT.
Используйте предварительную загрузку изображений. Это не увеличит скорость загрузки изображений, но зато другие страницы на сайте, которые тоже используют эти картинки будут загружаться намного быстрее.
Еще один способ — это сжать залинкованные CSS и JavaScript файлы с помощью сервисов вроде Minify CSS или Minify JS.
Еще один совет — использовать современную версию HTML (см. ошибку№1) и не переусердствовать с использованием тегов <style> или <script>
5. Создание кода, который должен работать
Ошибка: Код протестирован разработчиком и он подтвердил, что все будет работать и на сайте.
Последствия: Сайты без надлежащего тестирования могут выдавать самые разнообразные ошибки конечным пользователям. Это скажется не только в потере пользователей. Сообщение об ошибке может дать намек хакеру на наличие уязвимости на сайте.
Как избежать: Человеку свойственно ошибаться и здесь нужно сосредоточиться не только на способах предотвращения ошибок, но и на их своевременное выявление. В этой статье посвященной использованию JavaScript для разработки Windows Apps вы найдете много полезных советов.
6. Написание разветвленного кода
Ошибка: имея благородную цель поддержки всех браузеров и версий, разработчик создает код, который отвечает на каждый возможный сценарий. Код разрастается до невероятных размеров, разветвляясь в разные направления.
Последствия: учитывая количество браузеров и частоту их апдейтов, поддерживать работу кода становится проблематично.
Как избежать: Реализовать в коде функцию распознавания в зависимости от браузер/версии.Эта функция не только сократит длину кода, но и облегчит его чтение и управление. Реализовать эту функцию поможет библиотека Modernizr.
7. Отсутствие отзывчивого дизайна.
Ошибка: Подразумевается, что у пользователей будут экраны такого же размера, что и у разработчика/дизайнера.
Последствия: просматривая сайт с мобильного устройства или на очень больших экранах, посетители не смогут увидеть важную информацию.
Как избежать: Используйте отзывчивый дизайн на ваших сайтах. Вот здесь несколько практических рекомендаций по его использованию, включая создание отзывчивых изображений. Хорошая подборка всяких полезностей есть и на Bootstrap.
Оригинал статьи на английском языке: http://www.sitepoint.com/10-common-mistakes-web-developers-make/ |
|
|
|
|
