Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Bewegte Bilder

Sonntag, 25. Oktober 2015

Ein Bild sagt mehr als 1000 Worte. Von bewegten Bildern geht darüber hinaus eine starke Faszination aus, sie sind Eye Catcher. In den sozialen Medien — Twitter, Facebook, Vine, Whatsapp & Co — sind kurze Bewegtbildsequenzen — als animated GIF oder Video — seit einiger Zeit trending; und leider häufig auch nervend.
Zur Erstellung dieser Clips gibt und gab es zahllose Werkzeuge. Eines dieser Tools war — Cliplets, hier vorgestellt. Inzwischen wieder verschwunden, wie viele andere ähnliche Lösungen.

Dass das interesse für kurze Clips ungebrochen ist beweist Apple mit Live Fotos, der Möglichkeit, bei der Aufnahme eines Fotos (nicht Videos) direkt einen Mini-Clip zu erstellen. Verfügbar mit der neuesten iPhone Generation 6s und 6s Plus. Und leider auch nur auf diesen Geräten zu betrachten. In der Praxis bedeutet dies, dass man diese Live Fotos nicht veröffentlichen kann. Es sei denn, man benutzt ein zusätzliches Tool. Zum Beispiel Lively (Kostenlos für 3 Exporte, 1,99 € In-App-Kauf für unlimited Exporte). Mit dieser App lassen sich die proprietären Live Fotos als Video oder animated GIF exportieren und versenden / sharen.

Damit das Web wieder ein wenig nerviger wird.

Demo GIF

5,6 MB! — Achtung im Mobilfunknetz mit Datentarif!


EU Cookie Richtlinie

Donnerstag, 22. Oktober 2015

Der Hinweis auf den Einsatz von Cookies — kürzlich von mir noch als Cookie Warnung Irrsinn bezeichnet — wird anscheinend über kurz oder lang zwingend.
Siehe diesen Artikel im I LAW iT-Blog
Weil ich keine Lust habe, mich mit einer Abmahnung herumzuärgern, hab' ich in den sauren Apfel gebissen, und meine Website mit so einem Monstrum "verziert".

Screenshot vom iPhone
Die mobile Startseite von webdesign.weisshart.de mit dem Cookie-Hinweis am Seitenfuß

Folgende Bedingungen stellte ich mir selbst:

  • Kein Opt-in, sondern ein Hinweis auf die Datenschutzerklärung, wo die Opt-out-Möglichkeiten beschrieben werden.
  • Seitenaufbau darf nicht verlangsamt werden.
  • Keine fremde Ressource, d. h. kein zusätzlicher HTTP-Request.
  • Möglichst wenig Belästigung für den Besucher.

Die Lösung:

Ein einziger Codeschnipsel, den ich nach der Seitenüberschrift eingefügt habe:

<?php
if (!isset($_COOKIE['eu-cookie-irrsinn'])) {
$ablauf = (time() + (365 * 24 * 60 * 60)) * 1000;
echo '
<div id="eu-cookie-irrsinn" style="hier CSS für das div">
<p style="hier CSS für den Text">
Hier der angezeigte Text <a href="datenschutz.php">Weitere Infos</a>
</p>
<button style="hier CSS für den OK-Button"
onclick="document.cookie=\'eu-cookie-irrsinn=accepted; expires=\'+(new Date('.$ablauf.')).toGMTString();this.parentNode.parentNode.removeChild(this.parentNode);">
OK<dfn> &mdash; hier klicken um diese Anzeige dauerhaft zu verbergen.</dfn></button>
</div>
';
}
?>

Meine CSS-Angaben für das div:

style="background-color:#f1f1f1; opacity: .9; font-size: .9em; width:100%; position:fixed; bottom:0; left:0; z-index:100; border-top: 1px solid #aaa"

Damit wird der Hinweis am Seitenende fixiert. Wichtig insbesondere für die mobile Ansicht, um wenigstens den Seitenkopf nicht zu verstecken.
Warum Inline-CSS? Um sicherzustellen, dass der Hinweis nicht aufgrund einer race condition ungestylt angezeigt wird.

PageSpeed Insights zeigt, dass ich die Vorgabe "Seite darf nicht langsamer werden" einhalten konnte.

Nachtrag 24.01.2016

Wer sich, wie ich, nicht über diesen Irrsinn ärgern will: Es gibt ein Browser-Addon dagegen: I don't care about cookies — und Ruhe ist.


Die RWD-Lüge - Betrug am Kunden die Zweite

Freitag, 9. Oktober 2015

Ich bin für die zwangsweise Einführung eines Hinweisschildes auf Webseiten:

Verbotsschild 6 MB

Dieses Schild sollte VOR! dem Laden bestimmter Seiten aufgerufen werden, wenn versucht wird, solche Seiten im Mobilfunknetz zu öffnen.

Hintergrund:
Es gibt immer noch Seiten — oder sollte ich sagen, immer mehr Seiten — die "responsiv" zwar die Anzeige an kleine Monitore anpassen, aber unendlich viele Daten laden, die zur Anzeige auf dem Smartphone gar nicht benötigt werden. In einem aktuellen Fall sind das 6 (in Worten sechs) Megabyte, die mein mobiles Datenvolumen belasten, um ein Bild und etwas Text anzuzeigen.

Warum machen Webworker so etwas? Gedankenlosigkeit? Schlamperei? Oder Unvermögen?
PageSpeed Insights und ähnliche kostenlose Tools sind bereits erfunden.

Screenshot PageSpeed Insights
PageSpeed Insights zeigt für die mobile Seite 15 von 100 möglichen Punkten für die Geschwindigkeit.

Die zunehmende Verbreitung von LTE macht die Sache nicht besser, sondern schlechter! Die Besucher merken wegen der hohen Download-Geschwindigkeit gar nicht, dass ihr teueres mobiles Datenvolumen unnütz verbraten wird. Nur die Provider freuen sich, dass sie immer größere Pakete verkaufen können.


HTML-E-Mails mit dem Mac erstellen

Mittwoch, 7. Oktober 2015

E-Mails verschicke ich (fast) ausnahmslos als text-only. Weil ich so sicher stelle, dass der Empfänger sie auf jeden Fall lesen kann.
Ausnahmsweise kann es aber auch einmal Sinn machen, eine E-Mail HTML-formatiert zu versenden. Weil man eine solche E-Mail semantisch korrekt gliedern kann: Mit Überschriften, Listen usw.

Auf dem Mac funktioniert das relativ einfach mit Bordmitteln:

  1. Das HTML-Dokument erstellen. Gerne nutze ich dazu Markdown.
  2. Das HTML-Dokument im Browser öffnen.
  3. Alles markieren (cmd + a) und kopieren (cmd + c).
  4. Mail (das E-Mail Programm von OS X) zum Erstellen von formatierten Mails einstellen: Einstellungen - Verfassen - E-Mail-Format: Formatierter Text
  5. Inhalt der Zwischenablage in Mail einfügen (cmd + v).

Warnung:

Prinzipiell kann man jede Webseite auf diese Weise per E-Mail verschicken. Komplexe Formatierungen gehen jedoch möglicherweise auf dem Mail-Client des Empfängers verloren. Empfehlen kann ich, wie eingangs gesagt, HTML-formatierte E-Mails nur für Textdokumente, die ordentlich strukturiert werden sollen.

Und noch ein Hinweis:

Die Formatierungsmöglichkeiten von Mail: Schriftgröße, Fettschrift, Farben usw. ersetzen keine semantisch korrekte Gliederung. Fett geschriebener Text ist keine Überschrift! Korrekt mit Überschriften gegliederte E-Mails können auch mit assistiven Technologien wie Screen Reader leichter erfasst werden.

Nachtrag:

Fast noch eleganter geht das Erstellen und Versenden von HTML-formatierten E-Mails mit dem iPhone/iPad. Mit Hilfe der iOS App NoteBox. Dazu in Kürze ein eigener Beitrag.


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE