Die Herausforderung: Sichere Passwörter im digitalen Alltag

Sie kennen das: Für fast jede Online-Aktivität – ob E-Mail, Online-Banking oder Social Media – wird ein Passwort verlangt.

Viele Menschen nutzen aus Bequemlichkeit immer wieder dasselbe Kennwort. Das ist zwar praktisch, aber auch extrem riskant. Wird ein Konto gehackt, sind schnell alle anderen gefährdet.

Die Lösung: Ein Passwort Generator, der automatisch sichere und zufällige Passwörter erstellt.
So schützen Sie Ihre digitalen Identitäten zuverlässig – ganz ohne Aufwand.

Warum einfache Passwörter keine gute Idee sind

Cyberkriminelle arbeiten mit modernen Methoden, um schwache Passwörter zu knacken. Begriffe wie „Passwort123“ oder „hallo“ sind innerhalb von Sekunden entschlüsselt.
Selbst Begriffe mit persönlichen Bezügen – etwa Name, Geburtsdatum oder Haustier – sind leicht zu erraten.

Ein starkes Passwort sollte:

• mindestens 12 Zeichen lang sein
• Groß- und Kleinbuchstaben enthalten
• Zahlen und Sonderzeichen integrieren
• keine logischen oder persönlichen Begriffe enthalten

Nur so können Sie sicherstellen, dass Ihr Passwort nicht mit gängigen Methoden geknackt werden kann.

Wie ein Passwort Generator funktioniert

Ein Passwort Generator nutzt mathematische Zufallsalgorithmen, um komplexe Zeichenfolgen zu erstellen, die nicht erraten werden können.

Die generierten Passwörter bestehen aus einer Kombination von Buchstaben, Zahlen und Sonderzeichen.

Die besten Tools bieten zusätzliche Optionen, um:

• die Länge des Passworts anzupassen
• bestimmte Zeichentypen ein- oder auszuschließen
• die Passwortstärke in Echtzeit zu überprüfen

So sparen Sie Zeit und erhalten gleichzeitig maximale Sicherheit für Ihre Online-Konten.

Empfehlung: Der kostenlose Passwort Generator von higher5

Wenn Sie sofort ein sicheres Passwort erstellen möchten, lohnt sich ein Blick auf den Passwort Generator von higher5

Das Tool ermöglicht es, mit nur wenigen Klicks individuelle, zufällige und starke Passwörter zu generieren – direkt online, ohne Registrierung oder Datenspeicherung.

Vorteile des higher5 Passwort Generators:

• Kostenlos & anonym nutzbar
• Keine Speicherung Ihrer Eingaben
• Anpassbare Länge & Zeichentypen
• Einfache Bedienung, auch mobil
• Ideal für Unternehmen & Privatpersonen

Ein Klick genügt – und Ihr neues sicheres Passwort ist erstellt.
Hier geht’s direkt zum Passwort Generator von higher5.

Passwortgenerator & Passwort-Manager: Das perfekte Duo

Starke Passwörter sind schwer zu merken – besonders, wenn man für jedes Konto ein anderes nutzt.

Deshalb empfiehlt es sich, zusätzlich einen Passwort-Manager zu verwenden.
Dieser speichert Ihre Passwörter verschlüsselt und schützt sie mit einem einzigen Master-Passwort.

So kombinieren Sie Sicherheit mit Komfort:

• Der Passwort Generator erstellt sichere Passwörter
• Der Passwort-Manager speichert und verwaltet sie sicher

Fazit: Sicherheit beginnt mit einem starken Passwort
Ein Passwortgenerator ist der einfachste Weg, um Ihre Online-Konten effektiv zu schützen.

Er erstellt sichere, zufällige Passwörter, die Hacker nicht erraten können – und das in Sekundenschnelle.

Wenn Sie Wert auf Datenschutz und Benutzerfreundlichkeit legen, testen Sie den Passwort Generator von higher5

Der Beitrag Passwort Generator von higher5 – Sichere Passwörter in Sekunden erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Wir haben ein ganz einfaches Ziel: einen Honeypot für CleverReach Formulare einzurichten. Welche Möglichkeiten bietet CleverReach in diesem Zusammenhang?
Wer mehr über den Spamschutz durch eine Honeypot-Lösung erfahren möchte, findet weiter unten grundlegende Informationen zum Thema Honeypot für CleverReach.

Um das Wichtigste gleich vorwegzunehmen: CleverReach bietet aktuell keine Honeypot-Lösung für seine Newsletter-Anmeldeformulare an. Es ist auch nicht möglich im Kundenaccount im Bereich Formular-Erstellungen ein unsichtbares Feld einzurichten und es mit einer Ausfüll-Logik zu versehen. Also im Sinne von: „wenn etwas in dieses Feld eingetragen wurde, dann soll das Formular nicht abgeschickt werden können.“

Allerdings möchten wir eins gleich vorwegnehmen: Wir haben einen Honeypot für CleverReach Anmeldeformulare realisiert.

Bevor wir uns die Mühe gemacht haben, eine eigene Lösung zu entwickeln, hatten wir jedoch sicherheitshalber beim Kundensupport angefragt, ob es nicht doch eine Möglichkeit gibt, um einen Honeypot in CleverReach zu integrieren. Die Antwort lautete, dass dies „auf der Kundenwunschliste“ stünde. Unserer Erfahrung nach bedeutet das bei vielen Anbietern, dass die Kunden sich zwar für eine bestimmte Aufgabe eine Lösung wünschen. Das bedeutet jedoch nicht unbedingt, dass der Anbieter eine solche Lösung auch umsetzt. Es ist also gut möglich, dass eine Honeypot Lösung für CleverReach Newsletter-Anmeldeformulare vielleicht auch nie angeboten wird.

Denn es gibt ja bereits eine SPAM-Schutzlösung. Und zwar in Form des Google reCAPTCHAS. Ob der Einsatz von Google reCAPTCHA sinnvoll und vor allem rechtssicher ist, damit beschäftigen wir uns weiter unten in diesem Artikel:
» mehr über den Einsatz von Google reCAPTCHA erfahren

Honeypot für CleverReach – worum geht es?

Mit einem Honeypot für CleverReach können Sie den SPAM-Schutz verbessern, ohne dass der Besucher davon überhaupt etwas mitbekommt. Ein verbesserter SPAM-Schutz ist in Ihrem eigenen Interesse.

Denn sichern Sie Ihr CleverReach Newsletter-Anmeldeformular nicht ab, so besteht das Risiko, dass BOTs automatisiert „Newsletteranmeldungen“ vornehmen. Jetzt könnten wir natürlich dahingegen argumentieren, dass das eher das Problem von CleverReach sein dürfte, wenn deren Datenbanken mit nichtexistierenden Newsletter-Anmeldern zugemüllt wird.

Doch so einfach ist das nicht: der Newsletter Versand bei CleverReach ist gebührenpflichtig. Für jeden versendeten Newsletter entstehen Kosten. Um 1.000 E-Mails im Flex-Tarif zu versenden, fallen derzeit einmalig 44,00 € an. Haben Sie 1.000 Newsletterempfänger von denen 750 aus BOT-Einträgen bestehen, so läge die „Verlustquote“ bei 75%. Es fallen also 33,00 € für Newsletterversendungen an, die gar keinen „echten“ Empfänger erreichen. Versenden Sie regelmäßig Newsletter an viele hunderte oder tausende Empfänger in Ihrem Verteiler, so summieren sich die sinnlosen Kosten.

Auf Dauer (oder bei vielen Empfängern) kann der Versand von Newslettern an nichtexistierende Empfänger also sehr teuer werden.

Was ist ein Honeypot?

Die Idee des Honeypots (= Honigtöpfchen) ist ebenso einfach wie genial. BOTs füllen bei einem Formular (z.B. Kontaktformular, Newsletter-Anmeldeformular,…) meist einfach alle Formularfelder aus, die sie finden.

Bei einem Honeypot richten wir ein zusätzliches Formularfeld ein, welches nicht ausgefüllt werden darf. Steht etwas in diesem Formularfeld, so lässt sich das Formular nicht abschicken. Nun verstecken wir das Formularfeld, so dass es für menschliche Besucher nicht sichtbar ist, sie also auch nichts in das Feld eintragen können. BOTs hingegen lesen den Quellcode der Seite aus, finden das Feld und befüllen es mit einem Inhalt.

Auf diesem Wege besteht die Möglichkeit, zwischen einer echten (menschlichen) Formular-Ausfüllung und einer „unechten“ (von einem BOT durchgeführten) Formular-Ausfüllung zu unterscheiden.

Echte Besucher bekommen von der Honeypot-Spamschutzlösung nichts mit. Und müssen auch nicht – wie beispielsweise beim Google reCAPTCHA – irgendwelche „Quizaufgaben“ lösen, die sie nur Zeit und Nerven kosten.

Natürlich bietet auch ein Honeypot keinen 100%igen Schutz, eignet sich aber dafür, einen Großteil der BOT-Anmeldeversuche zu unterbinden und so dazu beizutragen, die Newsletterempfänger-Datenbank „möglichst sauber zu halten“.

Wie lässt sich ein CleverReach Honeypot realisieren?

Da CleverReach seinen Kunden keine Honeypot-Lösung anbietet, haben wir selbst eine Lösung entwickelt. Diese funktioniert unabhängig vom verwendeten CMS-System. Sie müssen dazu selbst HTML-, CSS- und JavaScript-Code in die Website einbinden. Gängige CMS-Systeme wie zum Beispiel WordPress, TYPO3, Joomla oder viele Webshops erlauben die einfache Integration entsprechender Code-Snippets.

Mit unserer Anleitung können Sie Ihr CleverReach-Formular ganz einfach modifizieren und die benötigten zusätzlichen Codes integrieren.

Google reCAPTCHA für CleverReach

Der SPAM-Schutz von Google reCAPTCHA ist recht effektiv, auch wenn BOTs „Dank“ künstlicher Intelligenz (KI) immer häufiger Mittel und Wege finden, den Schutz zu umgehen.

Allerdings sind viele Webseitenbesucher inzwischen genervt, wenn sie – gefühlt – zum 10.000sten Mal ein Bild angezeigt bekommen, bei dem sie alle Ampeln, Hydranten, Fahrräder, Motorräder, Busse, Treppen oder sonstige Dinge auswählen sollten. Und wenn sie auch im fünften Versuch kein Erfolgserlebnis haben, weil unklar ist, ob der Außenspiegel nun noch zum Motorrad gehört und das Feld anzuklicken ist oder nicht.

Wir aber möchten unsere Besucher für unsere Website (oder die unseres Kunden) begeistern, es dem Besucher möglichst einfach machen und ihm nicht zusätzlich Steine in den Weg legen.

Ein weiterer Kritikpunkt bei Google reCAPTCHA ist der Datenschutz

Wann immer technische Lösungen von Drittanbietern in den eigenen Webauftritt oder in eine Kundenwebsite integriert werden, stellt sich heutzutage die Frage, ob die Integration datenschutzkonform ist. Oder ob die Datenschutzgrundverordnung den Einsatz unmöglich macht bzw. die Integration nur im Rahmen zusätzlicher Schutzmaßnahmen möglich ist.

Google reCAPTCHA sammelt eine Reihe von Informationen.
Dazu gehören:
die Website, welche reCAPTCHA einbindet, die Seite von der der Benutzer kommt (= Referrer-URL), die IP-Adresse des Benutzers, Informationen über die Verweildauer auf der Seite, Einstellungen des Endgerätes wie Sprache, Browser und Standort, Bildschirmauflösung, Zeitzone, Mausbewegungen und Tastaturanschläge und nicht zuletzt über installierte Browser-Plugins.

Sie ahnen es schon: die Datensammelwut ist groß und damit auch das Risiko, gegen die DSGVO zu verstoßen. So sieht die DSGVO beispielweise die IP-Adresse des Benutzers bereits als „personenbezogene Daten“ an. Und durch Google reCAPTCHA können solche personenbezogenen Daten aus der EU in ein Drittland übertragen werden, was nur unter bestimmten Voraussetzungen zulässig ist. Zwar ist der Diensteanbieter von reCAPTCHA Google Irland Limited. Es können jedoch auch personenbezogene Daten an das Mutterunternehmen Google LLC. mit Sitz in den USA übertragen werden.

Google reCAPTCHA datenschutzkonform einsetzen

Die gute Nachricht: derzeit (Stand 02.2024) ist Google LLC DPF-zertifiziert (DPF = Data Privacy Framework). Das bedeutet, dass Google als Datenempfänger nach dem Datenschutzabkommen EU-USA zertifiziert ist und die Datenübertragung somit zulässig.

Trotzdem ist Vorsicht geboten: die datenschutzrechtlichen Bedingungen können sich ändern. Und nur weil die Datenübertragung (derzeit) datenschutzkonform ist, bedeutet das nicht, dass Sie nicht trotzdem gegen den deutschen Datenschutz verstoßen kann.

Wir können und wollen an dieser Stelle keine abschließende rechtliche Betrachtung leisten. Aber wir möchten darauf hinweisen, dass für den datenschutzkonformen Einsatz von Google reCAPTCHA einige Anstrengungen nötig sind. Unter anderem muss in der Datenschutzerklärung auf reCAPTCHA hingewiesen werden, das Einverständnis des Besuchers für die Nutzung sollte eingeholt werden usw.

Denn wegen fehlender Nutzereinwilligung hat beispielsweise die CNIL (= die französische Datenschutzbehörde) gegen das Unternehmen Cityscoot im März 2023 eine Geldstrafe in Höhe von 125.000 € verhängt. Wer solche Summen nicht aus der Portokasse zahlen kann, sollte also sehr vorsichtig sein.

Nur, weil CleverReach die Integration von Google reCAPTCHA in das CleverReach Newsletter-Anmeldeformular ERMÖGLICHT, bedeutet das nicht, dass Sie von dieser Möglichkeit auch GEBRAUCH machen sollten. Die Verantwortung für den datenschutzrechtlich unbedenklichen Einsatz von reCAPTCHA liegt nämlich am Ende des Tages bei Ihnen.

Der Beitrag Honeypot für CleverReach einrichten erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Wir bieten Hilfe zum STRATO Extended Support: Je nach dem, wofür Sie sich interessieren, können Sie über die Buttons in der nachstehenden Liste direkt die entsprechenden Informationen aufrufen.

Übrigens: kennen Sie diesen Satz aus einer E-Mail von STRATO?

„Handlung erforderlich: Ihre PHP-Version ist veraltet!“

Dann sind wir direkt beim Thema: dem STRATO Extended Support…
 

Was ist das eigentlich, dieser STRATO Extended Support?

Kurz und schmerzlos auf den Punkt gebracht: die meisten heutigen Webseiten benötigen die serverseitige Scriptsprache PHP, um überhaupt zu funktionieren. Während viele gute Hoster ihren Kunden sowohl aktuelle als auch älterer PHP-Versionen kostenlos bereitstellen, hatte die Firma 1&1 schon vor vielen Jahren die geniale Idee, den selbst erfundenen „Extended Support“ (= „Erweiterte Unterstützung“) einzuführen.

Das bedeutet für die Kunden, dass nur die neusten PHP-Versionen kostenlos sind und sie für den Einsatz älterer PHP-Versionen extra bezahlen müssen – und zwar auf Basis des Extended Supports.

Für 1&1 / IONOS war das eine geniale Idee: eine bei anderen Hostern kostenlose Leistung wurde kostenpflichtig gemacht und auf diesem Wege sprudelnde Zusatzgewinne möglich. Von einst rund 5 EUR/Monat hat sich der Extended Support im Laufe der Jahre auf rund 8 EUR/Monat verteuert. Derzeit hat IONOS 3.900 Mitarbeiter und rund 8,5 Mio. Kunden. Würde auch nur jeder 5. Kundenaccount den Extended Support nutzen, so hätte 1&1 Mehreinnahmen von rund 160 Mio. Euro im Jahr.

Und was hat das mit STRATO zu tun, fragen Sie sich jetzt vermutlich?
Seit 1&1 die Firma STRATO übernommen hat, bietet auch STRATO seinen Kunden diese wundervolle erweiterte Unterstützung an: den STRATO Extended Support.
 

Benötige ich den STRATO Extended Support?

Sie betreiben bei STRATO eine Website, deren CMS-System und deren Erweiterungen/Plugins regelmäßig gepflegt und aktualisiert werden? Dann haben Sie recht gute Chancen, den STRATO Extended Support gar nicht zu benötigen. Denn aktuelle Versionen der CMS-Systeme funktionieren in der Regel auch mit aktuellen PHP-Versionen.

Die Praxis sieht allerdings meist anders aus: oft steht der Webauftritt schon jahrelang online, ohne dass das System gewartet und gepflegt wurde. Sei es, weil Upgrades sehr aufwendig sein können (z.B. bei TYPO3 oder bestimmten Webshops), sei es, weil Ihnen gar nicht bewusst war, dass Ihr Webauftritt regelmäßig aktualisiert werden sollte.

Dann stellt sich oft das Problem, dass der (technische veraltete) Webauftritt unter aktuellen PHP-Versionen gegebenenfalls nicht mehr lauffähig ist. Das heißt: die Website funktioniert damit nicht mehr.

Dazu ein wenig Hintergrundwissen zu PHP:
Keine moderne Website kommt heute noch ohne eine Scriptsprache wie PHP aus. PHP wird daher von allen Webhostern auf ihren Webservern angeboten. Dabei stehen unterschiedliche PHP-Versionen zur Verfügung – ältere und neuere.

Seit November 2020 gibt es die derzeit aktuelle PHP-Version 8.x. Diese wird kontinuierlich weiterentwickelt und von den Entwicklern gegen Hacker abgesichert. Daher ist deren Betrieb für Hoster natürlich besonders einfach und komfortabel.

Gute Hoster unterstützen aber auch weiterhin ältere PHP-Versionen wie PHP 5.x (aktiv unterstützt zwischen 07.2004 bis 01.2019) und PHP 7.x (Unterstützung zwischen 12.2015 bis 11.2022).
Und diese Unterstützung älterer PHP-Versionen ist für viele ältere Webseiten sehr wichtig, weil sie schlicht und einfach nicht mit der allerneusten PHP-Version funktionieren.

Dazu übrigens eine Anmerkung, falls Sie sich wundern sollten, dass PHP 6.x keine Erwähnung findet: es gibt kein PHP in Version 6.x.

Kurze Lebenszyklen beim STRATO Extended Support

Das Geschäftsmodell des STRATO Extended Supports basiert (auch) darauf, dass die Lebenszyklen der aktuellen PHP-Versionen relativ kurz sind. So ist bei STRATO seit Ende 2023 die empfohlene PHP-Version 8.1. Diese ist aber bereits für Anfang 2025 als „outdated“ geplant, d.h. wer sie dann weiterhin benutzt, rutscht automatisch in den kostenpflichtigen Extended Support. Darauf weist STRATO die betroffenen Benutzer per E-Mail hin. Sie haben dann die Möglichkeit, auf PHP-Version 8.2 zu aktualisieren. Machen sie das nicht, so müssen Sie für die Nutzung der „veralteten“ PHP-Version bezahlen.

STRATO sowie IONOS begründen das damit, einen erhöhten Aufwand damit zu haben, die bisher empfohlene (und plötzlich als „veraltet“ geltende) PHP-Version weiterhin abzusichern und anzubieten. Ein Argument, welches man bei älteren PHP-Versionen wie 5.6 vielleicht gelten lassen kann, welches aber bei einer (derzeit) noch sehr aktuellen PHP 8.x-Version durchaus angezweifelt werden darf. Denn schließlich gibt es sehr viele Hoster, die den Weiterbetrieb anbieten, ohne ihren Kunden dafür etwas extra zu berechnen.

Interessieren Sie sich dafür, wie aktuell oder wie alt die verschiedenen PHP-Versionen sind, so werden Sie beispielsweise bei Wikipedia fündig.
 

PHP-Version im STRATO-Kundenaccount ändern

Sie fragen sich vielleicht, ob Sie die PHP-Version in Ihrem STRATO-Kundenaccount einfach so selbst ändern können?

Grundsätzlich ja. Das ist kein Hexenwerk und mit wenigen Klicks erledigt. STRATO schickt in der Informationsmail zum Extended Support auch gleich selbst einen Link zu der Konfigurationsseite mit, wo sich das erledigen lässt.

Es gibt jedoch einige Dinge, die Sie berücksichtigen sollten:

1. Je älter die bisherige PHP-Version gegenüber der neu einzustellenden PHP-Version ist, desto eher sind Probleme zu erwarten. War beispielsweise bisher PHP 7.2 im Einsatz, so ist der Sprung zu PHP 8.x groß und Ihre Webseite ist mit dem aktuelleren PHP gegebenenfalls nicht mehr funktionsfähig.
2. Durch die Umstellung wird die PHP-Version global geändert. Betreiben Sie mehrere Webseiten im selben Kundenaccount, so müssen Sie für jede einzelne Website prüfen, ob diese mit der neueren PHP-Version noch funktioniert. Falls nicht, müssen Sie entweder die betreffenden Webseiten aktualisieren, so dass sie mit der neuen PHP-Version lauffähig sind. Oder aber Sie können sich dazu entscheiden, den STRATO Extended Support zu wählen (und zu bezahlen).
3. Es besteht auch die Möglichkeit, für jede Website eine eigene PHP-Version einzustellen. Allerdings ist das nicht einfach so im STRATO Kundenaccount möglich.
   

   Gerne können wir Sie bei Bedarf dabei unterstützen.

Hilfe beim STRATO Extended Support – meine Website funktioniert nicht mehr!

Sie haben die PHP-Version geändert, um den kostenpflichtigen STRATO Extended Support zu umgehen. Eine nachvollziehbare Entscheidung. Leider stellen Sie hinterher fest, dass Ihr Webauftritt nicht mehr funktioniert. Und Sie wissen nicht, was Sie jetzt machen sollen.

Der STRATO Extended Support wird trotz aktueller PHP-Version weiter berechnet!

Sie haben erfolgreich auf eine aktuelle PHP-Version aktualisiert und Ihr Webauftritt funktioniert damit ganz wunderbar. Prima, das freut uns!

Nun fährt STRATO trotzdem unbeirrt damit fort, den PHP Extended Support zu berechnen. Ein Versehen? Gar Betrug? Nicht unbedingt.

Denn es ist gut möglich, dass in einer PHP-Konfigurationsdatei eine andere (ältere) PHP-Version eingestellt ist als im STRATO-Kundenaccount. Das merkt STRATO natürlich und berechnet den Extended Support in diesem Fall völlig zu Recht.

Sie können in diesem Falle Ihr System von uns prüfen lassen, um weitere Extended-Support-Kosten zu vermeiden.

Sie benötigen Unterstützung?

Fazit: es ließe sich trefflich darüber streiten, ob der STRATO Extended Support für die STRATO-Kunden eine gute Sache ist.

Wer nicht bereit ist, dafür zu bezahlen, kann den Extended Support vermeiden, indem er/sie die PHP-Version aktualisiert. Voraussetzung dafür ist allerdings, dass die Website (oder die Webseiten, falls es im STRATO-Account mehrere geben sollte) kompatibel mit der neueren PHP-Version sind. Oder aber indem das CMS-System der Website / die CMS-Systeme der Webseiten aktualisiert werden, damit sie ohne Probleme mit der neuen PHP-Version zusammenarbeiten.

Eine weitere Option ist ein Providerwechsel. Dabei wird die Website zu einem anderen Hoster umgezogen. Es ist nicht erforderlich, bei einem Hoster zu bleiben, der sich die Unterstützung älterer PHP-Versionen extra bezahlen lässt.

Stichworte: Hilfe beim STRATO Extended Support

Der Beitrag Hilfe beim STRATO Extended Support erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Lässt sich eine Sticky Menu bzw. feststehendes Menü mit HTML und CSS realisieren, ohne JavaScript einzusetzen? Die Antwort lautet: Ja.

Diese Anleitung stellt eine Sticky Menu Lösung vor, die zugleich responsive ist. Auf mobilen Geräten wie dem Smartphone passt sich das Menü an und wird zum Mobile Menü.

In diesem Fall setzen wir allerdings die jquery und etwas JavaScript-Code ein, um überprüfen zu können, ob der Benutzer nach unten scrollt. Ist dies der Fall, so wird über CSS das Erscheinungsbild des Sticky Menu angepasst: die Höhe des Navigationsbereichs im Header reduziert sich, um mehr Platz für die Darstellung des Contents zur Verfügung zu haben.

Realisation eines Sticky Menu / feststehenden Menü mit HTML

Prinzipiell können wir den Code natürlich auch „verschlanken“, den JavaScript-Teil entnehmen und mit einigen kleineren Änderungen am CSS den Navigationsbereich im Header fixieren. Dadurch fehlt zwar die Möglichkeit, das Scrollverhalten des Benutzers zu prüfen und entsprechend zu interagieren. Im Gegenzug hätten wir jedoch ein schnelles und schlankes responsives Sticky Menu, welches einige Vorteile bietet:

1. Es konzentriert sich auf das Wesentliche, ohne dass der Code aufgebläht wird und trägt damit der Idee des Mobile First Rechnung. Denn seit Oktober 2016 prüft auch Google zuerst, ob es eine mobile Version der Website gibt und ob diese über eine hohe Usability verfügt. Dazu gehören unter anderem auch kleine Datenmengen und schnelle Ladezeiten.
2. Schlanke Webseiten mit geringen Datenmengen und schnellen Ladezeiten erhalten von Suchmaschinen einen Bonus, der sich positiv auf das Ranking auswirkt.

Ein solches schlankes Mobile Menü ohne JavaScript stellen wir hier vor.

Der Animationseffekt für das Mobile Menü besteht übrigens auch ohne den Einsatz von JavaScript fort, da er über CSS3-Transitions erzielt wird.

Wie lässt sich das Design unseres Beispiels umsetzen?
Der Aufbau für das Mobile Menu entspricht der unter Mobile Menü ohne JavaScript vorgestellten Lösung und wird dort ausführlich erklärt.

Nachfolgend stellen wir daher den Code vor, beschränken uns bei den Erläuterungen aber auf die Bereiche, die zusätzlich zu integrieren sind, um nicht nur ein Mobile Menü zu kreieren, sondern dieses auch als Sticky Menu bzw. feststehende Menü zu realisieren:

Bereich: Head

/*Einbinden der jquery*/  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    var pixel = 150; //Anzahl der Scroll-Pixel, bevor das Menü angepasst wird
    $(window).bind('scroll', function () {
      if ($(window).scrollTop() > pixel) {
        $('#menu').addClass('fixed');
        $('#main').addClass('fixed');
      } else {
        $('#menu').removeClass('fixed');
        $('#main').removeClass('fixed');
      }
    });   
  </script>

HTML (Body)

<body>	
  <nav id="menu">
    <div class="brand"><a href="https://a-vista-studios.de"><img src="logo_avs.png" alt=""/></a></div>
    <a href="#nav-m" id="nav-m"><img src="btn-mobile.png" alt=""/></a>
    <a href="#" class="close"><img src="btn-mobile-close.png" alt=""/></a>
		
    <ul class="menu">
      <li><a href="#a1">Abschnitt 1</a></li>
      <li><a href="#a2">Abschnitt 2</a></li>
      <li><a href="#a3">Abschnitt 3</a></li>
      <li><a href="#a4">Abschnitt 4</a></li>
      <li><a href="#a5">Abschnitt 5</a></li>
    </ul>
  </nav>

  <main id="main">
    <div id="abschnitt1">
      <div class="content">
        <span id="a1"><strong>Abschnitt 1</strong><br /></span>
	    BLINDTEXT
      </div>
    </div>
    <div id="abschnitt2">
      <div class="content">
        <span id="a2"><strong>Abschnitt 2</strong><br /></span>
	    BLINDTEXT
      </div>
    </div>
    <div id="abschnitt3">
      <div class="content">
        <span id="a3"><strong>Abschnitt 3</strong><br /></span>
	    BLINDTEXT
      </div>
    </div>
    <div id="abschnitt4">
      <div class="content">
        <span id="a4"><strong>Abschnitt 4</strong><br /></span>
	    BLINDTEXT
      </div>
    </div>
    <div id="abschnitt5">
      <div class="content">
        <span id="a5"><strong>Abschnitt 5</strong><br /></span>
	    BLINDTEXT
      </div>
    </div>
  </main>	
</body>

CSS: Allgemeine Auszeichnungen und Logo

/*----- General Formating -----*/
body, html {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.95em;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

a:active, a:focus {outline: none;}

main {
  line-height: 180%;
}
/*------------------------------*/


/*----- Logo -----*/
.brand {
  float: left;
  padding: 0.5em 1em 0 0.5em;
}
/*----------------*/

CSS: Menü

/*----- Menu -----*/
nav {
  margin: 0 auto;
  width: 100%;
  height: 11em;
  text-align: right;
  position: relative;
  background: rgba(255, 255, 255, 1.0);
  border-bottom: 1px solid white;
}

nav ul {
  margin: 0;
  padding: 8.1em 0 0 0;
  height: 100vh;
}

nav ul li {
  list-style: none;
  margin: 0;
  display: inline;
}

nav ul li a {
  color: #009999;
  position: relative;
  padding: 0 0 0.5em 0;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}

nav ul.menu li a:hover {
  color: #03405f;
  border-bottom: 2px solid #03405f;
}
/*----------------*/

/*----- Fixed Menu -----*/
nav#menu.fixed {
  position: fixed;
  top: 0;
  padding: 0;
  height: 6em;
}
nav#menu.fixed ul {
  padding: 0.75em 0 0 0;
  font-size: 90%;
}			
nav#menu.fixed .brand img {
  margin-top: 0em;
  height: 5em;
}		
nav#menu.fixed a {
  padding: 1em 0;
}	
/*--------------------------------------*/

CSS: Content

/*----- Content Sections -----*/
#abschnitt1, #abschnitt2, #abschnitt3, #abschnitt4, #abschnitt5 {
  min-height: 100%;
  width: 100%;
}
#abschnitt1 {
  color: #555;
  background: #caced2;
}
#main.fixed #abschnitt1 {
  margin-top: 150px;
}
#abschnitt2 {
  color: #333;
  background: #b1b8be;	
}
#abschnitt3 {	
  color: #000;
  background: #95a1ae;
}
#abschnitt4 {
  color: #fff;
  background: #778899;
}	
#abschnitt5 {
  color: #fff;
  background: #525f6d;
}	
#abschnitt1 .content,
#abschnitt2 .content,
#abschnitt3 .content,
#abschnitt4 .content,
#abschnitt5 .content {
  padding: 1.5em 1.5em 3em 1.5em;
}
#a1{
  padding-top: 14em;
}
#a2, #a3, #a4, #a5 {
  padding-top: 8.1em;
}
/*--------------------------------------*/

CSS: Media Queries

/*----- Media Queries -----*/
@media screen and (min-width: 961px) {
  nav a#nav-m,
  nav a.close {
    display: none;
  }
  nav #menu.fixed ul {
    margin-top: 2.25em;
  }	
  nav ul li {
    margin: 0 30px 0 0;
  }
}

@media screen and (max-width: 960px) {
  /*Formatierung Mobiles Menue*/
  nav ul {
    top: 11.15em;
    position: absolute;
    background: #ccc;
    width: 100%;
    left: -100%;

    list-style-type:none;
    margin: 0;
    padding: 0;

    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  nav#menu.fixed ul {
    top: 6.8em;
  }
  nav ul li{
    display: block;
    text-align: left;
    padding: 0em 0.5em;
    border-bottom: 1px solid #fff;
  }
  nav ul li a {
    color: #555;
    padding: 1em 0;
  }
  nav ul.menu li a:hover {
    border-bottom: 0;
  }

  /*Hamburger-Icon*/
  nav a#nav-m img,
  nav a.close img {
    width: 40px;
    height: auto;
  }
  nav > .close,
  nav a#nav-m:target {
    display: none;
  }
  nav a:target ~ ul,
  nav a:target ~ .close {
    display: inline-block;
  }
  nav nav#menu.fixed a:target ~ .close {	
    margin-top: -14px;
  }
  nav a:target ~ .close {
    position: absolute;
    margin-left: -40px;
  }
  nav a:target ~ ul {
    left: 0;
  }
}
/*--------------------------------------*/

Erläuterung des CSS für die Erstellung des Sticky Menu / festehenden Menüs

Die drei vorstehenden Codebereiche HTML (Body), CSS: Allgemeine Auszeichnungen und Logo sowie CSS: Media Queries werden bereits in der Anleitung Mobile Menü ohne JavaScript erklärt.

Ergänzungen bzw. Erweiterungen für das Sticky Menu finden sich in den drei Codeblöcken Bereich: Head, CSS: Menü sowie CSS: Content.

Wir blicken hinter die Kulissen

1. Bereich: Head
   Zunächst wird die jquery über googleapis.com eingebunden.
   Mit einigen Zeilen JavaScript wird erreicht, dass ab einem Scrollen um 150 Pixel nach unten die Bezeichner mit der ID #menu sowie #main um die Klasse .fixed ergänzt werden.
   Beträgt das Scrollen weniger als 150 Pixel, so greift die ELSE-Anweisung und die Klasse .fixed wird wieder entfernt.Damit erhalten wir die Möglichkeit, beim Scrollen um mehr als 150 Pixel nach unten den Bereich über CSS der Form #menu.fixed anzusprechen.
2. CSS: Menü
   Ergänzend zum Mobile Menü ohne JavaScript findet sich hier der Bereich
   /*—– Fixed Menu —–*/
   Das CSS teilt dem Browser mit, wie das Sticky Menu bzw. feststehende Menü behandelt werden soll, wenn die zuvor erwähnten mehr als 150 Pixel nach-unten-scrollen erreicht sind.
3. CSS: Content
   Dieser Bereich ist weitestgehend selbsterklärend. Das für Demonstrationszwecke erstellte Demo Sticky Menu referenziert nicht auf eigene (neue) Inhaltsseiten. Sondern beim Anklicken der Menüpunkte wird Mittels Anchor (= Anker) zu dem entsprechenden Bereich auf der Seite gesprungen und der jeweilige Bereich entsprechend über das CSS formatiert.

Fazit: die Anleitung zur Erstellung eines Sticky Menu / feststehenden Menüs inklusive Mobile Menu für mobile Endgeräte basiert auf der unter Mobile Menü ohne JavaScript vorgestellten Lösung. Ergänzend wurde noch ein Sticky Menu integriert und zur besseren Visualisieren ein Anker-Menü zu Inhaltsbereichen mit unterschiedlichen Hintergrundfarben integriert

Stichworte: Sticky Menu, Sticky Header Menu, Feststehendes Menü HTML

Der Beitrag Sticky Menu, Feststehendes Menü erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Für einen Kunden haben wir uns auf die Suche nach einem guten Online-Buchungskalender mit integriertem Terminplaner begeben. Dabei sind wir auf den Anbieter SHORE.com gestoßen.

Warum wir aus eigener Erfahrung diesen Anbieter nicht empfehlen können, darüber stellen wir nachfolgend einen Shore Erfahrungsbericht vor. In den Erfahrungsbericht fließt auch unsere Bewertung sowie Kritik an Shore ein.

Shore Kalender – Was ist Shore?

Shore bietet ein – auf den ersten Blick – tolles Tool an. Optisch ansprechend stellt Shore den Leistungsumfang auf seiner Website vor. Es besteht die Möglichkeit, das Tool 15 Tage lang kostenlos zu testen.

Auf der eigenen oder der Kundenwebsite lässt sich über JavaScript-Codeintegration ein Button integrieren. Zum Beispiel JETZT BUCHEN oder TERMINBUCHUNG. Beim Anklicken des Buttons wird das Buchungstool ausgeklappt und der Besucher kann aus dem Leistungsangebot eine Auswahl treffen und direkt online buchen. Die einzelnen Leistungen legen Sie dazu vorab im Kundenaccount von Shore an und sie stehen dann automatisch im Buchungskalender zur Verfügung.

Im Kundenaccount können Sie Firmenmitarbeiter eintragen und ihnen alle oder ausgewählte Leistungen zuordnen. Es ist möglich manuell Termine einzutragen und sie in einem Kalender anzusehen und zu verwalten.

Bewertung von Shore

Wir haben einen Testaccount angelegt, konfiguriert und auf Herz und Nieren geprüft. Der erste Eindruck war vielversprechend. Der Kundenverwaltungsbereich präsentiert sich aufgeräumt und übersichtlich.

Allerdings haben sich im Zuge unserer Prüfung des Shore Kalenders auch eine Reihe von Fragen ergeben. Daher haben wir eine E-Mail an den Shore-Kundensupport geschrieben und dazu direkt auf die (automatische) Begrüßungs-Mail von Sebastian M. geantwortet, der in der Begrüßungsmail zur Kontaktaufnahme aufgefordert hat.

Unsere Fragen lauteten:

• Preisangaben
  Handelt es sich bei den Preisangaben (shore.com/de/preise/) zu den verschiedenen Paketen um Brutto- oder Nettopreise?
• DSGVO > Serverstandort, AV-Vertrag
  Die privaten Daten des Benutzers werden auf Ihren Servern gespeichert. Wo befinden sich die Server? Ist sichergestellt, dass alle Server sich in Deutschland oder zumindest innerhalb der EU befinden? Da Sie Einblicke in die Benutzerdaten nehmen können, ist ein AV-Vertrag erforderlich. Wo wird dieser bereitgestellt?
• Tracking-Cookies
  Ihr System setzt Tracking-Cookies ein: Polyfill und Google Tag Manager.
  Gemäß des Urteils des Europäischen Gerichtshofs vom 01.10.2019 müssen Tracking-Cookies beim Betreten der Seite abgeschaltet sein und dürfen erst aktiviert werden, nachdem der Benutzer dafür sein explizites Einverständnis gegeben hat.
  Ein Hinweis, wie von Ihnen verwendet (siehe Anlage: shore.png) ist in Zukunft vor diesem Hintergrund nicht mehr ausreichend.
  Wie lassen sich die Tracking-Cookies abschalten bzw. wann planen Sie, eine Lösung zu integrieren, welche den künftigen Rechtsanforderungen Rechnung trägt?
• Technische Probleme
  Auf der Website des Kunden ist das weit verbreitete WordPress-Theme DIVI im Einsatz. Nach der Integration von SHORE lässt sich der DIVI-Builder nicht mehr aufrufen. Dazu ist dieser E-Mail ein Video angehängt. Ich vermute Konflikte zwischen unterschiedlichen jQuery-Versionen. Ist Ihnen das Problem bekannt und gibt es dafür eine Lösung?

Vielen Dank für Ihre Unterstützung und

Mit freundlichen Grüßen

Erfahrungsbericht zu Shore – Support

Nach einer Woche hatten wir zwar mehrere (automatisch versendete) E-Mails, aber keine Antwort auf unsere vorstehenden Fragen erhalten. Der zwischenzeitlich getätigte Anruf hat ergeben, dass Shore unsere Anfrage erhalten habe und sie beantworten werde. Nach acht Tagen haben wir einen höflichen Reminder geschickt und nochmals um Beantwortung unserer Fragen gebeten.

Antwort nach 16 Tagen: keine.

Inzwischen sind uns allerdings weitere Mängel aufgefallen: Neben Polyfill und Google Tag Manager werden zusätzlich noch Tracking-Cookies für Google Analytics sowie DoubleClick gesetzt. Da aus Datenschutzgründen das im Buchungs-Widget eingesetzte Google Maps von uns im Kundenaccount abgeschaltet wurde, hätte zumindest das DoubleClick-Cookie nicht gesetzt werden müssen.

Warum sind diese Tracking-Cookies so „böse“?
Im Zuge des Urteils des Europäischen Gerichtshofs vom 01.10.2019 sowie der anstehenden ePrivacy-Verordnung und nicht zuletzt im Zuge der Pressemitteilungen der Datenschutzbehörden deutscher Bundesländer hat sich herauskristallisiert, dass Tracking-Cookies nicht mehr zulässig sind.

So hat beispielsweise das BayLDA (eine der beiden Bayrischen Datenschutzbehörden: https://www.lda.bayern.de/de/index.html) schon vor einiger Zeit damit begonnen Webseitenbetreiber abzumahnen, die Google Analytics einsetzen. Und zwar unabhängig davon, ob sie die IP-Adresse des Besuchers anonymisiert und in der Datenschutzerklärung auf den Einsatz von Google Analytics hingewiesen haben.

Solche Tracking-Cookies müssen beim Betreten der Website durch den Besucher abgeschaltet sein und der Benutzer muss zunächst seine explizite Zustimmung geben, bevor sie aktiviert werden. Das lässt sich mit so genannten Consent-Cookie-Tools umsetzen. Beispielsweise von Borlabs oder UserCentrics. Nur nützt dies nichts, wenn Shore eigene Tracking-Cookies setzt, die von den Consent-Cookie-Tools – zumindest derzeit noch – nicht geblockt werden können. Die Verantwortung für die gesetzten Tracking-Cookies trägt der Webseitenbetreiber.

Wenn Shore sich mit seinem Tool weiterhin am Markt behaupten möchte, sollten die Betreiber entsprechende Hinweise ernst nehmen und Gegenmaßnahmen ergreifen. Es ist keine Lösung, die Kunden mit der Haftungsfrage im Regen stehen zu lassen.

Erfahrung mit Shore – Funktionalität

Die Funktionalität von Shore macht zunächst einen guten Eindruck. Es gibt aber auch eine Reihe von Dingen, die nicht gut gelöst sind. Dazu einige (nicht abschließende) Beispiele:

Obere Leiste:
Selbst wenn im Account Google Maps deaktiviert wird, bleibt der Link zur Karte (oben links neben der Sprachauswahl) angezeigt. Die Sprachauswahl ist bei einer einsprachigen Website überflüssig, wir haben jedoch keine Möglichkeit gefunden, sie im Verwaltungsbereich abzuschalten.

Es ist zudem nicht möglich, auf eine Seite zu verlinken – also beispielsweise auf ein PDF mit einem Preisverzeichnis. Das <A HREF> Tag wird nicht interpretiert, sondern im Klartext ausgegeben. Auch im Kundenverwaltungsbereich sind uns einige Dinge aufgefallen, die sich besser lösen ließen. Das alles sind Aspekte, die wir gerne mit dem Shore-Support besprechen würden.

Shore Support

16 Tage nach unserer ersten Kontaktaufnahme haben wir einen weitere (und letzten!) Versuch gewagt und nochmals eine modifizierte E-Mail an die Macher des Terminplaners Shore gesendet. Hier sprechen wir teilweise nochmals die Aspekte aus unserer ersten E-Mail an und stellen teilweise neue Fragen. Diese E-Mail haben wir sicherheitshalber nicht nur an die E-Mail-Adresse von Sebastian M., sondern zusätzlich an inbound@… sowie support@… geschickt:

• Preisangaben
  Handelt es sich bei den Preisangaben (shore.com/de/preise/) zu den verschiedenen Paketen um Brutto- oder Nettopreise?
  Der JETZT UPGRADEN-Button in my.shore.com funktioniert nicht. Weder im Firefox noch Internet Explorer oder Chrome:
• DSGVO
  Die privaten Daten des Benutzers werden auf Ihren Servern gespeichert. Wo befinden sich die Server? Falls es sich um einen Amazon-Server in Frankfurt handelt: ist sichergestellt, dass die Daten sich auch ausschließlich auf diesem Server befinden oder einem anderen Server innerhalb der EU (Stichwort: DSGVO)?
• Tracking-Cookies
  Ihr System setzt 2 Tracking-Cookies: Polyfill und Google Tag Manager.
  Gemäß des Urteils des Europäischen Gerichtshofs vom 01.10.2019 müssen Tracking-Cookies beim Betreten der Seite abgeschaltet sein und dürfen erst aktiviert werden, nachdem der Benutzer dafür sein explizites Einverständnis gegeben hat.
  Ein Hinweis, wie von Ihnen verwendet (siehe Anlage: shore.png) ist in Zukunft vor diesem Hintergrund nicht mehr ausreichend.
  Wie lassen sich die Tracking-Cookies abschalten bzw. wann planen Sie, eine Lösung zu integrieren, welche den künftigen Rechtsanforderungen Rechnung trägt?
• Verlinkungen
  Ist es möglich, in der Buchungsfunktion eine Verlinkung einzutragen?
  Zwar lässt sich unter EINSTELLUNGEN > BUCHUNGSFUNKTION > BUCHUNGSBUTTON > KUNDENHINWEIS
  ein zusätzlicher kurzer Text integrieren. Aber eine Verlinkung über <a href> ist nicht möglich. Der Code wird nicht interpretiert, sondern ausgegeben. Ziel ist: „Unser Preisverzeichnis finden Sie hier (LINK)“.

Antwort des Shore-Support bis heute: keine.

Hier würden wir annehmen, dass Shore zumindest ein lebhaftes Interesse an der Information haben sollte, dass der JETZT UPGRADEN-Button funktioniert. Denn darüber sollte sich die kostenlose 15-tägige Testversion in eine kostenpflichtige Basic-, Plus- oder Premium-Version umwandeln lassen. Und Shore generiert ja ab diesem Zeitpunkt über den Neukunden Einnahmen(!).

Shore Kosten

Der Shore Buchungskalender sowie der Shore Terminkalender sind nicht unbedingt ein Schnäppchen. Bei monatlicher Zahlweise kostet das günstigste Paket Basic 39,00 EUR/Monat, das teuerste Paket Premium stolze 99,00 EUR. Wählen Sie die jährliche Zahlweise, so lassen sich immerhin 10,00 EUR/Monat sparen. Ob es sich bei diesen Preisangaben um Brutto- oder Nettopreise handelt, geht aus den Angaben auf der Website derzeit nicht hervor. Diese Frage konnte uns – zusammen mit unseren übrigen Fragen – auch vom Shore-Support nicht beantwortet werden.

Alternativen zu Shore

Schade, dass die Erfahrung mit Shore so schlecht ausgefallen ist. Zunächst hatten wir einen guten Eindruck. Wir haben viel Zeit investiert, einen Account angelegt, das System getestet, Mitarbeiter und Leistungen eingepflegt und selbst eine Lösung entwickelt damit der Shore Kalender konfliktfrei mit dem DIVI-Theme zusammenarbeitet. Wir haben gedacht, dass wir auf unsere Fragen Antworten erhalten und Shore für die bestehenden Tracking-Cookie-Probleme eine Lösung anbietet – beispielsweise ein Consent-Cookie oder die Möglichkeit, das Setzen der Tracking-Cookies im Kunden-Verwaltungsbereich abzuschalten.

Shore reagierte jedoch auf keine unserer Support-Anfragen. Besonders ärgerlich ist es, dann fortwährend launige (automatisiert versendete) E-Mails zu erhalten.
Der gesamte Vorgang war somit reine Zeitverschwendung.

Nun haben wir uns nach einem alternativen Anbieter umgesehen und einen gefunden, dessen Tool über einen – unserer Meinung nach – besseren Leistungsumfang verfügt als Shore. Eine Alternative zu Shore welche in der Grundversion sogar kostenlos ist und welche selbst in der teuersten Enterprise-Version mit maximalem Funktionsumfang bei einer monatlichen Zahlweise nur 48 EUR/Monat bzw. bei einer jährlichen Zahlweise nur 42,00 EUR kostet. Jeweils zuzüglich MwSt. – hier macht der Anbieter kein Geheimnis daraus und führt transparente Kostenstrukturen auf.

Kritik an Shore

Es reicht nicht, ein – mehr oder weniger – gutes Tool anzubieten. Der Anbieter muss auch einen guten Support bereitstellen. Ganz besonders, wenn ein solches Tool bei monatlicher Zahlweise stolze 39,00 EUR (Basic), 59,00 EUR (Plus) bzw. 99,00 EUR (Premium) kostet.

Das Argument, dass wir keinen Support bekommen haben, weil sich der Account noch in der kostenlosen Testphase befunden hat, erscheint möglich, aber sinnlos. Denn wer neue Kunden gewinnen möchte, sollte sich auch um diese Bemühen und sich nicht auf gut gelaunte, automatisch versendete, Mail-Erinnerungen beschränken.

Eine dieser Mails hatte den Betreff:
Wer oder was war Shore nochmal?

Das ist eine Frage, die sich sehr einfach beantworten lässt: Shore ist der Anbieter, der auf unsere Support-Anfragen nicht geantwortet und unsere datenschutzrechtlichen Bedenken nicht ernst genommen hat. Shore ist in unserem Fall ein Anbieter gewesen, der offenbar gar kein Interesse an Neukunden hat. Und Shore ist ein Anbieter, den wir in Zukunft nicht nutzen werden und über den wir außerdem in unserem Netzwerk informiert haben – allerdings handelte es sich dabei ausdrücklich nicht um eine Empfehlung.

Nachtrag: Unser Austausch mit dem Consent-Cookie-Anbieter UserCentrics war erfolgreich! UserCentrics hat SHORE in seine Konfiguration aufgenommen und bietet nun die Möglichkeit, die Tracking-Cookies von Shore zu blockieren. Im Gegensatz zum nicht existierenden Shore-Support war der Support von UserCentrics schnell, professionell und lösungsorientiert. Auch wenn wir Shore nun doch nicht verwenden: Danke, UserCentrics!

Stichworte: Shore Bewertung, Shore Erfahrung, Shore Erfahrungsbericht, Shore Kritik, Shore Terminplaner, Shore Kalender, Shore Kosten

Auch interessant: das Thema Datenschutzgrundverordnung.

Der Beitrag Shore Kalender + Shore Terminplaner, Erfahrung, Bewertung, Kritik erschien zuerst auf Webdesign Tipps / Webdesign Blog.

E-Mail Marketing: wem dürfen Newsletter oder Werbemails geschickt werden?

Eigentlich ist es ganz einfach: der Newsletterversand sowie der Versand von E-Mail-Werbung ist zulässig, sofern dafür eine vorherige ausdrückliche Einwilligung vorliegt.

Diese Einwilligung kann auch telefonisch erfolgen. Im Streitfall ist es jedoch von Vorteil, wenn entweder eine schriftliche oder elektronische Einwilligung vorliegt. Hier hat sich das Double-Opt-In-Verfahren bewährt, welches in der Regel auch vor Gericht Bestand hat.

Dabei wird nach dem Eintrag für den Newsletter automatisch eine E-Mail mit einem Aktivierungslink an die hinterlegte E-Mail-Adresse versendet. Erst wenn der Empfänger den Aktivierungslink anklickt, wird die Mailadresse für den Newsletterversand freigeschaltet.

E-Mail Marketing: neue Kunden gewinnen

Es klingt so einfach: statt den teuren Postversand zu wählen werden einfach hunderte oder tausende potentielle Kunden per E-Mail kontaktiert. Bleibt nur das Problem, woher die E-Mail-Adressen bezogen werden sollen. Doch auch dafür gibt es eine Lösung: E-Mail-Listen lassen sich einkaufen und für das eigene E-Mail Marketing nutzen. Der Einkauf von E-Mail-Adressen ist nicht verboten.

Bleibt die Frage, ob rechtlich auch alles erlaubt ist, was Umsatz verspricht.

E-Mail-Adressen einkaufen

Beim Einkauf von E-Mail-Adressen für das eigene E-Mail Marketing gibt es einige Herausforderungen:

1. Während sich problemlos umfangreiche Adressdaten einkaufen lassen sind diese Daten gegebenenfalls nicht mehr aktuell. Ein Teil der E-Mail-Adressen gibt es nicht mehr, der Empfänger hat nach der Hochzeit den Namen gewechselt usw.
2. Eine wahllose Ansammlung von Adressaten nützt wenig. Diese müssen sich auch für die angebotenen Produkte oder Dienstleistungen interessieren.
3. Rechtsaspekte: Sie dürfen E-Mail-Adressen nur für Marketingzwecke verwenden, wenn der Inhaber seine ausdrückliche Zustimmung erteilt hat. Liegt diese Zustimmung nicht vor, so haftet nicht der Verkäufer der E-Mail-Adressen sondern derjenige, der die unerwünschte E-Mail versendet hat.

In unserem Beitrag E-Mail-Listen kaufen – ist das sinnvoll? erfahren Sie mehr über Sinn und Unsinn eingekaufter Mailing-Listen.

E-Mail-Adressen von Bestandskunden nutzen

Bestandskunden dürfen auch ohne explizite Einwilligung E-Mails zugesandt werden. Nach § 7 Absatz 3 des Gesetzes gegen den unlauteren Wettbewerb (ULG) gilt:

[…] ist eine unzumutbare Belästigung bei einer Werbung unter Verwendung elektronischer Post nicht anzunehmen, wenn

1. ein Unternehmer im Zusammenhang mit dem Verkauf einer Ware oder Dienstleistung von dem Kunden dessen elektronische Postadresse erhalten hat,
2. der Unternehmer die Adresse zur Direktwerbung für eigene ähnliche Waren oder Dienstleistungen verwendet,
3. der Kunde der Verwendung nicht widersprochen hat und
4. der Kunde bei Erhebung der Adresse und bei jeder Verwendung klar und deutlich darauf hingewiesen wird, dass er der Verwendung jederzeit widersprechen kann, ohne dass hierfür andere als die Übermittlungskosten nach den Basistarifen entstehen.

 

Uneinheitlich wird von den Gerichten allerdings bewertet, wie weit in der Vergangenheit eine Kundenbestellung maximal liegen darf, damit seine Daten für weitere Marketingmaßnahmen verwendet werden dürfen.

E-Mail-Adressen selbst akquirieren

Die beste – und rechtlich sicherste – Lösung ist, die E-Mail-Adressen selbst zu akquirieren. Dazu bietet sich ein Newsletter mit Double-Opt-In an. Dadurch erteilt der Benutzer einerseits seine explizite Zustimmung für die Nutzung seiner Mailadresse, andererseits wird sichergestellt, dass er sich auch für die Angebote oder Dienstleistungen des Unternehmens interessiert.

Damit sich Besucher jedoch überhaupt für den Newsletter interessieren, muss die entsprechende Website meist auch über ein interessantes oder informatives Angebot verfügen.

Eine beliebte Methode zur Akquirierung von E-Mail-Adressen sind zudem Benutzeraccounts und Downloads. Damit der Benutzer die angebotene Dienstleistung nutzen kann, muss er einen Benutzeraccount erstellen. Im Zuge der Anmeldung kann ihm dann auch die Anmeldung zum Newsletter angetragen werden. Ebenso ist ein Download – beispielsweise von einer informativen PDF-Datei – nur nach vorheriger Anmeldung mit den eigenen Kontaktdaten und der eigenen E-Mail-Adresse möglich.

Stichworte: E-Mail Marketing, Newsletter, E-Mail-Werbung

Der Beitrag E-Mail Marketing – was ist erlaubt? erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Wie schreibe ich gute Webtexte?:
„Herzlich willkommen auf unserer Webseite!“
oder:
„Wir freuen uns sehr darüber, Sie hier begrüßen zu dürfen!“

Wer so freundlich begrüßt wird, muss die aufgesuchte Seite doch einfach toll finden.
Was der Anbieter dabei völlig unberücksichtigt lässt ist, dass hunderttausende genauso denken und es genauso machen. Was alle machen muss aber deshalb weder gelungen sein, noch zeugt es von Kreativität. Ein solcher Einstieg bietet dem Besucher keinerlei Informationen und keinen Mehrwert. Auch aus Sicht der Suchmaschinenoptimierung bleibt das Potential, das der Einstieg in die Webseite bietet, ungenutzt.

Bei einer Hotelwebseite wäre solch eine Begrüßung vielleicht noch vertretbar. Doch auch hier gibt es Alternativen zu abgedroschenen Phrasen. Beispielsweise: „Willkommen im Hotel Rosenblüte, Ihrem Familienhotel am Tegernsee.“

Keine leeren Phrasen dreschen

Als Webseitenbetreiber möchten Sie (1.) gut gefunden werden und (2.) den Besucher von Ihrem Angebot oder Ihren Dienstleistungen überzeugen. Die Antwort auf die Frage „Wie schreibe ich gute Webtexte?“ ist also eng damit verknüpft, dem Besucher interessante Inhalte und einen echten Mehrwert zu bieten. Werden leere Worthülsen statt Informationen bereitgestellt, so winken viele Besucher dankend ab. Sie suchen dann schnellstmöglich den nächsten Anbieter auf.

Kurze Verweilzeiten auf Ihrer Webseite sind gleich in zweifacher Hinsicht nachteilig: zum einen verlieren Sie potentielle Leser / Interessenten / Kunden. Zum anderen registrieren Suchmaschinen die kurze Verweildauer und ziehen daraus ihre Schlüsse. Denn würden interessante und relevante Informationen bereitgestellt, so wäre auch die Verweildauer der Besucher entsprechend höher.

Natürlich kann eine kurze Verweildauer der Besucher auch auf ein schlechtes oder veraltetes Design der Webseite zurückzuführen sein. Das beste Design nützt allerdings wenig, wenn der Inhalt nicht überzeugt.

Ein No-Go (= Tabu) sind Allgemeinplätze im Broschüren-Stil:
„Wir sind ein innovatives Unternehmen der XYZ-Branche, welches die Zeichen der Zeit früh erkannt hat und diese Erkenntnisse effizient im Dienste seiner Kunden einsetzt. Wir bieten Ihnen nachhaltige und ressourcenschonende Lösungen. Überzeugen Sie sich selbst!“

Fein sezierte Sätze voller wohlklingender Phrasen täuschen allerdings nicht darüber hinweg, dass vorstehender Text keinerlei konkrete Informationen bietet. Statt klaren Aussagen werden dem Leser Gemeinplätze präsentiert. Statt konkreten Antworten, wie dieses Unternehmen ihn bei seinem Vorhaben unterstützen kann, wird er mit Plattitüden abgespeist.

Fatal daran ist auch, dass ein solcher Text vom Aufbau und Inhalt her in der Regel als Einleitung fungiert. Zwar erfolgt eine Vorstellung des Unternehmens, allerdings ohne Bezug auf konkrete Schwerpunkte oder Leistungsangebote.

Gutes Textdesign bedeutet nicht nur, inhaltlich gelungene Texte zu schreiben, sondern auch ein Augenmerk darauf zu richten wie die Texte strukturiert sind. Texte sollten so geschrieben werden, dass wichtige Dinge möglichst am Anfang stehen.

Gutes Textdesign

Nicht nur Bilder, nicht nur Webseiten sondern auch Texte lassen sich designen. Ein Webtext muss andere Anforderungen erfüllen als ein Broschürentext. Der Besucher verfügt meistens über wenig Zeit. Dem steht ein riesiges Informationsangebot im Web gegenüber, wo er nach für ihn relevanten Informationen recherchiert. Das Lesen am Bildschirm ist für viele Menschen zudem anstrengend – insbesondere wenn sie tagtäglich viele Stunden vor dem Bildschirm verbringen. Leere Worthülsen, schlecht geschriebene Texte, endlos lange Sätze „ohne Punkt und Komma“ möchten Besucher nicht lesen.

Viele Besucher lesen die Texte zudem nicht brav von oben nach unten, sondern „scannen“ sie zunächst auf Relevanz. Klar Strukturen, Absätze, die Verwendung prägnanter Überschriften unterstützt sie ebenso dabei wie die Wahl einer gut lesbaren Schriftart in ausreichender Schriftgröße.

Suchmaschinenoptimierte Texte

Die Antwort auf die Frage „Wie schreibe ich gute Webtexte?“ beschränkte sich nicht darauf, ansprechend und interessant zu schreiben. Suchmaschinen wie Google folgen bei der Prüfung der Relevanz von Textinhalten eigenen Algorithmen. Wie genau Google Texte analysiert und bewertet ist ein gut gehütetes Geheimnis. Trotzdem haben SEO-Spezialisten viele Anhaltspunkte, wie suchmaschinenoptimierte Texte aussehen müssen, was gut funktioniert und was besser unterlassen werden sollte. Dazu gehören Kriterien wie die Relevanz des Textes, der Texteinstieg, die Formatierung, Häufigkeit und Qualität der Überschriften, die Keyworddichte oder die Länge der Absätze.

Sollen die Inhalte des Webauftritts auch von Suchmaschinen „gut gefunden werden“, so ist es nicht ausreichend, einen guten Texter zu engagieren. Der Texter sollte auch Erfahrung im Verfassen von Webtexten haben. Oder Sie lassen die Texte im Anschluss nochmals von einem Fachmann auf Suchmaschinenfreundlichkeit optimieren – sprechen Sie uns darauf an.

Stichworte: Wie schreibe ich gute Webtexte?, Gutes Textdesign, Textdesign für Webseiten

Der Beitrag Wie schreibe ich gute Webtexte? erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Gutes Webdesign: Erhält ein Webdesigner den Auftrag, eine bestehende Webseite zu prüfen, so packt ihn bei vielen Webauftritten das kalte Grauen. Wird dem Kunden dann die fertige Analyse ausgehändigt, so ist das Erstaunen oft groß. Denn der Kunde war mit dem bestehenden Internetauftritt womöglich sehr zufrieden und fällt aus allen Wolken, wenn er erfährt, dass er für sein Geld minderwertige Arbeit erhalten hat.

Natürlich gilt es bei einer solchen Analyse zu berücksichtigen, dass die Webtechnologie eine schnelllebige ist. Es gibt allgemeingültige Kriterien, die langlebig sind. Und es gibt Bereiche wie Programmcode und Features, die vor wenigen Jahren noch State-of-the-Art waren und heute womöglich längst überholt sind.

So wurden früher Tables (= Tabellen) dafür „missbraucht“, die gesamte Webseite zu strukturieren und zu gestalten. Oder es wurde mit statischen Größen gearbeitet, da die Webseite sowieso nur auf Desktop-Bildschirmen angeschaut wurde. Dabei galt es bestenfalls die Entscheidung zu treffen, ob die Webseite bereits für Bildschirmbreiten von 800 Pixel oder erst ab 1.024 Pixel optimiert werden sollte. Solche Fossilien finden sich auch heute noch im Internet.

Wenn aber eine Webseite erst wenige Jahre alt ist und auf Basis von Tables gestaltet oder wenn sie nicht für Tablets und Smartphones optimiert wurde (= Resposive Design), dann kann auch der Kunde dies sehr einfach prüfen. Und es sollte ihm zu denken geben.

Gutes Webdesign: das Layout

Wird über gutes Webdesign räsoniert, so schärfen viele Anbieter ihr persönliches Profil zuallererst mit Fachbegriffen wie „W3C Validität“, „Responsive Design“, „Cross-Browser-Kompatibilität“, „Semantik“ und vieles mehr. Alles wichtige Aspekte – ohne Frage.

Das erste, was ein Besucher jedoch zu sehen bekommt, ist nicht der HTML-Quellcode, sondern der Webauftritt selbst. Und er benötigt nur wenige Sekunden, um sich zwischen „gefällt mir!“, „geht so“ und „geht gar nicht“ zu entscheiden. Zwar nützt auch das tollste Design nichts, wenn der (Text-)inhalt schlecht geschrieben oder irrelevant ist. Aber der erste visuelle Eindruck entscheidet oft darüber, ob ein Besucher überhaupt auf der Webseite bleibt, oder sie schnellstmöglich wieder schließt. Nervige Pop-Up-Fenster, sei es für die Anzeige von Werbung oder mit der Aufforderung, den Newsletter zu abonnieren, verscheucht viele Besucher. Trotzdem verzichten auch viele große und bekannte Portale bis heute nicht auf solche Gimmicks.

Ob das Layout einer Webseite gelungen ist oder nicht, ist und bleibt natürlich immer Geschmackssache. Und über Geschmack lässt sich bekanntlich streiten. Egal wie gelungen ein Webauftritt gestaltet wurde: Kritiker wird es immer geben.

Es gibt allerdings einige Grundregeln für gutes Webdesign

Im ersten Schritt möchten wir diese Grundregeln vorstellen und im Anschluss technische Aspekte vorstellen, welche gut konstruierte Webseiten berücksichtigen.

1. Ein klares, übersichtliches Weblayout

   Präsentiert sich ein Webauftritt überladen, so schreckt das den Besucher ab. Gefragt sind klare Strukturen. Der Besucher soll die Inhalte übersichtlich präsentiert bekommen und die für ihn relevanten Informationen schnell finden können.

2. Usability (= Benutzerfreundlichkeit )

   Die Benutzerfreundlichkeit wird oft in einem Atemzug mit dem Navigationsmenü genannt. Doch diese Perspektive ist zu eng gefasst. Denn zur Usability einer Webseite gehört neben einer klaren Strukturierung und guten Präsentation der Inhalte unter anderem auch der Text.

3. Text-Design

   Kontrastarmer oder zu kleiner Text mag stylish aussehen, erschwert aber die Lesbarkeit. Ebenso Text, der auf unruhigen Hintergrundbildern präsentiert wird. Zu bevorzugen ist ein Text-Design, bei dem schwarzer Text auf weißem oder hellem Hintergrund dargestellt wird. Oder alternativ weißer Text auf sehr dunklem Hintergrund. Der dadurch entstehende Kontrast erhöht die Lesbarkeit des Textes dramatisch – die Besucher werden es Ihnen danken.

   Zur Usability einer Webseite gehört aber nicht nur eine gute Lesbarkeit des Textes, sondern auch der Textinhalt. Häufen sich die Rechtschreibefehler, so wirkt das auf den Leser abschreckend. Schlecht geschriebene Inhalte und endlos lange Sätze reduzieren die Benutzerfreundlichkeit ebenso wie spärlich eingesetzte Absätze. Langweilige Inhalte tragen dazu bei, dass der Benutzer schnell wieder weg ist.

   Sie sollten zudem darauf verzichten, überflüssige Informationen bereitzustellen. Viele Webseiten begrüßen ihre Besucher mit „Herzlich Willkommen auf unsere Webseite“. Das ist weder interessant noch kreativ und erzeugt beim Leser eher Resignation als Begeisterung. Allgemeinplätze im Broschüren-Stil erfreuen die meisten Besucher genauso wenig: „Wir sind ein innovatives Unternehmen der Medienbranche, welches die Zeichen der Zeit früh erkannt hat und diese Erkenntnisse effizient im Dienste seiner Kunden einsetzt.“ So kann man schreiben. Muss aber nicht. Und ganz besonders nicht zu Beginn des Textes.

   Denn auch der Textaufbau ist ein wichtiges Kriterium. Texte sollten so geschrieben werden, dass wichtige Dinge möglichst am Anfang stehen. Bei umfangreichen Textinhalten auf einer Seite kann natürlich nicht alles in den Anfang gepackt werden. In diesem Fall sollte eine interessante Einleitung dafür sorgen, dass der Leser „Lust auf mehr bekommt.“

4. Verwendung von Textüberschriften und Absätzen

   Oft bleibt der Besucher nur kurz auf der Webseite. Achten Sie einmal auf Ihr eigenes „Surfverhalten.“ Nehmen Sie sich die Zeit, eine halbe bis eine Stunde auf einer Internetseite zu verweilen? Sofern der Inhalt interessant, informativ und weiterführend ist, kann dies durchaus der Fall sein. Im Durchschnitt bleiben Besucher aber – je nach Webportal und Branche – oft nur wenige Minuten auf einer Webseite.

   Viele Besucher lesen die Texte zudem nicht brav von oben nach unten, sondern „scannen“ sie zunächst schnell darauf, ob sie hier die gewünschten Informationen finden. Dabei werden sie durch prägnante Textüberschriften ebenso unterstützt wie durch eine klare Struktur, Absätze oder die Verwendung von Listen.

5. Wahl der Schriftart

   Zum Text-Design gehört natürlich auch die Wahl einer geeigneten Schriftart. Die meisten Leser bevorzugen am Bildschirm serifenlose Schriften (= „Sans Serif“). Diese zeichnen sich dadurch aus, dass die Strichstärke der Buchstaben gleichmäßig ist und die Schrift keine Serifen aufweist. Serifen sind mehr oder weniger feine Linien, die einen Buchstaben am Ende – quer zu seiner Grundrichtung – abschließen.

   Früher wurden auf Webseiten ausschließlich Standard-Schriftarten verwendet. Denn es konnten nur Schriftarten angezeigt werden, die der Benutzer auch auf seinem Computer installiert hat. Es wurde beispielsweise definiert:

   font-family: Arial, Helvetica, Verdana, sans-serif;
   
   Das bedeutet, dass der Browser angewiesen wird, die Schrift Arial zu verwenden, wenn sie auf dem Computer vorhanden ist. Arial ist eine Standard-Schriftart unter Windows. Falls Arial nicht installiert ist, soll er Helvetica nehmen, eine Standardschriftart auf dem Mac. Sind beide nicht vorhanden, so soll Verdana zum Einsatz kommen und ist auch diese Schrift nicht verfügbar, so soll wenigstens eine serifenlose Schrift verwendet werden.

   Heute setzen viele Webseiten so genannte Web-Fonts (= Web-Schriftarten) ein. So bieten die Google-Webfonts eine umfangreiche Auswahl aus verschiedenen Schriftarten. Der Webdesigner sollte trotz dieser verführerischen Möglichkeit dennoch einen klaren Kopf behalten und folgendes berücksichtigen:

   1. Ist die gewählte Font gut lesbar?
   2. Bringt der Einsatz einer solchen Webfonts einen Mehrwert? Indem auf diesem Wege zum Beispiel die CI-Font des Kunden in die Webseite integriert werden kann?
   3. Denn jede Webfont muss gesondert geladen werden, was das Datenvolumen erhöht und sich bei großen oder umfangreichen Fonts ggf. auch negativ auf das SEO (= Suchmaschinenoptimierung) auswirken kann.
   4. Es sollte eine klare Linie beibehalten werden. Webfonts sind kein Selbstzweck. Auch wenn es problemlos möglich ist, macht es keinen Sinn, auf der Webseite mit einem halben Dutzend unterschiedlicher Fonts zu agieren und so ein uneinheitliches Layout zu erzeugen.

6. Navigationsmenü

   Vor der Umsetzung sollte ein Webauftritt gut konzeptioniert werden. Was ist wirklich wichtig? Welche Kategorien sind so wichtig, dass sie einen eigenen Hauptmenüpunkt rechtfertigen? Denn einerseits ist der für das Hauptmenü zur Verfügung stehende Platz begrenzt. Andererseits zeugt ein ausuferndes Hauptmenü von mangelhafter Planung oder der Unfähigkeit, klare Prioritäten zu setzen.

   Bei einer umfangreicheren Webseite benötigt das Hauptmenü in der Regel Untermenüpunkte. Auch hier sollte bereits im Vorfeld ein Konzept erarbeitet werden. Idealer Weise sollte es nur eine Untermenü-Ebene geben. Bei sehr vielen Inhaltsseiten maximal zwei Untermenü-Ebenen. Eine zu starke Diversifikation trägt zur Unübersichtlichkeit bei.

   Eine Webseite ist kein „Ratespiel“: Der Besucher sollte jederzeit die Antwort auf die Frage „woher komme ich und wohin gehe ich?“ kennen. Dazu ist es erforderlich, dass der aktuelle Haupt- und gegebenenfalls aktuell aktive Untermenüpunkt hervorgehoben wird. Beispielsweise durch eine andere Textfarbe oder eine andere Hintergrundfarbe des Navigationselementes.

   Dies ist ein Kriterium, welches erstaunlich viele Webseiten stiefmütterlich behandeln. So verfügen beispielsweise auch viele WordPress-Themes über keine entsprechende Hervorhebung aktiver Navigationselemente.

   Besonders bei umfangreicheren Webseiten ist ein Breadcrumb (= Brotkrumenpfad) hilfreich. Er zeigt dem Besucher an, in welcher Verzweigung der Webseite er sich aktuell befindet.

Gutes Webdesign: die Technik

Die zuvor genannten Kriterien für ein gutes Webdesign geben Designern – aber auch dem Kunden – Anhaltspunkte ob ein Design die grundsätzlichen Voraussetzungen für gutes Webdesign erfüllt. Auf diesem Wege kann auch der Kunde – selbst als Laie – prüfen, ob bei der Erstellung der Webseite sauber gearbeitet wurde.

Es gibt aber noch weitere Bereiche, die zu einem guten Webdesign gehören und die nicht auf den ersten Blick ersichtlich sind. Insbesondere im Hinblick auf die eingesetzte Technik.

Prüfen der Browserkompatibilität

Wird die Webseite auf unterschiedlichen Browsern fehlerfrei dargestellt? Kleinere Abweichungen bei der Darstellung unter unterschiedlichen Browsern sind normal, da jeder Browser den HTML-Code interpretiert und den Webseiteninhalt auf dieser Basis darstellt. Die Webseitenelemente sollten sich aber unabhängig vom Browser einheitlich präsentieren und korrekt dargestellt werden.

Die am weitesten verbreiteten und damit wichtigsten Browser sind Chrome, Firefox, Safari und Internet Explorer. Zumindest auf neueren Versionen dieser Browser – d.h. nicht älter als ca. 5 Jahre – sollte die Webseite korrekt dargestellt werden. Mehr Abwärtskompatibilität ist natürlich nicht falsch und auch nicht unmöglich. Sie ist jedoch oft aufwendig und verursacht dadurch zusätzliche Kosten.

Prüfen des Responsive Designs

Erst kürzlich durften wir eine einfach gestaltete TYPO3 Webseite begutachten, die vor weniger als zwei Jahren erstellt wurde und nicht responsive war, d.h. nicht für Mobilgeräte optimiert wurde. Dies muss nicht zwangsläufig auf fehlendes Know-how zurückzuführen sein. Vielleicht stand für die Webseite nur ein kleines Budget zur Verfügung. Es wäre aber auch in diesem Fall sinnvoller gewesen, statt auf TYPO3 auf ein einfacheres CMS-System zurückzugreifen und dafür Responsive Design zu integrieren.

Ob eine Webseite responsive ist, lässt sich oft auch am Desktop-Computer prüfen, indem das Browserfenster immer schmaler gezogen wird. Passt sich das Layout an den zur Verfügung stehenden Platz an, so ist die Webseite responsive.

Es kann allerdings sein, dass eine Device-Detection zum Einsatz kommt. Also ein Tool, welches überprüft, ob der Besucher die Webseite mit einem Desktop-Computer, einem Tablet oder einem Smartphone aufruft. Und dass je nach Ergebnis dieser Überprüfung die Anzeige angepasst wird. Möglich ist auch, dass der Webdesigner bei den Media Queries statt mit width mit device-width gearbeitet hat und das Layout nur angepasst wird, wenn der Webseitenaufruf tatsächlich mit einem Mobilgerät erfolgt.

Falls also bei einer Verringerung der Browserfensterbreite keine Layoutanpassung erfolgt, sollte die Webseite sicherheitshalber zusätzlich auf einem Mobilgerät geprüft werden.

Prüfen des Quellcodes

Auch der Laien kann über den Source-Code (= Quellcode) einer Webseite zumindest grundlegende Schwächen erkennen. Der Quellcode lässt sich über das Browsermenü aber auch über Shortcuts (= Tastenkürzel) aufrufen. Beim Firefox, Chrome und Internet Explorer über STRG+U, beim Safari am Mac mittels CMD+ALT+U.

Finden sich im Quellcode endlose Einträge der Form:

<table>
  <thead>
    <tr>
      <th>Kopf</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inhalt</td>
    </tr>
  </tbody
</table>

so ist die Webseite entweder schon sehr alt (ca. aus dem Jahre 2006/2007 oder älter) oder jemand hat sein Handwerk nicht ordentlich gelernt. Neuere Webseiten basieren auf dem CSS Box-Modell. Tabellen dürfen selbstverständlich weiterhin eingesetzt werden, allerdings sollten sie nur dann Verwendung finden, wenn tatsächlich Tabellen benötigt werden. Als Layoutinstrumente sollten sie schon seit mehr als einem Jahrzehnt nicht mehr zum Einsatz kommen.

Bei Content Management Systemen wie z.B. TYPO3 oder dem Blogsystem WordPress finden sich im Quellcode auch Angaben zum System. Bei TYPO3 lassen sich über das Copyright Rückschlüsse auf die Aktualität ziehen („TYPO3 is copyright 1998-2017 of Kasper Skaarjo.“). Bei WordPress findet sich folgende Angabe:

<meta name="generator" content="WordPress 4.8" />

Über die Versionsnummer (vorstehend: 4.8) lässt sich das Alter der WordPress-Installation prüfen.

Hierzu ist allerdings auch folgendes festzuhalten:
die regelmäßige Prüfung und Systemaktualisierung ist mit einem entsprechenden Aufwand verbunden, den der Webdesigner oder die Webagentur nicht kostenfrei leisten kann. Ist der Kunde nicht bereit in die regelmäßige Pflege seines Systems zu investieren, so veraltet das CMS.

Prüfen des Markup auf Semantik und Validität

Unter Markup wird der HTML-Code einer Webseite verstanden. Dieser sollte idealer Weise „valide“ sein, also keine Fehler aufweisen. Kleinere Fehler sind oft verschmerzbar. Sie werden gegebenenfalls auch von Extensions oder Plugins von Drittanbietern verursacht. Zudem kann eine Webseite bei der Fertigstellung durchaus 100 Prozent valide sein, die Redakteure bei der Einpflege neuer Inhalte im Anschluss aber „Fehler einbauen.“ Dennoch ist es ein Unterschied, ob 10 bis 20 Fehler gefunden werden oder hunderte. Wir haben schon Webseiten geprüft, die mehrere hundert Fehler enthalten haben – und zwar pro Seite.

Zu viele Fehler bzw. sich wiederholende Fehler auf unterschiedlichen Inhaltsseiten sind ein Indikator dafür dass der Webdesigner nicht sauber gearbeitet hat. Sofern die Webseite nicht „für besonders kleines Geld“ realisiert wurde, sollten solche Fehler nicht vorkommen.

Problematisch ist hier oft auch der Einsatz von WordPress-Themes. Webseiten mit WordPress werden nicht selten relativ günstig realisiert und basieren auf Vorlagen. Diese Vorlagen halten häufig nicht zu 100 Prozent die HTML-Standards ein. Circa ein bis zwei Dutzend Fehler im Markup sind hier nicht unüblich.

Das HTML lässt sich prüfen, indem die URL der Zielseite über den W3C Markup Validation Service untersucht wird.

Auch das verwendete CSS lässt sich prüfen indem im Validator der Pfad zur CSS Datei bzw. zu den CSS Dateien angegeben wird.

Semantik: auch wenn das HTML selbst valide ist, kann der semantische Aufbau fehlerhaft sein. So sollten Überschriften über die entsprechenden H1- bis H6-Tags auch als solche formatiert werden. Absätze sollten durch <p></p> Tags gewrapped (= eingeschlossen) werden usw. Hier sollte eine klare Struktur vorliegen. Dies wird nicht vom W3C Validator geprüft und somit auch nicht beanstandet.

Ladezeiten einer guten Webseite

Je schneller die Inhaltsseiten eines Webauftritts geladen werden, desto besser. Die Ladezeit wird durch unterschiedliche Aspekte beeinflusst:

• Die Geschwindigkeit, mit der der Server die angeforderten Daten bereitstellt.
• Der Einsatz von Caching-Techniken, damit wiederkehrende Elemente im Browsercache gespeichert und beim Aufruf einer neuen Seite nicht nochmals geladen werden müssen.
• Die Größe der Dateien – dazu gehören das HTML sowie der Inhaltstext aber auch das CSS, Bilder und weitere Mediaelemente (z.B. Videodateien oder Audiodateien) sowie ggf. JavaScript.

Gelegentlich wird argumentiert, dass in Zeiten schneller DSL-Verbindungen die Ladezeiten keine große Rolle mehr spielen. Wenn eine einzige Inhaltsseite aber 5 MB, 10 MB oder gar mehr aufweist, ist das gleich in mehrfacher Hinsicht kontraproduktiv. Zum einen ruft ein Teil der Besucher die Webseite von unterwegs auf und verfügt dabei oft weder über schnellen Internetzugang noch über ein unbegrenztes Datenkontingent. Zum anderen prüfen Suchmaschinen bei der Bewertung einer Webseite auch die Ladegeschwindigkeit bzw. die Größe der abzurufenden Inhalte. Diese Kriterien fließen in die Ranking-Bewertung mit ein.

Es gibt eine Reihe von Tools, mit der die Ladezeiten von Webseiten geprüft und analysiert werden können.

Suchmaschinenoptimierung

Längst nicht jede Werbeagentur und auch nicht jede Webagentur ist auf Suchmaschinenoptimierung spezialisiert. Da dieser Bereich sehr umfassend und komplex ist, kann an dieser Stelle auch nicht umfassend darauf eingegangen werden.

Dennoch lässt sich auch durch den Laien in einem ersten Schritt prüfen, ob seine Webseite überhaupt bzw. ausreichend suchmaschinenoptimiert ist. Dazu werden einzelne Inhaltsseiten der Internetpräsenz ausgewählt und dafür das Ranking geprüft.

Nehmen wir beispielsweise an, ein Unternehmen fertigt Motorbauteile an und nutzt dafür modernste CNC-Maschinentechnik. Nun kann nicht „aus dem Stand“ davon ausgegangen werden, dass diese Firma bei der Google-Suche nach CNC-Maschinentechnik ganz oben in der Suchergebnisliste erscheint. Dafür sind von Seiten der Webagentur entsprechende On-Site- und Off-Site-Suchmaschinenoptimierungsmaßnahmen und oft auch eine regelmäßige Betreuung erforderlich. Zudem spielt auch eine wichtige Rolle, wie populär der Suchbegriff ist und wie viele Mitbewerber um eine gute Platzierung es gibt.

Wurde die zugehörige Inhaltsseite gut optimiert, so sollte sie jedoch zumindest bei einer regionalen Suche – z.B. „CNC-Maschinentechnik Krefeld“ – gefunden werden.

Stichworte: Gutes Webdesign

Der Beitrag Gutes Webdesign: Wie erkenne ich eine gute Webseite? erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Am 02.04.2019 ging eine E-Mail von der Heute GmbH aus Solingen bei uns ein, mit der (angeblich) ein Angebot eingeholt werden soll.

Nun ist es nicht ungewöhnlich, dass unsere Webagentur auf die Realisation neuer Websites angesprochen wird. Es ist auch nicht ungewöhnlich, dass direkt nach einem Angebot gefragt wird. Auf den ersten Blick hat die E-Mail auch (relativ) seriös gewirkt. Es gibt die Heute GmbH in Solingen. Auch die Adressangabe in der E-Mail stimmt. Letzteres ist allerdings kein Hexenwerk. Denn die Adresse ist nicht nur im Impressum der Heute GmbH-Website zu finden, sondern auf jeder Inhaltsseite unten im Footer.

Auch die Absender E-Mail-Adresse scheint auf den ersten Blick korrekt zu sein. Aber es handelt sich um eine Viren Mail mit gefälschtem Absender.

Viren Mails mit gefälschtem Absender

Stutzig machten uns bei dieser E-Mail verschiedene Dinge:

• Sie ist an „undisclosed-recipients“ adressiert. Nun ist es nicht ungewöhnlich, wenn sich Unternehmen von mehreren Anbietern Angebote erstellen lassen. Aber es stellt ein plumpes Vorgehen dar, das so offenkundig zu tun.
• Die Anrede „Schönen Tag,“ wirkt ebenso wenig professionell wie der fordernde Text.
• Im Anhang befindet sich eine .iso-Datei. Diese muss man entweder speziell mounten oder auf eine CD bzw. DVD brennen. Es ist eher unwahrscheinlich, dass ein Unternehmen aus dem Branchenbereich der HEUTE Maschinenfabrik GmbH & Co. KG einen solchen Anhang verschickt.
• Und, das wichtigste: unser Virenscanner hat die E-Mail markiert und den Betreff geändert in: Message has a suspicious part :Angebot anfordern-10204-08-4.

Es stellt sich die Frage, warum ein offenbar seriöses Unternehmen wie die HEUTE Maschinenfabrik GmbH virenverseuchte E-Mails verschickt?

Viren Mail der Heute GmbH mit Virus

Handelt es sich vielleicht um eine E-Mail mit einer gefälschten Absenderadresse?
Um das zu prüfen, haben wir die E-Mail-Headerinformationen ausgelesen.

Ein Auszug:

Return-Path: <>
X-Original-To: […]
Delivered-To: […]
Received: from server.linux71.papaki.gr (server.linux71.papaki.gr [94.130.11.240])
by […]
for […]; Tue,  2 Apr 2019 15:40:41 +0200 (CEST)
Received: from webmail.lampstore.gr (localhost.localdomain [IPv6:::1])
by server.linux71.papaki.gr (Postfix) with ESMTPSA id 0B66D99C426;
Tue,  2 Apr 2019 16:27:54 +0300 (EEST)
Authentication-Results: server.linux71.papaki.gr;
spf=pass (sender IP is ::1) smtp.mailfrom= smtp.helo=webmail.lampstore.gr

[…]

X-PPP-Message-ID: <>
X-PPP-Vhost: lampstore.gr
X-KasLoop: m01ec852

Die E-Mail wurde offenbar über einen griechischen Server versendet. Die URL papaki.gr gibt es, dort ist ein Paralles Panel hinterlegt. Die Abfrage der IP über utrace.de (http://www.utrace.de/?query=94.130.11.240) ergab, dass der Provider die „D2 International Investment Ukraine Ltd.“ ist. Die IP scheint allerdings in Deutschland lokalisiert zu sein.

Offenbar hat der Versender der virenverseuchten E-Mail die Absenderadresse gefälscht. Es ist wohl auch davon auszugehen, dass bei der HEUTE GmbH kein Sascha Schönbeck beschäftigt ist. Sascha Schönbeck hätte bei einem Mittelständischen Unternehmen zudem auch eher seine Durchwahl als die Telefonnummer der Zentrale angegeben.

» Mehr zu Viren und Trojanern

Stichworte: Viren Mails mit gefälschtem Absender, Mail der Heute GmbH mit Virus

Der Beitrag Viren Mails mit gefälschtem Absender erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Das wichtigste vorab: dies ist kein „Sponsored Post“. Das bedeutet, dass wir für diesen Artikel weder von NordVPN bezahlt werden noch sonstige Gegenleistungen – beispielsweise in Form einer kostenlosen Nutzung von NordVPN – erhalten.

Warum wir überhaupt VPN benötigen und welche Vorteile VPN bietet, beleuchten wir in diesem Artikel.

Nachdem wir längere Zeit den Anbieter Hide My Ass genutzt haben, war es an der Zeit, etwas Neues auszuprobieren. Zunehmende technische Probleme, Datenschutzaspekte und nicht zuletzt der relativ hohe Preis haben Hide My Ass für uns zunehmend unattraktiv gemacht.

NordVPN im Test

Bei der Recherche nach einem alternativen Anbieter ist NordVPN in die engere Wahl gekommen und hat letztendlich den Zuschlag erhalten. Das bedeutet allerdings nicht, dass NordVPN zwangläufig der beste Anbieter ist – es gibt durchaus attraktive Alternativen.

NordVPN im Test: Die Computerzeitschrift CHIP hat 2018 verschiedene Anbieter getestet und NordVPN zum Testsieger gekürt. VPN-Tests anderer Anbieter wie z.B. vom PC-Magazin kamen zu ähnlichen Ergebnissen, aber es gibt natürlich auch Tests, die Anbieter wie CyberGhost favorisieren.

NordVPN im Test: Uns hat bei NordVPN neben der – gemäß CHIP – hohen Geschwindigkeit, dem hohen Datenschutz und dem Verzicht auf LogFiles auch das Preis-/Leistungsverhältnis gefallen. Während sich ein Monats-Paket mit 10,50 EUR/Monat relativ kostspielig gestaltet, verringert sich der Preis bei den Jahrespaketen. Am günstigsten ist das 3-Jahres-Paket, welches aktuell für nur 2,62 EUR pro Monat angeboten wird. Dafür zahlen wir somit rund 95 EUR für drei Jahre im Voraus, können uns mit 6 Geräten gleichzeitig mit dem NordVPN-Netzwerk verbinden und es stehen weltweit ausreichend Server zur Verfügung.

Testbericht NordVPN

NordVPN spielt in vielerlei Hinsicht seine Stärken aus, offenbart allerdings auch einige Schwächen:

Benutzeroberfläche von NordVPN

Komplexe Sicherheitsfunktionen werden unter einer klaren und intuitiv bedienbaren Benutzeroberfläche zur Verfügung gestellt.

Sicherheit von NordVPN

Aktuell stehen über 5.400 sichere VPN-Server in rund 60 Ländern zur Auswahl und es kommt die besonders sichere AES 256-CBC-Verschlüsselung zum Einsatz. NordVPN verspricht, keine Nutzerdaten zu speichern und keine LogFiles (Protokolldateien) anzulegen. Firmensitz ist Panama. Kritiker bemängeln, dass beim Datenschutz deshalb möglicher Weise nicht die europäischen Standards eingehalten werden. Andererseits entzieht sich NordVPN auf diesem Wege den Interessen der USA (FBI, NSA) oder Großbritannien (Secret Service). Zudem haben die Wirtschaftsprüfer PricewaterhouseCoopers 2018 einen NordVPN Test durchgeführt und zertifiziert, dass NordVPN zum Prüfzeitpunkt tatsächlich die selbst auferlegten strengen Datenschutzregeln erfüllt hat.

Unterstützte Betriebssysteme und Verbreitung von NordVPN

NordVPN steht für alle wichtigen Betriebssysteme zur Verfügung: sowohl für Windows, macOS und Linux als auch für Android, Android TV und iOS/iPhone/iPad.

Derzeit rangiert NordVPN im Google Play Store auf Platz 5 der am häufigsten heruntergeladenen APPs.

Standardfunktionen von NordVPN

Über eine schematisierte Weltkarte können Sie visuell zum Land Ihrer Wahl navigieren und dort per Klick einen Server auswählen. Oder Sie nutzen dafür die ausführliche Länderliste in der Seitenbar der Anwendung. Es ist auch möglich, sich unkompliziert mit dem schnellsten Server zu verbinden bzw. mit dem schnellsten Server des „Wunschlandes“. P2P, Dedicated IP, Double VPN oder Onion Over VPN gehören ebenso zur Ausstattung. Trotzdem ist die Bedienung von NordVPN sehr einfach und intuitiv.

Zusatzfunktionen von NordVPN

In den Einstellungen können Sie festlegen, dass NordVPN zusammen mit dem Betriebssystem automatisch gestartet wird oder der Internetzugriff nur erlaubt wird, wenn eine aktive VPN-Verbindung besteht (Internet Kill Switch). Noch relativ neu ist die Funktion CyberSec, die vor Malware, Phising und anderen Bedrohungen schützen soll. Werbebanner enthalten häufig Tracking-Code. Folgerichtig lässt sich Anzeige von Werbebannern mit Tracking-Code bei Verwendung von NordVPN unterbinden.

Geschwindigkeit von NordVPN

Eine bessere Performance würden wir uns bei der Geschwindigkeit der VPN-Verbindung wünschen. Laut Testbericht der Computerzeitschrift CHIP ist NordVPN mit 97% der zweitschnellste VPN-Anbieter. Getoppt nur von ProtonVPN Plus, welches 100% erreicht. Auch CHIP weist darauf hin, dass VPN den Internetanschluss bremst. Im Artikel heißt es:

„Aber auch beim Bestwert von NordVPN geht die Datenrate von unserem Testanschluss von 388 MBit/s im Schnitt auf 263 MBit/s herunter.“

Eine Aussage, die wir nicht bestätigen können. Wir haben NordVPN mit Kabel-DSL-Anschlüssen von 120 MBit/s, 250 MBit/s und 400 MBit/s an verschiedenen Tagen und zu verschiedenen Uhrzeiten getestet und dabei jeweils den schnellsten verfügbaren Server ausgewählt. Bei keinem Test konnten wir mehr als maximal 90 MBit/s (gerundet) im Download erreichen. Im Mittel lag der Wert eher zwischen 50 MBit/s bis 80 MBit/s. Im Falle der 400 MBit/s-DSL-Verbindung hatten wir ohne VPN eine per Speedtest gemessene Download-Rate von 443 MBit/s und mit NordVPN-Verbindung noch 79 MBit/s. Eine Leistungseinbuße von rund 560%.

Andererseits bedeuten 80 MBit/s immerhin eine Downloadgeschwindigkeit von 10 MB pro Sekunde.

Anders sah es bei der Upload-Geschwindigkeit aus. Diese schwankte stärker und betrug teilweise nur 1/3 der Upload-Geschwindigkeit die zur selben Zeit ohne VPN-Verbindung erreicht wurde. Die VPN-Upload-Geschwindigkeit von NordVPN kann aber durchaus auch in den Leistungsbereich vordringen, der ohne VPN-Verbindung erzielt wird. Die Paketlaufzeit (Latenz) ist gut – betrug sie ohne VPN-Verbindung 18 ms, so lag sie bei unseren NordVPN Tests mit VPN-Verbindung im Bereich von 25 ms.

Stabilität der Verbindung

Leider kommt es bei NordVPN immer wieder zu sporadischen Verbindungsabbrüchen. Dann lassen sich E-Mails erst dann wieder abrufen oder Webseiten erst dann wieder laden, wenn die VPN-Verbindung beendet und neu gestartet wurde.

Probleme mit dem Mailversand

Tipp: Unabhängig vom VPN-Anbieter stellt sich für Anwender häufig folgendes allgemeines Problem: E-Mails lassen sich zwar abrufen, aber bei einer bestehenden VPN-Verbindung nicht mehr versenden. Sie landen im Postausgang und werden dort – im schlimmsten Fall unbemerkt – aufbewahrt. Das hat damit zu tun, dass viele Mailprogramme den Postausgangsserver über Port 25 betreiben und die VPN-Software diesen Port aus Sicherheitsgründen blockiert. Abhilfe schafft, den Postausgangsserver (SMTP) über Port 587 laufen zu lassen.

Stichworte: NordVPN im Test, NordVPN Test, Testbericht NordVPN, wie gut ist NordVPN?

Der Beitrag NordVPN im Test. erschien zuerst auf Webdesign Tipps / Webdesign Blog.