This is some text inside of a div block.
Development

Building a new page

Updated
April 21, 2025

This document outlines the process for developing and deploying new pages on our Webflow website. Adhering to this process ensures consistency, maintainability, and efficient content delivery.

1. Project Initiation and Requirements

  • 1.1 Project Request: All new page requests must be submitted through Smartsheet. The request should include:
    • Clear page title and purpose
    • Target audience
    • Content outline or copy
    • Design specifications (links to Figma, Adobe XD, etc.)
    • Functional requirements (forms, interactions, etc.)
    • SEO requirements (target keywords, etc.)
  • 1.2 Design Review:
    • The assigned developer will review the provided design specifications.
    • Verify design consistency with the existing site's style guide.
    • Identify any potential technical challenges or feasibility issues.
    • Communicate any questions or required clarifications to the design team.
  • 1.3 Technical Planning:
    • Determine the best approach for building the page in Webflow.
    • Identify reusable components or symbols.
    • Plan the page structure and layout.
    • Consider responsive design implementation across all breakpoints.
    • Assess any performance considerations.

2. Page Setup in Webflow

  • 2.1 Page Creation:
    • In the Webflow Designer, navigate to the "Pages" panel.
    • Click "Add Page" to create a new page.
    • Enter the "Page Name" (for internal use).
  • 2.2 Page Settings Configuration:
    • 2.2.1 URL Slug:
      • Enter a descriptive and SEO-friendly URL slug.
      • Use lowercase letters and hyphens for word separation (e.g., "about-us", "product-features").
      • Follow the site's URL structure conventions.
    • 2.2.2 SEO Settings:
      • Meta Title: Create a concise (50-60 characters) and compelling title that includes the primary keyword.
      • Meta Description: Write a brief (150-160 characters) summary of the page's content, optimized to encourage clicks in search results.
    • 2.2.3 Open Graph Settings:
      • Configure the title, description, and image for social sharing.
      • Use the same title and description as the SEO settings or adapt them for social media.
      • Select a visually appealing image that represents the page content. Recommended size: 1200x630 pixels.
    • 2.2.4 Custom Code (Optional):
      • Add any necessary code to the <head> or <body> sections.
      • This may include tracking scripts, custom CSS, or JavaScript.
      • Document all custom code with comments explaining its purpose.
  • 2.3 Template Selection:
    • If a suitable page template exists, select it as a starting point.
    • Otherwise, start with a blank page.

3. Page Development

  • 3.1 Structure and Layout:
    • Use Webflow's visual editor to build the page structure.
    • Employ sections, containers, grids, and flexbox for layout control.
    • Follow the design specifications precisely.
  • 3.2 Component Implementation:
    • Utilize pre-built components and symbols from the project's style library.
    • This ensures consistency and maintainability across the site.
    • If a new component is required, create it as a symbol and add it to the library.
  • 3.3 Content Integration:
    • Add and format content (text, images, videos) according to the design.
    • Optimize images for web use (size and resolution).
    • Ensure proper heading hierarchy (H1, H2, H3, etc.) for SEO and accessibility.
  • 3.4 Functionality and Interactions:
    • Implement any required functionality, such as forms, buttons, and dynamic content.
    • Use Webflow's interactions to add animations and visual enhancements.
    • Ensure interactions are smooth, performant, and enhance the user experience.
  • 3.5 Responsive Design:
    • Build the page to be fully responsive across all screen sizes (desktop, tablet, and mobile).
    • Use Webflow's breakpoints to adjust the layout and styling as needed.
    • Test the page on actual devices or using browser developer tools.
  • 3.6 CMS Integration (If Applicable):
  • * If the page displays dynamic content, connect the relevant elements to the appropriate CMS Collection.
  • * Ensure the CMS Collection is structured correctly and contains the necessary data.

4. Testing and Quality Assurance

  • 4.1 Development Testing:
    • Thoroughly test the page in the Webflow Designer and in a staging environment.
    • Verify the following:
      • Visual accuracy: The page matches the design specifications.
      • Responsiveness: The layout adapts correctly on all devices.
      • Functionality: All interactive elements work as expected.
      • Performance: The page loads quickly and efficiently.
      • Accessibility: The page is accessible to users with disabilities (e.g., proper use of semantic HTML, alt text for images).
      • Links: All internal and external links are working.
  • 4.2 Cross-Browser Testing:
    • Test the page in multiple browsers (Chrome, Firefox, Safari, Edge) to ensure cross-browser compatibility.
  • 4.3 Staging Review:
    • Deploy the page to the staging environment for review by stakeholders (e.g., designers, content team).
    • Provide clear instructions to reviewers on what to focus on.
  • 4.4 Feedback and Iteration:
    • Address any feedback received from reviewers.
    • Make necessary revisions and retest the page.
    • Communicate updates to stakeholders as needed.

5. Deployment

  • 5.1 Final Approval:
    • Obtain final approval from the project stakeholders before deploying the page to the live site.
    • Get this approval by
  • 5.2 Publishing:
    • Publish the page in Webflow.
    • Double-check all settings before publishing to the live domain.
  • 5.3 Post-Deployment Verification:
    • After publishing, verify that the page is live and accessible.
    • Check for any errors or unexpected behavior on the live site.
    • Perform a final round of testing to ensure everything is working correctly.

By following this process, we can ensure that new pages are developed and deployed efficiently and meet our quality standards.

‍