Workflow & Automation

In the recent Webflow webinar Architecting for AI: Strategies to drive AEO, conversion, and impact, industry experts Steven Male (Head of Growth Marketing, AirOps), Sarah Mendham (Technical Lead, Beyond), and Dan Locke (Head of Digital, IMB Bank) shared practical strategies for adapting to this new reality. Their insights reveal how businesses can balance AI automation with human expertise to create content that performs well in both traditional search and emerging answer engines.

The stakes are high: research from Semrush shows that visitors from large language models (LLMs) are worth 4.4 times more on average than traditional organic search traffic. This dramatic shift in user behavior demands new approaches to content creation, structure, and optimization.

Optimize for answer engines

AI-powered search prioritizes up-to-date, deeply valuable, well-structured content.

Steven Male, Head of Growth Marketing at AirOps, believes that while the tactics for SEO and answer engine optimization (AEO) will eventually merge, the quickly growing traffic from LLMs represents a huge new opportunity for brands. He recommends grounding AEO efforts in five pillars — freshness, structure, authority, snippet extractability, and brand alignment — to deliver value to both users and LLMs.

Data in a recent AEO report by AirOps shows that sites with content updated every 90 days receive 4.8 times more citations than those that update less frequently, while pages with visible last-updated schema get 1.8 times more citations than those without.

To optimize for answer engines, regularly update pages, include visible timestamps and schema recency signals, and ensure concise formatting for snippet extractability. Also:

• Schedule quarterly content audits to refresh existing pages.
• Add visible “last updated” timestamps to all content pages.
• Implement schema markup for articles, FAQs, and dates.
• Structure content with clear H-tags and concise paragraphs.
• Create easily extractable snippets using lists and Q&A formats.
• Focus on brand alignment and author personas with proper schema.

The shift from keyword-based searches to conversational queries — averaging 23 words on LLMs versus 4 words on Google — means your content structure and unique insights matter more than ever. Pages need to answer specific, contextual questions while maintaining the clarity and organization that makes information easy for both humans and bots to extract.

Automate accessibility improvements

AI tools can also be used to ensure that the websites you’re building are accessible. 

Sarah Mendham, Technical Lead at Beyond, highlighted how AI tools excel at accessibility tasks that have always been important, but are often neglected due to resource constraints. 

“A lot of the things that are important for AEO have always been important for creating an accessible website, like the semantic structure of the page,” she explained. 

Sarah’s team uses AI to retrofit legacy pages where the structure of the site may be off, or where heading levels are based on styling rather than semantic structure. AI-generated alt text and automated bulk uploads can transform legacy content into structured pages. This saves manual effort while maintaining quality.

Key accessibility automation opportunities include:

• Batch-processing images to add descriptive alt text
• Restructuring pages to follow proper heading hierarchies
• Converting styling-based layouts to semantic HTML
• Validating content structure before client handoffs
• Testing templates with bulk AI-generated content
• Ensuring consistent accessibility standards across large sites

Sarah also emphasized using AI for bulk content uploads during testing phases. This approach helps teams validate that templates work correctly across all content scenarios before going live, which prevents the accessibility issues that often arise when clients add their own content later.

Accelerate migrations and accessibility improvements with MCP

Sarah also breaks down how Model Context Protocol (MCP) servers enable AI applications to connect with website services, and can be used to accelerate workflows and migrations. Pre-built options, like Webflow’s MCP, offer immediate value for content-heavy workflows.

“Webflow’s MCP server lets developers securely pull site structure and content into local AI environments (IDEs or tools like Claude Desktop),” Sarah explains.

With your site’s content and structural data readily accessible from the MCP server, you can utilize AI to support in:

• Content migration: Transform unstructured data into organized collections.
• Accessibility updates: Generate alt text for images at scale.
• SEO optimization: Restructure content for better search visibility.
• Quality assurance: Identify broken links or missing metadata across pages.

The MCP setup process is straightforward:

1. Authenticate your connection. Add an API key to your local mcp.json file to allow connections to your website.
2. Pull your site structure. Download your current content organization.
3. Apply AI transformations. Let AI analyze and restructure your content.
4. Review and deploy. Check AI suggestions before pushing changes live.

“MCP is how AI tools communicate with services, whether that’s querying an internal database or using APIs,” Sarah explained. 

This means you can connect multiple services — your CMS, analytics platform, and customer database — through a single MCP implementation.

For teams managing legacy websites, pre-built MCP servers offer a path to modernization without complete rebuilds. You can gradually improve content structure, enhance accessibility, and optimize for AI-driven search while maintaining your existing design and functionality.

Build strategic AI frameworks

Develop a framework that maps AI use cases — such as call-transcript analysis or social listening — to business objectives. This clarifies governance requirements and ensures focused investment.

Dan Locke, Head of Digital at IMB Bank, discusses how regulated industries can successfully adopt AI by linking every initiative to strategic outcomes. His team partnered with a local university to conduct multi-year research, combining academic rigor with practical application. 

“We built a framework that […] said, there are significant benefits if we can unlock […] what people are saying through calls, through chats, through searches, through customer feedback,” he shared.

Essential framework components:

• Map AI use cases directly to business strategy.
• Assess data sensitivity for each application.
• Start with low-risk applications like content creation.
• Build stakeholder confidence through education.

Dan’s team discovered that AI-powered listening, including call and chat transcript analysis, could surface insights within hours that previously took weeks of research through manual sampling. By establishing clear governance early, they were able to move quickly on low-risk initiatives while maintaining compliance and a safe path to including sensitive customer data applications.

Transform your workflows with Webflow

The convergence of AI-driven content creation, AEO, and accessibility automation represents a fundamental shift in how we build for the web. Success requires balancing AI efficiency with human creativity, maintaining content freshness while ensuring accessibility, and building governance frameworks that enable, rather than restrict, innovation.

These strategies work best when implemented on a platform designed for rapid iteration and optimization. Webflow’s visual development platform empowers teams to quickly update content structures, implement schema markup, and maintain the accessibility standards that both users and AI systems demand.

As search behavior continues to evolve and AI becomes more integrated into content workflows, the businesses that thrive will be those that adapt their strategies now. The insights shared by Steven, Sarah, and Dan provide a roadmap for that transformation.

Watch the full webinar to discover more practical tips for optimizing your content workflows and preparing for the future of search.

Webflow’s Continuous Integration (CI) system is critical for our monorepo’s development process. As part of that process, we execute an extensive suite of unit and browser-based tests by dynamically sharding the suite across Buildkite jobs and horizontally scaling as needed to meet compute demand. Running tens of thousands of builds a month with Engineering continuing to grow at Webflow has meant that our pre-existing cost savings measures have been outgrown. For example, we utilize the Nx build system to optimize test execution in our monorepo, but our complex dependency graph limits its effectiveness. Additionally, our smoke testing suite is in its infancy, so we still run all of our 88000 (and counting) tests for every pull request test branch in our merge queue, which merges thousands of PRs a month.

As a result, the Delivery Loop team’s CI costs are substantial, ranking third in overall spend within engineering. This high cost is primarily driven by the volume of EC2 instances required to execute our test suite while keeping the feedback loop short for engineers. A full monorepo Buildkite pipeline execution (a.k.a. build), which includes building our code for testing and then running the tests, can take over 30 machine-hours. We utilize over 9000 vCPUs and 36000 GiB of memory at peak.

How can we significantly reduce our CI costs without sacrificing system reliability or runtime, and without introducing any manual work for engineers? We undertook a targeted optimization effort, focusing on key areas like EC2 instances, AWS Config settings, and EBS volume sizes. According to Cost Explorer, these areas were our account’s top three sources of spend. Our efforts achieved a 33% reduction in amortized monthly CI costs while maintaining performance and reliability.

Leveraging Spot Instances

We significantly reduced our CI costs by transitioning most of our workloads to EC2 spot instances. While we had an active EC2 Instance Savings Plan, it locked us into a specific instance family which discouraged experimentation with other kinds of instances. Furthermore, the savings plan’s coverage was not sufficient for typical weekday compute needs and wasteful on the weekend when there was little compute needed. Spot instances offer flexibility and substantial cost savings, up to 60% compared to on-demand instances, which directly addresses our team’s number one cost driver: EC2 spend. The majority of our compute workload consists of testing jobs, so we gradually moved them over while leaving critical jobs, such as our target determinator job, alone. This move required addressing the inherent risk of spot instances being interrupted — we observed a 13% spot interruption rate for the month of April. We handled the risk in two key ways: building resilience into the system and carefully managing the rollout.

Designing for interruptions

To ensure our CI pipeline remained stable despite potential spot instance interruptions, we implemented robust retry mechanisms and test checkpointing. Our approach here mirrors successful strategies used by other companies.

• Use Buildkite’s automatic job retries. This feature allows us to specify that jobs interrupted by a spot instance being reclaimed should automatically restart, preventing manual intervention by engineers at Webflow. Since interruptions can occur at any point in time and a job could unluckily be interrupted multiple times, we specified a limit of 5 retries.
• Add test checkpointing. This more complex solution allows us to save progress on test runs. If a spot instance is interrupted, we can resume testing from the last saved point rather than restarting the entire file. We leveraged a Redis instance in our CI cluster’s VPC as a fast, temporary datastore for this checkpointing information. This choice was driven by the large volume of tests, high daily build count, and the temporary nature of the data. One challenge we faced here was having to implement checkpointing four different times for the four test runners we use within our monorepo.

A gradual, monitored rollout

Finally, to avoid disruptions to our engineers during this transition, we carefully managed the rollout of spot instances.

• We selected the price-capacity-optimized allocation strategy for Spot instances. This strategy results in fewer spot interruptions than a price-optimized strategy at an increased cost. While test checkpointing reduces the time cost of a spot interruption, there is still fixed overhead from our agents needing to clone branches, fetch missing Docker images or node_modules directories from our cache, and start up services. Initially, we did not specify enough instance types for the strategy, so we ran into capacity constraints because EC2 could not provide enough spot instances. We saw CI performance regressions until we manually fell back to on-demand instances. To resolve the problem by giving the allocation strategy more options to work with, we used the Instance Advisor to add similar instance types with the same vCPU count and a low interruption rate. In some cases that included network-optimized, disk-optimized, or memory-optimized instance types.

• We ran initial experiments in a staging version of our CI environment. We started with interrupting individual instances across multiple job types, then moved on to running aggressive interruption experiments using AWS Fault Injection Service (FIS). These tests allowed us to identify and address issues with our automatic retry configuration and dynamic pipeline generation code without affecting production builds.
• For changes requiring production-level load testing, we implemented a lightweight feature flagging system. This system enabled us to control the use of spot instances without requiring code changes to be merged into PR branches. Using FIS did not accurately represent the real-world spot interruption rates we would see by allowing autoscaling for our spot instance queues up to their maximum instance counts. If we saw an unhealthy amount of interruptions, we could retreat to our on-demand queues which were still in place.
• We then followed a gradual rollout strategy, starting with draft pull requests, then expanding to all pull requests, and finally enabling them for the merge queue. This phased approach minimized the risk of disruptions and gave us time to monitor the system via CloudWatch and Buildkite advanced queue metrics. We adjusted the system and built up teamwide knowledge along the way:
  1. We wanted to cap the amount of increased spending resulting from doubling the amount of queues and ASGs. Across each phase of the rollout, we gradually adjusted max instance counts by decreasing the max for our on-demand auto-scaling groups (ASGs) and increasing the max for our spot instance ASGs. In other words, we were temporarily overprovisioning the system, so we reduced where the overprovisioning was as compute needs shifted to spot instance queues.
  2. Prior to and during the spot instance rollout to draft PRs, we created a new dashboard, added automated alarms for spot interruption rates and long Buildkite job queue times, and wrote on-call runbooks to manage the system. We needed whoever was on-call to be able to handle spot capacity constraints, which was addressable by either adjusting the percentage distribution of the ASG between spot and on-demand or adding base on-demand capacity. We typically chose the latter option and found it to work well in practice for our situation. We eventually stopped seeing capacity constraints by adding more instance types to the mix as described above.
  3. After rolling out to all PRs and due to the spot interruption rates we observed, we made the decision to implement test checkpointing starting at the file-level with Buildkite metadata as the checkpointing data store. We deemed the metrics acceptable enough to not roll back to draft PRs only. Following that implementation, we saw improvements in our metrics, enabling the smooth rollout of spot instances to the merge queue. We then followed up with suite-level or test-level checkpointing depending on the runner and moved to Redis to store test results to handle the increase in volume of data.

This methodical approach to adopting spot instances and handling spot interruptions allowed us to capture significant cost savings without compromising the stability and reliability of our critical CI pipeline.

Exempting AWS Config resource types

To further reduce costs, we optimized our AWS Config settings, which were generating unnecessary overhead due to our high volume of short-lived EC2 instances. AWS Config tracks changes to AWS resources, which is crucial for security and compliance. However, for our CI pipeline, we create thousands of temporary EC2 instances each day, leading to a massive amount of tracking data and associated costs. With the increase in instance count due to our rollout of spot instances, we also saw increases in Config costs. We needed a way to filter what was being recorded, without creating a security hole. Thankfully, these adjustments were relatively straightforward.

We addressed this issue by selectively exempting certain EC2 resource types from AWS Config recording.

Certain resource types such as EC2 volumes were not critical for our security monitoring, so we created fine-grained exceptions to exclude them. We added exceptions, checked the Cost Explorer after a day, and made additional tweaks to the settings until we saw significant cost reductions here. To counteract some cost-associated compliance rules not being able to function without these data being recorded, we’ve chosen to periodically check the Cost Optimization Hub.

As a result, we eliminated unnecessary costs without compromising our overall security posture.

Shrinking our EBS volumes

We significantly reduced our CI costs by right-sizing our EBS volumes, which were previously over-provisioned. This was a surprisingly large area of potential savings, as many of our EC2 instances had unnecessarily large attached volumes. By analyzing our usage patterns and metrics via post-job logging, we identified opportunities to reduce volume sizes without affecting performance.

For our EC2 instances with local storage, we optimized the volume size to match the size of our base AMI, plus a small buffer.

• We played it safe here and chose the minimum EBS volume size and then added some extra space “just in case.”
• We also ran into inode exhaustion issues with the default ext4 filesystem due to the large number of small files that is typical of `node_modules` directories. To resolve this, we switched to the XFS filesystem for our SSDs, as it is better at handling a high number of inodes and generally has better performance for our workloads.

For our other EC2 instances, we conducted a detailed analysis and discovered that the attached disks were significantly over-provisioned.

• Metrics showed that many volumes could be reduced by roughly half. We took a cautious approach and cut back on all volumes, while making sure to monitor usage afterwards.
• We also optimized our extensive `node_modules` caching system, improving its handling of disk exhaustion. This optimization involved refining our cleanup policies to ensure we efficiently managed space by iteratively cleaning out old cache entries and removing old Docker volumes whose cleanup was previously not needed.

By addressing these issues, we significantly reduced EBS volume costs while maintaining our overall system performance.

What’s next?

Our CI cost optimization journey doesn’t stop here. We’ve identified several exciting areas for continued improvement and potential for even greater efficiency gains.

Graviton Adoption: We evaluated AWS Graviton instances and observed promising cost-performance benefits. However, we encountered some incompatibility issues with parts of our CI stack and had to wrap up the project before we were able to fix them all. We plan to revisit Graviton instances later in the year. We’re confident this will unlock further cost reductions without sacrificing performance.

S3 Lifecycle Management: We have S3 buckets storing data that have grown nonstop. Simply deleting all old data is not feasible due to how we handle site assets and snapshots since there’s no common prefix we can use to apply lifecycle rules. We should be able to enhance our asset and snapshot copying scripts to use S3 Object Lock in governance mode on these objects then turn on lifecycle rules, which would enable us to save tens of thousands of dollars per year.

By tackling these next steps, we aim to further refine our CI infrastructure, driving down costs and optimizing our resources.

Conclusion

As a direct result of these optimization efforts, we’ve achieved a significant 33% reduction in amortized monthly CI costs when comparing end-of-Q4 spend last year to end-of-Q1 spend this year. To break the reduction down a bit further, we saw a 42.7% reduction in EC2 instance spend, an 89.6% reduction in Config spend, and a 42.4% reduction in EC2 other spend. We’re already seeing these savings reflected in our budgets and expect that reduction to grow even further in Q2 as the full impact of our more recent changes takes hold.

But these numbers represent more than just cost savings. For Webflow’s engineers, this means a faster, more reliable CI pipeline as my team reinvests our savings into enhancements elsewhere. It means less time waiting for builds and tests to complete as we can horizontally scale further than before, and more time spent building features and solving complex problems. With these optimizations in place, we’ve laid a foundation for future growth and innovation without being hindered by excessive CI costs. The positive impact of these changes will ripple through our daily workflows, enabling us to deliver higher-quality software more efficiently. We’re excited about the momentum we’ve gained and the potential it unlocks for our team and our users.

According to Lucidpress, consistent brand presentation can increase revenue by up to 23%. However, in practice, ensuring brand consistency can be challenging. As organizations scale, they create multiple web properties: custom landing pages, blogs, and microsites. Each introduces new opportunities for inconsistency without proper guardrails. Over time, these inconsistencies create compounding costs that hurt brand trust, ultimately hurting customer conversion and retention and slowing down the pace of execution. 

Companies can overcome this challenge by investing in design systems. These systems help enforce a consistent brand experience across all touchpoints while improving cross-functional collaboration, resulting in faster time to market without compromising brand integrity. 

In this blog post, we’ll explore the hidden costs of brand inconsistencies and how investing in a design system can prevent them.

Design systems: Building the foundation for a scalable, consistent brand

A design system helps organizations conceptualize, create, and iterate on web experiences and collaborate cross-functionally. It’s the single source of truth about how the brand manifests in the digital experience. By creating a design system, brands can: 

• Create a consistent brand experience: Design systems automatically ensure that any design decision across a property is consistent with brand guidelines, whether typography or font size. 
• Increase execution speed: Instead of building new pages from scratch, teams can use reusable components, accelerating the time to market. Additionally, if teams update guidelines or need to make any changes, developers can easily change one part of the codebase to replicate it across others. ‍
• Improve cross-functional collaboration: With a shared source of truth, developers, marketers, and designers have a shared language and understanding of the brand guidelines, which can help them work more effectively together.

The compounding costs of foregoing investment in design systems

Despite the advantages, brands often delay investing in design systems because of the significant time investment. Teams must audit their existing digital experience for inconsistencies, align on the solution, implement the new design system across all their digital properties, document everything, and train team members on the new system. This is a significant undertaking, but without these systems, brands risk creating an inconsistent brand experience across their websites. Over time, these inconsistencies can impact business outcomes and team performance in several ways: 

1. Reduce conversion and retention

If your website doesn’t follow consistent brand guidelines (like conflicting UX behavior or mismatched fonts), it will confuse and frustrate your customers, resulting in lower conversions and poor customer retention. Here are a few different ways this can play out: 

• Increase abandoned visits: Customers might get confused about your brand and leave your site. For example, if a customer visits your product page but the style or brand treatment on the page doesn’t match the rest of your website, it can be a disorienting experience, leaving them confused and even prompting them to exit the page altogether. 
• Reduce conversion: Inconsistent user interfaces create friction in conversion funnels, reducing completion rates. For example, when Brad Frost created United Airlines’ design system, he streamlined three different date pickers across the homepage, booking page, and logged-in experience into one. This reduced friction by simplifying how users entered dates into the website, reducing cognitive overload, and improving the overall user experience. 
• Reduce brand recall: When customers encounter inconsistent brand experiences, they struggle to recognize your identity across touchpoints, which hurts brand recall and loyalty. Think of how confusing it would be if Starbucks used its familiar green logo in stores and on coffee cups but different colors and fonts in its app (like bright orange Comic Sans font). Customers would struggle to connect these as the same brand, hurting Starbucks’s brand recognition.  

2. Erode brand trust and credibility 

Brand inconsistencies can impact how customers perceive your company. At best, they make you look careless. At worst, they can make you look unprofessional, eroding trust and loyalty. Over time, this can impact your standing in the market and lead to market share loss. 

For example, if you’re a financial services company, and your navigation bar looks different in one part of the app versus another, users might feel as if the website is “broken,” which might raise other questions about your product’s capabilities. This doubt can make it more likely for users to switch to another service, or not recommend your product to their network. 

3. Create operational inefficiencies

Marketing teams can leverage design systems to ship on-brand campaign assets quickly. Without them, they have to redesign components from scratch, which slows down execution and delays time to market. Redesigning these components also introduces room for human error, resulting in brand inconsistencies that require manual effort to resolve. Over time, these inefficiencies shift teams from a proactive optimization mode to a reactive, firefighting mode. 

This inefficiency also extends to maintaining or updating existing assets. Without a design system, developers must manually update the same component across all marketing assets. A design system makes this process more efficient by automatically propagating updates across all instances of the components. Developers must change one part of the codebase to automatically update the component across all assets, simplifying the project’s scope and effort. Marketing teams can leverage this agility to experiment and optimize their brand’s identity. 

4. Introduce (and deepen) cross-functional collaboration friction 

Without a shared source of truth, cross-functional teams, such as design and development, might make assumptions about how your brand identity translates into actual digital components and experiences. This can introduce friction in the relationship or, if teams already operate in siloes, worsen misalignment. Ultimately, this weakens an organization’s agility to launch bold initiatives that require cross-functional collaboration (like rebrands, new product rollouts, etc.).

Reduce brand inconsistencies with Webflow Shared Libraries

A website platform can make it easy to build and deploy a design system and maintain brand consistency while scaling. Webflow takes this further by enabling true reusability, consistency, and change management through multi-site design systems. 

Webflow Shared Libraries enable brands to easily share, discover, and experiment with components and style guidelines across all their web properties. Whether you’re making minor tweaks or executing a major rebrand, Shared Libraries provide governance and scalable change management flows that empower marketers to build on-brand experiences. Here’s how: 

• Centralize: Share variables (i.e., for color, typography, spacing, etc.), components, and assets across the organization. 
• Safeguard: Leverage roles and permissions to control who can share, install, and manage Shared Libraries.  
• Review: Each designer can review and accept updates to Shared Libraries when ready, rather than rushing to implement changes all at once, ensuring a smooth and stable deployment.‍
• Evolve: As your brand evolves, update your Shared Library just once. After the updates are accepted, Webflow cascades them across all sites — no extra effort required.

• ‍Optimize: Brands can use Webflow Optimize to run experiments on components across all their sites, making it easy to test and optimize a brand’s visual identity. For example, you can use Webflow to test the effectiveness of a particular CTA button sitewide so that you can make data-driven updates to your design system.

Turn brand consistency into your competitive advantage 

Brand inconsistencies can feel like death by a thousand paper cuts — each successive one chips away at your customers’ trust and erodes brand loyalty. But it doesn’t have to be this way. 

By investing in a platform like Webflow, your design system can live in the same place where your website is built. This eliminates the time-consuming back-and-forth handoffs between designers and developers (that become increasingly complex as your digital presence scales) and reduces the risk of brand inconsistencies across your design system. 

Further, with a design system that curtails this handoff process, the process of accessing, managing, and updating components is simpler and centralized. Best of all, this streamlined approach speeds up development cycles, resulting in faster time to market and greater brand consistency at scale. 

Ready to take the leap? Learn more about Shared Libraries and get started with Webflow today to design consistent, on-brand web experiences.

One reason for the World Wide Web (the web)’s prolonged success is the standards set during its inception. When Tim Berners-Lee started hosting public pages on private servers in 1989, he made the earliest version of the web standards we rely on today. Without these established standards, the internet experience would vary widely across devices, locations, and internet connections.

Let’s explore some of the history behind web standards and learn how to adhere to them when creating for the web.

History of web standards

After his initial creation of the WWW, its use continued to grow. In 1994, Tim founded the World Wide Web Consortium (W3C). The W3C is an international committee that includes businesses, nonprofits, universities, governmental entities, and individuals with full-time staff who develop internal standards and improve web-based technologies.

The International Organization for Standardization (ISO) also contributed to the first web standards. It formalizes solutions to global challenges, such as environmental, health, safety, and energy management standards. It also identifies international standards across industries, including some aspects of the web.

Soon after the W3C and ISO came the European Computer Manufacturers Association (ECMA) — a nonprofit organization that sets standards for information and communication systems, such as programming languages and data exchange between systems, fostering web page interoperability and more.

Together, these organizations formalize standards for all the web’s content and use.

Before W3C and accompanying bodies set these standards, there weren’t rules for content creation or site structure. Now, developers build websites to meet the same standards so they’re compatible across browsers, censorship-free, and accessible to as many people as possible.

What are web standards?

Web standards are the specifications that define the WWW, including best practices for web development and design.

Web standards were created to formalize all pages across the web and establish ethical guidelines that don’t exclude people. The first three web standards might sound familiar:

• HyperText Markup Language (HTML)
• Uniform Resource Identifier (URI, aka URL)
• HyperText Transfer Protocol (HTTP)

From its inception, the W3C agreed that all web-related technologies would be free to use. Once governing organizations set standards and Tim Berners-Lee worked out how to link between servers, web browsers popped up by the dozens, servers by the thousands, and web pages by the millions.

Today’s web standards are more varied than the first three, but they’re all based on five early ideals:

• Decentralization: Anyone can post anything online without explicit permission from a governing body.
• Nondiscrimination (net neutrality): The same level of communication should exist across platforms, no matter how good or bad the internet service is.
• Bottom-up design: Developers build code publicly, encouraging collaboration and experimentation.
• Universality: All computers should speak the same language, no matter where they’re located or who’s controlling them.
• Consensus: Everyone involved in the technical aspects of the web must agree to use web standards.

Net neutrality principles emphasize data equality so that internet traffic is treated fairly, a core idea behind nondiscrimination in web standards.

5 of today’s most common web standards

Thanks to web-focused governing bodies, several standards are common across the web. The most common ones are terms you might be familiar with, regardless of your web development experience:

1. HTML

HTML is the web’s publishing language — developers code every page in it. There have been several iterations: 2.0 enabled cross-browser functionality, 3.0 and 3.2 extended the original language, 4.0 added accessibility options, style sheets, and an improved framework. The most current version, 5.0, launched in 2014 and allows for faster, more complex sites and web applications.

2. XML

Extensible Markup Language (XML) is a web language that allows for more personal definitions of web page elements rather than the fixed nature of HTML. Developers most commonly use XML for machine-to-machine rather than in-browser communication.

3. XHTML

Extensible Hypertext Markup Language (XHTML) mixes the style sheet, accessibility, and internationalized concepts from HTML 4.0 with the stricter syntax rules of XML. This language separates structure and presentation, enabling reprocessing of content to display on different browsers and devices.

4. CSS

Cascading Style Sheets (CSS) replaced early HTML style sheet elements. Some websites assign each site element (e.g., header, page body) a style sheet. Others use a master stylesheet covering every element. CSS defines the appearance of each component or section. It also takes up less file space than old HTML style sheets and is easier to organize. Nearly all websites use CSS to define their appearance.

5. WCAG 2.0

Web Content Accessibility Guidelines (WCAG) outline how site creators can make the web more accessible. These accessibility guidelines include adding alt text to images and captions to videos, for example. The WCAG 2.0 guidelines are also an ISO standard, meaning countries that maintain ISO technical standards should formally adopt these guidelines.

For each standard, consult official specification pages (e.g., the W3C’s HTML Living Standard or the ISO’s accessibility guidelines) to stay current.

‍

Why we need web standards

Web standards benefit both the people who use the web and those who build for it. Adhering to web standards and following WCAG guidelines improves search engine results and accessibility while supporting evolving technology and design flexibility.

Improved browser and search visibility

Web standards help search engines like Google or Bing index and access your site more easily.

Google, for example, uses site crawlers that comb your content to figure out what it ’’ s about, where numbered lists are, what words are on each page, etc. From this information, it decides which keywords your content is relevant to and where to place your website in its search engine results pages (SERPs).

Accessibility

HTML accessibility options and WCAG’s guidelines help as many people as possible effectively use the web. This is excellent for users, and increases your target audience.

Versatility

Technology evolves quickly and web standards help the web keep up and accommodate different devices or browsers

Design flexibility

CSS reduces web design size across devices and increases loading speed by sitting separately from the website code. This makes it easy to change fonts, colors, and other design elements without altering web page structure.

Compliance testing, such as running an HTML validator, helps confirm every site follows standards. This fosters consistent experiences for end users.

Best practices for standardized web design

Here are some tips on following web standards throughout your web design process:

Whether you’re refining CSS or adding accessible markup, aligning with recognized specifications helps create a strong, user-friendly framework.

• Implement accessibility from the start: Follow WCAG 2.1 (or the latest version) guidelines by incorporating alt text, proper heading structure, and keyboard navigation. Use accessibility tools like WAVE or Axe to audit your site regularly and ensure it works with screen readers.
• Prioritize mobile-first design: With over 60% of web traffic now coming from mobile devices, start your design process with smaller screens in mind. Use responsive frameworks, implement Core Web Vitals best practices, and aim for load times under 2 seconds to improve both user experience and SEO rankings.
• Embrace visual development: Take advantage of modern visual builders that generate clean, semantic code automatically. Use responsive layouts with Flexbox and Grid without writing CSS, implement interactions visually, and focus on creating consistent design systems. This approach maintains web standards compliance while dramatically speeding up your workflow and eliminating common coding errors.

Building with web standards in a visual platform

Complex coding isn’t as necessary as it used to be to make appealing and intuitive sites. While some organizations might still write HTML, Javascript, and CSS, increasingly more people are turning to no-code or low-code tools.

Webflow’s visual development platform enables people to build for the web while keeping an eye on adherence to web standards like WCAG guidelines. For more information, check out our free course on Accessibility on the web.

This split made sense 20 years ago, but now actively hurts business.

Brand marketing is traditionally focused on awareness, perception, and long-term value through storytelling and emotional connection. Performance marketing, on the other hand, emphasizes immediate, measurable outcomes: conversions, attribution, and direct ROI. 

These fundamental differences also extend to how these teams function in an organization. Brand and performance teams report to different leaders, operate different budgets, and are measured against opposing goals. But this siloed approach comes with hidden costs — missed opportunities, duplicated efforts, and campaigns that excel in one area while falling short in another. However, successful marketing requires brand impact and performance results working in harmony. 

The hidden costs of marketing silos

Customers don’t experience your organizational structure — they experience your brand. But organizational silos often lead to visible brand inconsistencies that erode trust, personalization opportunities, and conversion potential. For instance, a prospect might receive competing messages across channels because teams haven’t coordinated their targeting. 

Today’s customer journeys are non-linear and span multiple touchpoints across weeks or months. When brand and performance teams operate separately, they can’t optimize for these non-linear paths. Brand teams can’t track who saw their messaging, and performance teams drive traffic to experiences that don’t align with brand messaging. 

Constant handoffs between teams create compromises and delays. Competitors with unified teams launch campaigns faster and convert more customers, while you might experience missed revenue targets, longer sales cycles, and reduced customer lifetime value. 

The impact extends beyond metrics to team effectiveness and culture. When brand and performance operate separately, marketers struggle to connect their work to business outcomes and feel limited by narrow specializations rather than developing multiple skillsets.

Common barriers to unifying marketing teams

Even for teams that want to integrate performance and brand marketing teams, they need to overcome several barriers:

• Organizational structure: Brand and performance teams usually operate on separate budgets and are measured against separate success metrics. This results in teams that have different vocabularies, priorities, and working styles.
• Different measurement approaches: Performance marketing relies on direct attribution models that track specific actions to specific touchpoints, whereas brand measurements focus on long-term indicators like awareness studies, sentiment tracking, and brand health metrics. This mismatch makes it difficult to align teams on shared success metrics and can lead to conflict over budget allocation. ‍
• Technical infrastructure: The technical infrastructure often reinforces these silos. Brand teams use different analytics platforms than performance teams, creating data silos. Customer data lives in separate systems with incompatible definitions and reporting structures, making it difficult to align on a common KPI or problem. Even when teams want to share insights, the data doesn’t connect.

How to break down silos

With conviction and clear strategies, you can unify your marketing operations. Here are some tips to breaking down silos:

Create shared successes with objectives and metrics

The foundation of unified marketing starts with developing KPIs that capture brand and performance impact, rather than forcing teams to compete for credit. Instead of measuring brand awareness and conversion rates separately, track how brand interactions influence conversion quality and customer lifetime value. Everyone should be moving in the same direction with progress being tracked on all fronts. Performance campaigns should be evaluated for their brand impact, and brand campaigns should receive credit for downstream conversions.

Teams need shared goals and dashboards that show how brand and performance activities work together in the short and long term, making collaboration visible and valuable. Set up regular cross-departmental planning sessions and campaign post-mortems to celebrate successes together and reflect on what you can improve. 

Integrate cross-functional processes and restructure team dynamics

Organizational alignment means nothing without process changes that make collaboration the default rather than the exception. This requires workflows that require teams to integrate, rather than hoping they will choose to. A good place to start is integrated campaign planning that involves both teams when developing brand concepts and performance strategies. 

Rather than handing projects between teams, create blended teams or working groups with members from both brand and performance functions. These teams share responsibility for outcomes and develop working relationships beyond individual campaigns.

Align technology to enable rather than fragment teams

Technology infrastructure should support unified workflows. This doesn’t mean replacing all tools, but instead integrating existing data and systems. With unified customer data platforms, teams can see the complete customer journey and make better decisions about messaging, timing, and channel efforts. 

The most successful organizations adopt platforms that support brand storytelling and performance optimization. Instead of integrating separate tools, they choose solutions where collaborating is natural rather than forced.

How Webflow unifies teams and helps solve organizational challenges

With Webflow, teams can work in one platform for multiple marketing needs. Brand marketers can build visually stunning, narrative-rich experiences using the same system that performance marketers use for conversion-optimized landing pages. 

• Breaking down technical barriers between teams: The integrated CMS in Webflow supports both long-form brand content and performance-focused copy without requiring different workflows or approval processes. Brand updates automatically appear on performance pages, and performance optimizations maintain consistent branding. 
• Enabling rapid experimentation across brand and performance: Webflow’s visual development environment means brand marketers can build and modify experiences directly without waiting for developer resources, and performance marketers can create testing variations without going through lengthy approval processes. Real-time collaboration features enable both teams to work on the same projects simultaneously. 
• Streamlining workflow from concept to conversion: Webflow’s design-to-launch process eliminates traditional handoff friction by enabling direct implementation of design concepts. The integrated SEO and performance optimization tools ensure that brand experiences don’t sacrifice discoverability for aesthetics, while performance pages don’t sacrifice brand quality for conversion optimization. These considerations get built into the workflow rather than addressed as afterthoughts. 

Why marketing unity can’t wait

Organizations trapped in silos simply can’t compete effectively in this environment. While they coordinate handoffs and navigate internal friction, competitors with unified teams launch campaigns faster and prove marketing’s total business impact rather than defending separate metrics. The question is whether your organization will lead this transformation or spend years catching up to competitors who moved first.

Platforms like Webflow make it practical and scalable to unify brand and performance operations without sacrificing the specialized capabilities each function requires. 

Ready to break down your marketing silos? Get started with Webflow to unify your brand and performance marketing teams.

It’s no use planning out a lengthy resource blog for a website that doesn’t yet have a homepage. Every step of website design, from planning layouts and internal linking structures to selecting font pairings and optimizing for search engines, becomes more efficient when done in the proper order.

The process defined here streamlines how to design a website from scratch, so that you can spend less time strategizing and more time building.

How to design a website from scratch: 10 steps

Following this 10-step process, you’ll plan, develop, and publish a website efficiently, without much effort or running into roadblocks. Read on for a tried and tested website design process that can help you turn your website idea into a reality.

1. Determine the type of website you want

Every website is designed to meet certain user needs. You should determine early on which one you’re designing so that you can know what kind of user experience you’re planning to create. 

Below are some examples of common website types.

Transactional

Transactional websites like The Eco Homestead from Charlee Alexeev are online stores, or ecommerce sites, that market and sell products. They often use rich text and structured data as search engine optimization (SEO) techniques so that their product pages appear higher in search engine results.

Informational

Informative websites like The Curatist from Timea Szabo aim to teach website visitors something and act as a credible source of data that they’ll want to use again. Their web designs often feature blogs that excel at capturing keywords and topics that search engines look for when ranking content.

Interactive

Interactive web designs, like Weglot like Magic from Refokus, offer entertaining, memorable user experiences. They typically invite visitors to actively engage with their content through games, videos, and animations. Interactive sites focus less on selling anything and prioritize impressing their audience with visually appealing interactions.

2. Define your website’s scope and goals

Now that you’ve chosen a website type, it’s time to develop a clear idea of what you want your website to do. Ask yourself these questions to begin building a foundation:

Why should this website exist? 

Determine why you’re building this website for yourself, a client, or a team, paying special attention to how the target audience should engage. Review competitors’ sites, too and identify how you’ll differentiate yours from theirs. Define what will make your user experience different from theirs, and why that’s important.

What should this website achieve? 

Define the goal your website should drive visitors toward, such as making a one-time purchase, signing up for a newsletter, or subscribing to a product. To keep your design choices focused, your website should have one primary goal — although you can also have secondary goals in mind.

How will the website serve its purpose and goals?

Outline some basic strategies this website will use to engage its audience and encourage them toward the end goal. Typical methods include offering SEO content, showing testimonials, and leveraging creative layouts. How you execute these techniques will be unique to you, but you should be able to grasp the guiding principles for your design decisions.

3. Plan your site architecture and content

Get some paper and a pencil, or use a digital whiteboard tool like Figma, and sketch a basic skeleton for your website design. List every page your website should contain, and organize them into categories, just as you would in a card sorting test. This structure will become the navigation menu for your first draft.

With the basic skeleton sketched, take notes about the content that belongs on every page. For example, an “About us” page might include information about your brand’s history or mission statement. Planning these details now will help you later when designing the interconnected user experience (UX) that directs visitors through the website.

For complex sites, take this planning further with a flowchart tool like Lucidchart. Use lines and arrows to indicate which pages connect and highlight the intended user journey with color coding. This flowchart can help you add new pages or consolidate content later in the process. 

4. Pick your preferred website builder

Now that you clearly understand what you want your website to do and how it should look, find a tool that can aid you in achieving your vision. Here’s a list to help you select the best website builder for your needs.

Webflow 

Webflow is a comprehensive website platform with a visual-first canvas, a powerful native content management system (CMS), built-in SEO tools, and fast web hosting. You can use it to create any website from scratch, or customize one of hundreds of website templates available in the Templates marketplace. Try it for free, and when you’re ready to upgrade, there are several plans to choose from.

WordPress 

WordPress offers a core platform that you customize with plugins and add-ons. These extensions add to the overall cost of WordPress and require you to purchase the toolset you need to design your website piecemeal. While its drag-and-drop editor makes designing easier, it introduces limitations that make for basic layouts.

Wix & Squarespace 

Wix and Squarespace are both streamlined website-building platforms that don’t share WordPress’ reliance on plugins. Their secure web hosting is on par with Webflow’s. However, their lean design tools can limit creativity. They’re great for people with little web design experience who want to quickly build a simple but serviceable website.

Shopify

Shopify specializes in creating websites for selling products online. Their content management system, SEO tools, and templates are all built with ecommerce in mind. These features make them an excellent choice for online merchants, but designers using Webflow can also get the best of both worlds by integrating with the Shopify platform.

If you’re having trouble deciding between these website builders, try one. Pick a page or feature you know your website needs and try building it with each platform — it shouldn’t take long to determine which provides the best experience for you.

5. Create wireframes and draft site copy

Now that you’ve settled on a website builder, use it to plan out all the pages your website needs. Start wireframing the UX and add rough draft headlines, calls to action, and text that establish the basics. Try experimenting with making your layouts responsive for different screen sizes, which will increase the accessibility of your content. 

You don’t have to settle on anything just yet. If you’re having trouble getting your ideas off the ground, find a template or website design example that sparks your creativity. And if you’re adding an SEO blog to your website, take this time to draft a few articles. That way, you’ll have something to work with when planning your blog layout later. 

6. Develop a design system

Create a separate page where you’ll build out your design system — a collection of reusable components, principles, and guidelines that provide designers and engineers with a shared language. Include a reference for your color scheme, icons, and typography so that all elements are in your brand style. Then, use these to create all the reusable components your site needs. While you’re doing this, keep accessible design principles in mind to ensure that you can reach a broad audience.

Headings

Dedicate a space to create text boxes for headings. Organize them by size (H1, H2, H3) and configure them with the font pairings you want your website to use. A general rule of thumb is to reduce the font size by 20% for each step down. For example:

• H1: 20pt
• H2: 16pt 
• H3: 12pt

CTA buttons 

Create your call-to-action buttons, such as “Contact sales,” “Learn more,” and “Get started.” Organize them by priority and make multiple versions that align with your color palette. Primary buttons should use bold colors and thick outlines, while secondary ones can be more subtle, using pale colors without outlines, like ghost buttons.

Modals 

Create modal windows for pop-up windows, cookie consent banners, and login screens. Configure them to respond to changes in screen size with breakpoints to make navigation easier. If you want to expand your options, there are templates you can clone.

Logos

Create multiple versions of your logo for various uses, organizing them by size and color so they’re easy to drag and drop into navigation menus, headers, and footers where needed. It’s best to use Scalable Vector Graphics (SVGs) for logos, since they can be readjusted to different screen sizes without losing resolution.

Containers

Create empty containers for images and text blocks so you can quickly drag and drop them into new pages. Next, configure their padding and alignment so they seamlessly drop into pages without disrupting the layout.

7. Build your website

With all the building blocks created, you can now use them to construct your page layouts. Start with the homepage since it sets the tone for your web design. Review your answers to the questions you answered in the first step, and build a homepage that sets a strong foundation for the goals you set out to achieve.

With your homepage complete, consider the next steps you want website visitors to take. Then, build your web pages in sequential order along that journey. Do this for every use case you think visitors will come to your website with, reusing and adapting pages as needed. Eventually, you’ll have a web design that serves every user’s intent.

Review the site architecture you worked out in the second step to see if you missed any pages. If so, reconsider whether they’re necessary. You might not need them if they didn’t naturally fit into any use cases.

8. Conduct user testing and gather peer feedback

Sign up for a user testing service like UserTesting.com and reach out to peers to ask for feedback. Use established research methods like tree testing and A/B testing to extract actionable insights you can use to improve your designs. Do multiple rounds of research to discover every opportunity for optimization and ensure your site functions well.

9. Publish your website domain

Purchase your domain name and run through a pre-launch checklist. When you’re ready, hit the “Publish” button and watch for build errors as your website goes live. Troubleshoot any last-minute bugs and extensively check your published web design. If you can get through every page without detecting glaring issues, then congratulate yourself on a job well done!

After publishing your website, configure your version control system. Set up a separate staging environment to experiment with new optimizations and web design ideas. Most website builders do this automatically, but check that you know how this process works. If you ever need to roll a change back, it’ll help to know an easy way to revert.

10. Manage, scale, and optimize

After publishing your new website, it’s time to set it up for long-term success. Establish a cadence for checking all your pages regularly for bugs, errors, and opportunities for optimization. It’s also important to monitor your analytics and set specific goals for conversion rates and traffic. With this data, you’ll be able to look for new ways to improve its SEO and streamline the intended user experience.

Key components of great website design

As you review your site to find ways to fine-tune it, you’ll undoubtedly discover some minor improvements to make. Follow these best practices to avoid common site design mistakes and optimize your content:

Clean layouts

Web designers are full of brilliant ideas that help them create immersive, memorable user experiences, but sometimes they don’t know when to stop. Let the Studio Minimal template from Mateusz Jaromin serve as a reminder that simple website designs, executed well, can often outperform flashy ones. For every design element in your layout, consider whether it’s truly necessary to meet your goals.

Mobile responsiveness

Every page in your website design should respond to changes in screen sizes so visitors can intuitively navigate it from any device. There are several ways to do this, from flexboxes to Cascading Style Sheets (CSS) grids like this Smiley Grid from Peter Dimitrov. Webflow has built-in tools that optimize access automatically, making your unique web designs adaptable for any device.

Loading speeds

Page speeds can impact your rankings with search engines, which are key traffic sources. Use a speed testing tool to measure your page load times. Then, look for opportunities to compress images, streamline animations, and simplify layouts. Check that your hosting provider uses a Content Delivery Network (CDN) and enable any features that can help you achieve faster loading times. 

Intuitive navigation

Regularly reassess your navigation menu to find ways to make it more intuitive, like this one Nancy Peng made for Frontify. It’s compact when closed, not taking up too much screen space, and it blurs the background when open to make it easier to find the category you’re looking for.

Experiment with new categories or unique presentations that could better organize your pages or make them more inviting to visitors. In your mobile designs, use techniques like the hamburger menu to make menus more compact so they’re easier to navigate on handheld devices.

Engagement optimization

Check your analytics regularly to identify pages that aren’t getting much engagement. Look at bounce rates, view times, and clicks to determine whether some pages perform better. Then, try to identify any consistent themes and apply those lessons to the pages that aren’t getting the same engagement. For more granular data, use a heatmap tool like Hotjar or Webflow Analyze to determine where users get hung up in the user experience.

SEO

Search engine optimization can help you rank higher on search engine results pages. Take the time to review your website regularly to look for ways to improve technical aspects like loading speeds and editorial SEO aspects like keywords and topics. Use an SEO tool like Ahrefs or Semrush to run regular checks on your content and discover opportunities for optimization. 

Web design tools to try

Even after you’ve settled on a website builder to use, there are still several web design tools you might want to try. These tools can help you iterate on your designs and prototype new pages and features. Here are a few tools that make good additions to any web designer’s toolbox.

Webflow

Webflow is a website experience platform with a visual canvas and powerful CMS. It’s also a great place for you to test out new ideas. You can access its wealth of templates and pre-designed assets, adapt them for your needs, and then export the HTML to your preferred platform. Its visual canvas streamlines prototyping and experimentation so you can quickly try new things and take anything that works with you.

If you decide to migrate your website to Webflow permanently, you’ll find it offers several tools to help you, like a widely compatible content management system and web hosting that supports custom domain names. The tools you’ll need will depend on which website builder you’re coming from and your goals, but rest assured that any site can move to (and look great on) Webflow.

Figma

Figma offers a digital design space that’s very useful for experimenting with new templates, fonts, and interactions. Its browser-based design tools make it easier to share a link to a proposed design with other web designers to get their feedback. With its version control and automatic prototyping features, you can collaborate on and test designs quickly, and the Figma integration makes transferring finished designs to Webflow seamless.

Canva

Canva is very similar to Figma, but with a lower price tag and leaner design tools. It’s great for casually experimenting with layouts or interactions to see how they look in practice. It offers several templates and pre-made assets that can provide some inspiration, too. While it doesn’t have as much content as Figma, it does offer a capable design space where you can collaborate with other web designers and gather feedback.

Unsplash

Unsplash offers a library of visuals that you can drag and drop into any website builder. Your subscription gives you unlimited, royalty-free downloads and access to unique, members-only content. Given the cost of hiring a graphic designer or commissioning artwork, this tool can be a huge cost saver for web designers. It won’t help much with an ecommerce site that needs a dedicated photographer, but it can help with blog articles and service pages where stock images won’t look out of place.

Minifiy

Minify is a code-checking tool that can validate your HTML, CSS, and JavaScript. Minify can also find opportunities to optimize your code, which helps it load faster. Minify is a free, reliable HTML validator, but keep in mind that some website builders, like Webflow, validate your code automatically to save you the extra step.

WebAIM

Tools like WebAIM ensure that you have enough contrast in your color scheme. Before you select a color combination to use for text and backgrounds, run it through WebAIM to make sure it passes at least a “WCAG AA” test. If not, you can use the sliders to help you find a better combination.

PageSpeed Insights

PageSpeed Insights checks your website’s load times and runs several other SEO checks on your content. Enter your domain name and it’ll surface actionable insights about optimizing your website for visitors and search engines. It also offers some accessibility checks that can help you detect ways to improve your web design.

Design smarter, launch faster with Webflow

You now have all the tools you need to streamline the entire web design process, from concept to launch. It might seem daunting at first, but with a clear goal and the right resources, you’ll hit the “Publish” button in no time. 

If you want to take your website from idea to reality with a comprehensive, visual-first website builder, Webflow can help. With its secure web hosting and wealth of templates that streamline creating and managing your content, Webflow provides a great starting point for any new website.

Try Webflow for your next best website build, and check out Webflow University to access more design resources.

Shifting to a full-time web design business can be rewarding, especially if your passion lies with your freelance work. Starting your own web design business is exciting, but it’s important to think about all the factors that could affect this long-term commitment.

Are you sure of your future clients and their demands? How certain are you about their payment credibility? How will you move forward, pay your employees, bear infrastructure costs, and run the daily operations of your web design company?

How to start a web design business in 9 steps

Before you leave your current role and start your own web design business, you’ll need to consider these questions. Here’s a nine-step process to get you started.

Step 1: Plan and define your niche

Start by asking yourself these critical business questions to create a solid foundation for your web design company:

• Decide on your niche or main focus.
• Determine if you’ll start solo or hire staff or freelancers.
• Plan how many web designers you’ll recruit.
• Decide whether you’ll hire administrative staff or have designers and developers multitask initially.
• Determine the office location and how much space you’ll need.
• Set a budget for essential equipment like computers, furniture, and software.
• Outline an initial budget for advertising, marketing, and branding to attract clients.

You’ll need to dedicate a lot of time and resources to get your web design business up and running, so map out clear schedules, budgets, and plans. Be sure to check out the latest web design trends so you can get a feel for what your future clients might request.

If you have a mentor, reach out to them. Talking with someone who has experience starting their own business is a great way to gain valuable insights into the entrepreneurial journey.

Step 2: Determine your services and specialties

• Focus on ecommerce if that’s your specialty.
• Consider setting up learning portalsif you have expertise in that area.
• Decide if you’ll include regular blogging or only static page designs.
• Determine whether you’ll host clients’ websites.
• Offer SEO (search engine optimization) services if you have the skills.
• Provide ongoing website maintenance for recurring revenue.

You don’t have to be everything for everyone. Instead, focus on the skills and services you excel at.

Consider offering services that bring in automatic recurring revenue, such as website maintenance and hosting. These services aren’t as hands-on as creating a new website, but they pay off well. For instance, hardware manufacturers make recurring income by offering annual maintenance contracts. Most annual maintenance contracts are billed with no work done as the hardware components are good to run for years.

Step 3: Set up your portfolio

Once you know what aspects of web design you’d like to focus on, build your web design portfolio around them. Your website will be the face of your company, so make sure it shows off your skills and includes your services, prices, and contact information.

If you have happy customers from your freelance days, reach out to them and ask for testimonials that you can add to your site. Those recommendations are crucial for a new business. Also consider collecting short case studies that describe the client’s problem, your solution, and measurable outcomes. This approach shows prospective clients the tangible impact of your work.

Get in touch with your previous clients and ask their permission to showcase their projects on your website. If you are unable to share business names due to confidentiality, consider anonymizing the designs or requiring a password to view them.

Step 4: Establish your business operations

Next up is staffing. When you first launch your business, you might be working solo. But if and when you have the budget, you’ll want to reach out to your network and bring trusted designers and developers to your team. As you grow, you might consider adding administrative and marketing professionals to your team, too.

Stay aware of your schedule

Balancing numerous tasks can lead to burnout if you don’t plan properly. Set realistic working hours, prioritize tasks, and remember to step away from work to recharge.

You may also consider outsourcing tasks like taxes, so you can focus on what you love. And if you have employees, you’ll need to hire a person or service to handle things like benefits and time off for them.

Equipment

You and your team will need computers with large high-definition screens and additional monitors (minimum 21 inches) for design work. Verify your camera specifications as well — you’ll need good quality cameras and microphones to communicate with your clients. Consider getting dedicated business internet services so you’ll have fast, reliable connectivity.

Next, build your tech stack with tools for:

• Website mockups and prototypes
• Graphic design
• Web development
• Document management
• Use cloud-based collaboration tools (like Google Workspace or Figma) for design reviews, file sharing, and version control so your team can stay consistent and efficient.
• Project management

Workflow

Set up a system to track your ongoing projects. Try to automate most of your day-to-day tasks.

• Use autoresponders to reply to client inquiries and let them know you’re available. You can also use them during vacations or absences.
• Use a time-tracking system that automatically creates invoices based on recorded hours.
• Try apps such as Todoist and Asana to manage tasks, assign work, and track deadlines.

As you gain more clients, be ready to accommodate your company’s growth and provide resources and changes in infrastructure.

Step 5: Determine legal requirements

Once you’ve decided on a name for your business, it’s time to make it official.

Determine whether your company will be a private limited, LLC, corporation, etc. according to your country and/or state regulations. For example, if you live in India, you need to get a GST number to pay sales tax on goods delivered to your clients. Plus, you need to register your online domain name as well.

Ensure that your budget accounts for business insurance so you can protect both your physical assets and business.

Business taxes can be complicated, so it’s a good idea to contract a tax professional who can provide guidance and services. Work with them to set up accounting software such as FreshBooks or QuickBooks so you can easily track business expenses and export the necessary information when tax time rolls around.

Make sure you set up a business bank account for your company revenue and expenses. And don’t forget about accepting payments from your clients! Services such as PayPal or Stripe are great for processing digital payments.

Step 6: Establish deliverables and pricing

Establish a process for keeping your clients updated about deliverables. While your clients probably won’t want a daily update, you should determine specific milestones when you’ll check in with them. Working with your clients throughout the project keeps them engaged and gives them a chance to provide feedback earlier in the process.

Stick to schedules as diligently as possible and don’t forget to account for revisions. Your contract should define what types of revisions are included in the project price (if any) and outline costs for additional changes. If you need to make adjustments, work with the client on a new delivery date so they know when to expect the revised project.

If you’ve been using freelance sites like Upwork or Freelancer, you probably have a good idea of what deliverables to offer, but be careful about setting your prices. When you have your own business, there’s more overhead, so you’ll probably need to raise your rates.

There are online calculators and price charts to reference when you’re unsure about prices, such as a freelance rate calculator.

If your budget permits, you can compare your prices to your competitors’ with tools like Luminate Market Price, PROSPros, Zilliant, and Pricefy.

Step 7: Create work contracts and agreements

A vital part of your business is a work contract. Contracts clearly establish expectations and requirements for both parties — you and your client.

The contract should include details related to deliverables, timelines, and prices and account for what-if scenarios. Aim for contracts that are simple and to the point. You don’t want to intimidate clients with massive contracts full of unnecessary legal jargon.

Define the payment terms in the contract. Clearly state how and when you’ll invoice for work and include instructions on how and when your clients should make payments. Don’t forget to include stipulations for late payments.

Save yourself some time by working with a legal professional to create template contracts based on the different services and packages you offer. This way, you can simply fill in a few details for each new project. You can also use template services like LegalZoom or America’s SBDC.

Step 8: Market your services

Consider sharing case studies on LinkedIn or using paid ads to showcase your strengths. These strategies can help you reach potential customers beyond your existing freelance clients.

Share your website on your personal social media channels to start building brand awareness. You may even want to set up separate business accounts like a LinkedIn company page or Facebook business account.

If you’re providing expertise in a particular niche, mention that. That way, you stand out from the crowd. Do you create unique sites for specific industries like gaming, B2B, or software as a service companies? Do you work in a particular industry, or have you worked for government agencies? Showcase some work samples — highlighting your specialties will draw relevant clients to you from among the many looking for web designers.

Don’t ignore the importance of video marketing. Whether it’s a YouTube channel or Vimeo, make your presence known with videos.

Email marketing is a good way to promote your business, too. Services such as Mailchimp make it easy to maintain an email list of clients and share promotions, new services, and company updates with them. You could even use a newsletter to share tips or promote an affiliate program that encourages existing customers to spread the word about your business.

You might also want to use customer relationship management software, which works as an autoresponder and an email marketing tool and tracks overall business development, customers, and growth.

Step 9: Continue your education

Remain competitive by keeping an eye on web design trends and setting aside time for improving your web design skills. Sign up for web design courses or watch free lessons online through platforms like Webflow University.

Watching your competition is another way of staying ahead of them. Keep track of your competitors’ websites and growth, and it’ll inspire and motivate you to do better.

How to find web design clients

Networking is a powerful way to find potential clients. Attend local meetups, conferences, or online events to build meaningful relationships and showcase your expertise.

Online platforms such as Upwork, LinkedIn, or specialized job boards can also connect you with potential leads. Optimize your profiles and highlight case studies to develop credibility and attract your ideal clients.

Common pitfalls and how to avoid them

• Scope creep: Set clear boundaries in your contract and maintain open communication.
• Underpricing: Research market rates and factor in overhead so your work remains profitable.
• Overcomplicating design: Prioritize user experience and clarity to keep projects on track.
• Poor time management: Create realistic schedules and milestones to stay organized.

Start your web design business with the help of Webflow

Building a successful web design business requires careful planning, dedication, and the right tools. Webflow empowers aspiring design entrepreneurs with an intuitive platform that showcases your skills while streamlining your workflow. Create a stunning portfolio, deliver professional client projects, and scale your business all in one place.

Ready to transform your design passion into a thriving business? Sign up for Webflow today and take the first step toward building your design empire.

The font choices you make when building a website make all the difference in keeping your content readable on different screen sizes. You also want to pair your fonts well to establish a clear visual hierarchy in your layouts.

Instead of spending hours on Google Fonts, mixing and matching typography elements for your website, check out the following list to find the best fonts and font pairings without all the guesswork.

20 popular Google fonts

The most popular Google fonts are well-liked for good reason: They’re readable, scale well, and offer a touch of character to your text. The following are 20 of the best Google fonts for website design, because they’re all optimized for legibility and accessibility. 

1. Open Sans

Open Sans is an extremely versatile sans serif typeface. While not bold or particularly elegant, it’s highly readable and generously spaced. That means it’s a popular choice for blogs and educational websites because it makes long-form content easier to read. It’s a free, open-source typeface with several font options, from Light to Extra Bold. Pairing Open Sans fonts is easy — it can work anywhere.

2. Alegreya

Alegreya is a serif font with a modest elegance that adds a touch of class to your text. Its consistent stroke weight helps with legibility, but the spacing is a little tight. Some letters, like the “F” and “T” in the above image, hang over other letters, which saves space but leads to some letters running together. It’s best used for headings, where the larger font sizes ensure readability.

3. Roboto

Roboto is as legible and versatile as Open Sans, but with a little less spacing and a slightly bolder stroke weight. It’s good for long-form content and body text. As with Open Sans, it’s a somewhat basic choice for headings, where more interesting fonts would add character to your layouts.

4. Anek Latin

Anek Latin is a sans serif font that, despite its lack of embellishment, adds a touch of character to your text. It uses generous curvature, making it stand out more than Open Sans or Roboto. Yet it isn’t so unique that you couldn’t pair it with either as a heading font.

5. Montserrat

Montserrat is a sans serif font that scales well due to its wide letters and spacing. It will use up all the space in your text block, but it keeps content readable even on very small screen sizes. That makes it a strong choice for UI text in navigation menus or buttons, though designers should avoid using it in long-form content since it’ll make text blocks appear even longer.

6. Lato

Lato is a sans serif font that’s heavily bolded and evenly spaced. It’s excellent for dark-mode websites, where the brighter text needs thicker lines to contrast against the dark background. Its even spacing helps to keep it readable even at small sizes, so it’ll also work for body text. It’s a fine choice for headings, but you could select something similarly bolded, like Oswald or Arvo, to add more character.

7. Poppins

Poppins isn’t as whimsical as its name suggests, but it does offer a clean, readable typography that won’t strain readers’ eyes. Like Montserrat, it’s a poor choice for long-form content, where it’ll make a paragraph look like a wall of text, but it can work well for headings, especially if you pair it with a subtly serifed font like Alegreya to add a touch of character.

8. Oswald

Oswald is a unique font with tight, tall lettering and cramped spacing. Its bold stroke weight keeps it readable, though not quite legible enough for body text on small screen sizes. However, it’s a strong font for headings and UI elements in dark-mode websites, where the thick lines contrast well with the background.

9. Raleway

Raleway is a serif font with just a few modest embellishments. Its subtle character makes it a solid choice for headings, and thanks to its spacing, it also works for body text. If you have a more elegant font for headings, Raleway can enhance that appeal in your body text without making it unreadable on smaller screen sizes.

10. Mulish

Mulish is a plain sans serif font that isn’t as overused as Open Sans or Roboto. It’s a great choice for designers who need a readable, generously spaced font for long-form content, but who want to avoid the more standard options. It’s an uncommon choice for headings, though, where you’ll want to pick something that grabs your readers’ attention.

11. Rubik

Rubik is a bold sans serif font that works best in UI elements like navigation menus and buttons, where the thick stroke weights provide a good contrast. That also makes it very readable as body text in dark mode websites, and it pairs well with similar options, like Merriweather.

12. Playfair Display

Playfair Display is a serif font with an elegant, classic appeal. The entire Playfair font family pairs well together. For example, you can use Playfair Display for headings and regular Playfair for body text, even for long-form content. It’s reminiscent of printed typography, so it works well for blogs and websites with a particular theme, like a writer’s portfolio or a premier design studio homepage.

13. Cabin

Cabin is a bold sans serif font with tight spacing that makes for good legibility and versatility. It’s a little plain for headings, but it makes a great font for text blocks or long-form content, where the thick stroke weight reduces eye strain for long reading sessions. It pairs well with other bold fonts like Merriweather and Arvo, but don’t hesitate to contrast it with an elegant font like Alegreya to add more character.

14. Merriweather

Merriweather is a popular serif font thanks to its subtle elegance. Unlike Alegreya, it uses equal spacing so letters don’t hang over one another or run together, giving it better readability. The thick stroke weights and wide curves make it a great display font for titles and headings, especially when paired with a sans serif font like Cabin or Rubik.

15. Asap

Asap is a unique sans serif font that combines generous spacing with slim letters and a bold stroke weight. It pairs very well with Oswald because it shares some of the same traits, but is a little shorter. Together, they optimize readability on a dark-mode website, with Asap for body text and Oswald for headings.

16. Spectral

Spectral is a serif font with varying stroke weights and wide spacing. Its classic appeal pairs well with other elegant fonts, like Playfair Display. If you pair it with another serif font, use Spectral as your body text since the generous spacing improves readability. If you pair it with a sans serif font, use it for headings to help them stand out.

17. Arvo

Arvo is a popular font because of its versatility and excellent readability. It’s a serif font that resembles typewriter typography, complete with a bold stroke weight and equal spacing. That makes it great for dark-mode websites, where you can use it for headings or body text. However, its unique appearance doesn’t match well with elegant fonts like Alegreya or Raleway — you need a similarly bold font, like Lato or Cabin, to keep a consistent style.

18. Nanum Gothic

Nanum Gothic is a sans serif font with variable spacing and wide curves. Some of the linework is difficult to read on small screen sizes, so it isn’t great for body text. However, its uniquely spaced appearance makes it a smart choice for headings, especially when paired with another wide-spaced sans serif font like Asap or Montserrat.

19. Teko

Teko is a blocky sans serif font with sharp lines, tall letters, and a bold stroke weight. Its tight spacing makes it a poor choice for body text, but it’s very useful in UI elements like navigation menus and button text.

You can use it for your largest headings, but you’ll need something with more spacing for smaller headings and body text. Its unique appearance makes it difficult to pair, but Arvo and Oswald will work due to their similarly thick lines.

20. Work Sans

Work Sans is one of the most basic sans serif typefaces you can find, but that works in its favor. It offers excellent readability that scales well to any screen size, thanks to its wide letters, even spacing, and plain appearance. It’s great for documentation websites and business services where designers want professional typography.

It also pairs well with most fonts, since it doesn’t have distinguishing characteristics that could disrupt the style offered by other typefaces.

Fonts that pair well together

With the above Google fonts in mind, you can start making combinations to create impressive pairings. Check out these combinations that provide consistency and character while keeping text legible:

Arvo and Oswald

With Arvo as your heading font and Oswald for body text, you get a font pairing that optimizes readability at any screen size or for any color palette. It’s great for dark-mode websites, where the thick lines create enough space to contrast the background while the slight embellishment of Oswald gives your text some character. You can even carry Arvo over to your UI elements to maintain consistency.

Playfair Display and Raleway

Playfair Display makes a great display font for headings and titles when combined with Raleway for body text. They’re both serif fonts, but while Playfair Display uses varying stroke weights, Raleway doesn’t, making Playfair appear more readable on small screen sizes. You’ll want to use Raleway for your UI elements for the same reason. That way, UI buttons and navigation menus are still readable even on mobile screens.

Work Sans and Roboto

For a purely professional, no-nonsense website, Work Sans and Roboto make a great combination. Work Sans is best as the heading font, with its generous spacing and thick lines, while Roboto makes all your body text perfectly readable.

What this font pairing lacks in character, it more than makes up for in readability, which readers will appreciate in long-form content like documentation or blog articles.

Merriweather and Rubik

Merriweather and Rubik come together neatly with their even spacing and thick lines. Merriweather’s touch of style gives your headings and titles character, while Rubik ensures your body text can scale to any screen size. It’s a versatile font pairing that can work in almost any website design, especially minimalist websites that favor understated elegance.

How to choose the right fonts (and why it matters)

Selecting the right font pairing is crucial in keeping your website readable and responsive. Here are a few tips that’ll help you select fonts that play well together:

Typographic hierarchy

A perfect font combination creates a distinct and intuitive hierarchy to the text on a page. Select display fonts that draw visitors’ attention to headings and calls-to-action first, and use more plain typefaces for body text that fills in the space between. This visual distinction showcasing the texts’ importance is key to creating a website that’s able to convert visitors.

Font compatibility

Most fonts have one or two distinguishing features, like varying stroke weights or wide spacing, that make them more or less compatible with other fonts. Nanum Gothic, for instance, wouldn’t pair well with Teko because their spacing is so different. While your font pairings should offer some variation, the differences between fonts should be subtle, just enough to differentiate them based on their role.

Responsive scaling

Always test your font choices on various screen sizes to verify legibility. Some fonts, like Playfair Display, look great on a desktop screen, but the varying stroke weights make for very thin lines that are hard to see on small screens. Use elegant typefaces like Playfair for headings and titles, where they still have space to breathe.

Bring your fonts to life in Webflow

Choosing the right font for your website provides an opportunity to highlight your brand, message, and style. If you want to experiment with several fonts to find the right pairings for your unique web design, Webflow can help.

Create text styles and change them freely to try different combinations. Once you find the perfect match, every container that uses those styles will update in real time. You can even upload custom fonts to see if your dream pairing matches your new website build.

Learn how to add Google Fonts in Webflow to get started.

In Webflow’s recent webinar Rewriting the web: Strategy, structure, and thriving in the AI era, industry leaders Ethan Smith (CEO, Graphite), Lauren Pleydell-Pearce (Chief Creative Officer, PwC), Danielle Ross (Vice President, Digital Marketing, Vectra AI), and Niklas Mortensen (Chief Design Officer, DesignIt) shared their insights with Guy Yalif (Chief Evangelist, Webflow) on optimizing websites for AI search. Their consensus? SEO isn’t dying, it’s evolving into something more sophisticated: answer engine optimization (AEO).

As AI agents become increasingly sophisticated at crawling, understanding, and summarizing web content, businesses need to rethink how they structure and present information. The good news is that the fundamentals of creating useful, well-organized content remain as relevant as ever. The difference now is that you’re optimizing for both human visitors and AI agents simultaneously.

Structure content for AI agents

Make your content easily digestible for both humans and machines

Danielle Ross, VP of Digital Marketing at Vectra AI, emphasizes that proper content structure is the foundation of AEO success. 

“We’re ensuring that every page on the website is structured properly — we have H1, H2, H3s,” she explains. This approach makes content more ‘quotable’ for AI crawlers while improving the user experience.

The key is formatting your content like an AI agent would present it. Danielle recommends structuring headings as questions and providing concise answers prefaced by phrases like “In summary.” This mirrors how AI agents typically format their responses, making it easier for them to extract and present your information.

She also recommended these key approaches that are being implemented on Vectra AI’s website:

• Use question-based headings. Frame your H2 and H3 tags as questions your audience might ask.
• Lead with summaries. Start sections with clear, quotable statements that directly answer the question.
• Organize with bullet points. Break down complex information into scannable lists.
• Apply schema markup. Help AI agents understand your content’s context and relationships. It’s hard to overstate the importance of this.
• Create FAQ sections. Address common queries in a format AI agents can easily parse.

Beyond basic formatting, consider creating comparison tables and structured data that make it simple for AI to understand relationships between concepts. Danielle notes that her team also focuses on creating original research reports with data that can be easily cited — content that provides unique value AI agents can’t find elsewhere.

Develop dual content strategies

Balance earned media with owned content for comprehensive AEO coverage

Ethan Smith, CEO of Graphite, reveals a critical insight about AI search behavior: different types of queries require different content strategies. Publishers dominate broad, upper funnel ‘best-of’ queries (earned media), while product sites can win niche, lower funnel, follow-up questions (owned media).

This dual approach recognizes that AI agents pull information from various sources depending on the query type. For broad, evaluative questions like “What’s the best CRM software?”AI increasingly references third-parties like Reddit, Forbes, or industry publications. But for specific feature questions like “Which mid-market CRM has Korean language support?”, your owned content can dominate.

Ethan’s research shows that Reddit appears as the third most visible domain in Google’s US search results (behind only Amazon and Wikipedia), making earned media strategies increasingly important. 

Ethan and Guy agreed that AEO builds on what SEO should have always been: high quality content that answers prospect questions. While there are important differences, AEO and SEO are not radically far apart from each other.

However, as Danielle points out, Reddit requires authenticity: “You can’t be really talking about your company, even if it’s sort of pitched as educational.” Instead, encourage technical employees to provide helpful, genuine responses in relevant communities.

To grow your brand visibility, develop a robust AEO strategy that focuses on both earned media and owned content strategies.

Learn more about using AI to drive marketing team efficiency in our free ebook.

Maintain human creativity

Use AI tools to accelerate ideation while preserving brand authenticity

While AI can accelerate content creation, Lauren Pleydell-Pearce (Chief Creative Officer, PwC) and Niklas Mortensen (Chief Design Officer, DesignIt) agree that human taste remains irreplaceable. 

“AI doesn’t make you more creative. It makes you faster at being whoever you already are,” Niklas observes.

The most successful teams use AI as a creative companion, enabling rapid exploration, provoking new thinking, and making abstract ideas feel emotionally real, earlier in the process. AI can help in generating concepts, testing personas, and building narrative worlds while relying on human expertise for strategic decisions and brand consistency. Lauren describes using AI for “world building” that helps visualize future products and services before development, while maintaining human oversight for quality and relevance.

She notes, “Weaving in generative AI is unlocking something deeper in creative teams. It’s not just about speed. It’s about range. Emotional range. Format range. Conceptual range.”

Ethan Smith reinforces this balanced approach with practical advice: “Use AI to make content better, not cheaper.” 

He recommends using AI for the first 80% of content creation (research, ideation, and structuring) while reserving the final 20% for human refinement and brand voice.

To effectively blend AI assistance with human creativity:

• Train AI on your brand voice. Upload existing content and style guides to maintain consistency.
• Use AI for divergent thinking. Generate non-obvious questions and explore new angles.
• Create custom GPTs. Develop specialized tools for persona auditing and message testing.
• Establish review processes. Build in checkpoints where humans evaluate AI output.
• Focus on strategic convergence. Let humans make the final decisions about what truly matters.

As Niklas advises: “Start small, think big, move fast, but most importantly, stay human.” 

This philosophy acknowledges AI’s power while recognizing that genuine human insight, empathy, and strategic thinking remain your competitive advantage.

Lauren encourages marketing leaders to empower teams to experiment, noting “Generative AI helps us build worlds, not just as static ideas, but as multi-sensory worlds of new brands, new experiences, or new services — moving faster from hypothesis to story to impact.”

Build your AI-optimized web presence with Webflow

The shift from traditional SEO to answer engine optimization is driven by a fundamental change in how audiences discover and engage with your content. Success requires structuring information for AI agents, developing both earned and owned content strategies, and maintaining the human creativity that sets your brand apart.

As these industry leaders demonstrate, optimizing websites for AI search is about evolving proven practices for a new era of discovery. The businesses that thrive will be those that create genuinely useful, well-structured content that serves both human readers and AI agents effectively.

Ready to implement these strategies? Webflow’s visual website platform gives marketing teams the flexibility to rapidly test and optimize content structures for AEO success. From implementing proper content hierarchies to creating dynamic comparison pages, you can adapt your web presence for the AI era, development resources optional.

Watch the full webinar to discover more insights on answer engine optimization and thriving in the AI era, and see how leading brands are already transforming their digital strategies.

When your website has similar or duplicate content across multiple pages, it can confuse search engines and hurt your rankings. Canonical tags inform web crawlers which version to prioritize, protecting your site’s SEO and helping the right pages earn higher placement in search results.

Read on to learn more about what canonical tags are, how to use them, and best practices to implement when doing so.

What are canonical tags in SEO?

A canonical tag is a snippet of HTML that informs search engines like Google which version of your page to include in search results — this is particularly helpful when multiple versions of that content exist across your site.

The term “canonical” comes from publishing and media, where it refers to the official version of a story. In SEO, a canonical tag works similarly. When similar or duplicate versions of a page are live on your site, it identifies the preferred page. 

Without canonical tags, search engines may treat each version of your page separately, splitting backlinks and page authority. That makes it harder for any single page to rank well.

Websites typically use canonical tags in two places:

• Canonical tags on duplicate pages: If your site has more than one page with similar content — like alternative versions of a product page or blog post — a canonical tag tells search engines which version should take priority. This helps consolidate SEO signals, avoid internal competition, and ensure the right page appears in search results.
• Self-referencing canonical tags on primary pages: The preferred version of the page can also include a canonical tag that points to itself. This confirms its status as the canonical version, even if slight URL variations exist, such as tracking parameters or trailing slashes.

How to use canonical tags

Below are a few common situations where canonical tags can strengthen your search rankings.

URLs with and without trailing slashes

You might have two versions of the same page: one ending in a slash (/about/) and one without it (/about). They may look identical to visitors, but search engines see them as separate pages, which can dilute your page authority. A canonical tag identified which version to prioritize in search results.

Separate desktop and mobile URLs for similar content

Older websites sometimes use different URLs for mobile and desktop views, such as “m.example.com/page” for mobile and “www.example.com/page” for desktop. If they have the same content, search engines need to know which to treat as the primary version.

A canonical tag preserves your search rankings and avoids duplicate content penalties, such as search engines ignoring or deprioritizing the pages they think are redundant.

URLs with different tracking parameters

Sometimes, a single page appears under multiple URLs due to tracking codes or filters, like “example.com/design” versus “example.com/design?utm_source=newsletter.” While the page content is the same, search engines view these as two pages. Canonical tags consolidate variations into one main version, ensuring your SEO value stays with the correct URL.

Pages that exist in multiple categories

A product may appear in multiple categories, like a chair listed under both “example.com/chairs/product-name” and “example.com/sale/product-name.” Both pages show the same item, but with different URLs. This creates duplicate content, which can confuse search engines and cause the pages to compete with each other in search results.

A canonical tag identifies which page to prioritize, so the right page gets visibility in search engine results.

301 redirects vs. canonical tags

A 301 redirect automatically sends visitors — and search engines — from one page to another. It tells them, “This page has moved. Let’s get you to its new location.” When someone clicks on the old URL or enters it in the address bar, the 301 redirect instantly takes them to the new URL. This is useful when deleting, renaming, or merging pages.

Instead of redirecting visitors, canonical tags tell search engines which version of a page to treat as the main one, even if multiple versions are live and accessible. Visitors won’t notice anything different, but search engines will know which page deserves priority.

5 steps to implement canonical tags

Adding canonical tags to your website doesn’t have to be overly technical, but a thoughtful approach helps. Here’s how to get started:

1. Identify duplicate content

When building or optimizing a site, review it for duplicate or near-identical pages. This could include pages with URL variations (like added filters or tracking codes), content copied across categories, or separate mobile and desktop versions. Free SEO tools or a website audit can help you spot duplicates quickly.

2. Choose the primary URL

Search engines rely on consistent URLs to determine which version of a page should rank. Using a canonical tag to identify the preferred version helps consolidate SEO value, like backlinks and page authority, into a single URL. The preferred version is typically the cleanest, simplest one, without tracking parameters or extra query strings.

3. Add the canonical tag

Once you’ve identified the preferred URL, the next step is to add a canonical tag to it and every duplicate page. Here’s an example of a canonical meta tag you can use in the HTML section of your canonical and duplicate pages: 

With Webflow, you can add a canonical tag in two ways:

1.  Set your site’s base URL in the global canonical tag field in Site Settings to automatically populate canonical tags for every page.
2. Add a canonical tag in Page settings to override the global canonical tag for specific static pages.

4. Test your implementation

Use tools like Google Search Console or Chrome DevTools to confirm that the canonical tag appears on the correct pages and leads to the preferred URL.

5. Monitor performance

Canonical tags don’t work instantly — search engines need time to recognize them and adjust indexing. And because site structure can change over time, it’s worth periodically revisiting your canonical setup to make sure it still reflects the correct URLs.

Keep an eye on performance metrics like indexing reports, traffic patterns, and duplicate content warnings in Google Search Console. If something seems off, review your canonical setup and adjust as needed.

Common canonical tag errors

Canonical tags are an important addition to any website’s SEO strategy, but small mistakes can limit their effectiveness. Here are some of the most common errors to be aware of:

Linking to a page that doesn’t exist (404 error)

If your canonical tag points to a page that no longer exists or returns a “Page Not Found” error, search engines won’t know where to direct authority. Always make sure the canonical link is live, accessible, and functioning properly for both search engines and visitors. Use tools like Google Search Console to flag broken links, especially after redesigns or URL changes.

Combining canonical tags with other directives

Canonical tags tell search engines to index a specific page, while directives like “noindex,” “disallow,” or “nofollow” do the opposite. Using both on the same page can confuse search engines, leading them to ignore both instructions or skip indexing the content entirely.

Apply one clear directive per page — use “noindex” to exclude it from search results or a canonical tag to pass its SEO value to a specific URL.

Incorrectly placing tags or using multiple conflicting tags

Canonical tags should go in a page’s section. If multiple tags appear in different locations, like both the and sections, or point to conflicting URLs, search engines may ignore them or get confused about which page is primary.

In Webflow, you can add canonical tags directly in the page settings to ensure they appear consistently where they belong. 

Using relative URLs instead of absolute canonical links

Relative URLs, such as “/about,” can also confuse crawlers. Search engines need the full address (https://example.com/about) to know exactly which page you’re referencing. Without it, they might misinterpret the tag, especially if your site runs across different domains or subdomains.

Pointing to HTTP instead of HTTPS

Google uses HTTPS as a ranking signal, so your canonical tag should always point to the secure version of a page. Linking to an unsecured (HTTP) URL can hurt your search visibility, undermine credibility, and send visitors to a less secure version of your site. 

Say goodbye to duplicate indexing with Webflow

Canonical tags significantly influence which pages appear in search results. They point search engines to the correct version of a page, preventing duplicate indexing. And that’s key to maximizing your pages’ ranking potential and visibility.

With Webflow, you have complete control over your site’s structure and SEO settings, which includes the ability to implement canonical tags consistently and at scale. That means fewer technical hurdles and more time to focus on what matters: designing sites that equally prioritize visual appeal, functionality, and ranking potential.

Use Webflow’s visual website experience platform to build search-friendly sites and climb the rankings.