Веб-разработка - одна из самых прогрессирующих отраслей IT разработки. Однако вместе с этим, в сфере появляется очень много подходов и новых инструментов, на которые современному веб-разработчику стоит ориентироваться. В данной статье мы рассмотрим базовые советы верстки и приведем материалы для их изучения.
Разработайте единую систему именования элементов
Сайты могут каскадно расти в объеме, как и код, который их поддерживает и вы рискуете потеряться в неорганизованной системе стилей. На такой случай стоит выработать формат именования элементов, а лучше взять имеющийся. Одним из таких форматов является БЭМ (блок, элемент, модификатор), который применяется во многих крупных компаниях и позволяет удобно именовать и разграничивать элементы сайта. Методология имеет свой сайт, где вы сможете ознакомиться с ее основами.
Создавайте адаптивные сайты
В нынешнее время в сфере разработки сайтов очень популярен mobile first подход, при котором разработка интерфейса ведется в первую очередь с оглядкой на удобство использования на мобильных устройствах. Эта методология прекрасно подойдет для большинства сайтов, поэтому стоит уделить внимание данному подходу. Помимо того, поисковые системы давно ранжируют сайты в зависимости от того как хорошо они работают на телефонах.
Очевидно, что сайт, который хочет быть одинаково удобен и на персональных компьютерах, и на мобильных устройствах должен иметь адаптивный дизайн. Стандартными средствами тегов HTML этого не выйдет достичь, поэтому стоит обратить внимание на флексбоксы. Это механизм, который позволяет контролировать размер, порядок и выравнивание элементов сайта. Для ознакомления с данным инструментом есть ряд статей:
Также адаптивный макет сайта требует изменения различных параметров элементов, таких как шрифт, ширина блока и.т.д. Для того, чтобы достичь адаптивности в этом вопросе не стоит измерять все в пикселях (px). В CSS есть ряд других единиц измерения, таких как em, rem, vw, vh и.т.д. В данной статье изучается, что это за единицы и от чего они рассчитываются.
Используйте семантическую верстку и ориентируйтесь на доступность
Для любого сайта очень важно чтобы он был в топе поисковой выдачи и мог быть доступен для всех пользователей. Одним из важных критериев для этого является
семантическая верстка. Это подход к разметке сайта с учетом смыслового содержания блока. Например: если сверстать таблицу используя тег <table>, а не <div>, то
поисковые боты поймут ваш сайт лучше и смогут вывести содержимое таблицы как ответ на вопрос пользователя. Для изучения семантических тегов мы рекомендуем данную
статью. Она поможет разобраться с основами семантической верстки и понять, где стоит это использовать.
Используйте правильные форматы медиафайлов
Пользователям критически важна скорость загрузки вашего сайта. И никому не будет приятно ждать загрузки сайта по несколько секунд, а то и больше только из-за того что вы захотели использовать красивую картинку как фон. Помимо этого, обыденные форматы не рекомендуется использовать в отдельных ситуациях, например, никто не делает иконки в формате PNG. Затраты на загрузку файлов и прочие проблемы можно решить адаптацией материалов и приведением к нужному формату. Данная статья поможет разобраться с тем, какие существуют типы изображений и когда их стоит использовать.
Учитывайте кроссбраузерность
Веб - довольно несогласованное место и различные элементы сайта могут отрисовываться иначе на различных браузерах, что стоит учитывать при разработке и тестировании сайта. Решить эту проблему помогают вендорные префиксы. Это особые префиксы стилей CSS для отдельных браузеров, которые помогут корректировать его поведение. Узнать подробнее о них вы можете из данной статьи.
Организуйте структуру сайта
Для последующей загрузки сайта на хостинг или удобного обслуживания проекта важно иметь строго выделенную структуру, в которой будет удобно ориентироваться. В общем, вы можете использовать свои названия папок, но важно делить файлы по их типам. Например, ваша структура может выглядеть подобным образом:
- styles - папка с CSS файлами
- images - папка с изображениями
- scripts - папка с javascript-скриптами
- files - папка для прочих файлов (документов и прочего)
Обратите внимание на фреймворки и прочие вспомогательные инструменты
Несмотря на то, что CSS - невероятно мощный инструмент, он имеет ряд своих недостатков и в чистом формате его мало кто использует в производственной разработке. Как минимум, стоит посмотреть в сторону препроцессора CSS, например SCSS, который позволяет организовывать таблицу стилей в более удобном формате и предоставит дополнительные возможности. Для ознакомления с данным инструментом, можно воспользоваться следующими статьями:
Помимо этого, очень часто в разработке могут быть использованы фреймворки - это либо набор готовых стилей для создания сайта, либо набор стилей который упростит разработку. С самыми популярными вариантами вы можете ознакомиться в данной статье. Они не только упростят разработку, но и также ускорят ее.
Надеемся эти советы помогут вам, удачи в ваших начинаниях!
Остались вопросы?
Можете задать их в нашем Telegram-чате, воспользуйтесь ссылкой или отсканируйте код ниже чтобы перейти.
