Phew, finally done! You’ve worked so hard on a Web Design and Development Project in Webflow and you are all excited and set to deliver the project to the client. Before that, you need to make sure you have all the key elements in place before you deliver the website to the client.
Here is a checklist that I follow to check if I have completed all elements of the website in terms of design and code. You can use this checklist as a guide to your Webflow Projects too! This does not pertain just to Webflow but can be used as an outline for your other Web Design projects as well!
I know from experience that whenever I work on a project, I tend to check all design elements a thousand million times, but even then I miss small and basic design requirements. To make sure I don’t struggle with this(many times becomes so overwhelming!), I have created a pre-launch checklist for the very same purpose.
Be sure to check the following:
A logo is the main image of the company or the brand -Make sure it is of high resolution and resized to the perfect size for your project. The image should not be pixelated and should work well on all screen sizes. There are many other small aspects when considering the logo’s placement on the header of the website as well as the footer. We would talk about spacing and how it affects the look of the website below.
If you are placing your logo on the left of the navigation menu, make sure your logo is placed with the same left spacing as the right spacing of the menubar/ hamburger menu on the website. If the logo is to be placed in the center of the web page, make sure there is an equal spacing on the top of the navigation bar as the bottom.
A color palette needs to be picked out for a web project and make sure you adhere to the colors on that palette. For eg., all H1 headings could follow the same style(font, classes, spacing, etc) and the same color. If the client already has branding guidelines for color, make sure the website follows those guidelines.
Make sure to use global swatches - makes using colors very easy!
Make sure your fonts are consistent. If you are using more than one font, check which elements use which font. If the Headings are in Montserrat, make sure all headings across the site use the same font. It helps to select the body under the navigator menu in Webflow and set its font to Poppins if that is your body font. This way, you do not have to select fonts and sizes every time you drag a paragraph element.
Create a Style Guide for your Web Project as it helps defines all styles - Headings, Paragraphs, List Items, Rich Text Elements, Blog elements, etc. Also, make sure your headings have a hierarchy that makes sense — i.e., don’t skip from H1 to H3.
Make sure spacing is consistent across the site. All custom headings will have a padding of 10px, above and below it. All paragraph elements have a margin of 10px below them.
All grids on the website will have a 20px row and column width. All my sections will have a padding of 60px on the top and bottom.
Make note of the fact that all elements need to be legible and readable by the user.
Drop shadows, Box Shadows - all have to have the light source consistent on each one. Also make sure to use the same blur, opacity, and spread values on each of the elements be it div blocks or images.
All images should be sharp and non-pixelated. If images are huge in file size, use an image compressor such as https://imagecompressor.com/ to compress them into manageable sizes. This way your site loads faster and users are not annoyed by how slow the site loads. Remove.bg is a great site to remove backgrounds from images. This way, you have a nice transparent background for your images and you can use them anywhere. A quick speed test using Pingdom is a very helpful resource to see if you’ve optimized your images sufficiently. All images should have alt texts to be compatible with screen readers.
Images work better when placed inside a div block. This way, the div block’s size can be adjusted for placement and a better-looking page. Images also resize well when inside a div block. This particularly helps when working on mobile-responsiveness.
A favicon is a 16×16 pixel icon that serves as branding for your website. Visitors can locate your website tab easier with a favicon when they have multiple tabs open. Or it accompanies a bookmark. Usually a favicon is a small clear image or mostly text on a background. Favicons may or may not be logos just in a smaller size!
Make sure your website has a favicon uploaded into the Site settings of your Webflow project.
Webclips are also known as touch icons and are used in places like Safari’s bookmarks. They are 32x32 px in size.
Make sure you also have a Webclip for your project set under the same tab as the favicon.
Make sure to turn off the 'Display Webflow Badge' option, if you do not want the badge to appear on the bottom right corner of your web pages.
This is the part that becomes important when it comes to coding and development inside of Webflow. I could work on the creation of the site before doing this. But that becomes a drastic blunder. I do agree that sometimes the Brand Style Guide needs to be modified when I start developing the site. But ideally, I would like to have the Style Guide in place before I start to code. Why? The purpose of the Style Guide is to have colors, fonts, heading and text styles, image sizes, UI components, blog post formats, etc. designed before we get our hands wet with the code. Doing this not only establishes sizes, fonts, and colors for each element but helps to define classes all in one place. If I need to change anything on the headlines or buttons, I would have to edit only in one place - the Style Guide and it updates the entire site immediately.
Another reason to define the Style Guide first is to avoid redundant classes. A heading can be left-aligned and I can add an extra class called ‘text-center’ to align the text to the center. This way if there are places where I have to use the heading that is aligned to the left, I would just have to keep it a heading. If I want to center align it on a page, I can add the class, ‘text-center’. Simple, right?
All of the above are visual checks for elements on your website. Now let’s take a look at how we can make your site look consistent across all browsers and devices.
A fact is that even though your website looks stunning on a Google Chrome browser, it may not on Firefox or Edge or even Safari. A good web designer makes sure the website looks good on all browsers.
Things to look for while checking for cross-browser compatibility.
When I look at certain websites on the desktop or on my laptop, they look absolutely stunning. But when I open up the same website on my phone, half the page gets cutoff. A website should look really good on a mobile as it is on a desktop or laptop screen. That’s the best part of Webflow, right?
Webflow has the feature of seeing your web page on all screen sizes and allows to customise it for each size. Make sure you’re seeing your website rendering well on a small screen size. I usually check up to 300px as most phone sizes have screens above that width. I also literally use all the devices in my house - husband’s, kids’ to check for cross-device compatibility. Nothing like the real thing, right? You’d be surprised how much you’d just have to work on this part!
Remember to check your Navigation menu to see if the alignment on the links is correct and if you have used equal padding. Make sure to use flexbox properties or grid properties to align all elements horizontally and vertically.
You would have to check if all the form fields are mobile-responsive and if the submitted information goes to the right place. Form submissions by default can be seen on Webflow Settings page under the tab called ‘Forms’.
Additionally, form submissions can be directed and collected in Mailchimp as well!
A footer is a common symbol on each page just like the header/navigation menu. So it is enough if you test just one page’s footer. I prefer dividing my footer into div blocks and then using flex property to align them into columns and rows. Links will be added in each div block.
Another way to have a neat and aligned footer is to use grids. This way, the content is neatly aligned horizontally and vertically. The content inside is usually in a smaller size than the body of the site.
Content is key on the website and it is very unprofessional when your readers read through to find typos. Please read through the content to correct grammar and spelling mistakes on your website.
Make sure to optimize your website for SEO as this helps in Google searching and indexing your site.
A meta description on the other hand gives more info about a page to Google. It shows up below your meta title in search results. Some best practices include:
Website analytics are another important element to set up before you launch your website. A Google Analytics account is completely free, and can be set up easily with this guide. Once set up, you’ll be able to track visitors and user engagement on your website almost instantly!
Hope you found this article very helpful! Feel free to use as your own in all your Webflow projects. If this was useful, please share this with your fellow web designers!