Wie die Beschleunigung Ihrer Webseite die Kundenzufriedenheit, Seitenaufrufe und Konversionen steigern kann 2 Jun 2014 4:48 AM (10 years ago)

Ein Facebook Like Ihrer Fanpage schafft Vertrauen.

Steigerung der Leistung Ihrer Webseite ist von entscheidender Bedeutung, um Ergebnisse zu erzielen und Kunden durch den Verkaufstrichter zu drücken. Langsame Webseiten können unter niedrigen Rankings leiden, Besucher reizen und die Chancen verringern, Umsatz zu machen. Während Server mit schlechter Leistung die Ursache für langsam ladende Webseiten sein können,

ist die Ursache für ineffiziente Webseiten in den meisten Fällen die Konfiguration der Webseite selbst. Glücklicherweise können verschiedene Dienstleistungen Ihnen helfen, die Leistung Ihrer Webseite zu optimieren, was dazu führt, dass Kunden immer und immer wiederkommen, und Konversionen gemacht werden.

Umsatzsteigerung

Viele User schauen anderswo, wenn eine Webseite mehr als ein paar Sekunden zum Laden braucht. Viele Webseiten-Besitzer berichteten einen großen Aufschwung der Seitenaufrufe, nachdem einmal eine Optimierung stattgefunden hat. Dies ist nicht der einzige Vorteil zur Beschleunigung Ihrer Webseite, denn verschiedene Unternehmen, die sich weniger auf die Serverleistung verlassen, sehen eine erhebliche Steigerung der Einnahmen. Die Summen, die verloren gehen, weil Kunden aufgrund von Verzögerungen die Seite verlassen, können sich zu einem schwerwiegenden Bild zusammenfügen, sodass es wirklich sinnvoll ist, sicherzustellen, dass Ihre Webseite so gut funktioniert, wie sie realistisch kann, um zu vermeiden, von einer hohen Absprungrate betroffen zu sein. Auch wenn Sie viel Zeit mit der Erforschung und Umsetzung von Schlüsselwörtern und dem Verständnis der Erwartungen der Kernzielgruppe verbracht haben, können Ihre Bemühungen deutlich durch eine langsam ladende Seite zunichte gemacht werden.

Locken Sie Ihre Besucher immer und immer wieder

Eine langsam ladende Seite kann auch zu Assoziationen mit schlechter Servicequalität führen, sodass die Web-Nutzer sich anderswo hinbegeben, um einen Kauf zu machen. Durch die Erhöhung der Webseitenleistung, können Sie der Öffentlichkeit versichern, dass Sie ein leistungsfähiges Unternehmen sind, mit dem es sich lohnt, Geschäfte zu machen. Es lohnt sich auch, sich Gedanken über mobile Leistungen zu machen, denn immer mehr Web-Nutzer browsen über Tablets und Smartphones anstatt Laptops. Die Kunden von heute haben weniger Geduld als je zuvor, wenn es um Ladezeiten geht, und erwarten Web-Seiten, die so schnell auf ihren mobilen Geräten funktionieren, wie sie auf ihren Laptop-Bildschirmen erscheinen, trotz der Tatsache, dass diese Geräte in der Regel langsamer sind. Wenn ein Web-Benutzer auf eine Website mit schlechter Leistung stößt, können sich die Chancen seiner Wiederkehr verringern.

Eine effizientere Webseite

Schnellere, effizientere Webseiten können die Kosten senken, die mit der Installation, Wartung und Server-Upgrades verbunden sind. Mehr Leistung kann durch Content-Delivery- Netzwerke oder CDNs erzielt werden, was erklärt, warum immer mehr Unternehmen vom Cloud-basierten Hosting angezogen werden. Die Suchmaschinen berücksichtigen auch die Ladegeschwindigkeit einer Webseite beim Seiten-Ranking. Dienstleistungen wie NCC können Ihnen helfen, die Leistung Ihrer Website zu optimieren; NCC bietet Webseiten- Gesundheits-Checks und maßgeschneiderte Beratung und Dienstleistungen, die auf Ihre eigenen einzigartigen Bedürfnisse zugeschnitten sind. Unternehmen wie NCC bieten echte Browser-Test-Tools, entworfen, um die Leistung Ihrer Webseite für eine Reihe der beliebtesten Browser zu analysieren. Beim Umschauen können Sie aus einer Reihe von Treuhanddienstleistungen für Software von Drittanbietern auswählen, die Sie schützen werden, egal was mit ihren Entwicklern in der Zukunft passiert.

Der Beitrag Wie die Beschleunigung Ihrer Webseite die Kundenzufriedenheit, Seitenaufrufe und Konversionen steigern kann erschien zuerst auf Technologie4web.de.

Usability für Dropdownlisten 25 Mar 2013 5:23 AM (11 years ago)

Fast alle Webseiten benutzen Dropdownlisten. Diese sind aus Usabilitysicht allerdings oft kritisch, weil eine präzise Mausführung erforderlich ist.
Möchte man aus einem Menü in ein Untermenü wechseln, kann es schnell passieren, dass der Mauscursor für kurze Zeit das Menü verlässt. Dieses kurze Verlassen reicht allerdings schon aus, dass sich das ganze Menü wieder schließt. Um dieses Problem zu umgehen, verwenden viele JQuery-Plugins delays (Zeitfenster). Innerhalb dieser Zeitfenster passiert mit dem Menü gar nichts (es wird weder geschlossen, noch wird das Menü der nächsten Ebene geöffnet). Dadurch schließen sich Dropdownmenüs zwar nicht mehr so schnell, allerdings werden die Menüs dadurch auch sehr langsam. Speziell bei umfangreichen Menüs kann das für den Nutzer schnell frustrieren, wenn er z.B. 5x 200ms (typischer Delaywert) warten muss.
Amazon hat ein Menü entwickelt, dass alle diese Probleme umgeht, indem beobachtet wird, ob sich der Mauscursors in einen (dreieckigen) Bereich bewegt, in dem sich die Untermenüs befinden. Sobald der Mauscursor den Bereich verlässt, schließt sich das Menü. Ben Kamen hat das Konzept des Amazonmenüs auf seiner Seite im Detail erklärt.

Quellen:

• http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
• http://www.golem.de/news/vorbild-amazon-dropdown-menues-fuers-web-wie-sie-sein-sollten-1303-98042.html

Der Beitrag Usability für Dropdownlisten erschien zuerst auf Technologie4web.de.

MySQL Event Scheduler 22 Dec 2012 9:50 AM (12 years ago)

Wenn große Webservices betrieben werden, müssen fast immer Cronjobs laufen, um automatisiert regelmäßige
Datenbankaufgaben abzuarbeiten. In der Regel wird dazu ein (PHP-) Script geschrieben, dass regelmäßig durch einen Cronjob gestartet wird und anschließend eine Verbindung zur Datenbank aufbaut. Oft vergessen wird die in MySQL eingebaute Event Scheduler Funktionalität.

Doch wie funktioniert der MySQL Event Scheduler?

Ganz einfach: Zu erst muss die Funktion eingeschaltet werden:

    SET GLOBAL event_scheduler = ON;

Anstatt von “ON” kann man auch eine “1” schreiben. Jetzt ist die MySQL Event Scheduler aktiviert.

Als Nächstes wird ein neuer Event angelegt:
Möchten man beispielsweise jeden Tag den zu diesem Zeitpunkt veralteten (äter als 10 Tage) Cache löschen, so kann das folgende MySQL-Statement helfen.

    CREATE EVENT Ereignis
    ON SCHEDULE EVERY 1 DAY
    DO
    DELETE FROM cache WHERE created_date < = DATE_SUB(NOW(), INTERVAL 10 DAY) ;

Hinweis: die Funktion DATE_SUB zieht von einem Datum eine bestimmte Zeit ab, hier 10 Tage.

Ereignisse können natürlich auch geändert oder gelöscht werden:
Alter Event

    ALTER Ereignis
    ON SCHEDULE EVERY 5 HOUR
    STARTS TIMESTAMP + 3 HOUR

    Drop Ereignis

Möchte man alle aktuellen Ereignisse auflisten, so kann man die MySQL-Funktion:

    SHOW EVENTS;

Vorteile gegenüber der Cronjob-Variante

• Es besteht keine Abhängigkeiten zum (möglicherweise externen) Cronjobanbieter.
• Für das (PHP) Script muss kein Webserver installiert sein

Der Beitrag MySQL Event Scheduler erschien zuerst auf Technologie4web.de.

Ersten X Elemente einer Klasse mit JQuery 3 Dec 2012 9:19 AM (12 years ago)

Heute mal ein (super) kurzer und knackiger Post: Wie kann man die ersten X Elemente einer bestimmten Klasse
mit JQuery ermitteln? Diese funktion ist beispielsweise nützlich, wenn die IDs aller selektierten Elemente einer Checkboxliste ermittelt werden sollen, die in einem bestimmten Bereich liegen. Nehmen wir an, es sollen die Elemente 3 bis 10 gefunden werden, dann hilft der folgende Code:


var $elements = $('div').get().slice(3,10);
console.log($elemenets);​


Der Beitrag Ersten X Elemente einer Klasse mit JQuery erschien zuerst auf Technologie4web.de.

Email – Targeting 25 Nov 2012 1:00 PM (12 years ago)

Seitdem es das Internet und Emails gibt, versuchen Menschen und Unternehmen mithilfe von Werbe – Emails neue Kunden zu akquirieren. Dabei gehen sie sehr unterschiedlich vor. Einige versenden Millionen von Spammails und hoffen das sie zufällig auf einen potenziell interessieren Menschen treffen. Abgesehen davon, dass Spam in Deutschland verboten ist, nervt er die meisten Email – Empfänger erheblich, wodurch das zu bewerbende Unternehmen in einem ungünstigen Licht dargestellt wird. Menschen, die dem Empfang von Werbe – Emails zugestimmt haben, sind deren Empfang logischerweise deutlich aufgeschlossener. Diese Zustimmung ist die einzige Möglichkeit Werbeemails legal zu versenden. Es gibt Anbieter, die die Email – Adressen legal durch das “Double Opt In” Verfahren erwerben, und dadurch rechtlich abgesichert Werbe – Emails versenden dürfen.

Die einzige Alternative zu Massenmails besteht im Targeting. Die SuperComm Data Marketing GmbH setzt beispielsweise eine spezielle Technik: das Zielgruppen – Targeting ein. Beim Zielgruppen – Targeting geht es um eine möglichst genaue Definition der Zielgruppe. Werbe – Emails werden anschließend nur den Menschen dieser ganz speziellen Zielgruppe zugesandt. Menschen anderer Zielgruppen werden vor für sie unnützen Emails geschützt. Zielgruppen könnten beispielsweise Hotels, Vereine oder Lehrer sein. Zielgruppen könnten aber auch Altersgruppen oder Menschen einer speziellen Regionen sein. Das Zielgruppen – Targeting hat eine ganze Reihe entscheidender Vorteile gegenüber den Massenmails:

Der Empfängerkreis ist stark eingegrenzt, wodurch die Emails sehr gut an die ausgewählte Zielgruppe angepasst werden können. Umfasst der Empfängerkreis beispielsweise nur Reisebüros, so kann die Werbebotschaft genau auf die Bedürfnisse von Reisebürobetreibern angepasst werden: Den Reisebürobetreiber interessiert wahrscheinlich am meisten die potenzielle Provision, die er verdient, wenn er ein neues Hotel an seine Kunden vermittelt. Deshalb kann man diesen Vorteil in der Werbemail besonders herausstellen und erhöht so ganz massiv den Erfolg durch Online – Marketing.
Die SuperComm Data Marketing GmbH übernimmt nicht nur technisch Ihr Email – Kampagne, sondern berät sie auch in Vorhinein hinsichtlich der Gestaltung Ihrer Werbemail. Dadurch können Werbeerfolge maximiert werden.

Der Beitrag Email – Targeting erschien zuerst auf Technologie4web.de.

CSS Column – Spaltenumbruch steuern / verhindern 1 Nov 2012 11:49 PM (12 years ago)

In den letzten Tagen habe ich meine Referenzen Seite über arbeitet, weil mir die Seite speziell auf mobilen Endgeräten nicht gefallen hat. Um die Referenzen schön darzustellen, habe ich mich für ein mehrspaltiges Layout entschieden, und habe dem css3-Standard entsprechend das Multi column-Modul gewählt. Das grundsätzliche Anlegen der Spalten war auch ziemlich einfach: ein paar Zeilen CSScode- fertig.

.multicolumn {
	column-count: 2;
	column-gap: 20px;
        column-width:400px;
	-moz-column-count: 2;
	-moz-column-gap: 45px;
        -moz-column-width:400px;
	-webkit-column-count: 2;
	-webkit-column-gap: 45px;
        -webkit-column-width:400px;
}

Doch bei genauerem Hinsehen fiel mir ein sehr unschöner Sachverhalt auf: Eine Referenz besteht bei mir aus einer H3 – Überschrift, einem Bild und einer unsortierte Liste mit zusätzlichen Informationen. Jetzt passierte es, dass das Bild am ende der ersten Spalte angezeigt wurde, und die dazugehörigen Informationen in die nächste Spalte rutschten. Der Besucher musste deshalb vom Ende der ersten Spalte nach ganz oben zum Anfang der nächsten Spalte scrollen. Das sollte auf keinem Fall passieren. Im Internet fand ich leider keine passende Lösung, um Spaltenumbrüche zu verhindern. Laut css3 Spezifikation sollte man Zeilen- und Spaltenumbrüche eigentlich mit break-before usw. steuern können, allerdings funktionierte das bei mir (Firefox, chrome) nicht. Die einzige für mich akzeptable Lösung besteht darin, die Referenzen jeweils in ein eigenes article-tag einzufügen und diesem die CSS – Eigenschaft

article{
display: inline-block;
}

zu geben. Jetzt werden die Sinneinheiten nicht mehr über mehrere Spalten verteilt – genau was ich wollte.
Nachtrag: über die Eigenschaften:
column-rule-color: #ccc; (farbe, als standard rgb-wert)
column-rule-style:solid; (strichart: z.B. solid, dotted)
column-rule-width: 1px; (strichdicke; der Abstand links und rechts zum Text ist immer gleich)
kann gesteuert werden, wie der Zwischenraum, zwischen den Spalten aussehen soll.

Der Beitrag CSS Column – Spaltenumbruch steuern / verhindern erschien zuerst auf Technologie4web.de.

jQuery Plugin für Bäume 4 Oct 2012 12:19 PM (12 years ago)

Heute habe ich für ein Projekt eine Javascript-Bibliothek gesucht, die Baumstrukturen darstellen kann, und dabei möglichst flexibel einsetzbar ist. Ideal für mich wäre ein jQuery-Plugin, weil jQuery im Projekt bereits eingesetzt wird.

Nachdem ich mir einige Scripts angesehen habe, hat mich das jQuery-Plugin dynatree am meisten überzeugt. Der Einbau war kinderleicht und die Events ließen sich wunderbar steuern. Der gesamte Funktionsumfang liegt deutlich über dem der anderen getesteten Scrips.

• Open Source
• Optimiert für große dynamische Bäume (DOM-Elemente werden nur dann erstellt, wenn es wirklich nötig ist
• Programmierung mithilfe einer umfangreiche objektorientierte Schnittstelle
• Unterstützung für lazy loading und Ajax
• Checkboxen und hierarchische Auswahl
• Unterstützt Drag & Drop
• Unterstützung für die Persistenz
• Tastatursteuerung
• Initialisiert aus HTML-Code, JSON oder JavaScript-Objekte
• Dokumentation

Auf der Demo Seite können einige Beispiele angesehen werden.

Der Beitrag jQuery Plugin für Bäume erschien zuerst auf Technologie4web.de.

Google und die automatsiche Silbentrennung 11 Feb 2011 12:16 AM (13 years ago)

Lange Wörter machen auf Webseiten häufig Probleme, weil die Silben standardmäßig nicht vom Browser getrennt werden. Dadurch entstehen entweder Zeilenumbrüche mit sehr großen „Lücken“ oder das lange Wort wird einfach über die Container-Begrenzung hinaus geschrieben. Heute möchte ich euch einige einige Möglichkeiten aufzeigen, wie man trotzdem eine Silbentrennung realisieren kann.

Via HTML

Ich muss gestehen, dass auch ich erst kürzlich über den bedingten Zeilenumbruch mittels HTML-Befehl “SHY” gestoßen bin.

Das ist ein SUPER­LANGESWORT

Dieses besagt, dass der Browser die Möglichkeit hat, das Wort bei Bedarf an der mit shy markierten Stelle umzubrechen. Der Browser wird an der betreffenden Stelle den ganz normalen Trennstrich einfügen. Im Netz habe ich ein paar Experimente gefunden, die besagen, dass Google z.b.

key­word

als keyword erkennt, allerdings konnte ich keine konkrete Aussage von Google selbst finden. Bei den anderen großen Suchmaschinen ist es genauso. Einige kleine Suchmaschinen haben aber trotzdem möglicherweise Probleme mit diesem eher selten vorkommenden Befehl.

Vorteile

• kinderleichter Einbau an jeder beliebigen Stelle durch den Nutzer
• keine Gefahr der automatisierten Falschtrennung

Nachteile

• Jede mögliche Trennung muss manuell im Quelltext eingetragen werden => großer Arbeitsaufwand
• nicht alle Browser unterstützen shy

Via JavaScript

Ich habe die hyphenator-JavaScript-Klasse getestet und muss sagen, dass ich begeistert bin! Um die hyphenator-JavaScript-Klasse zu verwenden müssen die JS-Dateien hochgeladen werden und anschließend folgender Code im HEAD-Bereich eingefügt werden:

        
        
        	Hyphenator.config({
        		displaytogglebox : true,
        		minwordlength : 4
        	});
        	Hyphenator.run();
        

Danach kann man jeden beliebigen Text zur Silbentrennung aktivieren, indem man den Text in einen Container mit der Klasse “hyphenate”. Über den Parameter lang kann man die Sprache des Textes auswählen. Dadurch ist auch möglich Texte aus verschiedenen Sprachen auf einer Seite zu verwenden.

SEHRLANGESWORTDASUNBEDINGTGETRENNTWERDENMUSS

Vorteile

• automatische Worttrennung (es ist kein Eingriff im Text notwendig)
• es werden viele Sprachen unterstützt (jede Sprache hat einen anderen Aufbau bei Worttrennungen)
• der Text steht im normalen Klartext im HTML-Code, d.h. auf Google & Co hat diese Variante keine Auswirkungen

Nachteil

• aktives JavaScript ist für das Feature der Silbentrennung notwendig (falls JS deaktiviert ist, wird der Text normal dargestellt)
• es sind zusätzliche JS-Dateien notwendig
  • 1 Klassendatei (unkomprimiert: 65Kb)
  • 1 Datei pro verwendeter Sprache (z.B. deutsch: rund 80Kb)
• Falls Fehler bei der Trennung auftreten (ich konnte keine Fehler finden), ist ein manueller Eingriff nur in Verbindung mit einem Eingriff in die umfangreiche JS-Klasse möglich

Der Beitrag Google und die automatsiche Silbentrennung erschien zuerst auf Technologie4web.de.

JavaScript / CSS Komprimieren und Cachen 9 Feb 2011 2:34 AM (13 years ago)

Mithilfe von PHP kann man JavaScript- und CSS-Dateien sehr effizient Komprimieren und Cachen. Dadurch können diese wesentlich schneller übertragen werden und müssen zudem nicht bei jedem Seitenaufruf erneut runtergeladen werden.
Ich werde diesen Beitrag so gliedern:

1. JavaScript und CSS komprimnieren
2. JavaScript und CSS cachen

Zusätzliche Optimierung für JavaScript und CSS finden Sie in einem früheren Artikel.

Javascript- und CSS-Dateien komprimieren

Im Gegensatz zu Bildern sind CSS und JavaScript Texte, die mit sehr hoher Kompressionsrate (70% sind durchaus üblich) komprimiert werden können. Alle modernen Browser können komprimierte Webinhalte dekomprimieren und anzeigen. Weil unsere Webseite allerdings auch von alten Browsern angezeigt werden soll müssen wir für unser Cache-System 2 verschiedene Varianten vorsehen: eine komprimierte und eine unkomprimierte Variante. Die einfachste Art ein PHP(-CSS)-Script zu komprimieren ist den folgenden Code vor die erste Ausgabe des CSS-Scripts zu schreiben:

ob_start('ob_gzhandler',xxx);

das xxx kann eine Zahl zwischen 1 und 9 sein, die angibt wie stark komprimiert wird. Wird keine Zahl angegeben so wird 6 als Standard verwendet. Beachte: Die Serverbelastung steigt bei Zahlen größer 6 extrem an, weshalb man sich den Einsatz genau überlegen sollte. Wer ein Cache-System verwendet und die Komprimierung z.B. nur einmal am Tag durchführt kann bedenkenlos die maximale Kompressionsstufe 9 verwenden. Wem die Komprimierung mittels PHP zu aufwendig ist kann das ganze alternativ auch per .htaccess regeln (Im folgenden Beispiel werden alle Dateien, die die Endung .css haben komprimiert übertragen (soweit der Browser des Nutzers das unterstützt).

SetOutputFilter DEFLATE

Kleiner Nachteil: Weil hier wird kein Cache-System verwendet wird muss der Server die Komprimierung für jeden Besucher neu durchführen.

JavaScript und CSS Cachen

Beim Cachen wird dem Browser des Nutzers mitgeteilt, dass die gerade heruntergeladene Datei noch eine gewisse Zeit X aktuell bleibt. Wird die Datei innerhalb dieser Zeit erneut gebraucht, so wird sie nicht aus dem Internet heruntergeladen, sondern wird direkt aus dem Speicher des Nutzers geladen. Am leichtesten lässt sich das ganze mit dem fertigen PHP-Script QuickCache realisieren.

Für ein optimales Caching werden meiner Meinung nach 4 Versionen der CSS-Datei gebraucht. Je eine Version für IE und die sonstigen Browser (je nach Design mehr oder weniger, je nach Anzahl der Browserweichen). Und von jeder dieser Versionen wird jeweils eine komprimierte und eine unkomprimierte Version benötigt. Dadurch kann der Server genau die richtige Version ausliefern, ohne erst den Prozessor für eine mögliche Kompression anwerfen zu müssen.

Wer die Cache-Header manuell setzen möchte kann folgenden PHP-Code verwenden.

   header ("cache-control: must-revalidate");
   $offset = 60 * 60 * 24 * 31; //1 Monat
   header ('expires: '.gmdate ('D, d M Y H:i:s', time() + $offset).' GMT');

Der Beitrag JavaScript / CSS Komprimieren und Cachen erschien zuerst auf Technologie4web.de.

Verschiedene Animationen für :hover an und aus 8 Feb 2011 5:29 AM (13 years ago)

Wyss Autokauf: Ihr Partner für den Ankauf von Autos für den Export

Normalerweise hat jeder CSS-Container die selbe Animation für das aktivierende und deaktivierende Hover – Ereignis (mit der Maus das Feld betreten bzw. verlassen). Mir bekannt waren bisher nur verschiedene Animationenstechniken in Zusammenhang mit JavaScript-Frameworks wie JQuery oder mootools bekannt. Doch auch mit reinem CSS3 kann man verschiedene CSS :hover Animationen realisieren. Der folgende einfache Trick realisiert die verschiedenen Animation für hover an und hover aus. Beachte: Der Code-Schnipsel funktioniert nur in Browsern, die transitions unterstützen (z.B. webkit-Browser). Das CSS3-Modul Transition und Animation eignen sich besonders um Interaktivität ohne JavaScript oder Flash auf die eigene Seite zu bringen.

#thing {
   padding: 5px;
   border-radius: 10px;

  /* HOVER OFF */
   -webkit-transition: padding 4s;
}

#thing:hover {
   padding: 25px;
   border-radius: 20px;

  /* HOVER ON */
   -webkit-transition: border-radius 4s;
}

Wenn man die Maus über das Feld bewegt, überschreibt die transition den regulären Zustand. Wenn die Maus das Feld wieder verlässt, wird der reguläre Zustand wieder hergestellt, indem die im Originalzustand definierte Animation ausgeführt wird. Der Einsatz von CSS3 hat gegenüber den JavaScript bzw. Flashlösungen einige Vorteile:

• es wird kein JavaScript benötigt
• es werden keine Frameworks benötigt
• die Animationen stören keine Skripte
• kein Flash wird benötigt
• weniger Speicherplatz verbrauch => geringere Übertragunsgzeit übder das Internet

Der Beitrag Verschiedene Animationen für :hover an und aus erschien zuerst auf Technologie4web.de.