Wie sinnvoll und/oder notwendig sind Accelerated Mobile Pages (AMP)?

Accelerated Mobile Pages (AMP) sind speziell für mobile Geräte erstellte Webseiten. Basis ist ein speziell für die Erstellung von Webseiten für mobile Endgeräte entwickeltes Derivat von HTML. Das Open Source Projekt wurde unter Federführung von Google herausgebracht.

In diversen Artikeln habe ich Zahlen zu AMP gefunden, da wird von 10-40 mal schnelleres Laden gesprochen.

Geschwindigkeitsunterschiede?

Und ja meine AMP-Version wird in 0.79 Sekunden geladen!
Aber die nicht AMP-Version schafft es laut PageSpeed in 0.347 Sekunden.

Das wundert mich nicht! Ich habe nämlich eine Webseite zum Testen verwendet, die ich selbst gecodet habe. Auf dieser Webseite habe ich bereits bei der Erstellung bewußt auf diverse JS-Frameworks, wie Bootstrap, JQuery und Co. verzichtet.

Responsive Webdesign mit Bootstrap ist nämlich alles andere als schnell! Die einfache Umsetzung von Responsive Webdesign hat ihren Preis. Es wird eine Menge Ballast geladen. Dies wirkt sich selbstverständlich auf die Seitenladezeit negativ aus.

Beim Thema „Responsive Webdesign“ wird zu gern vergessen, dass Text schon immer „responsive“ darstellbar war. Ganz ohne JavaScript und Framworks und auch ganz ohne CSS und ineinandergeschachtelte html-Elemente bricht Text passend zur Größe des Bildschirmes um.

flexibler Design-Ansatz

Das starre Design, wie es in Druckmedien eingesetzt wird, ist für Webseiten ungeeignet.
Das Problem liegt meist nicht bei den Webentwicklern, sondern den Auftraggebern. Nicht selten habe ich davon gehört, dass sich Auftraggeber beschwert haben, weil die Webseite nicht Pixelgenau dem Entwurf in Word entsprochen hat. Aber das ist ein anderes Thema.

Browser-Cache und Google-Cache

Während der erste Aufruf einer Webseite immer etwas länger dauert, wird beim nächsten Besuch die Ladezeit kürzer. Die Ursache dafür liegt im Browser-Caching. Der Browser lädt die Inhalte beim ersten Laden in einen temporären Ordner und kann somit beim erneuten Aufruf der Seite die Inhalte schneller darstellen.

AMP-Seiten werden von Google gecached. Dadurch kann insbesondere bei der Verwendung von Fotos, Videos und Animationen Ladezeit gespart werden und das nicht erst beim erneuten Laden.

Bin ich schon zu alt für das Smartphone?

Ich gebe es zu ich bin kein Maus-Schupser. Als ich meine ersten Schritte am Computer versuchte, gab es noch keine Maus.

Lange Zeit, und auch heute noch, verwende ich lieber Tastatur-Kürzel, als mich durch die sich stetig ändernden Menüs zu navigieren.

Nun ist wohl auch die Zeit der Maus-Schupser vorbei. Heute wird gewischt was das Zeug hält.

Nein die IT-Branche ist nicht zusammengebrochen und die ITler müssen nicht als Putzfrau bzw. Putzmann arbeiten. Es wird auf dem Bildschirm gewischt. Es nennt sich zwar Touchscreen, aber bloßes Anfassen führt nicht unbedingt zu Erfolg.

Nun bin ich schon etwas älter als 17, und meine Finger sind wegen der Arthrose nicht mehr ganz so beweglich, wie ich bzw. das Smartphone es gerne hätte.
Nun habe ich ganz ohne fremde Hilfe das Mikrophon-Symbol gefunden. Ich habe keine Arthrose in der Zunge dennoch werden aus meinen Worten ganz neue Wortschöpfungen erfunden und so musste ich nach ein paar Minuten, inzwischen reichlich genervt, aufgeben.

Also noch einmal.

Nun ist da eine Nachricht aufgeploppt, vermutlich von Google, dass ich meine geänderte Telefon-Nummer bestätigen möchte.
Ich bin nicht aus Dummsdorf, ich klicke nicht auf jeden Link und melde mich mit meinem Passwort an, um mich später zu wundern, warum mein Rechner nun nicht mehr funktioniert.

Auf dem Laptop oder Desktop-Computer wird bei Aufruf des Links zumindest noch die URL angezeigt, d.h. hier kann ich prüfen, ob ich die richtige Seite aufrufe. Auf dem Smartphone sehe ich dazu nichts. Ich verzichte auf die Anpassung der Telefon-Nummer und versuche mich zu erinnern, was ich eigentlich machen wollte.

Egal, ich trinke erst mal einen Kaffee. Anschließend setzte ich mich an meinen immer noch Windows7 – Laptop und fühle mich etwas älter als sonst.

Angeklebte Kopfzeile

Zur Erreichung einer intuitiven Bedienbarkeit der Webseiten kann es hilfreich sein, bestimmte Elemente im angezeigten Bereich zu fixieren. Dabei geht allerdings ein Teil des verfügbaren Anzeigebereiches für den Inhalt verloren.

Je nach Größe des Kofbereiches und der darin enthaltenen Elemente, wie z.B. Logo, Seitenname, Menü, Service- oder Hilfebuttons, kann beim Herunterscrollen der Seite der Kopfbereich so verkleinert werden, dass zumindest die wichtigsten Bedienelemente vorhanden sind.

Diese Technik bezeichnet man auch als „sticky header“. Sticky header bedeutet auf deutsch: angeklebte Kopfzeile.

Für die Umsetzung allein mit CSS-Styles unter Verwendung von position: sticky [1] ist eswohl noch zu früh. Über die Webseite Kann ich das verwenden? (caniuse.com) kann man prüfen, inwieweit neue Techniken bereits umgesetzt sind und bei wieviel Prozent der potentielle Besucher und Kunden diese Technik bereits unterstützt wird.

Aktuell beträgt der Wert nur 18.67 %!

Zuwenig, um darauf eine Lösung für eine produktive Seite aufzubauen.

Die Umsetzung erfolgt somit mit Css3 und JavaScript.

Im Sinne einer schnellen Seitenladezeit ist es nicht immer sinnvoll ganze Frameworks zu laden, um z.B. eine Css-Klasse oder eine Css-Style anzupassen. Es funktioniert auch mit purem JavaScript!

Allerdings ist der Programmieraufwand bei den verschiedenen Frameworks durchaus geringer und wenn diese ohnehin geladen werden, weil sie an anderer Stelle gebraucht werden, spricht nichts dagegen diese auch zu verwenden.

(function($)
{
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
$('#overcard').addClass('sticky');
} else {
$('#overcard').removeClass('sticky');
}
});

})(jQuery);

 

Quellen:

  1. maddesignsde – Css3 Position Sticky Artikel vom 16.05.2014
  2. callmenick.com – js css-Klassen

Responsive Webdesign – aber nicht so!

Nachdem Designer Webseiten in Druckformate gezwängt haben und anschließend feststellen mussten, dass nun die Anzeige auf einigen Bildschirmen nicht mehr gut aussieht, soll „Responsive Webdesign“ alles richten.

Dank der vielen Frameworks ist dies auch kein Problem. Die Webseite bekommt den Twitter-Bootstrap übergestülpt, ein paar Anpassungen am CSS und in JavaScript, fertig!

In einigen Fällen sieht es auch so aus, als könnte es funktionieren, aber die Stoplersteine liegen im Verborgenem.

 

positiver erster Eindruck
Eine Webseite hat ca. 3 Sekunden um zu überzeugen: Eins – Zwei – Drei – Chance vorbei!
Die Besucher wollen schnelle Informationen. Wenn innerhalb der ersten Sekunden nicht das Gesuchte angezeigt wird, ist der Besucher schnell wieder weg.

Das Laden der JavaScript-Bibliotheken und umfangreicher CSS-Style-Definitionen kann je nach Gerät und Anbindung an Internet mehrere Sekunden benötigen.

Da hilft es auch wenig, dass der Besucher beim 2. Besuch die Seite schneller angezeigt bekommt, wenn diese Dateien vom Browser gecacht werden.

Wenn die schönen Designelemente in den ersten Sekunden noch gar nicht vorhanden sind, können Sie den neuen Besucher nicht überzeugen.

 

Intuitive Bedienbarkeit
Die intuitive Bedienbarkeit ist Voraussetzung für jede Webseite, unabhängig davon, ob diese „responsive“ gestaltet werden soll oder nicht.

Dafür ist es wichtig, dass weiterführende Links und Buttons als solche erkannt werden.

 

Download-Volumen
Bei getakteten Verbindungen, ist das Download-Volumen ein wichtiger Aspekt. Je nach Tarif wird das Surfen teurer oder die Übertragungsgeschwindigkeit nach Erreichen der Obergrenze gedrosselt.

In beiden Fällen ist es ärgerlich, wenn das Volumen für unnötigen Ballast verbraucht wird.

Dies gilt im Übrigen auch für Werbung. Wer unbedingt ungefragt Werbung einblendet, der sollte zumindest so fair sein, dass er nicht unnötig viel Volumen verbraucht. Es muss nicht gleich das ganze Werbevideo aufgedrängt werden, ein Vorschaubild mit entsprechendem Text reicht durchaus.

Es ist also sinnvoll bereits auf dem Server zu unterscheiden, ob z.B. hochauflösende Grafiken benötigt werden.
Leider gibt es dafür vom W3C und den Browserherstellern keine geeigneten Vorgaben.

Trigger

Trigger werden schon sehr lange in Oracle eingesetzt, insbesondere dann, wenn verschiedene Programme auf die gleichen Tabellen zugreifen ist es sinnvoll Funktionen zur Sicherung der Datenkonsitenz durch die Datenbank selbst durchzuführen.

Trigger werden durch Ereignisse (INSERT, DELETE) ausgelöst und werden zum definierten Zeitpunkt (BEFORE, AFTER) durchgeführt.

Beispiel:
Jeweils bevor ein Datensatz angelegt wird, wird der Wert für das Feld Ident aus dem aktuellem Zeitstempel mit einer vorangestellten eins erstellt.

CREATE TRIGGER `set_helper_ident` BEFORE INSERT ON `jm_drkhelper`
FOR EACH ROW SET NEW.ident = concat('1',DATE_FORMAT(NOW(), '%Y%m%d%H%i%s%f'))

Kekse

Warum sind die Kekse (Cookies) in das Visier der EU-Datenschützer geraten und warum ist das Thema so wichtig?

Cookies sind kleine Dateien, die auf dem Rechner abgelegt werden, und dort für den Besucher wichtige Daten zwischenzuspeichern. Dies können z.B. die aktuellen Spielerdaten bei einem Online-Spile sein, die es ermöglichen auch nach einem Abbruch der Verbindung weiterzuspielen.

An sich sind diese Cookies nicht gefährlich, denn sie enthalten keinen ausführbaren Code, außerdem können Cookies nur von der Webseite gelesen werden, von der sie gesetzt wurden.

Wenn nun aber Werbenetzwerke Cookies setzen, um im großen Stil Daten zu sammeln, dann ist es nicht mehr weit bis zum gläsernen Besucher.

Das hier ein Riegel vorgeschoben werden muss ist klar. Leider unterscheidet ist die aktuelle EU-Richtline nicht so klar. Auch ist aktuell noch keine Umsetzung in deutsches Recht erfolgt, d.h. es kann sein dass Seiten demnächst abgemahnt werden können, weil sie ungefragt Cookies setzen.

Aus diesem Grund haben viele Webseitenbetreiber heute schon Vorkehrungen getroffen, und fragen bei jedem Besuch, sofern kein gültiges Cookie mit bereits erteilter Erlaubnis vorliegt, beim Besucher an, ob Cookies gesetzt werden dürfen.