User-Centered Webflow Tips (Part 1)
A few years ago, I tried to code my website from scratch. I took on the challenge because I knew enough HTML, CSS, and JavaScript to get started. I was so excited and had a lot of ideas that came from just browsing other portfolios I saw. The portfolios that got my attention were, of course, the fancy ones. You probably know what I’m talking about, the ones with the slick animations and transitions. Eventually, my dreams were crushed when I determined that coding an amazing website from scratch was not going to happen. It takes a lot of work, time, and knowledge to follow-through on, and just as you think you’ve built the perfect website, you remember this thing called responsive web design. In short, it all became a headache and I threw in the towel.
Along comes Webflow, a tool for designing, building, and launching a responsive website. Webflow is versatile because you can either start from scratch or work off of a template. On the other hand, it requires a bit of a learning curve and although not necessary, it helps to have a baseline knowledge of HTML and CSS. This may be a disadvantage for some people and there are several factors you have to take into account when evaluating which tool is right for the job. I decided to take a chance with Webflow and surprisingly, it has helped me better understand the intricacies of code, especially CSS positioning. Additionally, it’s been great to experiment and dig deep into complex layout and functionality issues. In a way, it reminds me of coding. Specifically, that exciting feeling you get when you finally figure out that stubborn bug, only for it to be a misplaced parenthesis.
Because I’m updating my Webflow site quite frequently, I always learn something new. That’s why my goal is to make this post into a series of articles. In this one, I’ll be starting out high-level by introducing some tips for organization and navigation.
Navigation Pertaining to User-Centered Design
Navigation is critical across all pages of your site, which is why you must make it easy for someone to get to their desired destination.
Full View on Desktop
One tip I learned recently is to place menu items in full view on desktop and possibly tablet. Why? Hiding navigation behind a hamburger menu introduces extra clicks and may lead to frustration.
Back to Top Button
Another simple way to help out the users of your site is to add a back to top button. It becomes especially important when you have a long-scrolling page with a lot of content. With Webflow, there are a ton of options for customizing this button and you can even add interactions to make it only appear when the user scrolls past a particular section, for example.
Here’s a video that helped me add a back to top button on several pages of my site:
… This brings up another benefit of Webflow. There’s a lot of tutorials and communities dedicated to helping people out, so if you know where to look, you can easily get a lingering issue solved. One of my go-to's is the Pixel Geek Community. All you have to do is create an account, submit an issue, and a member of the community will graciously help you out.
Fixed Table of Contents (and Progress Bar)
If you’re a designer and have detailed case studies, you can help users navigate them by adding a table of contents. But, there’s one catch. You’ll need to declare its position as fixed so that it remains persistent when scrolling. You can place your table of contents anywhere (top, right, bottom, left) but make sure it doesn’t interfere with the content of your case study.
This video does a wonderful job at explaining this concept:
Grids!
As designers, we all know (or should know) what grids can do for us. Webflow utilizes a concept known as CSS Grid, and it’s great for laying out responsive content. For example, I’ve used grids on my site to display multiple projects or concepts in a tiled format. CSS Grid is particularly nice because of how flexible it is. You can set the number of columns and rows and even customize the spacing in between.
A System for Naming Classes
The last tip I have for you is to come up with a system for naming your CSS classes. According to the Webflow documentation, a class is used to “save styling information that applies to as many elements as you want across your project.”
If not properly managed from the start, classes can quickly get out-of-hand. I would know because I completely neglected the practice while building my site. Naming classes is similar to naming your design layers, which is why if I were to start a new Webflow project from scratch, I would most likely look into the BEM naming convention, a concept I’ve mentioned in previous articles.
All in all, there’s a lot to know about and learn in Webflow. It’s complex, but I’d argue it’s worth your time. And, it’s definitely easier than coding your site from scratch!
Want more tips? Look out for Part 2 of this article coming soon.
