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.

WordPress Beiträge gleichzeitig auf Facebook, Twitter und Google+ veröffenlichen

Wenn man einen neuen WordPress Beitrag verfasst hat und nach dem Veröffentlichen automatisch eine Info mit Link auf den Beitrag bei den Sozialen Netzwerken wie Facebook und Twitter veröffentlichen will, kann man dazu das Plugin NextScripts: Social Networks Auto-Poster verwenden.

Einmal eingerichtet wird ein neuer Beitrag sofort auf den eingerichteten Netzwerken veröffentlicht. Das funktioniert kostenlos für die meisten Netzwerke. Ich selber verwende es für Facebook und Twitter. Google+ wäre auch möglich damit, kostet aber leider einen jährlichen Beitrag.

Auf der Suche nach einer kostenlosen Lösung auch für Google+ bin ich bei Hootsuite fündig geworden. Dort kann man sich einen kostenlosen Online Account anlegen, mit dem man auch Nachrichten gleichzeitig bei Sozialen Netzwerken posten kann und dort ist auch Google+ kostenlos möglich. Außerdem bietet der Account auch die Möglichkeit neue WordPress Beiträge zu importieren. So kann man sich einen zeitgesteuerten Automatismus bauen, der einem auch auf Google+ nach einer bestimmten Zeit die Beiträge automatisch veröffentlicht.

Nachdem man in Hootsuite die Grundeinrichtung gemacht hat, kann man im Menü unter Einstellungen -> RSS/Atom einen neuen Feed hinzufügen. Dazu gibt man die URL des WordPress Feed an und wählt das Netzwerk(in meinem Fall Google+) aus, an das gesendet werden soll. Außerdem kann man einstellen, wie oft es geprüft werden soll. Ich habe dort 3 Stunden eingestellt, d.h. spätestens 3 Stunden nach dem Veröffentlichen eines Beitrags in WordPress wird bei mir der Beitrag von Hootsuite auch auf Google+ veröffentlicht.

Zusammenfassung modified / xtcommerce3 Sicherheitslücken in den letzten Jahren

Aus aktuellem Anlass hier eine Zusammenfassung über bekannte Sicherheitslücken in modified / xtcommerce(xt:Commerce bis Version 3.04 SP2.1) in den letzten Jahren:

Wer noch einen alten xtCommerce 3.04 / modified Shop betreibt, sollte diese drei Lücken mal checken.

Schönes kostenloses responsive Template für modified

Bei SmilingShops gibt es jetzt eine schöne Alternative zu dem bisher einzigen kostenlosen modified responsive Template von xtc-load:
https://smilingshops.com/modified-template/jgreen-responsive-modified-template.html
Eine Demoseite gibt es dazu hier: http://demo2.smilingshops.com/index.php?tpl=jgruen_2015

Das Template ist für die modified eCommerce Shopsoftware Version v1.06. Mit zwei Anpassungen funktioniert es auch in der Version v1.05:

  1. Update der Smarty Engine von Version Smarty_2.6.26 auf Smarty_2.6.27
  2. In der application_top.php muss nach define(‚SQL_CACHEDIR‘, DIR_FS_CATALOG.’cache/‘); die Zeile eingefügt werden: define(‚DIR_WS_BASE‘, “);

Hier ein Shop der damit von mir jetzt umgesetzt wurde: http://pizzeria-schlemmer-mainaschaff.de/

 

modified Shop Paypal Plus Modul

Paypal bietet seit kurzem eine neue Bezahllösung für Onlineshop Betreiber an: Paypal Plus.

Damit kann man als Shop Betreiber mit einer Lösung die Bezahlmethoden Paypal, Lastschrift, Kreditkarte und Rechnung anbieten. Die Abwicklung erfolgt über den Paypal Account.

Für die modified eCommerce Shopsoftware gibt es dafür hier ein kostenloses Modul: PayPal PLUS Zahlungsmodul für modified eCommerce Shopsoftware.

Paypal Plus benötigt eine SSL Verschlüsselung per TLS1.2. Testen, welche SSL Versionen man installiert hat, kann man hier: https://www.ssllabs.com/ssltest/

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.

WordPress Anleitungen / Tutorials

Hier eine Übersicht über alle bisher von mir veröffentlichten WordPress Tutorials / Anleitungen:
WordPress Tutorial: eine neue Seite anlegen
WordPress Tutorial: ein Menü anlegen
WordPress Tutorial: einen neuen Menüpunkt anlegen
WordPress Tutorial: ein Bild in einen Seitentext einbauen

WordPress Tip: Beiträge gleichzeitig auf Facebook, Twitter und Google+ veröffenlichen

WordPress Tutorial: ein Bild in einen Seitentext einbauen

Für dieses Tutorial benötigt man das Plugin TinyMCE Advanced.

Man klickt links im Menü auf Seiten -> Alle Seiten und in den Listen dann bei dem Seiteneintrag auf Bearbeiten und der Seiten Editor geht auf.
Als erstes Klickt man im Text an die Stelle, wo das Bild eingefügt werden soll.

Dann klick man im Editor Menü auf Einfügen:
bild_einbauen_01

Ein Untermenü geht auf, dort klickt man auf Add Media:
bild_einbauen_02

Dann auf den Button Dateien auswählen klicken:
bild_einbauen_03

Dann geht der Datei-Browser auf, mit dem man das Bild von der lokalen Festplatte wählen kann. Durch Klick auf Öffnen im Datei-Browser wird das Bild hochgeladen.
Nach dem Upload wird das Bild angezeigt und ist schon angehakt. Unten rechts kann man dann die Größe einstellen mit der das Bild in den Text gesetzt wird.
Mit Klick auf In die Seite einfügen wird das Bild in den Text gesetzt:
bild_einbauen_04

Wenn das Bild im Text sichtbar ist, kann man es anklicken und bekommt ein Menü mit dem man es ausrichten kann:
bild_einbauen_05

Jetzt noch auf Aktualisieren klicken, dann ist das Bild online.

 

 

WordPress Tutorial: einen neuen Menüpunkt anlegen

Eine neue Seite kann man im Menü so als Menüpunkt anlegen:

Dazu links im Menü auf Design -> Menüs klicken:
menue_anlegen_01

Bei Seiten unter Zuletzt erstellt links die neue Seite anhaken und dann unten den Button Zum Menü hinzufügen klicken:
menuepunkt_anlegen_01

Der neue Menüpunkt taucht unten in der Liste bei Menüstruktur auf. Mit Klick auf Menü speichern ist der neue Menüpunkt online:
menuepunkt_anlegen_02

In der Menüstruktur kann man die Menüpunkte anklicken und an eine andere Position ziehen und damit die Reihenfolge ändern:
menuepunkt_anlegen_03

Beim Übernehmen in die Menüstruktur wird dem Menüpunkt automatisch die Überschrift der Seite als Bezeichnung gespeichert.
Die Bezeichnung kann man so ändern:
menuepunkt_anlegen_04

Untermenüpunkte kann man durch ziehen der Einträge nach rechts erstellen (danach noch auf Menü speichern klicken):
menuepunkt_anlegen_05

Untermenüpunkte kann man auch wieder nach links ziehen, dann werden sie wieder Hauptmenüpunkte.
Danach wieder auf Menü speichern klicken um die Änderung zu speichern.

 

 

WordPress Tutorial: ein Menü anlegen

Wenn man bei einer neuen WordPress Homepage das Menü bearbeiten will, muss man als erstes ein Menü erstellen.

Dazu links im Menü auf Design -> Menüs klicken:
menue_anlegen_01

Dann den Menü Namen angeben und auf Menü erstellen klicken:menue_anlegen_02

Jetzt ist das Menü angelegt und muss noch der Position im Theme zugeordnet werden. Dazu auf den Reiter Positionen klicken:
menue_anlegen_03

Dann in dem Select Feld das angelegte Menü wählen und auf den Änderungen übernehmen Button klicken:
menue_anlegen_04

Bei manchen Templates gibt es mehrere Positionen wo man Menüs zuordnen kann.