Webdesign Archive - Webdesign Tipps / Webdesign Blog

Sticky Menu, Feststehendes Menü

avs — Fri, 07 Aug 2020 09:57:21 +0000

Ein Sticky Menu bzw. feststehendes Menü mit HTML als Mobile Menü realisieren, welches sich beim scrollen dynamisch anpasst: Realisation eines Sticky Header Menu.

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.

BEISPIEL ANSEHEN

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:

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.
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*/

HTML (Body)

	
  
    
    
    
		
    
      Abschnitt 1
      Abschnitt 2
      Abschnitt 3
      Abschnitt 4
      Abschnitt 5
    
  

  
    
      
        Abschnitt 1

	    BLINDTEXT
      
    
    
      
        Abschnitt 2

	    BLINDTEXT
      
    
    
      
        Abschnitt 3

	    BLINDTEXT
      
    
    
      
        Abschnitt 4

	    BLINDTEXT
      
    
    
      
        Abschnitt 5

	    BLINDTEXT

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

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.
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.
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.

Shore Kalender + Shore Terminplaner, Erfahrung, Bewertung, Kritik

avs — Mon, 02 Dec 2019 12:05:47 +0000

Der Shore Kalender und Shore Terminplaner. Unsere Erfahrung, Bewertung und Kritik zum Online Buchungskalender. Und ein Erfahrungsbericht zum schlechten Support von Shore.

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 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 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.

Wie schreibe ich gute Webtexte?

avs — Mon, 23 Sep 2019 10:40:18 +0000

Textdesign für Webseiten: Wie schreibe ich gute Webtexte? Gute Texte für Webseiten gehören zu den wichtigsten Bausteinen eines Webauftritts.

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: Wie erkenne ich eine gute Webseite?

avs — Wed, 24 Jul 2019 14:47:21 +0000

Gutes Webdesign: Homepages prüfen und begutachten. Oft kann man als Kunde nur schwer einschätzen, ob man eine „gute“ Webseite bekommen hat. Wir geben Tipps zur Prüfung von Webseiten.

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.

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.
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.
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.“
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.
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.
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:

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:

Ü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

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.

Alternative zu Hottgenroth, 1&1 und co. – Schornsteinfeger Websites

avs — Wed, 07 Nov 2018 13:43:23 +0000

Alternative zu Hottgenroth, 1&1, Strato und co.: Firmen wie z.B. Hottgenroth bietet Baukasten-Websites für Schornsteinfeger. Gibt es Alternativen dazu?

Mehrere Schornsteinfeger haben uns gefragt, ob es eine Alternative zu Hottgenroth gibt – und zwar konkret zu den dort angebotenen Webseiten für Schornsteinfeger.

Die Schornsteinfeger waren unzufrieden mit der mangelnden Flexibilität der Baukasten-Webseiten und wünschten sich die Möglichkeit, ihren Webauftritt individueller zu gestalten. Zudem bestand der Wunsch, die neuen Webauftritte besser für Suchmaschinen zu optimieren und sie sollten über ein CMS-System verfügen, mit dem sich flexibler und individueller Änderungen am Webauftritt vornehmen lassen.

Alternative zu Hottgenroth

Viele Schornsteinfeger nutzen Baukasten-Websites von Hottgenroth

Hottgenroth Software bietet hervorragende Software für Schornsteinfeger. Dazu gehört beispielsweise die Schornsteinfegersoftware KAMIN, eine digitale Kehrbezirksverwaltung für Schornsteinfeger und Kaminkehrer.

Bekannt ist die Firma Hottgenroth auch für die Anwendung Energieberater 18599 3D mit der sich eine energetische Planung und Bewertung von Wohn- und Nichtwohngebäuden durchführen und dokumentieren lässt.

Was also liegt näher, als den Stammkunden auch die Webseitenerstellung auf Basis eines Baukastens anzubieten? Viele Schornsteinfeger nutzen das Angebot und beziehen die unterschiedlichen Software-Angebote aus einer Hand. Doch es gibt Alternativen zu Hottgenroth bzw. Alternativen zu Baukastensystemen, wie sie beispielsweise auch 1&1 oder Strato anbieten.

Vor- und Nachteile von Baukasten-Websites

Wie zuvor bereits erwähnt ist es für viele Schornsteinfeger vorteilhaft, die verschiedenen Software-Lösungen aus einer Hand zu beziehen. Webseiten nach dem Baukastenprinzip bieten vor allem auch den Vorteil, leicht und günstig realisierbar zu sein. Daher gibt es viele Anbieter – beispielsweise auch Webhoster wie 1&1 oder Strato – die solche Standardlösungen zur Verfügung stellen.

Dennoch bietet es sich an, über Alternativen zu Baukasten-Websites nachzudenken. Denn diese haben auch eine Reihe von Nachteilen:

Erscheinungsbild: Schornsteinfeger-Websites, die mit dem Baukastensystem von Hottgenroth erstellt werden, sehen sich einander sehr ähnlich. Aufbau und Gestaltung sind identisch oder weitgehend identisch während Unterschiede vor allem durch das eigene Logo, die Farbgebung und ggf. eigene Bilder zustande kommen.
Kosten: häufig wird herausgestellt, dass Baukasten-Websites besonders kostengünstig seien. Dabei wird allerdings meist nicht das Kosten-Nutzen-Verhältnis berücksichtigt. Eine kostengünstige Website verursacht geringe Kosten, reduziert aber oft auch die Chance auf wirtschaftlichen Erfolg – z.B. durch Neukundengewinnung.
News-Inhalte: Im Fußbereich der Inhaltsseiten werden automatisiert aktuelle News eingefüttert. Diese bieten unter anderem Informationen aus den Bereichen Schornsteinfegerhandwerk und Energieeinsparung/-beratung. Einerseits ist das praktisch, andererseits bieten alle teilnehmenden Websites identische Informationen. Etwas, was auch Suchmaschinen wie Google auffällt und keine Pluspunkte in Bezug auf die Suchmaschinenoptimierung mit sich bringt.
Flexibilität: Baukasten-Websites basieren auf vorgefertigten Modulen. Dadurch ergeben sich Einschränkungen in Bezug auf die Flexibilität und die Gestaltungsmöglichkeiten. Man hat keine wirkliche Freiheit bei der Erstellung eines eigenen Webseiten-Layouts sondern muss innerhalb der verfügbaren Vorlagen arbeiten.
Eingeschränkte Leistungsfähigkeit: Es lassen sich nur Funktionen und Layouts nutzen, die der Anbieter zur Verfügung stellt. Professionellere CMS-Systeme bieten dagegen den Vorteil, die Standard-Funktionen der Website durch so genannte „Plugins“ bzw. „Extensions“ erweitern zu können.
Eingeschränktes SEO: die Möglichkeiten in Bezug auf die Suchmaschinenoptimierung (SEO) sind bei Baukasten-Websites in der Regel eingeschränkt – auch wenn der Anbieter oft das Gegenteil suggeriert.
Abhängigkeit vom Anbieter: geht der Anbieter insolvent, so bedeutet das auch das Aus für die eigene Website. Hier sind Open-Source-CMS-Systeme klar im Vorteil. Denn bei einem frei verfügbaren Code und einem System, dass eine Vielzahl unabhängiger Entwickler betreut, besteht diese Gefahr nicht.

Fazit

Wenn Sie nicht nur eine Website betreiben, „weil man das heute eben braucht“, sollten Sie einen individuellen und professionellen Internetauftritt in Betracht ziehen. Auf diesem Wege können Sie sich von Ihren Mitbewerbern abheben.

Ein individueller und professionell umgesetzter Webauftritt erhöht die Chance, Neukunden auf das eigene Angebot aufmerksam zu machen, auf diesem Wege das eigene Unternehmen professioneller darzustellen und erfolgreicher zu betreiben. Oft amortisieren sich die Kosten für den neuen Webauftritt dadurch innerhalb kurzer Zeit.

Sie möchten Ihr Unternehmen mit einem individuellen Webauftritt professionell präsentieren?

» Sprechen Sie uns darauf an!

Stichworte: Alternativen zu Baukasten-Website, Alternative zu Hottgenroth

Der Beitrag Alternative zu Hottgenroth, 1&1 und co. – Schornsteinfeger Websites erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Ist Let’s Encrypt sicher?

avs — Mon, 02 Apr 2018 08:00:47 +0000

Ist Let’s Encrypt sicher? Let’s Encrypt bietet kostenlose Sicherheitszertifikate an. Bedeutet „kostenlos“ zugleich auch unsicher? Oder sind die Let’s Encrypt Zertifikate sicher und können bedenkenlos genutzt werden?

„Was kostenlos ist, kann nichts taugen“ – und so stellt sich für viele Benutzer die Frage:
Ist Let’s Encrypt sicher?

Was ist Let’s Encrypt?

„Let’s Encrypt“ steht für „lasst uns verschlüsseln“ und ist eine Zertifizierungsstelle, die bereits Ende 2015 in Betrieb gegangen ist, seit 2016 auf reges Interesse stößt und sich rasch verbreitet. Bereits im März 2016 waren mehr als eine Million Zertifikate ausgestellt worden.

Schlug – je nach Hoster bzw. Zertifikatsanbieter – bisher ein einziges SSL-Zertifikat pro Jahr mit 100 Euro (und mehr) zu Buche, so bot Let’s Encrypt erstmals kostenlose Zertifikate an. Und das mit Erfolg: war die Beantragung und Einrichtung von SSL-Zertifikaten bis dahin relativ aufwendig, so dauert die Einrichtung einer HTTPS-Verschlüsselung auf einem Linux-Server mit Let’s Encrypt weniger als eine Minute.

Die Entwicklung kostenloser SSL-Zertifikate wurde durch Sponsoren wie die EFF (Electronic Frontier Foundation), Mozilla Foundation (Browser: Firefox), Google Chrome, Cisco Systems und Akamai möglich.

Let’s Encrypt nutzt ein RSA-Stammzertifikat, welches durch die Zertifizierungsstelle IdenTrust gegengezeichnet wird.

Ist Let’s Encrypt sicher?

Ja: Let’s Encrypt ist sicher und nicht unsicherer als andere, kostenpflichtige SSL-Zertifikate.

Dennoch hört man oft die Einschätzung: „Etwas, das kostenlos angeboten wird, kann unmöglich genauso sicher sein wie eine kostenpflichtige Lösung!“

Der Gedanke dahinter ist, dass kostenpflichtige Anbieter entsprechende Einnahmen generieren, um ihr Technik weiterzuentwickeln und kontinuierlich zu verbessern.

Hinzu kommt, dass manche Anbieter zusätzlich Sicherheitsbedenken schüren. Denn ein kostenloser Anbieter stellt per se eine Gefahr für das Geschäftsmodell der etablierten Unternehmen dar. Auch Hoster verkaufen ihren Hostingkunden SSL-Zertifikate. Mit Let’s Encrypt lässt sich allerdings nichts verdienen.

Wer beispielsweise beim Hoster Mittwald ein SSL-Zertifikat beantragen möchte, bekommt aktuell fünf verschiedene Lösungen angeboten. Deren Sicherheit wird mit den Stufen 1 bis 4 angegeben, wobei Stufe 4 die sicherste Stufe darstellt. Let’s Encrypt erhält dabei nur Stufe 1.

Ist Let’s Encrypt sicher?

Auffällig ist auch, dass andere Hoster ihren Kunden das kostenlose Let’s Encrypt bereits seit mehr als einem Jahr angeboten hatten bevor Mittwald sich dazu entschloss, nachzuziehen. Zu diesem Konzept passt es, dass Let’s Encrypt nur für „Webvisitenkarten“ empfohlen wird. Dabei lässt sich das SSL-Zertifikat durchaus auch auf großen, umfangreichen und gut frequentierten Websites einsetzen.

Wie sicher ist Let’s Encrypt?

Ein kostenloses SSL-Zertifikat von Let’s Encrypt ist genauso sicher wie ein kostenpflichtiges Zertifikat und erfüllt denselben technischen Nutzen.

Sie sollten sich daher nicht von zuvor gezeigten „Vertrauensstufen“ verunsichern lassen.

Bezüglich der Sicherheit von SSL-Zertifikaten muss zwischen zwei unterschiedlichen sicherheitsrelevanten Eigenschaften unterschieden werden:

das SSL-Zertifikat
die Zertifizierungsstelle.

Die SSL-Zertifikate dienen zur Authentifizierung zwischen Benutzer-Browser und Webserver. Sie sorgen dafür, dass Webserver und Browser die korrekten öffentlichen und privaten Schlüssel erhalten, um eine verschlüsselte Verbindung aufzubauen.

Damit die Verschlüsselung zustande kommt, sind entsprechende Zertifikate erforderlich, die von der Zertifizierungsstelle bereitgestellt werden. Sind Root-Zertifikat und alle anderen vorgeschalteten Zertifikate gültig, so kommt die verschlüsselte Verbindung zustande.

Während die SSL-Zertifikate von kostenlosen Anbietern sich nicht grundlegend von denen kostenpflichtiger Anbieter unterscheiden, gibt es Unterschiede bei den Zertifizierungsstellen (= CA = Certification Authority).

Ist die Zertifizierungsstelle eines gewinnorientierten Unternehmens zuverlässiger als die eines kostenlosen Anbieters? Was bedeutet es, wenn hinter Let’s Encrypt Unternehmen wie Chrome, Cisco, Mozilla oder Linux stehen – und sei es auch nur als Sponsoren?

Hier muss jeder Webseitenbetreiber für sich selbst entscheiden, welcher Zertifizierungsstelle er mehr Vertrauen entgegenbringt und wie viel er sich ein (gegebenenfalls) höheres Vertrauen kosten lässt.

Warum sollte ich meine Webseite mit Let’s Encrypt verschlüsseln?

Webseite mit Let’s Encrypt oder einem anderen Anbieter verschlüsseln

Die Let’s Encrypt-Initiative hat sich zum Ziel gesetzt, verschlüsselte Kommunikation im Internet zu einem Grundrecht zu machen. Dank finanzkräftiger Sponsoren ist dies kein Hirngespinst, sondern ein durchaus machbares Vorhaben.

SSL-Zertifikate machen einen Internetauftritt sicherer. Durch die Verschlüsselung wird die Echtheit des angesteuerten Servers bestätigt und die Kommunikation zwischen Server und Client (also dem Benutzer-Browser) verschlüsselt. Das verhindert, das unbefugte Dritte die Datenkommunikation auf dem Weg vom Server zum Client (oder zurück) auslesen.

Während SSL-Verschlüsselung früher hauptsächlich in sensiblen Bereichen wie dem Online-Banking oder Online-Shops eingesetzt wurde, steht sie nun ohne Zusatzkosten für jeden Webseitenbetreiber kostenlos zur Verfügung.

Sie zu nutzen bringt eine Reihe von Vorteilen:

Psychologischer Effekt: nicht unterschätzt werden sollte der psychologische Effekt eines (grünen) Schlosses. Der Besucher assoziiert das mit einer gut gesicherten, modernen Webseite.
Seit dem HTTP/2-Standard laufen verschlüsselte Seiten deutlich schneller als unverschlüsselte Seiten sofern SPDY installiert ist. Denn durch Maßnahmen wie Multiplexing und Datenkompression lässt sich die Datenübertragung optimieren.
Google hat bereits vor einigen Jahren bekannt gegeben, dass SSL-Verschlüsselung ein Ranking-Kriterium ist. Verschlüsselte Webseiten erhalten gegenüber unverschlüsselten Websites einen Bonus.
Browser weisen auf unsichere Webseiten hin, insbesondere auf Inhaltsseiten mit Formularen. Damit verunsichern sie die Besucher. Umgekehrt sorgt eine sichere SSL-Verbindung für einen Vertrauensbonus.
Google hat bekannt gegeben, dass der hauseigene Browser Chrome ab Juli 2018 unsichere Webseiten deutlich markiert und auf diesem Wege sozusagen „abstraft.“
Die Datenschutzgrundverordnung (DSGVO) tritt am 25.05.2018 in Kraft. Sie verpflichtet Webseitenbetreiber zwar nicht per se zur Nutzung einer sicheren SSL-Verschlüsselung. Werden auf Inhaltsseiten jedoch sensible oder persönliche Daten abgefragt – dazu reicht bereits ein Kontaktformular – so ist auch eine HTTPS-Verschlüsselung dieser Inhaltsseiten erforderlich.

Sie mögen unseren Beitrag Ist Let’s Encrypt sicher? und möchten ihn weiterempfehlen? Dann dürfen Sie ihn gerne über Social-Media-Kanäle wie Facebook teilen. Nutzen Sie dafür einfach den entsprechenden Button unterhalb dieses Beitrags oder in der linken Leiste.

Stichworte: Ist Let’s Encrypt sicher?, Wie sicher ist Let’s Encrypt?

Der Beitrag Ist Let’s Encrypt sicher? erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Google bestraft unsichere Webseiten

avs — Thu, 22 Feb 2018 16:39:34 +0000

Google bestraft unsichere Webseiten. Dass Google verschlüsselte HTTPS-Webseiten beim Ranking bevorzugt ist bekannt. Nun folgt die Bestrafung unsicherer Webseiten.

Die Bevormundung durch moderne Browser ist nicht neu, doch ab Juli 2018 gilt: Google bestraft unsichere Webseiten.

Seit einiger Zeit warnen Browser wie der Firefox, Chrome, Safari oder der Internet Explorer vor unsicheren Webseiten ohne HTTPS-Verschlüsselung und verunsichern die Benutzer. Was früher hauptsächlich in sensiblen Bereichen wie dem Online-Banking oder Webshops zum Einsatz kam, soll nun auch von jeder x-beliebigen Website erfüllt werden. Und zwar eine sichere SSL- bzw. TLS-Verschlüsselung.

Es stellt sich die Frage, ob jede Website eine Verschlüsselung benötigt. Wer keine sensiblen Informationen bereitstellt oder abfragt, wer nicht einmal ein Kontaktformular einsetzt, benötigt eigentlich auch nicht unbedingt eine HTTPS-Website. Wenn da nur nicht das fehlende grüne Schloss wäre…

Immer mehr Webseiten sind SSL-verschlüsselt

Der Druck, den die Anbieter der Webbrowser ausüben, ist das eine. Ein weiterer Aspekt ist, dass Google verschlüsselten Websites beim Ranking einen Vorteil einräumt. Ein entscheidendes Argument für viele Webseitenbetreiber, die eigene Website mit SSL-Verschlüsselung auszustatten. Was früher locker um die 100 Euro jährlich gekostet hat, gibt es Dank kostenloser Anbieter wie Let’s Encrypt mittlerweile zum Nulltarif. Nach der Umstellung auf HTTS warnt der Browser ggf. noch vor unsicheren Elementen – aber auch das lässt sich in den Griff bekommen.

Google hat zu diesem Thema interessante Zahlen veröffentlicht:

81 der 100 größten Webseiten im Internet setzen aktuell bereits auf sichere HTTPS-Verschlüsselung. Was aber im Umkehrschluss doch bedeutet, dass immerhin fast 20% der größten Websites noch immer darauf verzichten.
Mehr als 68 Prozent aller Verbindungen, die via Android und Windows zustande kommen, sind verschlüsselt.
Und sogar mehr als 78 Prozent alle Verbindung, die Mittels Chrome OS und Mac OS zustanden kommen, sind verschlüsselt.

Google bestraft unsichere Webseiten

Doch das scheint Google nicht auszureichen. Daher ist geplant, dass der hauseigene Browser Chrome mit Version 68 (voraussichtlich ab Juli 2018) weiteren Druck auf die Webseitenbetreiber ausüben wird.

Aktuell ist es so, dass der Google Browser Chrome bei unsicherer Verbindung nur dann warnt, wenn auf der Inhaltsseite sensible Daten einzugeben sind – beispielsweise Kontaktinformationen in einem Kontaktformular oder Passwörter.

Ab Juli 2018 soll generell eine Kennzeichnung der unsicheren Verbindung in der Browserzeile direkt vor der URL eingeblendet werden. Nutzt die Website hingegen HTTPS, so erscheint dort ein grünes Schluss und das Wort „Sicher.“

Besteht Handlungbedarf?

Einfache Frage, klare Antwort: Ja.
Es spielt keine Rolle, ob sich der eine oder andere durch das robuste Vorgehen der Browser-Anbieter sowie Google bevormundet fühlt. Google bestraft unsichere Webseiten und „sitzt am längeren Hebel.“ Wer von einem guten Google-Ranking profitieren und sicherstellen möchte, dass die Besucher nicht verunsichert werden und das eigene Webportal meiden, der muss mitspielen.

Mit der neuen Offensive lässt Google kein Zweifel daran, dass dem Unternehmen verschlüsselte Verbindungen wichtig sind. Nachstehend beschreiben wir wie Sie vorgehen müssen, um Ihre Website erfolgreich und ohne Rankingverluste auf das Hypertext Transfer Protocol (= HTTPS) umzustellen.

Mit diesem Protokoll wird der Datenaustausch zwischen dem Webserver und dem Rechner des Internetbenutzers verschlüsselt und vor unbefugtem Auslesen durch Dritte (= „Man-in-the-middle“) geschützt.

Wie stelle ich meine Website auf HTTPS um?

Viele Hoster bieten eine schnelle und kostenlose Umstellung auf HTTPS an. Dazu muss lediglich mit wenigen Klicks ein Zertifikat wie beispielsweise Let’s Encrypt eingebunden werden.

Umstellung von HTTP auf HTTPS

Danach ist es erforderlich, die „alten“ URLs (http://) über einen Eintrag in der .htaccess-Datei auf die „neuen“ URLs (https://) umzuleiten, um Duplicate Content zu vermeiden:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Der erforderliche Eintrag kann sich – je nach Hoster – ggf. etwas unterscheiden. Sollte vorstehender Eintrag nicht funktionieren, so erkundigen Sie sich bei Ihrem Hoster nach der korrekten RewriteCond sowie RewriteRule.

Umstellung der Weiterleitungen und Verlinkungen

Sollten Weiterleitungen oder Canonical-Tags eingerichtet sein, so sollten diese auf https angepasst werden. Interne Verlinkungen (= Inlinks) sind ebenfalls anzupassen, sofern das CMS-System nicht mit relativen URLs arbeitet. TYPO3 verwendet beispielsweise relative Pfadangaben, so dass keine Anpassungen bei den Inlinks erforderlich sind. Wohingegen Systeme wie WordPress die absolute URL (inklusive http://) in der Datenbank verewigt – und das in der Regel an hunderten von Stellen.

Bei externen Verlinkungen (= Backlinks) zur eigenen Website wird es schon schwieriger. Insbesondere wenn diese „organisch gewachsen“ sind und kein direkter Kontakt zum anderen Webseitenbetreiber besteht. Sofern möglich sollten aber auch hier die verlinkenden URLs angepasst werden.

Anpassung der XML Sitemap und der robots.txt-Datei

Gibt es eine XML Sitemap, so sollten Sie dort ebenfalls die Struktur anpassen und auf https:// ändern. Überprüfen Sie sicherheitshalber auch die robots.txt-Datei. Diese sollte über https:// aufrufbar sein und darin sollten sich keine Anweisungen befinden, welche den HTTPS-Zugriff auf die Website unterbinden.

Hat Ihnen dieser Beitrag gefallen? Dann dürfen Sie ihn gerne über Social-Media-Kanäle wie Facebook teilen. Nutzen Sie dafür einfach den entsprechenden Button unterhalb dieses Beitrags oder in der linken Leiste.

Stichworte: Google bestraft unsichere Webseiten, Chrome bestraft unsichere Webseiten

Der Beitrag Google bestraft unsichere Webseiten erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Logos und Favicons für Webseiten

avs — Sat, 09 Dec 2017 09:08:23 +0000

Logos und Favicons für Webseiten: Standard-Darstellung sowie Optimierung für Apple Retina-Displays. Logos und Favicons für die perfekte Anzeige optimieren.

Logos und Favicons für Webseiten
Früher war alles einfacher und besser. Über das „besser“ lässt sich streiten. Aber seit Webseiten nicht nur für den Desktop-Computer sondern auch Mobilgeräte und Apple Retina-Displays optimiert werden sollten, sind die Anforderungen gestiegen.

Das macht auch bei Logos und Favicons für Webseiten nicht halt. Was sind Favicons? Dabei handelt es sich um die kleine Grafik neben der URL oder im Tab der Webseite. Wird vom Besucher ein Bookmark (= Lesezeichen) auf die Seite gesetzt, so erscheint das Favicon auch im Lesezeichen-Menü und bietet somit einen entsprechenden Wiedererkennungswert.

Früher wurde ein Favicon im Format 16×16 Pixel erstellt und als so genannte Icon-Datei mit der Endung .ico gespeichert. Für die Erstellung eignet sich beispielsweise Photoshop, für das Abspeichern wird ein zusätzliches Plugin benötigt, das kostenlos bezogen werden kann.

Alternativ lässt sich eine .ico-Datei mit Hilfe entsprechender Tools erstellen. Beispielsweise online mit Convertico.

Da alle moderneren Browser auch .png-Dateien einlesen können, wird das .ico-Format inzwischen eigentlich nicht mehr benötigt.

Favicon für Apple Retina Displays

Apple bietet mit seinen Retina Displays hochauflösende Bildschirmdarstellungen. Normale Favicons und Logos werden dort wegen ihrer geringen Auflösung allerdings in relativ bescheidener Qualität dargestellt.

Es gibt zwei Möglichkeiten, um die Darstellung zu verbessern:

1. Eine einzige Bilddatei für das Logo und Favicon

Sowohl Logo als auch Favicon werden doppelt so groß erstellt, wie sie später anzuzeigen sind. Das Favicon somit im Format 32×32 Pixel.

Das Favicon wird dann auf Retina-Displays qualitativ ansprechend angezeigt. Wird es im Format 16×16 Pixel benötigt, so skalieren moderne Browser das Favicon automatisch auf die benötigte Größe herunter.

Auch das Logo wird doppelt so groß erstellt, wie es benötigt wird. Soll das Logo beispielsweise eine Größe von 200×75 Pixel aufweisen, so wird es im Format 400×150 Pixel erstellt. Entsprechendes CSS sorgt für eine Anzeige in der Größe 200×75 Pixel und auf dem Apple Retina-Display wird automatisch die größere Version mit 400×150 Pixel verwendet.

2. Individuelle Grafiken für das Logo und Favicon für die jeweiligen Ausgabegeräte.

Dimensionen für das Favicon
Das Favicon wird in fünf unterschiedlichen Größen erstellt und zwar in den Dimensionen 16×16 / 57×57 / 72×72 / 114×114 sowie 144×144 Pixel.

Die Einbindung erfolgt über:

Mit dem Tool von Websiteplanet lassen sich verschiedene Favicon-Größen automatisch erstellen. Dazu müssen wir vor der Erstellung des Favicons unter „Einstellungen“ die Option „>Alle Größen bitte!“ aktivieren.

Dimensionen für das Logo
Analog zur vorstehenden Beschreibung unter Eine einzige Bilddatei für das Logo und Favicon wird das Logo doppelt so groß erstellt, wie es angezeigt werden soll. Mittels CSS lässt sich die gewünschte Anzeigegröße definieren.

Sollte die Webseite separate Optimierungen für die Desktop-Darstellung, Mobilversion sowie Sticky-Header (= scrollt der Besucher nach unten, so bleibt das Navigationsmenü im Kopfbereich „stehen“) aufweisen, so sind bis zu sechs Logogrößen erforderlich. Die drei Varianten für Desktop / Mobilversion / Sticky-Header sowie deren doppelt so große Darstellung für Apple Retina-Displays.

Stichworte: Logos und Favicons für Webseiten

Der Beitrag Logos und Favicons für Webseiten erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Texte proportional mit Bildern skalieren

avs — Fri, 01 Dec 2017 18:59:36 +0000

Texte proportional mit Bildern skalieren. Ändert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.

Texte proportional mit Bildern skalieren: Die Bildgröße in Abhängigkeit vom zur Verfügung stehenden Platz anzupassen gehört zu den Grundlagen responsiver Websites. Umgesetzt wird das mit wenigen Zeilen CSS-Code.

Gibt es jedoch innerhalb des Bildes auch Textinhalte, dann haben statische Schrift-Größenangaben wie px oder em zur Folge, dass die Textgröße konstant bleibt, während das Bild proportional zur Browserfensterbreite bzw. zum Viewport skaliert wird.

Dadurch können zwei Probleme entstehen:

Oft weisen Bildhintergründe keine einheitliche Helligkeit auf. Sie sind in einigen Bereichen hell, in anderen dunkel. Im Zug der Bildskalierung ändert sich häufig auch die Lesbarkeit des Textes, wenn sich die Größe des Hintergrundbildes reduziert, die Textgröße jedoch konstant bleibt.

Zur Veranschaulichung:
Reduziert sich der zur Verfügung stehende Platz, so kommt es zu Textumbrüchen. Dadurch kann das gewünschte Design aus Text und Bild gegebenenfalls nicht aufrecht erhalten werden.

Manche Webdesigner behelfen sich damit, die Texte in Photoshop direkt ins Bild zu integrieren und so das Skalierungsproblem zu umschiffen. Aus Gründen der Suchmaschinenoptimierung ist ein solches Vorgehen aber meist unerwünscht. Zudem ist die Änderung der Texte verhältnismäßig aufwendig, da dafür ein neues Bild erstellt und eingebaut werden muss.

Texte proportional mit Bildern skalieren

Mittels der Einheiten vw (= Viewport Width) beziehungsweise vh (= Viewport Height) lassen sich Text proportional mit Bildern skalieren. Indem die Schriftgröße mit der Einheit vw definiert wird, erfolgt proportional zur Größe des Viewports eine Textvergrößerung bzw. Textverkleinerung.

Die Einheiten lassen sich auch auf andere Elemente wie padding anwenden.

BEISPIEL ANSEHEN




  
  
  
  Texte proportional skalieren - Beispiel ansehen

  



  
    
    
      Sunset | Sonnenuntergang
      Die schönste Stunde.
      Zur Sonne

Stichworte: Texte proportional mit Bildern skalieren

Der Beitrag Texte proportional mit Bildern skalieren erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Mobile Menü ohne JavaScript, Mobile CSS Menu

avs — Fri, 20 Oct 2017 11:25:10 +0000

Mobile Menü ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Menüs realisieren.

Mobile Menü ohne JavaScript / Mobile CSS Menu: Ein Mobiles Menü mit CSS zu erstellen ist gar nicht so schwer. Trotzdem verwendet das Gros der Websites umfangreiche und komplexe JavaScript-Lösungen, welche meist auf der jquery basieren.

Es gibt jedoch gute Gründe, ein schlankes Mobile Menü ohne JavaScript einzusetzen:

Mobiles CSS-Menüs funktionieren auch dann, wenn JavaScript abgeschaltet ist.
Mobile First: Moderne Websites werden vom Mobilgerät aus entwickelt. Mobile First ist dabei weitaus mehr als nur ein „Schlagwort“, denn bereits im Oktober 2016 hatte Google angekündigt, dass der Mobile Index den Desktop Index als Hauptindex ablösen wird. Das bedeutet, dass Google künftig nicht mehr prüft, ob es zur Desktop-Version einer Website auch eine Mobile Version gibt, sondern Google geht den umgekehrten Weg. Die neue Priorisierung sorgt dafür, dass Webentwickler künftig noch stärker auf eine Optimierung der mobilen Webseitenversion achten sollten.Da die mobilen Internetverbindungen in der Regel deutlich langsamer sind als schnelle DSL-Verbindungen und die Benutzer zudem nur über ein begrenztes monatliches Datenvolumen verfügen, sind schlanke, schnell ladende Website gefragt und im Vorteil. Denn das wird von Suchmaschinen honoriert:
Suchmaschinenoptimierung:
Suchmaschinen möchten dem Suchenden relevante Suchergebnisse bereitstellen. Dazu werden nicht nur die Seiteninhalte geprüft, sondern auch die Ladezeiten. Websites, deren Inhaltsseiten nur einige hundert Kilobyte aufweisen sind daher gegenüber solchen im Vorteil, die mehrere Megabyte Datenvolumen im Gepäck haben.

Mobile Menü ohne JavaScript

Mobile CSS Menu: Nachfolgend stellen wir eine Anleitung für die Realisation eines schlanken Mobilen CSS-Menüs vor.

BEISPIEL ANSEHEN

Wie lässt sich das Design unseres Beispiels umsetzen? Dafür benötigen wir etwas HTML und natürlich entsprechendes CSS:

HTML (Body)


  
    
    
    
    
    
      Abschnitt 1
      Abschnitt 2
      Abschnitt 3
      Abschnitt 4
      Abschnitt 5
    
  

  
    
      Abschnitt 1

        BLINDTEXT          
    
    
      

      Abschnitt 2

      BLINDTEXT   
          
    
      

      BLINDTEXT   
          
    
      

      Abschnitt 4

      BLINDTEXT > 
          
    
      

      Abschnitt 5

        BLINDTEXT

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 {
  margin: 3em 1em;
  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;
}
/*----------------*/

CSS: Media Queries

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


@media screen and (max-width: 960px) {
  /*Formatierung Mobiles Menue*/
  nav ul {
    top: 12em;
    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 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 a:target ~ .close {
    position: absolute;
    margin-left: -40px;
  }

  nav a:target ~ ul {
    left: 0;
  }
}
/*--------------------------------------*/

Erläuterung des CSS für die Erstellung des Mobile CSS Menu

Der größte Teil des Codes ist nicht besonders komplex und der HTML-Bereich dabei besonders einfach gehalten. Im Bereich CSS: Allgemeine Auszeichnungen und Logo wird zunächst die Schriftart sowie Höhe und Breite des Anzeigebereichs festgelegt und definiert, dass beim Focus auf einen Link keine gestrichelten Linien angezeigt werden sollen.

Der Bereich CSS: Menü definiert ein einfaches Navigationsmenü für die Anzeige auf dem Desktop-PC. Es wird über eine UL-Liste erstellt und enthält einige Angaben zur Formatierung des Menüs.

Spannend wird es im Bereich CSS: Media Queries.

Zunächst wird festgelegt, dass das Hamburger-Icon des mobilen Menüs nicht angezeigt werden soll, wenn die Bildschirmbreite mehr als 960 Pixel beträgt (@media screen and (min-width: 961px) {…} ).
Danach wird dem Browser mitgeteilt, wie das Menü gestaltet werden soll, wenn die Breite des Browserfensters kleiner oder gleich 960 Pixel ist (@media screen and (max-width: 960px) {…} ).
nav ul {…}
Das Menü wird zunächst verborgen, indem es um 100% nach links versetzt wird. Zusätzlich definieren wir eine transition, um über CSS3 auch ohne JavaScript einen Animationseffekt zu verwirklichen.
nav ul li {…}
Über display:block wird erreicht, dass die Menüpunkte des mobilen Menüs nicht mehr in einer Zeile, sondern untereinander angezeigt werden.
/*Hamburger-Icon*/

Dieser Bereich ist für die Funktionalität des Hamburger-Menüs zuständig.
Es gibt zwei Hamburger-Icons. Eins ist blau, das andere grau. Die beiden sind deckungsgleich übereinander positioniert. Wird das blaue Hamburger-Icon angeklickt und dabei das Menü ausgefahren, so wird gleichzeitig das graue Hamburger-Icon sichtbar gesetzt und erscheint an der Position des blauen Icons.

Beim Klick auf das blaue Hamburger-Icon wird auf einen Anker referenziert ( und das blaue Hamburger-Icons wird ausgeblendet. Durch die Referenzierung lässt sich der Zustand über die CSS-Pseudoklasse :target prüfen.

Gleichzeitig wird die UL des Menüs von left:-100%; auf left:0; gesetzt (mittels nav a:target ~ ul{left: 0;} ) und bewegt sich dadurch von der bisherigen linken Positionierung (außerhalb des sichtbaren Bereichs) in das Betrachtungsfeld.

nav a#nav-m img, nav a.close img {…}
Die Anzeigegröße des Hamburger-Menü-Icons wird festgelegt.

nav > .close, nav a#nav-m:target {display: none;}
Standardeinstellung ist, dass das graue Hamburger-Menü-Icon (nav > .close) nicht angezeigt wird. Über die CSS-Pseudoklasse :target wird dafür gesorgt, dass das blaue Hamburger-Menü-Icon verborgen wird, wenn es angeklickt wird und dabei den target erhält (a#nav-m:target).

nav a:target ~ ul, nav a:target ~ .close {display: inline-block;}
Wenn der Link aktiv ist (wird auch hier über die CSS-Peseudoklasse a:target geprüft), werden die Navigationsliste sowie das graue Hamburger-Menü-Icon auf sichtbar gesetzt.

Fazit: die Anleitung zur Erstellung eines Mobile Menü ohne JavaScript zeigt, dass sich auf relativ einfache Art ein Mobile CSS Menu realisieren lässt.

Stichworte: Mobile Menü ohne JavaScript, Mobile CSS Menu, Hamburger Menü

Der Beitrag Mobile Menü ohne JavaScript, Mobile CSS Menu erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Kopf
Inhalt

Webdesign Archive - Webdesign Tipps / Webdesign Blog

Sticky Menu, Feststehendes Menü

Ein Sticky Menu bzw. feststehendes Menü mit HTML als Mobile Menü realisieren, welches sich beim scrollen dynamisch anpasst: Realisation eines Sticky Header Menu.

Realisation eines Sticky Menu / feststehenden Menü mit HTML

Bereich: Head

HTML (Body)

CSS: Allgemeine Auszeichnungen und Logo

CSS: Menü

CSS: Content

CSS: Media Queries

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

Shore Kalender + Shore Terminplaner, Erfahrung, Bewertung, Kritik

Shore Kalender – Was ist Shore?

Bewertung von Shore

Erfahrungsbericht zu Shore – Support

Erfahrung mit Shore – Funktionalität

Shore Support

Antwort des Shore-Support bis heute: keine.

Shore Kosten

Alternativen zu Shore

Kritik an Shore

Wie schreibe ich gute Webtexte?

Textdesign für Webseiten: Wie schreibe ich gute Webtexte? Gute Texte für Webseiten gehören zu den wichtigsten Bausteinen eines Webauftritts.

Keine leeren Phrasen dreschen

Gutes Textdesign

Suchmaschinenoptimierte Texte

Gutes Webdesign: Wie erkenne ich eine gute Webseite?

Gutes Webdesign: Homepages prüfen und begutachten. Oft kann man als Kunde nur schwer einschätzen, ob man eine „gute“ Webseite bekommen hat. Wir geben Tipps zur Prüfung von Webseiten.

Gutes Webdesign: das Layout

Es gibt allerdings einige Grundregeln für gutes Webdesign

Ein klares, übersichtliches Weblayout

Usability (= Benutzerfreundlichkeit )

Text-Design

Verwendung von Textüberschriften und Absätzen

Wahl der Schriftart

Navigationsmenü

Gutes Webdesign: die Technik

Prüfen der Browserkompatibilität

Prüfen des Responsive Designs

Prüfen des Quellcodes

Prüfen des Markup auf Semantik und Validität

Ladezeiten einer guten Webseite

Suchmaschinenoptimierung

Alternative zu Hottgenroth, 1&1 und co. – Schornsteinfeger Websites

Alternative zu Hottgenroth

Vor- und Nachteile von Baukasten-Websites

Dennoch bietet es sich an, über Alternativen zu Baukasten-Websites nachzudenken. Denn diese haben auch eine Reihe von Nachteilen:

Fazit

Ist Let’s Encrypt sicher?

Ist Let’s Encrypt sicher? Let’s Encrypt bietet kostenlose Sicherheitszertifikate an. Bedeutet „kostenlos“ zugleich auch unsicher? Oder sind die Let’s Encrypt Zertifikate sicher und können bedenkenlos genutzt werden?

Was ist Let’s Encrypt?

Ist Let’s Encrypt sicher?

Wie sicher ist Let’s Encrypt?

Warum sollte ich meine Webseite mit Let’s Encrypt verschlüsseln?

Sie zu nutzen bringt eine Reihe von Vorteilen:

Google bestraft unsichere Webseiten

Google bestraft unsichere Webseiten. Dass Google verschlüsselte HTTPS-Webseiten beim Ranking bevorzugt ist bekannt. Nun folgt die Bestrafung unsicherer Webseiten.

Immer mehr Webseiten sind SSL-verschlüsselt

Google bestraft unsichere Webseiten

Besteht Handlungbedarf?

Wie stelle ich meine Website auf HTTPS um?

Umstellung von HTTP auf HTTPS

Umstellung der Weiterleitungen und Verlinkungen

Anpassung der XML Sitemap und der robots.txt-Datei

Logos und Favicons für Webseiten

Logos und Favicons für Webseiten: Standard-Darstellung sowie Optimierung für Apple Retina-Displays. Logos und Favicons für die perfekte Anzeige optimieren.

Favicon für Apple Retina Displays

1. Eine einzige Bilddatei für das Logo und Favicon

2. Individuelle Grafiken für das Logo und Favicon für die jeweiligen Ausgabegeräte.

Texte proportional mit Bildern skalieren

Texte proportional mit Bildern skalieren. Ändert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.

Texte proportional mit Bildern skalieren

Sunset | Sonnenuntergang

Mobile Menü ohne JavaScript, Mobile CSS Menu

Mobile Menü ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Menüs realisieren.

Mobile Menü ohne JavaScript

HTML (Body)

CSS: Allgemeine Auszeichnungen und Logo

CSS: Menü

CSS: Media Queries

/Hamburger-Icon/