Skip to content
Amply Dev Library
  • Pages
    • Introduction
    • Core Standards
    • icon picker
      Client First
    • Project Setup Checklist
    • Accessibility & Compliance
      • Removing Google Fonts
    • Assets
      • Images
      • Icons
    • SEO
      • Project Settings Setup
      • 301 Redirects
    • Staging
      • Staging Best Practices
      • Setting Up Staging Environment
    • Additional Tools & Integrations
      • Relume
      • Refokus for Social Share Buttons
      • Form Integrations
      • Lever Job Listings
      • All Countries Select Form Field
      • Restrict the email field to work emails only
      • Nested CMS Collections
    • Components
      • Sliders (When to Use What)
      • Table of Contents
    • CMS
      • Collection Settings Best Practices
      • Multiple Nested CMS collections on 1 page
      • Tips & Tricks
    • Animations
      • Best Practices
    • Quality Assurance
      • Retainer Task Quick QA Checklist
      • Website Launch QA Checklist
      • Individual Page Checklist
Amply Dev Library
/
Client First
Share
Explore

Client First

We follow the
Client First
⁠
framework throughout development for a couple of main reasons:
It keeps our projects clean and scalable
It allows different developers to be able to quickly join a project & get up to speed
It’s an easy to understand framework that our clients can understand if needed.

We expect all of our developers to have thoroughly studied the
Client First Docs
⁠
so we won’t rehash everything in the document, but we wanted to highlight a few core things that we want to emphasize.

Fluid Responsive Typography - All projects should setup using Fluid Responsive on all pages. See the project starter lesson for more on setting this up properly.
Appropriately Named Classes & Organization - Following client first is more than just naming classes using the appropriate dashes & underscores. A project should be developed with others in mind. Classes should be given descriptive names that help other developers understand the project. Classes should be duplicated & renamed appropriately when a component is being pasted to a new page and is no longer describe appropriately by the current class.
Global Styles Should Be Set Appropriately - Global styles (headings, paragraphs, rich-text elements) should be set at the start of the project rather than using an individual class for these styles.
Change Div Tags for Sematic HTML - Change the div tags of the main wrapper, section, header, and footer with their respective tags.
Don’t use Webflow’s Container, Column or Section Elements - These Webflow elements have their own limitations & styles added on, we like to keep things clean by using divs to create sections, containers, & columns.
Add Descriptive Text to Link Elements - if a link block doesn’t have text in it, such as a social link, add a text block to describe what the link is and then set the text to display: none.
image.png
⁠
⁠
Make a Habit of Adding Alt Text When Adding Assets - Rather than adding alt text at the end of a project, add alt text as you build.

Gallery
 
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.