Part V ➝ A checklist for great websites

[jimmylee]

What is the point of this?

A great website is more than just checking boxes, however when you are learning a checklist is a great place to start. As webmasters today, we need to prepare people to understand all the important details that go into making a great website. Often, people are great at identifying a few things, but there are so many details.

We love making websites here, and we think it’s one of the greatest things in the world. You can create one website, and millions—maybe even billions—of people can see and interact with it. It’s really special. This list is designed to help you with this process and make life easier.

New "Good Enough V1" Launch Checklist

November 1st, 2024

• Our "good enough" browser testing. This includes the mobile version as well as the desktop version.

  • Android Context
  • Windows Context
  • MacOS Context
  • iOS Context
  • Linux Context
  • Chrome
  • Firefox
  • Edge
  • Safari
  • Opera

• Our "good enough" performance testing.

  • Pass any insights tests and document the results.
  • Know your average Time to First Paint (TTFP).
  • Know your average Time to First Byte (TTFB).
  • Test the website on low power and low bandwidth connections.
  • Ensure animation durations are around 200ms for optimal user experience.
  • Eliminate unintended console logs or exceptions in the browser.

• Our "good enough" usability testing. You got through the bare minimum.

  • Ensure there are no broken hyperlinks.
  • Decide which links open in new tabs vs. the same tab.
  • Check for typos and maintain consistent language throughout the site.
  • Implement appropriate favicons.
  • Match the body background with the topmost and bottommost elements for better touch interactions.
  • Set the meta theme-color to match your website’s theme.
  • Use a base font size of 16px for input fields unless specific cases require otherwise.
  • Enlarge click targets for icons to improve usability.
  • Support keyboard navigation; the site should be usable without a mouse.
  • Clicking on input labels should focus the corresponding input fields.
  • Decide on enabling or disabling spellcheck and autocomplete to control styling.
  • Ensure passwords are hidden unless toggled visible with an appropriate icon.
  • Use color palettes favorable for color-blind users.
  • Optimize line lengths to 8–12 words per line for readability.
  • Verify that all site notifications work correctly.

• Our "good enough" security testing, this is also a bare minimum.

  • Ensure no private keys or personal identifying information are publicly accessible. Absolutely no environment variables should leak to the client.
  • Prepare to restore the database in case of catastrophic failure.
  • Secure and test user account functionalities:
    • Account creation
    • Account deletion
    • Change username
    • Password change
    • Password reset
    • Sign-in
    • Verify e-mail
  • Protect user emails and keys from exposure.
  • Implement adequate cryptography to safeguard user data.

• Our "good enough" for front-end code.

  • Avoid using !important in your CSS.
  • Organize z-index values into variables or a nice table.
  • Implement theming in a scalable manner (e.g., using theme variables or a theming system).
  • Document all TODO and NOTE comments for unfinished work.
  • You are launching your site with little to no technical debt.

• Our "good enough" for monitoring.

  • Ensure all unit tests and integration tests pass.
  • Simulate site traffic beyond expectations and have a scaling solution.
  • Set up site traffic and performance monitoring.
  • Set up adequate alarming to catch critical issues

• Does your website work?

  • Verify that all planned features work exactly as expected.
  • Do not launch the website if critical features are not functioning properly.
  • Test payment systems if applicable.

• Are you in compliance with the law?

  • Confirm that the site does not violate any laws.
  • Include Terms of Service, Acceptable Use Policy, and Privacy Policy.
  • Replace all placeholder images or assets.
  • Ensure you have rights and understand the license agreements for all assets used.

SEO checklist

November 1st, 2024

This is our guide to optimal metatag usage for our website. We apply these practices on our own production sites and have also drawn inspiration from other outstanding websites, incorporating their strategies into our approach. When advising others as the Internet Development Studio Co, we can reference this guide. It's a curated set of metatags that have proven successful across our projects.

Here we made up an article called "Turtles are Nature's Gentle Explorers", we removed symbols from the title, and we kept the description short.

• We have incomplete examples for a Sitemap and Robots.txt but they can be extended. This can also help how your site is indexed.

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="content-language" content="en-us" />
  <meta name="language" content="en-us" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="theme-color" content="#FFFFFF" />

  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="shortcut icon" href="/favicon.ico" />

  <link rel="canonical" href="https://internet.dev/turtles" />

  <title>Turtles are Nature's Gentle Explorers</title>
  <meta name="title" content="Turtles are Nature's Gentle Explorers" />
  <meta name="description" content="Explore the fascinating world of turtles, from their ancient origins to their unique adaptations that allow them to thrive in diverse environments." />
  <meta name="keywords" content="turtles, wildlife, nature, reptiles, exploration" />
  <meta name="author" content="Internet Development Studio Company" />
  <meta name="copyright" content="© 2024 Internet Development Studio Company" />
  <meta name="robots" content="index, follow, max-image-preview:large" />

  <meta property="og:locale" content="en_US" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Turtles are Nature's Gentle Explorers" />
  <meta property="og:description" content="Explore the fascinating world of turtles, from their ancient origins to their unique adaptations that allow them to thrive in diverse environments." />
  <meta property="og:url" content="https://internet.dev/turtles" />
  <meta property="og:site_name" content="Internet Development Studio Company" />

  <meta property="og:image" content="https://internet.dev/images/turtle-1600x900.jpg" />
  <meta property="og:image:alt" content="A serene turtle resting on a log, surrounded by lush greenery." />
  <meta property="og:image:width" content="1600" />
  <meta property="og:image:height" content="900" />
  <meta property="og:image:type" content="image/jpeg" />

  <meta property="og:image" content="https://internet.dev/images/turtle-1200x675.jpg" />
  <meta property="og:image:alt" content="Close-up of a turtle swimming underwater." />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="675" />
  <meta property="og:image:type" content="image/jpeg" />

  <meta property="og:image" content="https://internet.dev/images/turtle-1200x1200.jpg" />
  <meta property="og:image:alt" content="A turtle basking in the sun on a sandy beach." />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="1200" />
  <meta property="og:image:type" content="image/jpeg" />

  <meta property="og:image" content="https://internet.dev/images/turtle-1200x900.jpg" />
  <meta property="og:image:alt" content="Group of turtles interacting near a pond." />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="900" />
  <meta property="og:image:type" content="image/jpeg" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Turtles are Nature's Gentle Explorers" />
  <meta name="twitter:description" content="Explore the fascinating world of turtles, from their ancient origins to their unique adaptations that allow them to thrive in diverse environments." />
  <meta name="twitter:image" content="https://internet.dev/images/turtle-1600x900.jpg" />
  <meta name="twitter:image:alt" content="A serene turtle resting on a log, surrounded by lush greenery." />

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://internet.dev/turtles"
      },
      "headline": "Turtles are Nature's Gentle Explorers",
      "description": "Explore the fascinating world of turtles, from their ancient origins to their unique adaptations that allow them to thrive in diverse environments.",
      "image": [
        "https://internet.dev/images/turtle-1600x900.jpg",
        "https://internet.dev/images/turtle-1200x675.jpg",
        "https://internet.dev/images/turtle-1200x1200.jpg",
        "https://internet.dev/images/turtle-1200x900.jpg"
      ],
      "author": {
        "@type": "Organization",
        "name": "Internet Development Studio Company",
        "url": "https://internet.dev"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Internet Development Studio Company",
        "logo": {
          "@type": "ImageObject",
          "url": "https://internet.dev/logo.png",
          "width": 600,
          "height": 60
        }
      },
      "datePublished": "2024-11-01",
      "dateModified": "2024-11-01"
    }
  </script>
</head>

More topics

• AEO, Answer Engine Optimization
• LSI, Latent Semantic Indexing