Das Front-End Checklist ist eine vollständige Liste aller wichtigen Elemente, die Sie für die Erstellung Ihrer Website / HTML-Seite benötigen.
Diese Liste basiert auf der jahrelangen Erfahrung aus Frontend-Entwicklung, wobei die Ergänzungen aus einigen anderen Open-Source Checklisten stammen.
Alle Elemente in der Front-End-Checkliste werden für die meisten Projekte benötigt, aber einige Elemente können weggelassen werden oder sind nicht zwingend erforderlich (im Falle einer Administrations-Webanwendung benötigen Sie z.B. keinen RSS-Feed). Wir entschieden uns für 3 Flexibilitätsstufen:
- Niedrig bedeutet, dass der Artikel empfohlen ist, aber in bestimmten Situationen weggelassen werden kann..
- Mittel bedeutet, dass der Artikel hoch empfohlen ist und in einigen wirklich besonderen Fällen eventuell weggelassen werden kann. Einige Elemente, wenn sie weggelassen werden, können sich negativ auf die Performance oder SEO auswirken.
- Hoch bedeutet, dass das Element aus einem bestimmten Grund nicht weggelassen werden kann. Sie können eine Funktionsstörung auf Ihrer Seite verursachen oder Probleme mit der Erreichbarkeit oder der Suchmaschinenoptimierung bewirken. Die Priorität beim testen muss sich zunächst auf diese Elemente beziehen.
Für einige Ressourcen benutzen wir folgende Emoticon:
- 📖: Dokumentation oder Artikel
- 🛠: Online-/ Test-Hilfen
- 📹: Medien oder Video Inhalte
You can contribute to the Front-End Checklist App reading the README_APP file which explain everything about the project.
Anmerkung: Hier finden Sie eine Liste von allem, die Sie im
<head>
eines HTML-Dokuments finden können.
- Doctype: In HTML5 ist der Doctype eine erforderliche Präambel und steht ganz oben auf allen Ihren HTML-Seiten.
<!doctype html> <!-- HTML5 -->
Die nächsten 3 Meta-Tags (Charset, X-UA Compatible und Viewport) müssen an erster Stelle im Head stehen.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- Titel: Ein Titel wird auf allen Seiten verwendet (SEO: Google berechnet die Pixelbreite der im Titel verwendeten Zeichen und schneidet zwischen 472 und 482 Pixel ab. Das durchschnittliche Zeichenlimit liegt bei ca. 55 Zeichen).
<!-- Document Title -->
<title>Seitentitel sollte e´weniger als 55 Zeichen haben</title>
- Beschreibung: Eine Meta-Beschreibung wird mitgeliefert, ist eindeutig und hat nicht mehr als 150 Zeichen.
<!-- Meta Description -->
<meta name="description" content="Beschreibung der Seite mit weniger als 150 Zeichen.">
- Favicons: Jedes Favicon wurde erstellt und wird korrekt angezeigt. Wenn Sie nur ein
favicon.ico
haben, legen Sie es unter das Hauptverzeichnis Ihrer Website an. Normalerweise brauchen Sie kein Markup zu verwenden. Es ist jedoch immer noch eine gute Praxis, einen Link mit dem untenstehenden Beispiel zu erstellen. Heute wird das **PNG-Format gegenüber dem `.ico'-Format (Abmessungen: 32x32px) empfohlen.
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
Die minimal erforderliche XML-Markup für die Datei browserconfig.xml
ist wie folgt:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
<!-- Hilft um doppelte Inhalte zu vermeiden -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
- Sprachattribute: Das
lang
Attribut Ihrer Website ist spezifiziert und bezieht sich auf die Sprache der aktuellen Seite.
<html lang="en">
- Richtungsattribut: Die Richtung der Lesung wird auf dem HTML-Tag angegeben (es kann auch auf einem anderen HTML-Tag verwendet werden).
<html dir="rtl">
- Alternative Sprache: Das Sprach-Tag Ihrer Website ist spezifiziert und bezieht sich auf die Sprache der aktuellen Seite.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
- Bedingte Kommentare: Bedingte Kommentare sind für IE (Internet Explorer) vorhanden, falls Sie es benötigen.
-
RSS feed: Wenn es sich bei Ihrem Projekt um einen Blog oder Artikel handelt, wurde ein RSS-Link bereitgestellt.
-
Inline kritisches CSS: CSS, das Inhalte formatiert, die während des Seitenaufrufs sofort sichtbar sind ("above the fold content"), wird als " kritisches CSS " bezeichnet. Es ist eingebettet vor dem eigentlichen CSS-Aufruf und zwischen
<style></style></style>
in einer einzigen Zeile (minified).
- 🛠 Critical by Addy Osmani on GitHub automates this.
- CSS Reihenfolge: Alle CSS-Dateien werden vor allen JavaScript-Dateien im
<head>
geladen. (Ausgenommen ist der Fall, dass manchmal JS-Dateien asynchron am Anfang der Seite geladen werden).
Die beiden Facebook OG und Twitter Cards sind für jede Website sehr empfehlenswert. Die anderen Social-Media-Tags können in Betracht gezogen werden, wenn Sie eine bestimmte Präsenz gezielt ansprechen und die Anzeige sicherstellen wollen.
- Facebook Open Graph: Alle Facebook Open Graph (OG) sind getestet und beinhalten keine fehlenden oder falschen Informationen. Bilder müssen mindestens 600 x 315 Pixel groß sein, jedoch wird die Größe 1200 x 630 Pixel empfohlen.
Anmerkung: Durch die Verwendung von
og:image:width
undog:image:height
werden die Bildabmessungen an den Crawler übergeben, so dass er das Bild sofort rendern kann, ohne es asynchron herunterladen und verarbeiten zu müssen.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 A Guide to Sharing for Webmasters
- 📖 Best Practices - Sharing
- 🛠 Test your page with the Facebook OG testing
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Getting started with cards — Twitter Developers
- 🛠 Test your page with the Twitter card validator
- HTML5 Semantische Elemente: HTML5 Semantische Elemente werden entsprechend verwendet (Header, Section, Footer, Main...).
-
Fehlerseiten: Es existieren 404 und 5xx Fehlerseiten. Denken Sie daran, dass die 5xx-Fehlerseiten ihr CSS integriert haben müssen (kein externer Aufruf auf dem aktuellen Server).
-
Noopener: Falls Sie externe Links mit
target="_blank"
verwenden, sollte Ihr Link einrel="noopener"
-Attribut haben, um Tabulatoren zu verhindern. Wenn Sie ältere Versionen von Firefox unterstützen müssen, verwenden Sierel="noopener noreferrer"
.
- Kommentare bereinigen: Unnötiger Code muss entfernt werden, bevor die Seite an die Online gestellt wird / in die Produktion geht.
- W3C konform: Alle Seiten müssen mit dem W3C-Validator getestet werden, um mögliche Probleme im HTML-Code zu identifizieren.
- Link überprüfen: Es gibt keine defekten Links auf meiner Seite, vergewissern Sie sich, dass Sie keinen 404-Fehler haben.
- Adblockers test: Ihre Website zeigt Ihren Inhalt korrekt mit aktivierten Adblockern an (Sie können eine Nachricht senden, die Leute dazu anregt, ihren Adblocker zu deaktivieren.
Anmerkung: Die Verwendung von Webfonts kann dazu führen, dass folgendes Problem auftauchT: Flash Of Unstyled Text/Flash Of Invisible Text - erwägen Sie, Fallback-Fonts und/oder Webfont-Loader zu verwenden, um das Problem zu vermeiden.
-
Webfont Größe: Die Größe der Webfonts überschreiten nicht 2 MB (inklusiver aller Varianten).
-
Webfont Loader: Kontrollieren Sie das Ladeverhalten von Webfonts mit einem Webfont Loader.
Anmerkung: Werfen Sie einen Blick auf CSS-Richtlinien und Sass-Richtlinien, welches von den meisten Frontend Entwicklern genutzt wird. Wenn Sie nicht sicher über CSS-Eigenschaften sind, können Sie auch [CSS-Referenz] (http://cssreference.io/) besuchen. Es gibt auch einen kurzen [Code Guide] (http://codeguide.co/) über Konsistenz.
- Responsive Web Design: Die Website verwendet responsive Webdesign.
- CSS Print: Ein Druck-Stylesheet wird mitgeliefert und ist auf jeder Seite korrekt.
- Preprocessors: Ihr Projekt verwendet einen CSS-Präprozessor.
- Unique ID: Wenn IDs verwendet werden, sind sie eindeutig für eine Seite.
- Reset CSS: Ein CSS-Reset (Reset, Normalize oder Reboot) wird verwendet und ist aktuell. (Wenn Sie ein CSS-Framework wie Bootstrap oder Foundation verwenden, ist eine Normalisierung bereits enthalten.)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix: Alle Klassen (oder id-, die in JavaScript-Dateien verwendet werden) beginnen mit js- und werden nicht in die CSS-Dateien gestylt.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
- Eingebettet oder Inline-CSS: Vermeiden Sie unbedingt die Einbettung von CSS in
<style>
-Tags oder die Verwendung von Inline-CSS: Verwenden Sie CSS nur aus triftigen Gründen (z.B. Hintergrundbild für Slider, kritisches CSS). - Vendor prefixes: Es werden CSS-Herstellerpräfixe verwendet, die entsprechend der Kompatibilität mit Ihrem Browser generiert werden.
- Concatenation: CSS-Dateien werden in einer einzigen Datei zusammengefasst (Not for HTTP/2).
- Minification: Alle CSS Dateien sind minified.
- Non-blocking: CSS-Dateien müssen nicht blockiert werden, um zu verhindern, dass das DOM Zeit zum Laden benötigt.
-
Responsive web design: Alle Seiten wurden an den folgenden Breakpoints getestet: 320px, 768px, 1024px (kann je nach Analyse mehr / anders sein).
-
CSS Validator: Das CSS wurde getestet und entsprechende Fehler wurden korrigiert.
- Desktop Browsers: Alle Seiten wurden mit allen gängigen Desktop-Browsern (Safari, Firefox, Chrome, Internet Explorer, EDGE...) getestet.
- Mobile Browsers: Safari...) getestet.
- [ [ � [ ª OS: ! !Alle Seiten wurden auf allen gängigen Betriebssystemen (Windows, Android, iOS, Mac...) getestet.
- Pixel perfect: Die Seiten sind nahezu pixelgenau. Abhängig von der Qualität der Kreativen, können Sie nicht 100% genau sein, sollten jedoch der Vorgabe sehr nahe liegen.
- Leserichtung: Alle Seiten müssen auf LTR- und RTL-Sprachen getestet werden, wenn sie unterstützt werden sollen.
Anmerkung: Für ein vollständiges Verständnis der Bildoptimierung, überprüfen Sie das kostenlose eBook Essential Image Optimization von Addy Osmani.
- Optimierung: All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).
- 🛠 Imagemin
- 🛠 Use ImageOptim to optimise your images for free.
- 🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.
- 🛠 TinyPNG losslessly optimise png, apng (animated png) and jpg images. Free and paid version available.
- 🛠 ZorroSVG jpg-like compression for transparent images using svg masking.
- 🛠 SVGO a Nodejs-based tool for optimizing SVG vector graphics files.
- 🛠 SVGOMG a web-based GUI version of SVGO for optimising your svgs online.
- Picture/Srcset: Sie verwenden picture/srcset, um das am besten geeignete Bild für das aktuelle Ansichtsfenster des Benutzers bereitzustellen.
- Retina: Sie stellen Layoutbilder 2x oder 3x zur Verfügung, unterstützen Retina-Darstellung.
- Sprite: Kleine Bilder befinden sich in einer Sprite-Datei (im Falle von Icons können sie in einem SVG-Sprite-Bild sein).
- Breite und Höhe: Setzen Sie die Attribute
width
undheight
auf<img>
, wenn die endgültige Größe des gerenderten Bildes bekannt ist (kann bei der CSS-Größe weggelassen werden). - Alternativer Text: Alle
<img>
haben einen alternativen Text, der das Bild visuell beschreibt.
- JavaScript Inline: Sie haben keinen JavaScript-Code inline (gemischt mit Ihrem HTML-Code).
- Concatenation: JavaScript-Dateien werden zusammengefügt.
- Minification: JavaScript-Dateien werden verkleinert (Sie können das Suffix
.min
hinzufügen).
-
noscript
tag: Verwenden Sie den<noscript>
-Tag im HTML-Body, wenn ein Skripttyp auf der Seite nicht unterstützt wird oder wenn das Skripting im Browser deaktiviert ist. Dies ist hilfreich beim Rendern schwerer Anwendungen wie React.js auf der Client-Seite, siehe Beispiele.
<noscript>
Sie müssen JavaScript aktivieren um diese Seite anzeigen zu lassen.
</noscript>
- Non-blocking: JavaScript-Dateien werden asynchron mit
async
oder verzögert mitdefer
-Attribut geladen.
- Modernizr: Wenn Sie einige spezifische Funktionen benötigen, können Sie ein benutzerdefiniertes Modernizr verwenden, um Klassen in Ihrem
<html>
-Tag hinzuzufügen.
- Cross Site Request Forgery (CSRF): Sie stellen sicher, dass die Anfragen an Ihre Server-Seite legitim sind und von Ihrer Website / App stammen, um CSRF-Angriffe zu verhindern.
- Content Type Optionen: Verhindert, dass Google Chrome und Internet Explorer versuchen, den Content-Type einer Antwort außerhalb des vom Server deklarierten Content-Typs zu mimen.
- Content Security Policy: Definiert, wie Inhalte auf Ihrer Website geladen werden und von wo aus sie geladen werden dürfen. Kann auch zum Schutz vor Clickjacking-Angriffen verwendet werden.
-
Lazy loading: Bilder, Skripte und CSS müssen nachträglich geladen werden, um die Antwortzeit der aktuellen Seite zu verbessern (siehe Details in den jeweiligen Abschnitten).
-
Cookiegröße: Wenn Sie Cookies verwenden, stellen Sie sicher, dass jedes Cookie nicht mehr als 4096 Bytes und Ihr Domainname nicht mehr als 20 Cookies enthält.
- Komponenten von Drittanbietern: iFrames von Drittanbietern oder Komponenten, die auf externe JS (wie z.B. Freigabeschaltflächen) angewiesen sind, werden nach Möglichkeit durch statische Komponenten ersetzt, wodurch Aufrufe an externe APIs eingeschränkt werden und die Aktivitäten Ihrer Benutzer privat bleiben.
- DNS Resolution: DNS-Dienste von Drittanbietern, die eventuell benötigt werden, werden vorab während der Leerlaufzeit mit Hilfe von
dns-prefetch
aufgelöst.
<link rel="dns-prefetch" href="https://example.com">
- Preconnection: DNS-Lookup, TCP-Handshake und TLS-Verhandlungen mit Diensten, die bald benötigt werden, werden im Voraus während der Leerlaufzeit mit
preconnect
durchgeführt.
<link rel="preconnect" href="https://example.com">
- Prefetching: Ressourcen, die demnächst benötigt werden (z.B. Bilder mit langer Ladezeit), werden vorab während der Leerlaufzeit mit
prefetch
angefordert.
<link rel="prefetch" href="image.png">
- Preloading: Ressourcen, die in der aktuellen Seite benötigt werden (z.B. Skripte, die am Ende von
<body>
platziert werden), werden vorab mitpreload
geladen.
<link rel="preload" href="app.js">
- Google PageSpeed: Alle Ihre Seiten wurden getestet (nicht nur die Homepage) und haben eine Punktzahl von mindestens 90/100.
Anmerkung: Sie können folgende Playlist sich anschauen: A11ycasts with Rob Dodson 📹
- Progressive Verbesserung: Wichtige Funktionen wie Hauptnavigation und Suche sollten ohne aktiviertes JavaScript funktionieren.
- H1: Alle Seiten haben eine H1, die nicht der Titel der Webseite ist.
- Überschriften: Überschriften sollten richtig und in der richtigen Reihenfolge (H1 bis H6) verwendet werden.
- Role banner:
<header>
hasrole="banner"
. - Role navigation:
<nav>
hasrole="navigation"
. - Role main:
<main>
hasrole="main"
.
- Es werden spezifische HTML5-Eingabetypen verwendet: Dies ist besonders wichtig für mobile Geräte, die kundenspezifische Tastaturen und Widgets für verschiedene Typen anzeigen.
- Label: Jedem Eingabeformular-Element ist ein Label zugeordnet. Falls ein Label nicht angezeigt werden kann, verwenden Sie stattdessen
aria-label
.
- Accessibility standards testing: Verwenden Sie das WAVE-Tool, um zu testen, ob Ihre Seite die Standards für Zugänglichkeit erfüllt.
- Keyboard Navigation: Testen Sie Ihre Website mit nur Ihrer Tastatur in keiner festen Reihenfolge. Alle interaktiven Elemente sind erreichbar und nutzbar.
- Screen-reader: Alle Seiten wurden in einem Screenreader (VoiceOver, ChromeVox, NVDA oder Lynx) getestet.
- Focus style: Wenn der Fokus deaktiviert ist, wird er durch den sichtbaren Zustand in CSS ersetzt.
- sitemap.xml: Es existiert eine Sitemap.xml, die an die Google Search Console (früher Google Webmaster Tools) übermittelt wurde.
- 📖 The robots.txt file
- 🛠 Testen Sie Ihre robots.txt mit Google Robots Testing Tool
- Strukturierte Daten: Seiten mit strukturierten Daten werden getestet und sind fehlerfrei. Strukturierte Daten helfen Crawlern, den Inhalt der aktuellen Seite zu verstehen.
- 📖 Introduction to Structured Data - Search - Google Developers
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Testen Sie Ihre Seite mit Structured Data Testing Tool
- 🛠 Vollständige Liste von Vokabularen, die als strukturierte Daten verwendet werden können. Schema.org Full Hierarchy
- Sitemap HTML: Eine HTML-Sitemap wird mitgeliefert und ist über einen Link in der Fußzeile Ihrer Website zugänglich.
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">
Die Frontend-Checkliste ist auch in anderen Sprachen verfügbar. Vielen Dank für alle Übersetzer und ihre großartige Arbeit!
- 🇯🇵 Japanese: miya0001/Front-End-Checklist
- 🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Korean: kesuskim/Front-End-Checklist
- 🇧🇷 Portuguese: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
- 🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
- 🇫🇷 French: ynizon/Front-End-Checklist
- 🇷🇺 Russian: ungear/Front-End-Checklist
- 🇹🇷 Turkish: eraycetinay/Front-End-Checklist
- 🇩🇪 German: xfuture603/Front-End-Checklist
Wenn du zeigen willst, dass du die Regeln der Front-End-Checkliste befolgst, dann trage diesen Badge in deine README-Datei ein!
[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)
Open an issue or a pull request to suggest changes or additions.
The Front-End Checklist repository consists of two branches:
This branch consists of the README.md
file that is automatically reflected on the Front-End Checklist website.
This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item.
If you have any question or suggestion, don't hesitate to use Gitter or Twitter:
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]