Technisches Wissen ist für Webdesigner unabdingbar, und auch Webentwickler kommen heute nicht mehr ohne Kenntnisse zu den Grundsätzen des Webdesigns aus. Deshalb vereint diese Seite Tipps für Webdesigner und für Webentwickler – wir sind zuversichtlich, dass auch für Sie als gestandener Webprofi noch die eine oder andere interessante Info dabei ist. 

Was ist Webdesign? 

Gemeinhin wird mit „Webdesign“ die Gestaltung von Webseiten bezeichnet, von der funktionalen Konzeption über die Strukturierung der Benutzerinteraktionen bis hin zur visuellen Gestaltung einer Seite bzw. eines Webauftritts. In diesem Verständnis ist Webdesign eine Teildisziplin des Grafikdesigns. Die technische Umsetzung des Webdesign-Resultats wird dagegen meist nicht dazu gezählt; die fällt in den Bereich der Webentwicklung oder -programmierung. 

Webdesigner sind die Kreativen, Webentwickler die Techies – diese Unterscheidung prägt viele Online-Agenturen. Und tatsächlich erfordern die beiden Bereiche der Website-Erstellung unterschiedliche Talente, Methoden und Werkzeuge. Dennoch hängen sie eng zusammen. Die für den Erfolg einer modernen Website wichtigsten Faktoren besitzen in der Regel sowohl technische als auch Design-Aspekte – das gilt z. B für: 

  • Funktionalität 
  • Responsive Design 
  • Performance  
  • Usability und Barrierefreiheit 
  • Conversion-Optimierung  
  • SEO
  • Security 

Statische oder dynamisch erzeugte Webseiten?  

Seit dem Siegeszug der Web-Content-Management-Systeme (CMS) werden die meisten Webseiten dynamisch erzeugt, das heißt erst bei ihrem Aufruf generiert. Damit können – anders als bei statischen Seiten auf dem Webserver – Benutzerkontexte ausgewertet oder häufig aktualisierte Informationen angezeigt werden; vor allem aber ermöglicht das die sehr komfortable Erstellung und Aktualisierung von Webseiten auch ohne Programmierkenntnisse. 

Allerdings benötigt die dynamische Generierung Zeit und Rechenressourcen, und dynamische Webanwendungen enthalten immer wieder Sicherheitslücken. Hier punkten „statische“ HTML-Seiten, die nicht erst generiert werden müssen: Sie laden schneller und zuverlässiger, sind sicherer und können dank JavaScript ebenfalls dynamische und interaktive Funktionen bieten.  

Sogenannte „Static-Site-Generatoren“ (SSG) erleichtern die Erstellung statischer Seiten, indem sie diesen Prozess hochgradig automatisieren. Sie verarbeiten Text-Dateien und Vorlagen (Templates), generieren daraus HTML- und CSS-Dateien und laden sie auf Wunsch auf den Webserver hoch. Das erste Programm dieser Art, Jekyll (geschrieben in Ruby und 2008 veröffentlicht), ist bis heute einer der beliebtesten SSGs und steckt unter anderem unter der Haube von GitHubs Hosting-Angebot GitHub Pages. Inzwischen gibt es mehrere Hundert SSGs, darunter Gatsby (JavaScript) und Hugo (Go), sowie „Meta-Frameworks“ mit SSG-Fähigkeiten wie Next.js (für das Frontend-Framework React) und Nuxt (für Vue.JS).  

SSGs sind bewusst minimalistisch, werden in der Regel auf der Kommandozeile bedient und bieten kaum Funktionen für die Inhalte-Verwaltung. Diese werden über Erweiterungen nachgerüstet, beispielsweise „Jekyll Admin“ oder Hokus für Hugo. Alternativ lassen sich viele SSGs mit Headless-CMS-Systemen wie NetlifyCMS und Forestry koppeln. 

Mehr Infos zum Thema Webdesign: 

Weiterführende Tipps, wie Sie eine dynamische Webseite erstellen:

Responsives Webdesign und Performance  

Ein Thema, das beispielhaft technische und Design-Aspekte vereint, ist die Beziehung von Design und Performance. Da mittlerweile zwar Smartphones beim Surfen die Nase vorn haben (84 %), aber die Internetnutzer trotzdem weiterhin auch Notebooks (69 %), Desktop-PCs (52 %), Tablets (45 %) und zunehmend sogar Smart-TVs (43 %) verwenden (Quelle: Postbank Digitalstudie 2022), ist responsives Webdesign wichtiger denn je. Es stellt sicher, dass sich das Layout einer Seite dem jeweiligen Anzeigegerät optimal anpasst, um sie jedem Besucher möglichst benutzerfreundlich zu präsentieren. 

Was dabei manchmal vergessen wird: Die Benutzererfahrung wird mindestens ebenso stark von der Performance einer Seite bestimmt wie von ihrem Layout. Die 2010 vom Erfinder des Begriffs „Responsive Web Design“, Ethan Marcotte, beschriebenen Techniken sind allesamt clientseitige Methoden, die unabhängig vom Gerät die gleichen Daten – zum Beispiel Bilddaten – vom Server anfordern, diese aber dann an das jeweilige Display anpassen. Im Ergebnis laden Smartphones unnötigerweise die hochaufgelösten Bilder, die für Desktopanzeigen gebraucht werden. Die Statistik von httparchive.org zeigt, dass pro Website die durchschnittliche Größe der übertragenen Bilddaten auf Mobilgeräten mit 894 kB nur unwesentlich geringer ist als auf Desktops (961 kB) – aber in den letzten 10 Jahren um 500 Prozent gestiegen ist (gegenüber 166 % bei Desktops). Ob das damit zusammenhängt, dass responsives Design die Erstellung dedizierter Mobil-Websites verdrängt? 

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten

Wie dem auch sei: Für die Performance einer Website ist ihre Größe sehr wichtig (gerade bei Mobilfunkverbindungen), und Bilder haben daran einen großen Anteil (im Durchschnitt knapp die Hälfte). Um die Anforderungen von Darstellungen und Performance unter einen Hut zu bringen, stehen Designern und Entwicklern diverse Möglichkeiten zur Verfügung, z. B.  

  • Verwendung geeigneter Bildformate, insbesondere gut skalierender Vektorformate (wie SVG) und effizient komprimierbarer Formate (wie WebP) 
  • Weboptimierte Bildkomprimierung mittels geeigneter Tools 
  • Verwendung verschiedener Bildgrößen mittels der <img>-Attribute scrset, sizes sowie <picture> aus HTML5 

Natürlich gibt es zum Thema Responsives Webdesign noch einiges mehr zu sagen. Vor allem mit guten responsiven Templates bzw. Themes für das CMS ihrer Wahl können Webdesigner sich viel Arbeit ersparen. Werfen Sie doch mal einen Blick auf die folgenden Tipps und den nächsten Abschnitt! 

Mehr Infos zum Thema Responsive Webdesign:  

Barrierefreies Webdesign (Accessibility)  

Barrierefreiheit gehört zu den Bereichen, deren Notwendigkeit zwar jeder einsieht, die aber in der täglichen Praxis von Webdesignern und Webentwicklern nur allzu oft auf der Strecke bleiben. Gerade komplexe dynamische Webanwendungen sind nicht für alle Personen gleichermaßen leicht verwendbar.  

Doch es ist auch im Interesse jedes Website-Betreibers selbst, dass Menschen mit Einschränkungen beim Sehen, Hören, Bewegen oder beim Verarbeiten von Informationen ihre Seiten gut nutzen können. Denn auch dies trägt letztlich zu mehr Reichweite, mehr Kunden und einer höheren Kundenzufriedenheit bei. Das beginnt bei der Nutzung leicht verständlicher Sprache und der Verwendung barrierefreier Formate (zum Beispiel bei Videos) und hört bei kontrastreicher Schriftgestaltung, mitgelieferten Bildbeschreibungen und ausreichend großen Schaltflächen längst nicht auf. 

Barrierefreie Webseiten unterstützen Hilfstechnologien wie die Bildschirmsprachausgabe mit semantischen Informationen über die Benutzeroberfläche. Konkrete Hinweise und Vorgaben dazu finden sich in der – für öffentliche Stellen verbindlichen – Barrierefreie-Informationstechnik-Verordnung (BITV) und den Web Content Accessibility Guidelines der Web Accessibility Initiative (WAI) des W3C. Bei der Umsetzung hilft insbesondere das Framework WAI-ARIA, die Accessible Rich Internet Applications Suite, mit semantischen Attributen für HTML und anderen Markup-Content. Viele UI-Bibliotheken unterstützen mittlerweile ARIA und barrierefreie Technologien (eine umfangreiche Liste finden Sie hier). 

Weitere Infos zum barrierefreies Webdesign:  

Wie lässt sich die Arbeit des Webdesigners vereinfachen? 

Um effizienter, schneller und besser zu arbeiten, können Webdesigner auf eine Vielzahl von Tools zurückgreifen – so viele, dass man schon mal den Überblick verlieren kann. Capterra listet unter der Kategorie „Webdesign Software“ knapp 570 Produkte auf – darunter Design-Tools, Templates, Website-Builder (für CMS, Blogsoftware oder Landing-Page-Tools gibt es eigene Kategorien). Trotzdem werden Sie sich in dieser Fülle gut zurechtfinden, weil die Capterra-Ergebnisse sich komfortabel nach Sprache, Land, Funktionen oder Einsatzplattform filtern lassen. 

Templates 

Besonders schnell gelangen Webdesigner zu Ergebnissen, wenn sie vorhandene Vorlagen als Basis nutzen. Solche Vorlagen, Templates oder auch „Themes“ gibt es für viele wichtige Content-Management-Systeme, Static-Site-Generatoren und auch Shopsysteme (siehe die Links über und unter diesem Abschnitt). Sie finden Templates (oder entsprechende Links) meist auf Projektseiten der Systeme (z. B. WordPress, Drupal), auf systemunabhängigen Entwicklerseiten wie GitHub oder jamstackthemes.dev, speziellen Community-Seiten (z. B. jekyllthemes.org), bei kommerziellen Anbietern und natürlich über die Suchmaschine Ihrer Wahl. Manche Templates dürfen kostenfrei verwendet und modifiziert werden, andere sind geschützt bzw. kostenpflichtig. 

Wussten Sie, dass Sie bei der Bestellung eines WordPress-Hosting-Produkts von Host Europe eine Vielzahl branchenspezifischer Designvorlagen und Plugins kostenlos inklusive erhalten. Erfahren Sie mehr über WordPress-Hosting mit automatischer SSL-Absicherung Ihrer Webseite. 

Auch selbst erstellte Templates können die Arbeit in künftigen Projekten erleichtern. So stellen Sie sicher, das Rad nicht immer neu erfinden zu müssen. Sie können aber auf diese Weise auch bestimmte Design-Elemente standardisieren, etwa CD-Elemente für einen Kunden. Templates können so zum Bestandteil eines Design-Systems werden – mehr darüber im nächsten Abschnitt. 

Mehr Infos zum Thema Templates:

Design-Systeme  

Design-Systeme sind gewissermaßen die digitale Weiterentwicklung von Design-Manualen oder Style Guides. Bei beiden geht es um verbindliche Regeln, Prinzipien und Einschränkungen für die Designentwicklung, etwa im Rahmen des Corporate Designs eines Unternehmens. Aber wie so häufig in der Software-Branche entwickelte sich daraus schnell mehr – nämlich ein Werkzeug für die agile Entwicklung.  

Denn neben allgemeinen Rahmen-Vorgaben für Design-Elemente (Branding, Farben, Tonalität, Typografie, Animationen, Datenvisualisierung) beinhalten Design-Systeme auch wiederverwendbare UI-Komponenten (Code, Styles, Beispiele). Diese Elemente können in verschiedenen Websites (Unternehmensseite, Landingpages, Blog, Microsites), anderen Medien (z. B. E-Mails) und anderen Softwareprodukten (z. B. verschiedenen Apps) zum Einsatz kommen. Das spart Arbeit, beschleunigt Entwicklungsprojekte und vereinfacht die Zusammenarbeit zwischen Entwickler- und Designer-Teams. Der modulare Aufbau erleichtert es, über kleine und große Projekte oder Teams zu skalieren. Vor allem aber ermöglichen Design-Systeme konsistente Designs und Benutzererlebnisse über das komplette Portfolio eines Unternehmens hinweg.  

Da ganz unterschiedliche Menschen – von Design, Entwicklung und Projektleitung über das Marketing bis hin zu Product Owner und Management – mit einem Design-System arbeiten wollen, ist es sinnvoll, für seine Erstellung und ständige Weiterentwicklung ein geeignetes Kollaborationswerkzeug zu benutzen, zum Beispiel InVision Design System Manager, UXPin oder Frontify. 

Übrigens: Viele Organisationen machen Infos und Ressourcen zu ihren Design-Systemen öffentlich zugänglich, darunter Adobe (Spectrum), Audi oder Shopify (Polaris). IBM stellt sein Carbon Design System als Open Source zur Verfügung, ebenso wie GitHub sein System Primer. 

Mehr Infos zu Design-Systemen:

Prototyping und User Experience 

Auch beim Webdesign geht es letztlich um ein überzeugendes Benutzererlebnis (User Experience) – in der einschlägigen Norm DIN ISO 9241-210 „Menschzentrierte Gestaltung interaktiver Systeme“ definiert als die Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder der erwarteten Benutzung eines Produkts, eines Systems oder einer Dienstleistung resultieren. Dazu gehören insbesondere kognitive, emotionale und Verhaltensreaktionen. Das Nutzererlebnis ist auch, aber nicht nur von der Gebrauchstauglichkeit des Angebots (Usability) abhängig, also der Frage, ob und wie die Anwender damit ihre Ziele erreichen können.  

Was aber können Designer tun, um die User Experience zu optimieren? Die Antwort auf diese Frage wird leichter, wenn sie die intendierten Benutzer von vornherein in den Design-Prozess einbeziehen – genau das fordert auch die genannte Norm. Eines der wichtigsten Mittel dafür ist das Prototyping.  

Prototypen eines Designs sind Repräsentationen des entstehenden interaktiven Systems, die das Design im Ganzen oder Teile davon unmittelbar erfahrbar machen, von Skizzen über statische Mock-ups bis hin zu funktionsfähigen Systemen mit immer mehr Funktionalität. Auch für die Erstellung von Prototypen gibt es natürlich zahlreiche Werkzeuge, die den UI- und UX-Designern die Arbeit erleichtern wollen. Beispiele sind Flinto, Principle und das kostenlose Origami Studio (von Facebook) für den Mac oder die cloudbasierten SaaS-Angebote Framer, Atomic oder Marvel. 

Das Angebot ist groß, und nicht jedes Tool passt für jeden Workflow. Tipps für Ihre Auswahl finden Sie in den nachfolgenden Links. 

Weitere Infos zum Thema Prototyping:

Farbtools für den Browser 

Farben im Webdesign sind eine Sache für sich. Designer verwenden viel Zeit und Mühe für die Suche nach der richtigen Farbnuance und diskutieren darüber nicht selten stundenlang mit ihren Kunden. Diesen müssen sie vermitteln, dass Farben auf Bildschirmen anders aussehen als auf Papierausdrucken und der Farbeindruck auch zwischen verschiedenen Geräten stark variieren kann. 

Zudem gehen Browser mit Farben anders um als Layout- oder Bildbearbeitungsprogramme. Immerhin unterstützen mittlerweile die wichtigsten Browser auch Farbprofile. So kann es sinnvoll sein, schon bei der Farbauswahl ein browserbasiertes Werkzeug zu nutzen. Mehr Infos finden Sie hier: 15 Farbtools für Webdesign, die Sie ausprobieren sollten   

GitHub – auch für Webdesigner interessant 

GitHub bezeichnet sich selbst als die größte Entwicklungsplattform der Welt. Das ist keine Übertreibung: Mehr als 83 Millionen Entwickler und 4 Millionen Organisationen (darunter 90 Prozent der Fortune-100-Unternehmen) entwickeln, pflegen und vertreiben ihre Software in über 200 Millionen GitHub-Repositories (Stand Juni 2022). GitHub basiert auf der zentralen Code-Versionsverwaltung Git, die von Linux-Erfinder Linus Torvalds 2005 ins Leben gerufen wurde. Seit 2018 gehört GitHub Inc. zu Microsoft. 

Auch für Webdesigner bietet GitHub interessante Möglichkeiten; davon zeugen die aktuell rund 900 Repositories zum Topic „web-design“. Offensichtlich ist der Nutzen einer Versionsverwaltung wie Git für Team-Projekte. Aber auch Einzelkämpfer profitieren beispielsweise durch mehr Struktur und Sicherheit – niemand verliert mehr im Abstimmungsprozess die Übersicht über Dutzende „finaler“ Versionen, und dank Backups verlieren auch Datenverluste ihren Schrecken.  

Weitere Infos zu GitHub:  

Wie lässt sich die Arbeit des Webentwicklers vereinfachen? 

Frameworks und Bibliotheken 

Am einfachsten ist natürlich immer die Arbeit, die schon jemand anderes erledigt hat. Im Programmierumfeld steckt diese Arbeit in Code-Bibliotheken und Frameworks. Bibliotheken sind Sammlungen verschiedener Funktionen, die Entwickler bei Bedarf aufrufen können, während Frameworks schon das Grundgerüst einer Anwendung liefern und auch Werkzeuge für verschiedene Aufgaben mitbringen. JavaScript-Bibliotheken wie jQuery, Umbrella JS, Cash oder zepto.js bieten Funktionen zur DOM-Navigation und Manipulation. Unter Tausenden anderer Bibliotheken finden Entwickler und Designer jede Menge Anregungen, von der UI-Gestaltung (jQuery UI, React), Animationen (Anime.js) und 3D-Design (Three.js) über Datenbankmanagement (TaffyDB) und Datenvisualisierungen (Chart.js, D3.js) bis zu interaktiven Landkarten oder Stadtplänen mit Touren (Leaflet).  

JavaScript-Frameworks wie Angular oder Vue.JS helfen Frontend-Entwicklern bei der Entwicklung von Single-Page-Anwendungen (oder Teilen von Multi-Page-Anwendungen). Und auch für die Backend-Entwicklung stehen hilfreiche Frameworks bereit, etwa Laravel (PHP), ASP.NET/ASP.NET Core, Ruby on Rails, Django (Python), Spring (Java) oder Express für die serverseitige JavaScript-Laufzeitumgebung Node.js. 

Auch bei der CSS-Entwicklung können Frameworks helfen, zum Beispiel Bootstrap, Foundation oder YAML (Yet Another Multicolumn Layout, nicht zu verwechseln mit der gleichnamigen Markup-Sprache). 

Mehr Infos zu Frameworks und Bibliotheken:  

Nützliche Tools 

Vom WordPress-Plugin über Docker bis zu Continuous Integration: Natürlich gibt es auch für Entwickler jede Menge hilfreiche Tools, die wir an dieser Stelle nicht einmal ansatzweise würdigen können. Deshalb haben wir Ihnen auch dazu eine kleine Auswahl mit weiterführenden Infos zusammengestellt. 

Weitere Infos zu nützlichen Tools: 

Hosting-Tipps 

Webentwickler haben nicht selten spezielle Anforderungen an das Hosting. Wer seinen Kunden vor allem schnell und günstig eine Website bereitstellen möchte, kann mit einem Shared-Hosting-Paket bereits glücklich werden. Wer allerdings verschiedene Kundenwebsites komfortabel und performant verwalten möchte, sollte lieber zu einem Virtual Server greifen. Noch mehr Leistung erhalten Sie mit Dedicated-Server-Paketen, bei denen Sie leistungsfähige Premium-Hardware ganz für sich allein nutzen können.  

Häufig stehen Server-Admins nützliche Tools wie Plesk oder cPanel zur Verfügung, die gängige Installations- und Verwaltungsaufgaben erleichtern. Falls Sie sich die Serververwaltung lieber sparen möchten, können Sie zu einem Managed Server greifen, bei denen sich der Hosting-Anbieter selbst um die Administration, System- und Sicherheitsupdates kümmert. Das gibt es je nach Anbieter sowohl für Virtual Server als auch für Dedicated Server. 

WordPress-Entwickler können ebenfalls von besonderen Hosting-Angeboten profitieren. Das beginnt bei der besonders einfachen Installation („1-Klick-Installation“) eines lauffähigen WordPress-Systems und reicht bis zu optimierten Managed-WordPress-Hostingangeboten inkl. kostenlosen Themes, Premium-Plugins, automatischen Updates, Backups und Security-Features. 

Gerade bei aufwendigeren Webanwendungen mit häufigen Updates ist es von Vorteil, den Kunden Gelegenheit zum Testen zu geben, bevor die Änderungen produktiv gehen. Denn dann können die betroffenen Mitarbeiter entspannt die neuen Funktionen ausprobieren, ohne Angst haben zu müssen, etwas zu zerschießen. Aber natürlich wollen Sie die Kunden nicht an Ihre Entwicklungsumgebung lassen – eine Staging-Umgebung muss her. Je nach Hosting-Angebot kann das mehr oder weniger aufwendig sein (bei Host Europe‘s Managed WordPress Pro reicht ein Klick). 

Mehr Infos zum Thema:

SEO-Tipps  

Die Entwicklung und Pflege von Websites ist kein Selbstzweck: Websitebetreiber wollen konkrete Ziele erreichen. Voraussetzung dafür ist es, dass die eigenen Seiten von den richtigen Personen – der Zielgruppe – gefunden werden. Suchmaschinenoptimierung (SEO) ist daher für eine erfolgreiche Website unabdingbar. 

Suchmaschinenoptimierung beginnt mit einer Festlegung der erwähnten Ziele und einer Analyse des Wettbewerbs. Dann folgt die Keyword-Analyse: Welche Suchphrasen nutzt meine Zielgruppe (wahrscheinlich) und mit welcher Suchintention? Auf welche Keywords sind die Seiten der Wettbewerber optimiert? Wie stehen die Chancen, mit relevanten Keywords ganz oben zu ranken, und welche alternativen Keywords eignen sich vielleicht besser?  

Die Suchmaschinenoptimierung selbst betrifft eine Vielzahl von Aspekten; eine Begleitung durch SEO-Experten ist daher unbedingt zu empfehlen. Auf einige Kriterien, beispielsweise Backlinks von relevanten und vertrauenswürdigen externen Seiten, haben Designer und Entwickler keinen Einfluss. Sie haben aber Einfluss auf eines der wichtigsten Kriterien: eine optimale User Experience. 

Suchmaschinen wollen ihren Besuchern die Seiten präsentieren, die ihren Suchintentionen am besten entsprechen. Diese versuchen sie aus der Suchphrase sowie weiteren Informationen über die Anfragenden (z. B. Standort) abzuleiten. Für die Zielgruppe von Unternehmenswebseiten sind das insbesondere der Wunsch nach Informationen („Know“-Anfragen wie „laufschuhe für anfänger“) oder bestimmten Handlungen („Do“-Anfragen wie „laufschuhe kaufen“). Durch die Analyse von Webseiteninhalten versuchen die Suchmaschinen festzustellen, wie gut diese konkreten Suchintentionen entsprechen (inhaltliche Relevanz). Gleichzeitig zieht beispielsweise Google für die Relevanzbewertung auch messbare Kriterien für die User Experience heran, darunter Absprungrate, Verweildauer, Interaktionen mit einer Seite oder auch die Ladegeschwindigkeit (Page Speed).  

Die folgenden Maßnahmen sind generell geeignet, die User Experience und das Ranking Ihrer Seiten zu verbessern:  

  1. Inhalte auf die vermuteten Interessen der Zielgruppe optimieren  
  2. Performance (Page Speed, Verfügbarkeit) optimieren 
  3. Keyword-Analyse und -Optimierung 
  4. Technische Optimierung, z. B.: Mobilfreundlichkeit, SSL-Verschlüsselung, interne Verlinkung und Sitemap, Links auf externe Seiten mit hoher Reputation, Keywords in Headlines und Permalinks, Nutzung von Weiterleitungen per .htaccess-Datei, Vermeiden von Broken Links.  
  5. Auf gute Strukturierung (Überschriften), Navigation und Lesbarkeit achten 
  6. SEO-Ergebnisse optimieren, z. B. durch gute Meta-Tags (Title, Description) und strukturierte Daten 

Tipp: Für viele CMS gibt es SEO-Tools und Erweiterungen, die bei der Optimierung helfen.  

Mehr Infos zum Thema SEO: 

Conversion-Optimierung: Call to Action (CTA) 

Dank erfolgreicher Suchmaschinenoptimierung wächst Ihr Traffic – jetzt müssen Sie es nur noch schaffen, die Besucher in Ihrem Sinne zu lenken. Weisen Sie also Ihren Seiten klare Ziele zu, die zur Customer Journey Ihrer Besucher passen. Eine allgemeine Informationsseite für die Awareness-Phase soll beispielsweise Besucher auf Ihrer Website halten und ihre Aufmerksamkeit auf Ihre Lösungen lenken, um in der Consideration-Phase präsent zu sein. Eine Landingpage für die Leadgenerierung soll dagegen erreichen, dass die Besucher ein Angebot wahrnehmen (zum Beispiel ein Whitepaper herunterladen) und dafür ihre Kontaktdaten hinterlassen. Eine Produktseite soll zum Klick auf „In den Warenkorb“ animieren und die Warenkorbseite zum „Jetzt kaufen“. Erreicht eine Seite ihr Ziel, ist das eine zählbare „Conversion“, die Sie messen und optimieren können. 

Um Ihre Besucher entsprechend zu lenken, sollten Sie ihnen klar kommunizieren, was sie möglichst tun sollten. Das geschieht durch einen transparenten Seitenaufbau mit Blickfang-Elementen, aussagekräftigen Überschriften, sofort erkennbarem Nutzen und einer expliziten Handlungsaufforderung (Call to Action, CTA). 

Für gute CTAs gelten folgende Regeln: 

  1. Sofort als klickbar erkennbarer Button 
  2. Unmissverständliche Aufforderung mit aktiven Verben: besser „Jetzt informieren“ als „Mehr Informationen“ 
  3. Weitere Gründe für die Aktion mitliefern, z. B. Dringlichkeit oder eine Belohnung: „Jetzt mit Rabatt bestellen“, „Whitepaper kostenlos herunterladen“  
  4. Auffällige Gestaltung und Platzierung: mit kontrastierenden Farben, in der Nähe von Blickfang-Elementen (zum Beispiel Fotos von Menschen, die in Richtung CTA blicken) und auf jeden Fall „above the fold“, also im sofort sichtbaren Bereich 
  5. Standard-CTAs wie „Rufen Sie uns an!“ oder bei Restaurants „Tisch reservieren“ prominent auf jeder Seite platzieren, zum Beispiel in der Navigation 
  6. Verschiedene CTAs auf einer Seite können sich gegenseitig Konkurrenz machen; Vorsicht walten lassen! 
  7. Effektivität per A/B-Tests messen – denn Regeln und Realität sind verschiedene Dinge. 

Mehr Infos zum Thema Conversion-Optimierung 

Security-Tipps  

Der Schutz von Webseiten gegen Hackerangriffe gehört zu den wichtigsten Herausforderungen für jeden Website-Betreiber. Denn Websites sind besonders lohnende Ziele für Kriminelle: Ist ein Hacking-Versuch erfolgreich, können sie beispielsweise den Webserver als Viren- und Spamschleuder oder für Phishing-Angriffe missbrauchen, sensible Kundendaten abgreifen oder auch einfach die Website nach Gutdünken verändern (Defacement).  

Wer seine Website gegen Cyber-Gefahren absichern möchte, sollte wissen, dass sich Hacker ihre Opfer meist nicht gezielt aussuchen, sondern einfach mit automatisierten Skripten (Bad Bots) nach bekannten Schwachstellen (insbesondere Sicherheitslücken von CMS und Server sowie Konfigurationsfehler) suchen. Deshalb sollten Sie insbesondere die folgenden Regeln beachten: 

  • Halten Sie Ihre Installation stets auf dem neuesten Stand, insbesondere das CMS. 
  • Verwenden Sie für Ihre Admin-Zugänge ausschließlich starke Passwörter und am besten Multi-Faktor-Authentisierung. 
  • Nutzen Sie die Möglichkeiten der Rechteverwaltung Ihres CMS aus und vergeben Sie nur die Rechte, die ein Nutzer wirklich benötigt. 
  • Schützen Sie Ihre Website vor böswilligen Benutzereingaben: Captchas für Formulare, Input-Validierung 
  • Prüfen Sie regelmäßig auf Anzeichen für Kompromittierungen und Malware-Befall – denn Hacker versuchen, möglichst lange unbemerkt zu bleiben.  
  • Keep it simple: Lassen Sie bei der Einbindung von externen Ressourcen wie Frameworks oder Bibliotheken Vorsicht walten, um nicht unnötig die Angriffsfläche Ihrer Website zu vergrößern. 

Tipp: Eine Website-Security-Lösung mit Web Application Firewall (WAF) und Content Delivery Network blockiert Angriffe, noch bevor sie Ihren Webserver erreichen. Sucuri Website Security schützt beispielsweise vor Malware, DDoS-Angriffen, Brute-Force-Attacken, SQL Injection oder Cross Site Scripting und sogar vor Zero-Day-Attacken. 

Mehr Infos zum Thema Security:

Rechtssicherheit 

Vor Inkrafttreten der DSGVO 2018 verbanden viele Website-Betreiber mit „rechtssicherer Website“ vor allem ein korrektes Impressum und einen Disclaimer, also einen pauschalen Haftungsausschluss für Inhalte externer Links. Bei diesem bezog man sich dann gern auf das Urteil 312 O 85/98 des Landgerichts Hamburg – obwohl es dort um Links ging, die bewusst wegen ihrer ehrverletzenden Inhalte gesetzt worden waren, und das Landgericht klarstellt, dass dies nicht durch eine „Haftungsfreizeichnungsklausel“ gerechtfertigt werden kann. 

Statt juristisch fragwürdiger pauschaler Disclaimer, die im Einzelfall sogar schädlich sein können, sollten Sie Links auf potenziell rechtsverletzende externe Inhalte möglichst vermeiden, die verlinkten Seiten regelmäßig auf solche überprüfen und bei entsprechenden Hinweisen die Links löschen. Aber vor allem haften Sie uneingeschränkt für rechtsverletzende Beiträge Dritter auf Ihrer eigenen Website, etwa auf Kommentarseiten oder Foren bzw. Community-Seiten. 

Ein korrektes Impressum ist für jede Website Pflicht, die geschäftlichen Zwecken dient. Die dafür mindestens notwendigen Angaben regelt § 5 Telemediengesetz. Dazu gehören u. a. Name und Anschrift inkl. Sitzland, Angaben für eine „schnelle elektronische Kontaktaufnahme und unmittelbare Kommunikation“ sowie ggf. Informationen zu zuständigen Regulierungs- und Aufsichtsbehörden, Registereinträgen (Handelsregister, Vereinsregister etc.), Umsatzsteuer-ID, Kammerzugehörigkeit oder gesetzliche Berufsbezeichnungen. Bei der Erstellung des Impressums helfen Webdienste wie E-Recht24 oder Hensche (mit vielen Infos).  

Bei der Abfassung einer korrekten Datenschutzerklärung hilft wieder das Netz, zum Beispiel der Datenschutz-Generator. Die Datenschutzerklärung informiert Besucher darüber, in welchem Umfang und zu welchen Zwecken personenbezogene Daten erhoben und verarbeitet werden, und weist auch auf Widerrufs- und Auskunftsmöglichkeiten hin. Dabei muss auch die Datenverarbeitung durch Dienstleister aufgeführt werden, zum Beispiel Social-Media-Anbieter oder Google Analytics. Deshalb sollten Sie möglichst wenig Funktionen mithilfe externer Server realisieren – denn bereits IP-Adressen können als „personenbeziehbar“ gelten. Wenn Sie also beispielsweise Google Fonts nutzen, hosten Sie diese besser auf dem eigenen Server. 

Shop-Betreiber müssen auch darauf achten, die entsprechenden verbraucher- und steuerrechtlichen Vorgaben zu erfüllen (Angabe von Nettopreisen, notwendige Angaben in Produktdarstellungen, Widerrufserklärung etc.). 

Mehr Infos zum Thema Rechtssicherheit:

Entwicklungen und Trends  

Glaubt man einigen Auguren, befinden wir uns auf dem Weg vom Web 2.0 zu Web3. Web 2.0 ist mittlerweile wesentlich das Web der Plattformen und damit der großen Plattformbetreiber. Dank neuer Technologien, insbesondere der Blockchain, soll das Internet mit Web3 sein ursprüngliches Versprechen von Dezentralität einlösen. Wie viel davon Wunschdenken ist, wird sich zeigen – konzentrieren wir uns in der Zwischenzeit auf vorhandene Technologien mit Zukunft. 

Sicher ist, dass künstliche Intelligenz und Maschinenlernen zunehmend Einfluss auf die Webentwicklung nehmen werden, insbesondere auf dem Gebiet des Natural Language Processing (NLP). „Intelligente“ Chatbots und Assistenzsysteme sind nur der Anfang. Zunehmend wichtig wird beispielsweise auch die Unterstützung von Sprachsuche-Funktionen (Voice Search); wegen der wachsenden Zahl an Sprachsuchen bei Google & Co. wird deren Unterstützung zunehmend auch zum Ranking-Faktor. 

Spannend ist auch die Entwicklung bei Virtual Reality (VR) und Augmented Reality (AR), gern als XR zusammengefasst. Webdesigner und Webentwickler können hier bald auf die standardisierte WebXR Device API zurückgreifen, um XR-Daten zu verarbeiten und im Browser darzustellen. Edge, Chrome und Opera (auch auf Android) unterstützen WebXR bereits zu großen Teilen, ebenso Samsung Internet. Und Google hat im letzten Jahr auf seiner Technology-Showcasing-Plattform „Experiments with Google“ eine Sammlung von „WebXR Experiments“ veröffentlicht. 

Wer bisher eine mobiloptimierte Website und native Apps parallel gepflegt hat, wird sich über den Trend zu Progressive Web Apps (PWA) freuen. Denn die kombinieren die Vorteile von Websites (geräteunabhängig, stets auf dem neuesten Stand, über Suchmaschinen auffindbar, Transportverschlüsselung) mit denen von Apps (app-artiges Nutzererlebnis, Offlinebetrieb, Push-Benachrichtigungen, installierbar etc.) und beenden zudem die Abhängigkeit von den App-Store-Anbietern. Das gelingt mit HTML5, CSS3 und JavaScript, der Nutzung von Browser-Web-APIs und lokal installiertem Service Worker für die Offline-Funktionalität. 

Unser letzter Trend für heute: Verteilte Systemarchitekturen nehmen auch bei Webanwendungen Fahrt auf. Dank moderner API-Technologien wie REST, SOAP und RPC entstehen anstelle von Software-Monolithen modulare Anwendungen mit Microservice-Architektur. Schlanke, autonom agierende Services in Containern ermöglichen die agile und flexible Entwicklung, Bereitstellung und Skalierung komplexer Anwendungen – auf Wunsch ergänzt durch eine moderne SPA als Microfrontend. Mehr Informationen zu den genannten Konzepten finden Sie unter den folgenden Links. 

Mehr Infos zum Thema Entwicklungen und Trends: 

 

Titelmotiv: Unsplash

Host Europe
Letzte Artikel von Host Europe (Alle anzeigen)

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten