How to Build Excellent Webflow Websites
Several factors come into play when evaluating a website for its overall user experience and quality assurance. This article will go over the 5 key areas you need to cover on your websites' pre-launch checklist.
Webflow has revolutionized the web design industry, enabling designers to develop custom websites quicker than ever before, without needing to code. But building an excellent website still has its own set of challenges. Several factors come into play when evaluating a website for its overall user experience and quality assurance. In this article, we'll go over the 5 key areas you need to cover on your websites' pre-launch checklist.
Proper site layout & navigation is a must for all breakpoints. Compatibility with different devices is key to ensuring your website will be easy for everyone to access. Make sure that your layouts adapt to the screen size and your content scales appropriately. Test your website on as many devices as possible: computer monitors, large laptops, smaller laptops, iPads, tablets, and smartphones. If you don't have access to so many different devices, you can emulate each device experience by going to your website on Google Chrome and pressing CTRL/CMD + SHIFT + I to open the developer console. From there you can select different devices and change the display window size to get a better idea of how your website will behave on different devices. You also should be aware of how different browsers interpret the code you produce. The following website is a good tool that can help you find out which browsers support the features you're implementing on your site: https://caniuse.com/
Web Accessibility is the accessibility of a website to people with disabilities whether permanent or temporary. An accessible design needs to be easy for everyone, including users who have difficulty seeing or hearing and navigating websites. An accessible site will work well on all devices regardless of size, screen resolution, network speed, or operating system.
Here are some ways to make your website more accessible:
- Use a sans serif font for larger text like headlines and subheads
- Add alt tags - or alternate textual descriptions of images on the site. Alt tags should be clear and useful. This will help people who have vision impairments but also helps search engines such as Google understand what an image is about so that they can show them in search results when someone searches for a topic related to the picture.
- Add transcripts of videos on the site so that these are also accessible to people with hearing impairments.
- Use good color contrast between important content such as headings, paragraphs, images, buttons, and other elements.
- Add custom attributes and aria labels where necessary.
Search Engine Optimization or SEO is the process of influencing how a site appears in search engine results. This usually includes improving visibility through increased incoming links and placement and drafting text to use keywords that are searched by users more often than other words on your target topic.
- Make sure Webflow.io subdomain indexing is disabled in your Project Settings.
- Set up SEO page settings from the Designer, including Page Title, Meta Description, & Open Graph image.
- Use keywords effectively throughout the website copy; some popular keyword tools for this include Google's Keyword Planner Tool, Ahrefs' Content Explorer, and SEMrush PRO Tools
- Drafting an effective headline can help capture reader attention at first glance when they're scrolling down SERP pages full of countless other websites
- Always link out to trusted third-party sources and avoid keyword stuffing (i.e., repeating keywords excessively in order to manipulate rankings)
- Track SEO work with Google Analytics' Search Console integration so you're able to see how much traffic is coming from which organic SERP rank positions like #18, #21, etc.
There are a few quick steps you need to take in your Project Settings to ensure your website is ready to launch. Here's a quick checklist:
- Make sure any custom CSS is in the head tag; not the footer.
- Check Minify CSS and Minify JS
- Add a Favicon
- Add a Webclip
Optimization is necessary to make sure your website runs smoothly and efficiently regardless of the user's device or internet speed. When you build a website in Webflow, there are several things you can do to make sure your content is optimized for the user.
- Make sure your images are compressed using a tool like ImageCompressor
- Use Global CSS classes across the entire site
- Clean up all unused classes in the Designer
- Clean up all unused interactions and animations in the Designer
Happy Website Building! I hope this checklist will help you build excellent websites using Webflow.