Richtlinien für Responsive Inhalte für responsive Homepages

Auf modernen Homepages, die sogenannte Responsive Templates oder Responsive Design verwenden, muss man nicht nur beim Design bestimmte Gestaltungsrichtlinien beachten. Auch bei den Inhalten sollte man auf bestimmte Punkte achten, damit man das responsive Design damit nicht wieder unbrauchbar macht.

Hier eine kurze Liste worauf man beim Erstellen der Inhalte achten sollte, damit die Seite responsive bleibt:

1. Prinzipiell keine Höhen- oder Breitenangaben in Pixel machen.
2. Keine Tabellen verwenden. Wenn es nicht ohne Tabelle geht, dann dürfen die Spalten keine Breitenangaben haben und die Zelleninhalte müssen umbrechen können (kein nowrap verwenden). Mehr als zwei Spalten sind auf einem Handy kaum darstellbar.
3. Texte müssen automatisch auf die kleinste Bildschirmbreite umbrechen ohne das ein horizontaler Scrollbalken entsteht
4. Bilder die die komplette Inhaltsbreite haben, müssen sich bei kleineren Bildschirmbreiten automatisch an die maximale Breite anpassen (dazu muss man dem Bild mit dem Editor einen bestimmten style Tag zuweisen, bei Bootstrap: img-responsive)
5. Mehrere Bilder nebeneinander: mit dem Grafikprogramm in einen einzelnen Banner setzen, der mindestens die maximale Inhaltsbreite breit hat
6. Kleine Bilder neben dem Text: Ausrichtung links oder rechts einstellen und einen Abstand zum Text (beim tinymce wysiwyg Editor: Bildeigenschaften -> Erweitert -> Stil: float: right; margin-left: 20px;). Die Bilder dürfen maximal 300 Pixel breit sein.

Cookie Hinweis Script

Viele Webseitenbetreiber bauen auf Ihren Homepages inzwischen ein Cookie Hinweis Script ein um die Richtlinie 2009/136/EG der EU umzusetzen. Oder weil sie Google Adsense verwenden wollen und Google das seit dem 30.09.2015 verlangt. Google hat dazu eine eigene Homepage mit Anbietern, wo man sich einen Code für die Anzeige eines Banners generieren kann: https://www.cookiechoices.org/

Ich habe selber das Tool Cookie Consent von Silktide getestet. Es ist kostenlos und funktioniert. Was mich aber daran stört ist, das ich die Optik nicht anpassen kann und es auch externe Dateien nachlädt, wo man sich nicht sicher sein kann, was geladen wird und wie lange es funktioniert.

Deshalb habe ich hier mal einen Code geschrieben, wie man so einen Cookie Hinweis unten auf der Seite einbauen kann. Nur mit Html, Javascript und CSS.

Achtung, der Code ist nur zu Demo Zwecken, wie so etwas technisch und optisch realisierbar ist. Es ist nicht sicher, ob diese Lösung den Anforderungen der EU Richtlinie oder den Anforderungen von Google oder der deutschen Rechtslage entspricht. Wenn man so einen Banner einbauen will, sollte man es unbedingt von einem Rechtsanwalt prüfen lassen.

Hier der Code, der unten vor dem schließenden body Tag eingebaut werden kann:

  1. <!-- Cookie Banner Script Start -->
  2. <style>
  3. #mbmcookie {position: fixed; bottom: 0; left: 0; right: 0; background: #eee; padding: 20px; font-size: 14px; font-family: verdana;}
  4. #mbmcookie a.button {cursor: pointer; background: #ccc; padding: 8px 20px; margin-left: 10px; border-radius: 5px; font-weight: bold; float: right;}
  5. #mbmcookie a.button:hover {background-color: #aaa;}
  6. #mbmcookie p.cookiemessage {display: block; padding: 0; margin: 0;}
  7. </style>
  8. <div id="mbmcookie">
  9. <a onClick="var d = new Date(); d = new Date(d.getTime() +1000*60*60*24*730); document.cookie = 'mbmcookie=1; expires='+ d.toGMTString() + ';'; document.getElementById('mbmcookie').style.display = 'none';" class="button">Akzeptieren</a>
  10. <p class="cookiemessage">Diese Website verwendet Cookies. Durch die Nutzung dieser Webseite erkl&auml;ren Sie sich damit einverstanden, dass Cookies gesetzt werden.
  11. <a href="">Mehr erfahren</a></p>
  12. </div>
  13. <script>
  14. a = document.cookie;while(a != ''){while(a.substr(0,1) == ' '){a = a.substr(1,a.length);}cn = a.substring(0,a.indexOf('='));if(a.indexOf(';') != -1){cw = a.substring(a.indexOf('=')+1,a.indexOf(';'));}else{cw = a.substr(a.indexOf('=')+1,a.length);}if(cn == 'mbmcookie'){r = cw;}i = a.indexOf(';')+1;if(i == 0){i = a.length}a = a.substring(i,a.length);}if(r == '1') document.getElementById('mbmcookie').style.display = 'none';
  15. </script>
  16. <!-- Cookie Banner Script End -->

Den Style Bereich von Zeile 2-7 kann man in eine CSS Datei auslagern. In Zeile 9 bei der Zahl 730 kann man die Anzahl der Tage festlegen, wie lange das Cookie gültig sein soll. In Zeile 11 kann man den Link auf die Datenschutz Seite setzen.