Client Resource Center

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

There is no form on my website, but I keep receiving spammy submissions. Why?

Can I set up Open Graph image just once for all pages?

How Should I Treat Decorative Images on My Website from an SEO Standpoint?

Decorative images don’t add information to a page's content and are used purely for aesthetic purposes. These images are not essential for understanding the content but are often used to enhance the visual appeal or layout of a website.

Example of Decorative Images

Imagine a blog post about the best indoor plants for air purification. The post includes detailed descriptions and images of various plants like snake plants and spider plants. Additionally, there might be a background image of leaves or a subtle plant-themed graphic in the page corners. These background images or graphics are decorative because they don’t provide any additional information about the plants—they simply make the page look more visually appealing.

Example from the Rapid Fire Website

Example of decorative image on Rapid Fire website

Accessibility and SEO Considerations

From an accessibility standpoint, it’s important to give decorative images null (empty) alt text (alt="") so that they are ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from the surrounding text.

In Webflow, there is a setting that allows you to apply this empty alt text. Always use it for decorative images.

empty alt for decorative image in Webflow and on published website

SEO Audit Complications

One complication with decorative images is that some SEO audits, like those generated by Ahrefs, may flag these images as issues because they are missing alt text. After contacting support for clarification, they confirmed that they don’t differentiate decorative images from images missing alt text, so they suggested disregarding the notification.

Ahrefs support replies to empty alt tags question — Ahrefs Support Response on Empty Alt Tags for Decorative Images

Tips for Handling Decorative Images

‍Optimize File Size: Make sure decorative images are optimized for file size to improve page load times, which is important for both user experience and SEO.
‍Use CSS Background Images: For purely decorative elements, consider using CSS background images rather than <img> tags. This separates the visual styling from the content and makes it clear that the image is not part of the main content.
‍Lazy Loading: Implement lazy loading for decorative images so they only load when the user scrolls near them. This can enhance page load speed.
‍Accessibility Considerations: Ensure that removing or ignoring decorative images doesn't compromise your website's accessibility.

By following these guidelines, you can maintain a good balance between aesthetics and SEO performance.

Webflow applicable theory

Can I have a folder and collection with the same name in Webflow?

Website improvements

How can we track visits to our Webflow website?

To monitor visits to your website effectively, you will need to integrate a web analytics tool. One of the most popular and powerful tools for this purpose is Google Analytics. Here’s what you need to know about setting it up and what you can expect in terms of features and data accuracy.

Setting Up Google Analytics

Create a Google Analytics Account: If you don’t already have a Google Analytics account, you’ll need to create one. Go to the Google Analytics website and sign up with your Google account.
Set Up a Property: Within your Google Analytics account, create a new property for your website. This will generate a tracking ID.
Add the Measurement ID to Your Website: You’ll need to add the measurement ID once to website setting (Integrations tab).
Publish Your Website: hit Publish button for changes to go live.

Webflow, as always, did a great job of creating detailed yet simple instructions. Watch this video tutorial, and in 5 minutes, everything will be clear.

Features of Google Analytics

Once set up, Google Analytics provides a wealth of information about your website’s performance, including:

User Data: Number of users, new vs. returning visitors, their geographic locations, and the devices they use.
Traffic Sources: Insights into how users find your site, whether through organic search, paid ads, social media, direct visits, or referral links.
Behavior Data: Information on how users interact with your site, including page views, average session duration, bounce rates, and the flow of user navigation through your site.
Conversion Tracking: Setting up goals and e-commerce tracking to measure how well your site meets your business objectives, such as completing purchases or filling out contact forms.

Digital Analytics in Practice

Consider an online fitness store aiming to increase sales of their yoga mats. By leveraging digital analytics, the store can:

Analyze Advertising Campaigns: Identify which social media or search engine campaigns generate the most traffic and conversions, then allocate more budget to the high-performing ads.
Customer Demographics: Determine which age groups or demographics are purchasing yoga mats most frequently and tailor marketing messages to appeal to those segments.
Website Behavior Analysis: Track user behavior on the website to identify any obstacles in the purchasing process. For instance, if users often abandon their carts at the shipping information step, the store can simplify the shipping form or offer free shipping to reduce cart abandonment.

Benefits for Different Businesses

Fitness Bloggers: Use digital analytics to understand what type of content (e.g., workout videos, nutrition tips) drives the most engagement and tailor future content accordingly.
Subscription Services: Analyze user data to identify patterns in subscription renewals and cancellations, enabling them to enhance customer retention strategies.
Retail Stores: Collect data from both online and offline sources to create a unified view of customer behavior, allowing for personalized marketing campaigns and improved customer service.

Digital analytics not only tracks website interactions but also integrates data from mobile apps, social media platforms, email campaigns, and CRM systems. This comprehensive data collection provides a holistic view of customer behavior, enabling businesses to make data-driven decisions to enhance customer experience and boost sales.

Big Release from Webflow: Webflow Analyze

In October 2024 Webflow announced release of Webflow Analyze, a native analytics solution putting a unified view of visitor behavior into the hands of designers and content marketers. With Analyze you get access to the visitor data right within Webflow, including information on how visitors interact with specific pages on your website.

Webflow Analyze is coming with a price tag (see screenshot below, prices for month when billed yearly)

Website improvements

What is the difference between implementing Google maps with an API or embedding an iframe?

Website improvements

How to Set Up Auto-Reply After Form Submission in Webflow?

In brief, as of April 2024, it's not currently feasible to set up an auto-reply directly to form submitters within Webflow. Webflow isn't designed to function as an email agent; simplicity is prioritized in its functionality. What Webflow does offer is the ability to configure single or multiple email addresses to receive notifications about form submissions. This feature essentially allows website owners to receive alerts when a form is submitted. Unfortunately, even this basic functionality has its limitations—you can't specify which email address should receive notifications for specific form submissions; it's all managed collectively. This can be highly inconvenient for websites with multiple forms, each managed by different individuals or departments.

available webflow form settings — Available form settings in Webflow

There was optimism that the introduction of logic might improve this situation. However, the only enhancement thus far is the ability to send notifications about form submissions to individuals with access to the website (such as admins or collaborators). While this is a step forward, it still falls short of the comprehensive functionality needed to effectively manage forms.

Available two methods

Currently, there are two methods to enhance this process, both requiring the use of third-party tools.

The first method involves setting up a webhook using platforms like Zapier or Integromat. Essentially, when a Webflow form is submitted, a zap is triggered to send the information to an email service (such as Mailchimp or Gmail), where the auto-response can be configured. This setup can be complex and may incur additional expenses for the connector app and email service.

The other approach is to circumvent the use of native Webflow forms, despite their appeal, and instead embed forms directly from an email agent or CRM. With this setup, the receiving tool processes the information upon form submission and triggers the desired response. However, styling embedded forms can be challenging, although with custom CSS, most obstacles can be overcome.

New player is in the game

WMails allows Webflow website owners to effortlessly create auto-responses. WMails have free trial for 14 days, and the basic plan with ability to connect 1 website and 2 forms will cost $4/mo billed yearly.

In summary, while implementing auto-responses can greatly enhance user experience, achieving this functionality will likely require the utilization of third-party tools.

Webflow applicable theory

Do I need to purchase hosting, site plan or workspace plan for my website?

I understand there seems to be some confusion regarding hosting, site plans and workspaces, which can indeed be a bit complex. Let me simplify it for you:

Firstly, it's essential to know that you do not need to purchase hosting from a third-party provider. Webflow offers hosting services, which they term as a "Website Plan." This name choice reflects that their offering includes much more than traditional hosting—it encompasses features like CMS, form submissions, site search, etc. As you opt for higher-priced plans, you gain access to an increasing number of features.

Regarding the possibility of using a free site plan, it's feasible only in specific, limited scenarios. The free plan does not support connecting a custom domain and restricts you to 2 pages and 50 CMS items (which are essentially template pages for recurring content such as blogs and case studies). It also limits you to 50 form submissions over the entire lifetime of the website, among other restrictions. This plan is suitable for very basic websites without any need for additional functionalities.

A good example of how we at Rapid Fire Web Studio leverage the free website plan is through a case study in which we demonstrate the structuring of an ideal landing page. We opted not to link directly to any of our clients' actual landing pages. Instead, we combined our expertise to create a comprehensive landing page that showcases our skills. Our goal was for it to be accessible online, allowing people to browse it in real time. Naturally, we wanted to avoid the costs associated with acquiring a custom domain and a paid website plan. Thanks to Webflow's free plan, we were able to have the page up and running, effectively serving its intended purpose.

In most cases, we recommend opting for the CMS site plan, which is $23/month when billed annually (as of February 2024). This plan usually covers all requirements. The purchase can be delayed until closer to the launch date or when one of limitations is hit.

Webflow Site plan pricing — https://webflow.com/pricing

Webflow also offers workspace plans, which generally don't concern most website owners. Advanced workspace plans are tailored for those managing multiple websites and large teams. One point of confusion is that a paid workspace plan can override some restrictions of free site plans. For instance, if you have a website that exceeds the two-page limit but don't wish to purchase a site plan for it, this limitation can be bypassed with a paid workspace.

Webflow Workspace Plan Prices — https://webflow.com/pricing

To summarize, if you own one or just a few websites published on custom domains, your primary concern should be the website plans, with each site requiring its own plan. However, if you manage several websites in development (a common scenario for agencies or businesses with multiple products) and have a team involved in development and content editing, you might need to consider upgrading your workspace.

Remember, Webflow does not provide custom domains, although domains ending in .webflow.io are provided for free.

I hope this clarifies things for you. Please don't hesitate to reach out if you have any further questions.

Fixes

Why is the background video not playing on one of my devices?

If a background video is not playing on only one of your devices, it's possible that the issue lies in the settings of that device's browser. A common fix involves checking the reduced motion settings, as background videos may not play if these are enabled.

Here’s how to check and disable this setting:

On Windows:

Go to 'Settings'.
Navigate to 'Ease of Access'.
Select 'Display'.
Ensure that 'Show animations in Windows' is turned on.

On a Mac:

Click the Apple menu at the top left corner.
Select 'System Preferences'.
Click 'Accessibility'.
Choose 'Display' from the options on the left.
Make sure that the option for reducing motion is not selected.

Another reasons for background video not to play include:

Ad Blockers or Browser Extensions: Some ad blockers or browser extensions can block videos from playing, mistaking them for advertisements.
Auto-Play Restrictions: Modern browsers often have restrictions on auto-playing videos, especially if they have sound. These restrictions can prevent background videos from playing automatically. Webflow's background video element does not have a sound option, so this is almost never a problem.
When iOS devices have low power mode enabled background videos are disabled. This is an iOS feature to preserve battery life.

Once we asked Webflow support...

Ultimately here, it's very difficult to reliably enforce autoplay of all videos across all devices, because there are explicit, unique rules on certain devices which interfere with autoplay policies on HTML videos. This is especially common on many mobile devices, in which autoplay is disabled when the device is in low power/battery saving mode. There are also a number of different power saving and accessibility policies on operating systems and within Browsers which prevent autoplay from occurring. Ultimately, provided that the autoplay attribute is included in the source code declared for the video element, then whether the video actually autoplays is down to all of these various localised factors on the device, which are outside of your control as a website developer. - Webflow Support

What is Reduced Motion Mode and How It Helps to Enhance Accessibility

Reduced motion mode is a feature available in many operating systems and applications designed to limit the amount and intensity of motion and animation in the user interface. This mode primarily serves two purposes:

Accessibility for Users with Motion Sensitivity: Some individuals experience discomfort or physical symptoms like dizziness, nausea, or headaches due to motion and animation effects on screens. This condition is known as vestibular disorder. Reduced motion settings help mitigate these effects by minimizing or eliminating animations and certain types of motion in the user interface, making the digital experience more comfortable for these users.
Reduced Distractions and Cognitive Load: Animations and motion effects can be distracting for some users, particularly those with attention-related disorders such as ADHD. By reducing these effects, the user interface becomes less distracting and easier to navigate, helping users focus better on the task at hand.

Reduced motion mode often modifies or removes:

Parallax scrolling effects
Zooming, fading, or sliding transitions
Animated loading indicators
Full-screen animations and video backgrounds
Other motion-based interface elements

Enabling reduced motion mode varies depending on the operating system or application. In general, it can be found in the accessibility settings of the device or software. This mode illustrates the importance of designing digital products with accessibility in mind, ensuring that they can be comfortably used by people with a wide range of needs and preferences.

What are workarounds?

One popular workaround is to replace Webflow's native background video element with an HTML video element. To do this, you'll need to store your video on Dropbox, another third-party cloud service, or your own server. It's recommended to use both the autoplay and muted attributes in your video tag. While the reason for using the autoplay attribute is obvious, let me explain why the muted attribute is also important.

Using the muted attribute helps ensure that videos will autoplay because many browsers restrict videos with sound from autoplaying to prevent intrusive and disruptive user experiences. When a video is muted, it reduces the potential for annoyance, making browsers more likely to allow it to autoplay.

You can also add JavaScript code that ensures that a video automatically plays when the webpage loads, and also makes sure the video continues playing even if the user interacts with the page. When the HTML document is fully loaded, the script selects the video element by the ID and starts playing it. Additionally, it adds event listeners to the body of the document for both click and touchstart events. If the video pauses, clicking or touching the screen will play the video again. This is useful for scenarios where user interaction is required to initiate media playback, ensuring a seamless viewing experience.

Note: code can improve video autoplay functionality, it may not be foolproof due to external browser settings.

The Final Word from Webflow Support (And I Agree)

However, it is important to consider that utilising these kinds of workarounds may interfere with accessibility settings that visitors have set, and result in an inaccessible experience for visitors using your site. For this reason, it's generally not recommended to use these kinds of solutions, nor any other code that disregards browser/device specific settings that enforce autoplay of video in this way. - Webflow Support

Fixes

How Can I Activate Google Maps on My Website?

Webflow applicable theory

How can I add a table to a blog post or other CMS item in Webflow?

Webflow applicable theory

What should I know about redirects when considering a site move?

Website improvements

I would like to add a bar featuring the logos of my partners/clients. I want to ensure that all the logos are in my brand color. Can you assist with this?

Website improvements

I need a cookie consent for my website. Could you incorporate one?

Certainly! I can integrate any third-party solutions you prefer, or I can add an incredibly powerful cookie consent plugin specifically designed for Webflow from Finsweet.

The advantage of the latter option is that it's free, doesn't require any monthly or yearly payments, and is GDPR compliant.

The banner users see is fully customizable, allowing us to keep it simple or have some fun with it.

Options

There are a couple of options to choose from. The first one is an informational cookie message (not GDPR compliant) or what's called 'implied disclosure.' This type of cookie compliance informs users that cookies will be used on the site.

Another option is 'Opt-out of cookies,' a type of cookie compliance that loads cookies by default on the user's first visit to the site. The user then has the option to either continue browsing the site with cookies or deny them. If the user chooses to continue browsing with cookies, nothing happens, and they can proceed to use the site as usual. If the user opts to deny cookies, we remove the cookies from their browser, allowing them to continue browsing the site while disabling all scripts that issue non-essential cookies.

The third option is 'Opt-in to cookies,' which is a higher level of cookie compliance. It requires the user to specifically accept the use of cookies on the site before any cookies are issued. No cookies are given until the user clicks "Accept" or a similar confirmation button. If the user accepts cookies, we activate all scripts that use cookies, and they can continue using the site with cookies. It's important to note that scripts using cookies are not loaded on the page until the user explicitly accepts the cookie message. If the user chooses to "Deny" cookies, we allow them to continue browsing the site while disabling all scripts that issue non-essential cookies. They won't receive any cookies and will maintain this status throughout their time on your website.

With options 2 and 3, there's the possibility to add a Preference Manager—a button that enables users to open the Preferences component and change their cookie consent preferences.

Preference Manager for Cookie Consent example — Preference manager for cookie consent

What is GDPR Compliance?

‍GDPR compliance refers to adherence to the General Data Protection Regulation (GDPR), a comprehensive data protection law enacted by the European Union (EU) in May 2018. GDPR aims to enhance individuals' control over their personal data and unify data protection regulations across the EU member states. Here are the key elements of GDPR compliance:

1. Personal Data Protection

Definition: Personal data includes any information that can identify an individual, such as names, email addresses, phone numbers, and more.
Consent: Organizations must obtain explicit consent from individuals before collecting or processing their personal data.

2. Transparency and Information Rights

Right to be Informed: Individuals must be informed about how their data is collected, used, and shared.
Access Rights: Individuals have the right to access their personal data held by organizations.

3. Data Minimization

Organizations should only collect data that is necessary for their specific purposes and not retain data longer than needed.

4. Data Security

Organizations must implement appropriate technical and organizational measures to protect personal data from breaches, loss, or unauthorized access.

5. Data Breach Notification

In the event of a data breach, organizations are required to notify the relevant authorities and affected individuals within 72 hours if the breach poses a risk to individuals’ rights and freedoms.

6. Data Protection Officer (DPO)

Certain organizations are required to appoint a Data Protection Officer to oversee GDPR compliance and act as a point of contact for individuals and authorities.

7. International Data Transfers

Organizations must ensure that any transfer of personal data outside the EU complies with GDPR requirements, typically ensuring adequate levels of protection in the receiving country.

8. Penalties for Non-Compliance

Organizations that fail to comply with GDPR can face significant fines, up to €20 million or 4% of their global annual turnover, whichever is higher.

Webflow applicable theory

What are your recommendations on creating SEO-optimized titles and meta descriptions?

Website improvements

I want to add a blog to my corporate website. What should I consider?

When it comes to adding a blog to your website, you've got two options: the "kinda-sorta method" or the comprehensive approach. If your aim is to get people subscribing to your blog updates, sharing your posts in the media, and actively clicking on the links you incorporate, then the comprehensive path is the way forward. Here are the key steps to follow.

Keyword Research: Conduct thorough keyword research to identify relevant topics and phrases that your target audience is actively searching for. Find keywords with high search volume and low competition, and strategically incorporate them into your articles.
Content Creation: Craft high-quality, informative, and engaging content that directly addresses the needs of your audience. While AI-generated content can be utilized, it's essential to ensure that it maintains a human touch, preferably curated by experts.
On-Page SEO Optimization: Implement on-page SEO strategies to enhance the visibility of your blog posts in search engine results.
Internal and External Linking: Include internal links to other pertinent blog posts on your site. Integrate external links to reputable sources to bolster the credibility of your content. While internal linking may seem straightforward, it can be challenging without maintaining a detailed blog post tree to identify suitable interconnections.
Visual Assets Creation and Optimization: A compelling blog should always incorporate visuals. Aim for a variety beyond stock photos or AI-generated illustrations, including infographics, charts, graphs, and maps. Optimization should encompass image compression and the addition of descriptive alt texts.
Social Sharing: Implement share buttons to facilitate the easy sharing of your blog posts by readers.
Social Media Integration: If your company has a social media presence, it's highly beneficial to share your blog posts on those platforms. If not, it is advisable to create accounts and commit to regular sharing to enhance visibility.
Schema Markup Incorporation: Integrate schema markup to provide search engines with additional context and improve the presentation of your content in search results.

If you're looking for a hassle-free solution, Rapid Fire can assist you every step of the way, providing a turn-key service to establish a robust and engaging blog for your business. Alternatively, if you already have a blog and are seeking improvements, I can help implement changes to ensure its vitality and continued success. Feel free to reach out for a quote.

Continue reading: Straightforward Strategies for Crafting Impactful Blog Content and Building Authority

Website improvements