Webflow has revolutionized the web design industry, enabling designers to develop custom websites quicker than ever before, without needing to manually write 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 screen sizes.
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: Can I use | Support tables for HTML, CSS3, etc.
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, 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.
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
- 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 or Website Planet's Image Compressor
- 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
- Test on different browsers and devices like Chrome on Windows and Safari on an iPhone
Frameworks & Documentation
The sites that you build may not always be managed only by you, so it's important to choose a framework for naming your CSS classes like Mast, Client First, or Knockout. The framework and process you use should be well documented sot hat the future you and other web developers can easily pick up where you left off. A style guide is also a must have for easily managing global styles on the site.
Happy Website Building! I hope this checklist will help you build excellent websites using Webflow.