Benefits of Building a Site In Webflow

I have a basic knowledge of code. I can go in and edit what I need or even copy and paste code I need. My skill set lends more in visual language than the coding ones. I have been designing responsive websites for a while now. I thought I had a great understanding of how my designs would translate into code.

Then I built my website

and a client website using Webflow.

My process starts with sketching wires and building mocks using sketch for assets. I designed the website with mobile in mind, thinking how things would flow. At least I thought, until I started putting the website together in Webflow.

I started in Webflow with the standard desktop size. I knew to keep my code simpler I needed to minimize the number of classes I set and try to avoid having set widths. When an item wasn’t working I began adding classes to correct an existing class. Soon enough I was adding fixed widths to make everything fit into my designs. I should have been trying to solve my original classes and discover why they were not working. I was using a bandaid, when I should have been looking for the root of the problem.

As I was just doing desktop, this wasn’t a problem. Everything looked great and was working. As soon as I started working on the different breakpoints, I began creating more and more bandaids. Then I would go back to the desktop size to make sure my “bandaids” didn’t break anything. Even though I thought about the responsive nature of my site, I didn’t plan as I built it.

Here’s an example. On the Sunny Sprouts website there is an FAQ section. It is simple, but this section caused me a lot of headaches. I started out with fixed widths, not only for the container div, but also the text. One day I opened it up and my alignment was off, so I started to create more classes. This caused a lot of problems when I started to build out the different breakpoints. I had to adjust the two widths at every breakpoint.

One night I was about to go to bed and it hit me. I needed to use the margins and padding of the divs to control the size of the content. Then I would only have to right the code once, maybe twice for the smaller screens. Anyone who codes on a regular basis, probably would have caught this in their sleep. Thanks to Webflow and playing with their settings I was able to go back to the FAQ section remove all the excess classes and start fresh.

My designs now don’t need breakpoints, because they are responsive to the size of the browser. I then began solving the problems for other sections of the site. Then my own site came to mind and started to simplify my classes there. This was the moment I began thinking a little more like a responsive web designer.

I realized I still have a lot to learn and the site was not 100% correct. It occurred to me how beneficial for designers to build sites using Webflow. Especially if you have little experience building RWD sites. They would gain a better understanding of how your designs translate responsively.

I now wish for settings in a design tool that allow me to set margins and padding. Then I can scale them to see how they work on different screen sizes. Sketch has started this process with their symbols and ability to scale them. Then I thought “At one point does coding become the tool?”

Subscribe to my newsletter to receive updates about new articles.