Was ist HTTPS und brauche ich das?

HTTPS steht für Hypertext Transfer Protocol Secure und ist im technischen Sinne kein eigenes Protokoll. Die Technik  von HTTPS heißt heutzutage TLS (Transport Layer Security). TLS ist eine Weiterentwicklung des  noch genutzten Protokolls SSL (Secure Sockets Layer). Die Verwendung von HTTPS erkennt man im Browser daran, dass die Internetadresse mit https statt http beginnt. Im Moment zeigen viele Browser ein durchgestrichenes Schloß bei unverschlüsselten Webseiten per http. Bei verschlüsselten Webseiten die über https erreichbar sind ein grünes Schloß.

Die drei Ziele von SSL/TLS sind Vertraulichkeit, Datenintegrität und Authentizität:
Vertraulichkeit wird durch die Verschlüsselung der Verbindung gewährleistet. Damit persönliche Daten z.B. Kreditkartendaten nicht von Dritten entwendet und missbraucht werden können. Durch die Gewährleistung der Integrität der Daten wird garantiert, dass eine Manipulation z.B. der Bestellung in einem Onlineshop nicht möglich ist. Unter Authentizität versteht man, dass die Identität des Onlineshop-Betreibers / Webseitenbetreiber für den Kunden überprüfbar ist.

Zusammengefasst dient die verschlüsselte Übertragung mit HTTPS folgenden Zwecken:

Vertraulichkeit: Kein Dritter soll die Daten mitlesen können.
Integrität: Die Daten können während der Übertragung nicht unbemerkt verändert werden
Authentizität: Der Kommunikationspartner ist verifizierbar – dafür braucht man die Zertifikate, die auf die Domain ausgestellt sind

Bei der Übertragung von sensiblen Kundeninformationen, wie z.B. Passwörter oder Kreditkartendaten, ist der Einsatz eines von einer Zertifizierungsstelle signierten SSL-Zertifikats Pflicht. Muss nur ein persönlicher Login-Bereich geschützt werden, reicht evtl. ein selbst signiertes oder vom Hosting-Provider signiertes Zertifikat aus.

Bei Webseiten ohne sensible Informationen, kann eine abgesicherte Verbindung trotzdem angeboten werden. Durch die Verschlüsselung ist es für Dritte nicht möglich zu sehen, welche Seiten einer Website genau aufgerufen werden.

Ein Pluspunkt in Sachen SEO ist eine bessere Listung in den Suchergebnissen bei Google.

Ab Juli 2018 wird der neue Chrome unverschlüsselte Webseiten mit einer größeren Warnmeldung als unsicher kennzeichnen.

Falls der Hosting Anbieter die kostenlosen Let’s Encrypt SSL-Zertifikate noch nicht anbietet, kann man im Kundenaccount ein kostenpflichtiges SSL-Zertifikat bestellen. Das teuerste Zertifikat ist eines, bei dem der Name direkt in der Browser-Adressleiste steht und auch Subdomains geschützt sind. Ein solches Zertifikat sieht man oft bei großen Webseiten z.B. Twitter, …, oder Onlineshops. Nur das Zertifikat beantragen reicht nicht. Der Webauftritt muss überarbeitet werden, damit alle Ressourcen per https geladen werden können. Die .htaccess muss so angepasst werden, dass sie per 301 Weiterleitung den Internetauftritt per https aufruft, auch wenn ein alter Link per http aufgerufen wird.

Umstellung auf HTTPS

Wichtig: BackUp / Sicherung anlegen

Man muss alle Links auf der Webseite ebenfalls auf HTTPS ändern. Das geht prima mit der Funktion Suchen und Ersetzen. Bei WordPress gibt es das Plugin: Better Search Replace. Der erste Schritt bei WordPress ist die Webseiten-URL im WordPress Adminbereich auf HTTPS zu setzen. Die Einstellung im Dashboard  unter Einstellungen / Allgemein vornehmen.

Zur Überprüfung kann man die Webseite Why No Padlock nutzen, um alle Fehlermeldungen zu sehen. So siehst man, welche URLs noch auf HTTP laufen und damit verbessert werden müssen. Man kann eine Liste der Fehlermeldungen auch im Browserinspektor (z.B. bei Chrome oder Firefox) einsehen, dazu klickt man einfach im Browserinspektor auf Console und die Liste der http-Links wird angezeigt.

Zuletzt muss man mit Hilfe einer Weiterleitung die HTTP URLs auf die neue HTTPS Version umleiten. So wird die Webseite immer in der HTTPS Version angezeigt, auch wenn jemand eine alte HTTP URL der Webseite aufruft.

Die .htaccess auf dem Server wie folgt anpassen/ergänzen:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Links zur Überprüfung:

Tipp Why No Padlock?

Überprüfung „mixed content“ bei der Umstellung auf https

Tipp SSL Server Test (Powered by Qualys SSL Labs)

Test nach der Umstellung von Webseiten auf https

Tipp Redirect Checker | 301re.direct

Überprüfung von suchmaschinenfreundlichen Weiterleitungen

Tipp www.experte.de/ssl-check

SSL Check – Übersichtlich und einfach zu handhaben – Tool überprüft den HTTP Security Header auf die richtige Konfiguration

Wenn man Google’s Search Console nutzt, sollte man darauf achten, dass auch dort die HTTPS Version der Webseite angegeben wird. Auch bei der Statistik muss man die HTTPS Version der Webseite angeben. Außerdem sollte die XML-Sitemap Datei aktualisiert werden. Bei externen Links aktualisieren was möglich ist z.B. soziale Netzwerke, etc..

QR-Code Generator

Da ich Generatoren aller Art liebe, da sie einem oft eine Menge Zeit ersparen und man auch privat und für den Verein tolle Sachen machen kann, habe ich einige Generatoren zum Thema QR Code ausprobiert. Um für meine Kontaktseite einen farbigen QR-Code zu generieren, habe ich diesen QR-Generator ausgewählt. Er gefiel mehr sehr gut, da er viele Möglichkeiten bereits im kostenlosen Bereich bietet.
Ich habe die Version VCARD für meine Kontaktseite auf meiner Homepage ausgewählt, da nach dem Scan, Firmenname, Email, alle Telefonummern und die Webseitenurl zu speichern sind.

contact qr code

Webdesign für mobile Geräte

Im Laufe der letzten Zeit sind vermehrt mobile Endgeräte, z.B. Tablet & Smartphone auf den Markt gekommen, die zum Teil Probleme mit der Darstellung bzw. Benutzung einiger bestehenden Desktop – Webseiten haben.
Es gibt verschiedene Möglichkeiten diesem Problem zu begegnen: Eine Webseite für alle Geräte die sich anpasst, schimpft sich „Responsive Webdesign“ oder über den Server: Dynamic Serving. Als dritte Option bietet sich eine separate mobil-optimierte Webseite: mobile Inhalte sind dann unter einer anderen URL abrufbar.
Da Google ab April 2015 Unterschiede in den Suchergebnissen machen wird, ist es von Vorteil eine mobilfähige Homepage zu haben, um in allen Suchergebnissen (Desktop & mobil) gut zu ranken.
Einen WordPress-Blog kann man mit einem Plugin aufrüsten, z.B. WP-Touch.

Das neue Joomla 3.0

Am 27. September 2012 wurde Joomla 3.0  released. Joomla wird von allen die mit  Webdesign zu tun haben geschätzt. Das neue Joomla bringt viele neue Features, aber auch Vor- und Nachteile, mit sich.

Neue Features

Joomla bringt eine Reihe von Neuerungen mit sich. Die erste Neuerung, die dem Benutzer ins Auge fällt, ist die vereinfachte Installation. Die Installation von Joomla erfolgt nun in nur drei Schritten und ist damit deutlich kürzer als in den Vorgängerversionen.

Ebenfalls wurden auch weitere, kleinere Erneuerungen durchgeführt: Die Vorlage Beez3 wurde aktualisiert, es wird nun jFeed als Feed-Management anstatt von SimplePie verwendet, es ist möglich Sprachpakete direkt aus dem Extension Manager zu installieren, Gast-Benutzergruppen sind standardmäßig vorhanden, das Speichern von leeren Artikel ist von jetzt an problemlos möglich, ein neues Statistik-Modul für Administratoren wurde eingeführt, der Editor TinyMCE wurde auf Version 3.5.6 geupdatet, älterer und unbenutzter Code wird effektiver bereinigt, die Smart Search-Funktion wurde verbessert und einige andere Verbesserungen und Erweiterungen wurden eingeführt.

Die wohl wichtigeren Erweiterungen sind das Einbinden von Bootstrap und die neue Oberfläche für mobile Geräte.

Bootstrap

Bootstrap ist ein Framework, welches Hilfsmittel für die Erstellung und Gestaltung von Websiten enthält. Es basiert auf HTML, CSS und JavaScript. In diesem Tool sind Web-Komponenten für Styles, Formulare, Buttons, Tabellen und weitere nützliche Dinge enthalten.

Durch standardisierte Elemente können Benutzerschnittstellen sehr schnell erstellt werden. Ohne spezifisches CSS können Erweiterungen entwickelt werden und die Steuerung der gesamten Seite kann über eine einzige CSS-Datei erfolgen. Ebenfalls sind viele neue Icons zur Verwendung vorhanden.

Benutzeroberfläche für mobile Geräte

In Joomla 3.0 ist eine Benutzerschnittstelle enthalten, welche es ermöglicht, von Smartphones und von Tablets auf das CMS zu zugreifen. Verfügbar wird die mobile Administration durch Bootstrap. Nicht nur die Administration lässt sich mobil ausführen, sondern auch die Seiten selber können für Besucher so modifiziert werden, dass sie diese von ihrem mobilen Gerät auf komfortable Art und Weise betrachten können.

Vorteile

Ein eindeutiger Vorteil von Joomla 3.0 ist die Möglichkeit der mobilen Administration. Die Möglichkeit von seinem Smartphone oder Tablet kurz seine Seite an zu passen oder zu bearbeiten ist sicherlich nützlich. Selbstverständlich sind die neuen Gestaltungsmöglichkeiten gut geeignet, um das Webdesign optisch ansprechender und übersichtlicher zu gestalten. Die Option sämtliche Layouts in eine CSS-Datei zu packen sorgt für zusätzliche Überschaubarkeit.

Nachteile

Der größte Nachteil stellt der Umstieg, von älteren Versionen auf die neue, dar. Insbesondere der Umstieg und die Anpassungen des Templates von 2.5 auf 3.0 sind schwierig und können sehr viele Hürden mit sich ziehen. Dennoch ist ein Wechsel empfehlenswert, da ab September 2012 die Version 2.5 nicht mehr supportet wird.

Der größte Vorteil kann auch zum Nachteil wirken. Im mobilen Bereich kommt es beim Laden der Seiten, bei größerem Umfang, trotzdem zu Verzögerungen. In Ortschaften mit guter Netzabdeckung tritt das Problem seltener auf.

SITECHECK – Homepage – Tools zur Überprüfung von Webseiten

Eine riesige Ansammlung von Links zum Überprüfen von Websites bietet Uitest.com. Unter den Links Analysis, Specials und Site Check befinden sich jede Menge Tests zur Optimierung und Überprüfung des Quelltextes einer Webseite (W3C-Standards), Suchmaschinenoptimierung, Barrierefreiheit, Ladezeit und vieles mehr.

Seitwert

Verschiedene SEO-Tools, teils kostenpflichtig – Website-Analyse

W3C-Test

Websitetest nach Richtlinien des W3C – World Wide Web Consortium

Mobile Test von Google

Websitetest zur Mobilfähigkeit auf Smartphones,  Tablets, …

– Ein Google SEO Kriterium für das Ranking in der mobilen Suche

=> mehr Informationen zum mobilen Webdesign