Найти в Дзене

ТОП-7 критериев верстки сайта, где найти ошибки у web-программиста

Народ, всем привет. Так как сам я являюсь программистом и пишу сайты (верстаю), то сегодня расскажу вам «по секрету», так сказать, на что нужно обратить внимание при приемке у разработчика вашего приложения, сайта, лэндинга, чего угодно. Ну и программистам, начинающим и не только, будет полезно почитать, что бы им стоило улучшить и за какие «косяки» их могут спросить. В общем сегодня у нас семь топовых требований к созданию сайта. И не думайте, что это только визуальная часть, как раз-таки ее мы особо изучать не будем. Тут у каждого, как говорится, на вкус и цвет фломастеры разные. А вот от того, как написан сайт, как он «слеплен», будет зависеть ваше SEO, оценка роботами, ну и конверсия посетителей.

1. Валидность. Сайт должен быть валидный, а если проще, он должен быть написан по определённым правилам и канонам написания HTML разметки и CSS стилей (так называемый стандарт W3C). Ведь там прописаны не только основные тэги и элементы, но и их правильная компоновка, как они должны быть указаны, где стоять, имеется ли описание, и т.д. И все это напрямую влияет на восприятие поисковыми ботами, а также SEO оптимизацию. Проверить это не сложно, есть множество сервисов (в том числе на официальном сайте W3C), где вам автоматически покажут такие ошибки.

-2

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

Кстати, Вам может быть это интересно:

3. Доступность. Это в копилку к первому пункту. Если сайт соблюдает все стандарты, то проблем быть не должно. Однако все равно есть определённые моменты, особенно связанные с людьми с ограниченными возможностями. По большому счету это специальные мета-теги, теги и свойства элементов, которые позволяют браузерам «читать» ваш сайт для таких людей. Плюсом сюда идет доступность для людей с плохим интернетом, а также возвращаясь уже ко второму пункту, людей со старыми версиями браузеров.

-3

4. Размерность. И последний в копилку «внутрянки» это размер страниц. Каждая станица должна обладать определённой шириной и высотой, желательно иметь минимальные размеры, чтобы верстка не уезжала за края, чтобы не было горизонтальной прокрутки (а только вертикальная). Ну и конечно, адаптивность под мобильные устройства, особенно сейчас, когда Гугл объявил о переходе не модель «mobile-first», то есть в начале сделай сайт для мобильных, а только потом для ПК. И если сайт не адаптирован под мобильное устройства, то он просто не будет индексироваться поисковыми ботами.

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

-4

6. Текст. Это момент почему то часто опускают, и правильная разметка текста это не только чтобы он не вываливался за размеры блока при изменении масштаба и прочем (не забывайте, что есть изменение масштаба на разных устройствах, а также при изменении окна браузера, это разные вещи). Но, и чтобы правильно переносились слова, центровка была правильной. Часто наблюдаю, как какие-нибудь длинные слова, правильно и красиво расположенные на ПК-шной странице, превращаются в простой столбик из слов при изменении масштаба или на телефоне.

7. Шрифты. Ну и конечно, как же можно не забыть про шрифты. С ними вообще постоянно головная боль, так как их недостаточно просто скопировать, скачать или прикрепить ссылку на них. В идеале он должен быть одним и тем же в разных браузерах и устройствах (что бывает редко), и это вновь переносит нас к теме размерности и кроссбраузерности. Поэтому старайтесь использовать классические варианты шрифтов, которые будут выглядеть на разных устройствах и браузерах «примерно» одинаково.