Webflow most common issues

Here a compilations of the most common issues pitfalls and fixes I find while working as a Webflow Developer
November 20, 2022
Webflow

No design for big HD screens

You don´t have design for big screens. Client says: ‘This is how I see things on my screen’. OMG! After so many years of UX and we still hear this. First: Tell your client: ‘You are not the User’. Second: This is all about containers width and margins. What is the max width of your main container for each resolution? Maybe it is made for desktop but not for big HD desktop resolutions.

Not Mobile Design

You don´t have Mobile design or you have Mobile design with different measures. Usually you find width at 375px from Figma when you have 320px at Webflow. What do you do? Work with percentages or viewport units and fix margins/paddings. Same for images, you´d better move to aspect ratios.

The Desktop/Tablet issue

This happens with big menus, Navigation Bars with many items, it is ok for big desktop resolutions but if it is a low resolution there is not enough space for all the items.

Best solution is using custom code to change font-size for low desktop resolutions, something as follows:

/* reduce font size of navbar on screens less than 1200px width */<style>@media screen and (max-width: 1200px){.navbar_link{font-size: 0.8rem;}.Text-navbar{font-size: 0.8rem;}.dropdown-text{font-size: 0.8rem;}.button-login{font-size: 0.8rem;}</style>

No Semantics

Your headings don´t follow proper way or you are avoiding hierarchy. Maybe thinking about SEO before making your layouts. Or even more: There are no headings. Sometimes there are sections without titles, maybe talking to designers about it also.

...

Continue Reading