7 Webflow “Sins” and How to Avoid Them
Many users get excited at the prospect of building a website right away without having to know code. While I myself understand this excitement, as code can be tedious, there are a few caveats and pitfalls I think users should avoid when starting visual web development in Webflow. They are as follows:
1. Not naming classes
When you first start out with Webflow it is very easy to add and remove elements, but one thing that can be overlooked is assigning class names to the elements that are added. This leaves each element with a name of “Div Block 1,” “Div Block 2,” and so on. When viewing the navigator you are not able to understand what element pertains to what and why the element is there. This can lead to confusion for the designer and developer creating the site. In this case I always give the element a specific class name first after I have added it to the project. For example when I add a hero section I give it the class name “hero-section.” Then when I add a container I give the class name “hero-container.” Any elements or components after that will have the keyword “hero” in front so I know the elements pertain to the hero section. Having a keyword in front of a class name is a great way to know what section each element pertains to and why it’s there. Don’t go without giving specific class names to your elements as it can be very tedious to manage the project after it has been created.
2. Not having a site structure
Another mistake that can lead to a confusing project is not having a site structure. Usually I like to structure my site in this way:
- A “main-wrapper” to include all contents inside of 1 div block. This allows me to easily copy and paste pages from one page to another.
- Then a section.
- Then a container within the section with a max-width. The max-width can be anywhere from 1170px to 1440px depending on the project.
- Then components inside of the container.
- Anytime there is a new section for the site I repeat this process.
- I usually have one keyword starting with the section and working my way down. For example if the section is titled “hero-section” then the container will be “hero-container” and any elements inside of the “hero-container” will have the keyword “hero” in front of it. This helps the site to stay organized and helps me know what elements pertain to what section.
3. Images being too large
This is a fairly common mistake I see with Webflow users. There can often be complaint that the site is loading slow. This is usually due to site images being too large. Images from Unsplash for example can be 4000px by 6000px in width and height and have a file size of over 3mb. This is very large for websites. I usually try to keep my images around 300kb — 500kb in size. I recommend resizing the image if you know how large it’s going to be — maybe around 1200px in width depending on your site needs.
You can also use a website like Compressjpg to compress your images to a smaller file size: https://compressjpeg.com/.
Here is the site for png images: https://compresspng.com/.
4. Overflow on smaller devices
A common mistake I see on specific Webflow sites is overflow on smaller devices. This causes horizontal scrolling. I go over how to mitigate this mistake in the video above and in most cases this issue can be corrected by using percentages instead of pixels on the site or resizing text to a smaller size on smaller devices. Webflow has a great video here on unexpected horizontal scrolling: https://webflow.grsm.io/overflow-hidden-video
5. Still using columns
Columns were well and good in the early stages of web development, but I feel they are a bit outdated now that we have flexbox and grid within web development and Webflow provides these tools within the Designer. Using columns is a bit rigid to me and makes it a bit more difficult to make the site responsive on tablet in mobile. I opt for using flexbox instead for 2 dimensional layouts as I can making the elements on the site responsive with one click of a button. This is done by changing a flexbox layout from horizontal on desktop to vertical on tablet and mobile, for example. Grid can be used for more complex layouts that require various sizes for the columns and rows.
6. Adding Interactions Multiple Times
When creating an interaction in Webflow you can assign the interaction to multiple elements with the same class rather than assigning the same interaction multiple times to elements with the same class. This can be a big time saver.
7. Purchasing an account plan when you don’t need one
Webflows’ pricing is not always clear cut. Some users may think they need to account play to remove the 2 pages and CMS limits, but in reality if you know you only have one project you can simply purchase a CMS site plan and the 2 page limit along with the CMS limits are removed. An account plan is mostly need if you know you need to create more than 2 projects that don’t need site plans. A site plan allows you to add a custom domain to your project as well.
More information on Webflow pricing can be found here: https://webflow.grsm.io/webflow-pricing9926
Honorable Mention: Not closing code tags
Webflow itself does not verify custom code so if you find that your site is not working when published be sure to check any custom code to ensure the tags are closed. For example if adding CSS styles in the head section of the custom code the code should begin with <style> and be closed with </style>. If adding a script in the body section of the custom code the script should start with <script> and then be closed with </script>. If the custom code is not closed it can cause issues on the published site.
These are the 7 “Sins” or mistakes I’ve come across most often working 2 years in customer support at Webflow. Hopefully it helps. What do you think are the most common Webflow mistakes?
To sign up for Webflow click here: https://webflow.grsm.io/get-started
As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.
That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.
So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.
12 photography portfolio websites to showcase your work
Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.