Der sichtbare Bereich einer Website ohne Scrollen. Ursprünglich aus dem Zeitungsdruck - der Teil über dem Falz. Hier platzierst du die wichtigsten Inhalte, CTAs und dein Wertversprechen.

Barrierefreies Webdesign nach WCAG 2.1 Standards. Ab Juni 2025 durch das BFSG für viele Unternehmen Pflicht. Umfasst Kontraste, Tastaturnavigation, Screenreader-Kompatibilität.

Bewegte Elemente via CSS oder JavaScript. Micro-Interactions erhöhen das Engagement um bis zu 400%. Wichtig: Performance beachten - prefer-reduced-motion respektieren.

Accessible Rich Internet Applications. HTML-Attribute, die Screenreadern zusätzliche Informationen geben. aria-label, aria-hidden, role-Attribute für komplexe UI-Komponenten.

Bildschirmbreiten, bei denen das Layout wechselt. Standard-Breakpoints: 576px (Mobile), 768px (Tablet), 992px (Desktop), 1200px (Large). Mobile-First: min-width statt max-width.

Anteil der Besucher, die nach nur einer Seite abspringen. Durchschnitt liegt bei 40-60%. Hohe Bounce Rate kann auf schlechte UX, langsame Ladezeit oder irrelevanten Content hindeuten.

CSS-Konzept: Content + Padding + Border + Margin. Mit box-sizing: border-box wird Padding und Border in die Breite eingerechnet. Grundlage für jedes CSS-Layout.

Visuelle Markenidentität im Web: Logo, Farben, Typografie, Bildsprache. Konsistenz über alle Touchpoints hinweg. Design System dokumentiert die Brand Guidelines.

Zweidimensionales Layout-System für komplexe Designs. Definiert Zeilen und Spalten gleichzeitig. Perfekt für Card-Grids, Dashboard-Layouts, Magazine-Designs.

Handlungsaufforderung - der wichtigste Button deiner Seite. Kontrastreiche Farbe, aktionsorientierten Text ("Jetzt starten" statt "Absenden"). A/B-Tests für Optimierung.

Googles Performance-Metriken seit 2021: LCP (Largest Contentful Paint) unter 2.5s, INP (Interaction to Next Paint) unter 200ms, CLS (Cumulative Layout Shift) unter 0.1.

Prozentsatz der Besucher, die eine gewünschte Aktion ausführen. E-Commerce: 2-3%, B2B-Leads: 2-5%. Optimierung durch UX-Verbesserungen, A/B-Tests, Trust-Elemente.

Dunkles Farbschema als Alternative zum Light Mode. 82% der Nutzer bevorzugen Dark Mode. Spart Akku bei OLED-Displays, reduziert Augenbelastung bei wenig Licht.

Sammlung wiederverwendbarer Komponenten und Richtlinien. Enthält Design Tokens, UI Components, Pattern Library. Sorgt für Konsistenz und schnellere Entwicklung.

Document Object Model - die Baumstruktur einer HTML-Seite. JavaScript manipuliert den DOM für dynamische Inhalte. Virtual DOM (React) optimiert Performance.

Datenschutz-Grundverordnung der EU. Betrifft Webdesign: Cookie-Consent, Formulare, Analytics, externe Ressourcen. Keine Google Fonts vom CDN - lokal einbinden!

Online-Handel über Websites oder Apps. In WordPress meist mit WooCommerce umgesetzt. Erfordert SSL, Zahlungsintegration, rechtliche Anforderungen (Widerrufsrecht, AGB).

JavaScript-Funktion, die auf Benutzeraktionen reagiert: Klicks, Scrollen, Tastatureingaben. Basis für jede Interaktivität. addEventListener() ist der moderne Standard.

Externe Inhalte einbetten: YouTube-Videos, Google Maps, Social Media Posts. WordPress: oEmbed wandelt URLs automatisch in Embeds um. DSGVO beachten!

Anteil der Nutzer, die mit der Seite interagieren (Klicks, Scrollen, Zeit). In GA4: Engaged Sessions = länger als 10 Sekunden oder Conversion oder 2+ Seitenaufrufe.

Eindimensionales Layout-System für Zeilen oder Spalten. Perfekt für Navigation, Card-Layouts, vertikale Zentrierung. justify-content und align-items sind deine Freunde.

Strategie für Webfonts: font-display: swap verhindert unsichtbaren Text. Preload für kritische Fonts. WOFF2-Format für beste Kompression. Lokale Fonts für DSGVO-Compliance.

Abschluss jeder Seite. Enthält rechtliche Links, Kontakt, Social Media, Sitemap. Sticky Footer mit Flexbox: body { min-height: 100vh; display: flex; flex-direction: column; }

Zeit bis der erste Content sichtbar wird. Ziel: unter 1.8 Sekunden. Optimierung durch kritisches CSS inline, Font-Preload, Server-Response-Zeit verbessern.

Raster-basiertes Layout. Klassisch: 12-Spalten-Grid. Modern: CSS Grid mit fr-Einheiten. Sorgt für visuelles Gleichgewicht und konsistente Abstände.

Leichtgewichtiges WordPress-Theme (unter 10KB). 100/100 PageSpeed möglich. Hooks statt Page Builder = bessere Performance. Premium-Version für Site Library und Elements.

Logische Reihenfolge von H1-H6. Nur ein H1 pro Seite. Keine Ebenen überspringen. Wichtig für SEO und Screenreader-Navigation. H1 = Seitentitel, H2 = Hauptabschnitte.

Der erste visuelle Eindruck above the fold. Große Headline, Subline, CTA, oft mit Hintergrundbild oder Video. Entscheidet in 3 Sekunden über Bleiben oder Gehen.

Visuelles Feedback beim Überfahren mit der Maus. Zeigt Klickbarkeit an. Transition für sanfte Übergänge. Touch-Geräte: Focus-State als Alternative berücksichtigen.

Bedeutungstragende HTML-Elemente: header, nav, main, article, section, aside, footer. Verbessert SEO und Barrierefreiheit. Screenreader nutzen Landmarks zur Navigation.

Inline Frame - bettet externe Webseiten ein. YouTube, Google Maps, Formulare. DSGVO-kritisch: Erst nach Consent laden. Performance-Impact durch zusätzliche HTTP-Requests.

Bilder komprimieren ohne sichtbaren Qualitätsverlust. Moderne Formate: WebP (30% kleiner), AVIF (50% kleiner). Responsive Images mit srcset für verschiedene Bildschirmgrößen.

Seit März 2024 neue Core Web Vital (ersetzt FID). Misst Reaktionszeit auf Klicks/Taps. Ziel: unter 200ms. Optimierung: JavaScript aufteilen, Main Thread entlasten, Web Workers.

Inhalte werden beim Scrollen automatisch nachgeladen. Gut für Social Feeds, schlecht für SEO (Inhalte nicht indexierbar). Alternative: "Mehr laden"-Button.

Die Programmiersprache des Webs für Interaktivität. Vanilla JS oder Frameworks (React, Vue, Alpine.js). Performance-Tipp: defer/async für nicht-kritische Scripts.

JavaScript Object Notation - leichtgewichtiges Datenformat für APIs. JSON-LD für Schema.org Structured Data (SEO). WordPress REST API liefert JSON.

Verlustbehaftetes Bildformat, Standard für Fotos seit 1992. Komprimierungsqualität einstellbar (60-80% meist optimal). Kein Transparenz-Support - dafür PNG oder WebP.

Suchbegriff, für den eine Seite ranken soll. Keyword-Recherche mit Tools wie Ubersuggest, Ahrefs, Google Keyword Planner. Long-Tail Keywords für weniger Konkurrenz.

Key Performance Indicator - messbare Kennzahl für Erfolg. Web-KPIs: Conversion Rate, Bounce Rate, Session Duration, Pages per Session, Core Web Vitals.

Bilder und Iframes erst laden, wenn sie in den Viewport scrollen. Native: loading="lazy". Spart Bandbreite, verbessert LCP. Wichtig: Above-the-fold Bilder nicht lazy loaden!

Zeit bis das größte Element im Viewport gerendert ist. Ziel: unter 2.5 Sekunden. Meist Hero-Bild oder Headline. Optimierung: Bilder optimieren, Font-Preload, Server schneller.

Design-Ansatz: Erst für Mobile, dann für Desktop erweitern. 60%+ Traffic kommt von Mobil. Google indexiert Mobile-Version zuerst. CSS: min-width statt max-width.

Kleine Animationen als Feedback: Button-Klick, Form-Validation, Loading-States. Erhöhen Engagement um bis zu 400%. Müssen subtil und performant sein.

Das Menüsystem einer Website. Primary Nav (Hauptmenü), Secondary Nav (Footer-Links), Breadcrumbs, Mega-Menü. Mobile: Hamburger-Menü mit 3 Strichen. Max. 7±2 Hauptpunkte.

JavaScript-Runtime für Server-Anwendungen. Basis für Build-Tools (Webpack, Vite), Package Manager (npm). Ermöglicht Full-Stack JavaScript. WordPress: für Gutenberg-Entwicklung.

Transparenz eines Elements (0 = unsichtbar, 1 = vollständig sichtbar). Für Overlays, Hover-Effekte, Disabled-States. Alternative: rgba() oder hsla() für Farb-Transparenz.

Meta-Tags für Social Media Sharing (Facebook, LinkedIn). Steuert Vorschaubild, Titel, Beschreibung beim Teilen. og:image sollte 1200x630px sein. Twitter nutzt eigene Tags.

Google-Tool zur Performance-Analyse. Misst Core Web Vitals, gibt Optimierungsvorschläge. Score 0-100, Ziel: 90+ für Desktop, 70+ für Mobile. Nutzt Lighthouse unter der Haube.

Portable Network Graphics - verlustfreies Format mit Transparenz-Support. Ideal für Screenshots, Grafiken mit Text, Logos. Größer als JPEG - für Fotos WebP/AVIF bevorzugen.

Website, die sich wie native App verhält. Installierbar, Offline-fähig, Push-Notifications. Benötigt: HTTPS, Service Worker, Web App Manifest. WordPress: Plugins wie PWA for WP.

Grundlegende CSS-Abstände. Padding = Innenabstand (innerhalb des Elements), Margin = Außenabstand (zwischen Elementen). Margin-Collapse beachten!

Design passt sich allen Bildschirmgrößen an. Fluid Grids, flexible Bilder, Media Queries. Nicht verwechseln mit Adaptive Design (feste Breakpoints).

Browser berechnet Layout neu. Teuer für Performance. Ausgelöst durch DOM-Änderungen, Größenänderungen, Scroll. Vermeiden durch CSS transforms statt top/left.

Search Engine Optimization - Optimierung für Google & Co. On-Page (Content, Meta-Tags, Struktur) und Off-Page (Backlinks, Autorität). Core Web Vitals sind seit 2021 Rankingfaktor.

Verschlüsselte Verbindung zwischen Browser und Server. Pflicht seit 2018 für alle Websites. Google-Rankingfaktor, Browser zeigen "Nicht sicher" bei HTTP. Let's Encrypt = kostenlos.

Scalable Vector Graphics - XML-basiertes Vektorformat. Unendlich skalierbar ohne Qualitätsverlust. Ideal für Logos, Icons, Illustrationen. CSS-animierbar, keine externen Requests = DSGVO-konform.

XML-Datei mit allen URLs einer Website. Hilft Suchmaschinen beim Crawling. WordPress: automatisch via Yoast/RankMath. In Google Search Console einreichen für schnellere Indexierung.

Schriftgestaltung im Web. Font-Pairing (Überschrift + Fließtext), Line-Height (1.5-1.8), Font-Size (16px+ Body). Variable Fonts 2025 im Trend - ein Font, unendliche Gewichte.

Vorschaubild in kleiner Auflösung. WordPress generiert automatisch mehrere Größen. Wichtig für Performance: Richtige Größe laden via srcset. Lazy Loading für Thumbnails.

Zeit bis der Server das erste Byte sendet. Ziel: unter 600ms. Beeinflusst durch Server-Hardware, PHP-Version, Datenbankabfragen, Caching. Guter Hosting-Indikator.

Gesamterlebnis bei der Nutzung. Umfasst Usability, Accessibility, Performance, Ästhetik. Gute UX = höhere Conversion. Messung durch Analytics, Heatmaps, User Tests.

Die visuelle Oberfläche - Buttons, Forms, Icons, Typografie, Farben. UI ist Teil von UX. Konsistenz durch Design Systems. Trends: Glassmorphism, Neumorphism, Bold Typography.

Der sichtbare Bereich im Browser. Meta-Tag <meta name="viewport"> ist Pflicht für Responsive Design. Viewport-Units: vw, vh, dvh (dynamisch), svh (small), lvh (large).

Eine Schriftdatei mit allen Gewichten (100-900) und Stilen. Spart HTTP-Requests, ermöglicht Zwischen-Gewichte. Trend 2025: Responsive Typography mit font-variation-settings.

Native Browser-API für Seitenübergänge ohne JavaScript-Frameworks. Smooth Page Transitions zwischen URLs. Chrome/Edge: Ja, Firefox: In Entwicklung. Ersetzt React/Vue Transitions.

Web Content Accessibility Guidelines. Aktuell Version 2.1, Level AA ist Standard. 4 Prinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust. Ab 2025 teilweise gesetzlich verpflichtend.

Browser-Benachrichtigungen auch bei geschlossener Website. Opt-in erforderlich. Hohe Öffnungsraten (90%), aber behutsam einsetzen. Service Worker Technologie.

Steuert Stapelreihenfolge von Elementen. Funktioniert nur mit position-Wert. Stacking Context beachten. Vermeiden von z-index: 9999 - besser: Variablen-System.

Google beantwortet Fragen direkt in den SERPs. 65% aller Suchen 2024. Strategie: Featured Snippets anstreben, Brand Awareness, komplexere Themen mit Mehrwert.