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 (скоро будут и другие платформы), делюсь успехами и фейлами студии и публикую разные полезности.
Всем хорошей недели!
Посмотреть остальные мои статьи можно тут 👇
Я пропустил этот бриллиант. В самое сердечко. На все эти грабли наступил ))
Более отвратительного конструктора чем вебфлоу я не встречал.
Может я просто привык к элементору вордпресса или наличию нормального текстового редактора. Вставить страницу текста с нумерованными и маркированными списками - БОЛЬ.
Приходится копировать каждый параграф и элемент списка по одному, в свой отдельный блок. При вставке текста из ворда регулярно пропадают пробелы, но не все, а рандомные. Сам редактор жутко тормозит, а страница иногда начинает медленно прокручиваться сама. Да, редактирование блоков максимально гибкое, но складывается впечатление, что это инструмент не для пользователей, а чисто для верстальщиков. Ужасно!