With the growing popularity of Webflow, there are more people who are learning and selling their Webflow services. Clients these days are looking for Webflow developers who are well-rounded. They are not just looking for someone who can build mockups / wireframes in Webflow. There is always the trend of learning brand new tools but it is extremely important to hone existing skills by building on top of them. For example, there are always new no-code or low-code tools to learn but if your expertise is exclusively Webflow development it might be a good idea to learn skills that will complement this expertise. Being equipped with tangential skills is not only going to help you streamline your workflow and deliver better results but will also look more appealing to prospective customers. Here are 5 skills that will help you become a well-rounded Webflow Developer:
If you are working with small businesses or startups, chances are they don't usually have a dedicated Graphic / Web Designer who is working on the marketing materials (includes a website) at all times. There will be times when your client will ask you to fix a blurry image or crop the image to fit the background circle better. Given this scenario or a similar one (happens all the time), ideally you would step in and help your client with the issue and fix the issue(s) with the image directly. Learning how to use tools like Adobe Photoshop, Adobe Illustrator or even Preview will be so helpful. You don't have to be an expert but simply learn the most elementary skills like cropping an image, removing the background and so on.
Building on the first skill, being able to export assets in the right format will make leaps and bounds of differences for your Webflow services. Most of the time, clients will have their mockups / wireframes in Figma/Sketch/Adobe XD and you will be asked to export assets including icons, logos and hero images. For logos and icons, ideally they are exported as .SVG files. SVG format is excellent because the images keep their ratio aspect and do not stretch / shrink and look janky. For larger images, it is highly recommended that they are compressed. I usually like to use .JPG or .PNG and will use a tool like TinyPNG to compress them. After compressing an image, you still have to double check if the quality of the image downgraded though.
Google Chrome Inspect is a life-saver when QAing (quality assurance) a website and catching bugs before your client can make a giant list. Webflow is pretty good when it comes to showing how the layout will look on small devices. However, there have been many times where the Webflow layout didn't quite match what the layout really looked like on a real device. That's where Google Chrome Inspect comes in and helps one QA how a website looks like on any device. Google Chrome Dev Tools already has a list of popular devices you can select from, which I find extremely helpful. Google Chrome Inspect is also great because it also lets you pick any breakpoint (large breakpoints) and give you a general idea of the responsiveness of your site at that specific breakpoint.
Your clients might have questions about SEO either at the very beginning of the project or towards the end of the project. Throughout the project, it is very important to employ the best practices for SEO. For example, clearly defining H1 (Header 1) on all pages and building a readable, easy to follow structure is very important. Compressing images and adding an alt tag to every single image (uploaded to Assets) is also expected.
This is minor but knowing the best practices for form design will lead to good user experiences on your client's website. For example, clearly labelling required fields will be helpful. It is a poor experience if the required fields are not labelled, and the error message flashes after a user has missed filling out a required field. Also it is an excellent practice to customize Webflow's default error and success messages to match the look and feel of the website.