Ein Webdesign-Glossar in einfachen Worten mit den Website-Begriffen und dem Jargon, nach denen Kunden uns am häufigsten fragen, von Responsive Design und Wireframes bis CMS, SSL und SEO.
Für ungeschulte Ohren klingen manche Begriffe aus der Tech-Welt ziemlich fremd. Wir haben deshalb ein Glossar mit Website-Begriffen und Funktionen zusammengestellt, damit die Verständigung mit uns als Ihrem Webentwickler leichter fällt. Sehen Sie es als einfach erklärten Leitfaden zu Webdesign-Begriffen, zur Website-Terminologie und zum Fachjargon, der in Projektmeetings herumschwirrt. Wir haben die Einträge nach den Fragen ausgewählt, die uns als Webflow-Studio gestellt werden. Sobald mehr Fragen eintreffen, erweitern wir die Liste, aber natürlich gilt sie nicht nur für Webflow-Designer, sondern für alle.
Wenn Sie noch entscheiden, mit wem Sie bauen wollen: Hier steht, warum Sie für Ihr nächstes Website-Projekt ein Webflow-Studio wählen sollten, und woraus sich die Kosten einer Website zusammensetzen.
Adaptives Design
Die Art, wie eine Website gebaut ist, bestimmt, wie sie auf verschiedenen Geräten aussieht. Beim adaptiven Design entsteht eine Website in mehreren unterschiedlichen Layouts, die jeweils auf andere Bildschirmgrößen zugeschnitten sind.
Responsive Design
Stellt sicher, dass eine Website auf jedem Gerät korrekt dargestellt wird, egal womit die Nutzerin oder der Nutzer sie ansieht. Responsive Websites sind so gebaut, dass sie sich an unterschiedliche Bildschirmgrößen anpassen. So bleiben Qualität und Bedienkomfort gleich, ob am Desktop, am Smartphone oder auf dem Tablet gebrowst wird.
Adaptiv vs. responsive
Responsive Design ordnet alle Gestaltungselemente neu an, egal ob die Seite auf dem Desktop, dem Laptop, dem Tablet oder dem Smartphone angezeigt wird. Beim adaptiven Design werden mehrere feste Layouts erstellt, die sich an die Bildschirmgröße der Nutzer anpassen. Im Gegensatz zum fließenderen responsiven Ansatz arbeitet adaptives Design mit mehreren Größen eines festen Designs.
Bei Milk Moon setzen wir meist auf einen responsiven Ansatz, mischen aber manchmal beides. Vielleicht gibt es ein Element, das auf dem Smartphone einfach nicht funktioniert und deshalb dort ausgeblendet und nur für diesen einen Abschnitt durch eine adaptivere Variante ersetzt wird.
Lightbox
Eine immersive Vollbilddarstellung für Ihre Fotos, Grafiken und Videos.
Akkordeons
Das Akkordeon ist ein grafisches Bedienelement aus einer vertikal gestapelten Liste von Einträgen, etwa Beschriftungen oder Vorschaubildern. Es erfüllt einen ähnlichen Zweck wie eine Registeroberfläche mit Tabs, nur dass bei einer Liste von Einträgen genau einer zu einem Bereich aufgeklappt ist.
Lazy Load
Das bedeutet, dass Bilder erst geladen werden, wenn sie auf dem Bildschirm erscheinen, statt dass beim ersten Öffnen der Seite alle Bilder auf einmal laden. Es ist eine der einfachsten Möglichkeiten, eine Seite schneller zu machen (warum das wichtig ist, lesen Sie in unserem Beitrag dazu, wie die Ladegeschwindigkeit den Geschäftserfolg beeinflusst).
Lottie-Animation
Lottie ist ein Animationsdateiformat, mit dem Designer Animationen auf jeder Plattform so einfach ausliefern können wie statische Assets. Die Dateien sind klein, funktionieren auf jedem Gerät und lassen sich ohne Pixelbildung vergrößern oder verkleinern.
Navigationsleiste
Eine Navigationsleiste ist ein Element der Benutzeroberfläche innerhalb einer Webseite, das Links zu anderen Bereichen der Website enthält.
Content-Management-System (CMS)
Ein CMS ist ein Online-System, mit dem Endanwender Website-Inhalte über einen Editor erstellen, ändern und bearbeiten können, sodass auch Nicht-Entwickler ihre Inhalte leichter pflegen können.
Paginierung
Eine lange Liste von Inhalten, etwa Blogbeiträgen oder Produkten, wird auf nummerierte Seiten verteilt, damit Besucher sie Seite für Seite durchgehen können. Wenn die Seite beim Klick auf „Weiter“ an Ort und Stelle bleiben soll, statt nach oben zu springen, lesen Sie hier mehr über unseren Trick für nahtlose Paginierung.
HTML/CSS-Slider und Karussells
Ein Karussell ist eine Sammlung oder ein „Filmstreifen“ aus Bildern, die sich schrittweise oder gleitend um eine zentrale Achse bewegen. Es kann zweidimensional oder dreidimensional wirken.
HTML-Embeds
Das Embed-HTML-Element bettet externe Inhalte an der angegebenen Stelle im Dokument ein. Diese Inhalte stammen von einer externen Anwendung oder einer anderen Quelle interaktiver Inhalte, etwa einem Browser-Plug-in.
SSL
SSL steht für Secure Sockets Layer. Es ist ein Standard-Sicherheitsprotokoll, das dafür sorgt, dass alle Daten, die zwischen dem Webserver und dem Browser übertragen werden, verschlüsselt und damit mit bloßem Auge nicht lesbar bleiben. Ob eine Website ein SSL-Zertifikat hat, erkennen Sie an der Webadresse: Beginnt die URL mit „https“, ist die Website gesichert. Außerdem sehen Sie in der Browserleiste ein Schlosssymbol, wobei Chrome sein Schloss 2023 durch ein Einstellungssymbol ersetzt hat, was Sie sehen, hängt also vom Browser ab. Streng genommen wurde SSL durch TLS (Transport Layer Security) abgelöst, aber alle sagen weiterhin SSL.
UI-Design
UI-Design steht für User-Interface-Design und dreht sich um die Bildschirme und interaktiven Berührungspunkte, aus denen eine Website oder App besteht. Wischgesten, Scrollleisten und anklickbare Buttons gehören alle zum UI-Design: im Grunde alles, woraus die Benutzeroberfläche besteht.
UX-Design
UX-Design steht für User-Experience-Design und sorgt für ein reibungsloses, benutzerfreundliches Erlebnis, wenn Endnutzer sich durch eine Website oder App bewegen. Hier steht, wie eine gut gestaltete Website Ihr Business voranbringen kann.
Wireframe
Die Struktur einer Website. Keine Schriften, Farben oder Bilder: Dieses Layout ist der erste Schritt, um sicherzustellen, dass das Fundament stimmt, bevor Inhalte hinzukommen.
Cookies
Ein Cookie ist ein kleines Stück Daten, das grundlegende und weitere Dienste auf einer Website ermöglicht. Cookies helfen Websites, Daten darüber zu sammeln, wie Besucher mit Websites, Produkten und Diensten interagieren. Außerdem können sie Nutzereinstellungen auf einer Website speichern. Mit dem Akzeptieren von Cookies stimmen Sie zu, dass ein Unternehmen diese Werkzeuge für Werbung und Analyse einsetzt. Sie fragen sich, was ein Cookie-Banner mit Ihren Zahlen macht? Unsere Erfahrungen haben wir in unserem Beitrag zum Cookie-Consent-Dilemma geteilt.
Parallax-Scrolling
Eine Technik, bei der der Hintergrund eines Website-Layouts so gestaltet wird, dass er sich beim Scrollen langsamer bewegt als der Vordergrund. Das erzeugt einen 3D-artigen Effekt.
Favicon
Kurz für „Favorite Icon“: das Symbol, das im Browser-Tab Ihrer Website erscheint.
CSS
Stellen Sie sich HTML (Hypertext Markup Language) als Skelett und Rückgrat vor und CSS als das Aussehen. CSS, kurz für Cascading Style Sheets, ist die verbreitetste Methode, Look and Feel einer Website festzulegen. Während HTML dem Browser sagt, was auf die Seite kommt, sagt CSS ihm, wie es dargestellt werden soll, zum Beispiel Farben, Schriften, Layout und mehr.
SEO
SEO, oder Suchmaschinenoptimierung, meint im Allgemeinen die gesamte Praxis aus On-Site- und Off-Site-Maßnahmen, die zu einem besseren oder zielgerichteteren Ranking auf einer Google-Ergebnisseite oder der der meisten anderen Suchmaschinen führen.
Barrierefreiheit
Bezeichnet die Praxis, sicherzustellen, dass Ihre Website von allen Menschen mit allen Fähigkeiten und Einschränkungen genutzt und aufgerufen werden kann.
Alt-Text
Der Alt-Text ist der geschriebene Text, der anstelle eines Bildes auf einer Webseite erscheint, wenn das Bild auf dem Bildschirm der Nutzerin oder des Nutzers nicht geladen werden kann. Er wird außerdem von Screenreadern Menschen vorgelesen, die das Bild nicht sehen können, und hilft Suchmaschinen zu verstehen, was das Bild zeigt.
FAQ
Was sind die häufigsten Webdesign-Begriffe?
Am häufigsten werden wir nach Responsive Design, UI- und UX-Design, Wireframes, CMS, SSL, SEO, Alt-Text und Barrierefreiheit gefragt, und jeder dieser Begriffe ist oben erklärt. Kurz gesagt: Responsive Design beschreibt, wie sich eine Website an unterschiedliche Bildschirmgrößen anpasst, ein Wireframe ist das nackte Layout vor Schriften, Farben und Bildern, ein CMS lässt Sie Ihre Inhalte ohne Entwickler selbst bearbeiten, und SEO ist alles, was Sie tun, um in den Suchergebnissen weiter oben zu landen.
Was ist der Unterschied zwischen UI- und UX-Design?
UI-Design ist das Look and Feel der Bildschirme und Berührungspunkte, etwa Buttons, Scrollleisten und Wischgesten. UX-Design dagegen beschreibt, wie reibungslos und benutzerfreundlich das gesamte Erlebnis ist, während sich jemand durch Ihre Website oder App bewegt. UI ist das, was Menschen anfassen, UX ist, wie sich die Nutzung anfühlt.
Was ist der Unterschied zwischen responsivem und adaptivem Design?
Responsives Design ist fließend: Es ordnet jedes Gestaltungselement so an, dass es auf den jeweiligen Bildschirm passt. Adaptives Design nutzt mehrere feste Layouts und wählt das, das zur Bildschirmgröße der Nutzer passt. Bei Milk Moon setzen wir eher auf responsiv, mischen aber manchmal ein adaptives Element bei, wenn ein Abschnitt auf dem Smartphone einfach nicht funktioniert.
