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.

Mobile Responsiveness

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/

Accessibility

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, operating system etc., so that no one is left behind. In Webflow, you can implement accessibility without having to write any code at all.

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.

- Use a service like Accessibe to fill any gaps and maintain WCAG 2.1 compliance.

SEO

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

- Consider the following best practices when writing content to be indexed by search engines: Use relevant keywords throughout your copy; include a summary or introduction paragraph at the top of each page that can serve as an anchor text for links back to it from other pages on the site, and use descriptive headings.

- 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.

Project Settings

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

Site Optimization

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

Conclusion

Happy Website Building! I hope this checklist will help you build excellent websites using Webflow. And remember, if you are looking for more tips or information about designing with Webflow, we have new tutorials and articles coming out on our blog at matthewjohn.design/blog


Let’s skyrocket your next project together.

If you need a modern and powerful website for your business, startup or yourself, I am available for work. You can email me directly at hello@matthewjohn.design.

purple rocket ship