5 распространенных ошибок новичков в Webflow

Всем приветы! Я – Саша, руководитель студии дизайна и разработки на Webflow. Webflow – мощный инструмент для создания сайтов, но его изучение может быть сложным для новичков. В этой заметке я собрал список из 5 самых распространенных ошибок, которые совершают начинающие, и как их избежать.

Самые часто встречаемые ошибки, связанные с классами, включают использование комбо-классов вместо обычных классов, отсутствие понимания правильного наименования классов и применение чрезмерного количества комбо-классов. Комбо-классы используются только для дополнительных стилей (например, для светлого цвета шрифта в заголовке), а для основных стилей применяйте обычные классы.

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

Загрузка изображений большого размера без оптимизации и использование гугло-шрифта снижает скорость загрузки сайта. Поэтому важно сжимать изображения и выбирать правильный формат. Для растровых картинок используется WebP, который при хорошем качестве очень мало весит, а для вектора - SVG.

Webflow – достаточно сложный инструмент, который наследует принципы традиционной веб-разработки с HTML, CSS и JS. Поэтому, необходимо следить за корректной структурой сайта, вложенностью элементов, использовать правильные контейнеры (Section, Container, Div Block) и позиционирование элементов. Ошибки могут привести к проблемам с настройкой адаптивности и потерянному времени.

Один из ключевых аспектов современного веб-дизайна – адаптивность под различные устройства. Новички часто не уделяют достаточного внимания адаптиву, вследствие чего появляются «артефакты»: горизонтальный скролл, обрезанный контент, наслоение одного блока на другой, проблемы с читабельностью текста, и так далее.

Еще начинающие (и не только) частенько забывают проверять свой сайт на разных экранах и браузерах, что может привести к некорректному отображению контента, поэтому не забывайте тестировать свои проекты на в популярных браузерах (Chrome, Safari, Firefox, Edge).

При разработке сайта на Webflow зачастую перебирают множество разных названий классов, записывая их в CSS файл сами того не зная. Это добавляет веса странице и может притормаживать загрузку. Поэтому, следуем правилу - закончили собирать проект - почистили неиспользуемые классы и анимации.

Избегая этих ошибок, вы сможете работать с Webflow в разы эффективнее и легко создавать масштабируемые сайты, поддерживать которые будет изи-пизи.

p.s. Если вы только начинаете свой путь Webflow разработчика/верстальщика, то очень советую пройти обновленный курс Webflow, чтобы получить все необходимые базовые знания и не совершать ошибок, которые описаны выше :)

Если эта статья оказалась интересной, то можете подписаться на мой бложик тут, на VC, или в телеграм, где я пишу про Webflow (скоро будут и другие платформы), делюсь успехами и фейлами студии и публикую разные полезности.

Всем хорошей недели!

Посмотреть остальные мои статьи можно тут 👇