Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Mobil Chatten - mit Event-Sounds

Montag, 8. Februar 2016

Auch mein Chat wird immer häufiger mit Smartphones oder Tablets benutzt. Ich hab’ deshalb ein bisher dort fehlendes Feature nachgerüstet: Soundbenachrichtigung für verschiedene Events, z. B. «Neuer User betritt den Chatroom» oder «Eingang einer Nachricht».

Screenshot
Die geöffnete Liste mit den verfügbaren Optionen im mobilen Skin

Um die Sounds zu Aktivieren: Optionen [+] öffnen
Diese Option muss bei jedem Neuladen der Seite — z. B. beim Wechsel des Chatrooms, Wahl von Optionen — erneut aktiviert werden. Der Grund hierfür liegt in einer Einschränkung der mobilen Betriebssysteme iOS (iPhone, iPad) und Android.

Zur Technik:
Die Sounds liegen als .mp3 Dateien vor, die, anders als Flash, von iOS und Android akzeptiert werden. Und die einzelnen Dateien sind in ein audio sprite gepackt.


Eine responsive Website anstelle einer App

Mittwoch, 3. Februar 2016

Schön, wenn ich mal in meiner Meinung bestärkt werde, und sogar eine meiner Prognosen eintrifft.

Unter der Überschrift Eine App - um jeden Preis - für jeden Sch*** habe ich gefordert, die Möglichkeiten des Responsive Web Design RWD zu nutzen, und nicht um jeden Preis eine App anstelle einer gleichwertigen Website zu veröffentlichen.

Jetzt hat wetter.com sich offensichtlich meiner Meinung angeschlossen.

Screenshot der Website auf dem iPhone
mobile.wetter.com auf dem iPhone

Die mobile Ansicht von wetter.com bietet den gleichen Leistungsumfang wie die Desktopversion. Aber ich spare mir die Installation einer App. Und wie man ein Icon für eine Website erstellt, dürfte inzwischen auch bekannt sein.

Nachmachen! Vielleicht hab’ ich dann irgendwann auf meinem iPhone wieder Safari-Lesezeichen anstelle von 250 Apps.


Der Cookie Warnung Irrsinn - und kein Ende

Montag, 1. Februar 2016

Wie angekündigt wollte ich beobachten, wie viele Besucher das Opt-out wählen, und ihren Besuch nicht tracken lassen.
Nach einer Woche stellt sich das Ergebnis mehr oder weniger wie erwartet dar:

Screenshot Google Analytics
Das Liniendiagramm zeigt die Anzahl aufgerufener, oder besser: getrackter Seiten pro Tag im Vergleich zweier Wochen, vor und nach dem Einfügen des Opt-out-Buttons

Ca. 25% der Besucher dürften das Opt-out gewählt, also “Cookie ablehnen” gedrückt haben. Dieser Wert geht nicht unmittelbar aus obiger Grafik hervor. Die Besonderheit eines Opt-out bringt es mit sich, dass unabhängig von der Wahl des Besuchers jedenfalls die Einstiegsseite getrackt wurde. Nur ein Opt-in könnte dies verhindern.
Ich erspare mir die Erklärung, wie ich zum Wert 25% gekommen bin.

Zur Klarstellung: 25% Opt-out bedeutet keinesfalls 25% weniger Seitenbesuche. Sondern lediglich, dass etwa ein Viertel der Besucher den Button “Cookie ablehnen” gedrückt haben, und der Besuch weiterer Seiten nicht mehr von Google Analytics registriert wurde.

Nächster Schritt: Gegenprobe. Ich entferne den Hinweis, und damit die Möglichkeit des Opt-out, für eine Woche ab heute. (Die wiederkehrenden Besucher, die das Opt-out bereits gewählt hatten, d. h. das Opt-out-Cookie gesetzt haben, werden natürlich weiterhin nicht getrackt.)


Mein erstes BarCamp

Samstag, 30. Januar 2016

Ein BarCamp zum Thema Inklusion, veranstaltet von OpenTransfer, der Aktion Mensch, und Social Entrepreneurship Akademie

Erste — und spätere — Eindrücke:

Perfekte Organisation, ein nettes und immer hilfsbereites Orga-Team, Kaffee und Butterbrezen zum Empfang, hilfreich für einen lockeren Start.
Zu Mittag gab’s u. a. veganes Karottengemüse, und fast jeder an meinem Tisch hatte eine Intoleranz, gegen Laktose oder irgend etwas anderes.
50% der Teilnehmer am abendlichen Cool Down bestellten ihre Pizza vegetarisch.
Also viele Leute, die sich üblicherweise nicht in meiner Filterbubble befinden. Kann interessant werden.

Weil es, wie gesagt, mein erstes BarCamp war, zuerst die Regeln:

Flipchart mit den BarCamp-Regeln
  1. Keine Zuschauer
  2. Geplant ungeplant
  3. Mehrwert
  4. Law of 2 Feet
  5. Nur Mut!
  6. Spread the word #otc16

Gemäß Regel 1 hab’ ich mir Sessions ausgesucht, bei denen ich glaubte, aktiv etwas beitragen zu können.
Die zwangsläufige Folge: Ich hab’ dort wenig Neues erfahren. Vielleicht hätte ich besser Regel 5: “Nur Mut!” befolgt, und mir die Session über Mode für Rollstuhlfahrer - “Warum ist Mode noch nicht inklusiv?” - angetan. Das wäre wohl absolutes Neuland für mich gewesen.

Ansonsten: Zwei Sessions im Vortragsstil mit Folien und vielen Zuhörern — also genau das Gegenteil dessen, was ich mir erwartet hatte. Eine weitere Session über ein spannendes Projekt wurde zum “Zwiegespräch": außer dem Session leader und mir schaute nach der Hälfte der Session nur noch ein einziger weiterer Teilnehmer herein. Erstaunlich, wie souverän der Session leader die Situation meisterte.

Am interessantesten fand ich eine Diskussions-Session mit dem Titel: Barrierefreiheit für alle — (un)möglich? Klar, dass man unter dieser Überschrift keine Lösungen für alle Probleme der Welt erwarten darf.
Beispielhaft ein Diskussionsbeitrag aus dieser Session: Rollstuhlfahrerin empfindet Blindenleitlinien z. B. in Bahnhöfen als Barriere, weil sie ständig mit den Rädern ihres Rollstuhls in den Rillen der Leitlinien hängen bleibt.

Mein persönliches Fazit am Abend:

Die Diskussion war interessanter als es auf diesem Foto scheint.
Foto: Andi Weiland/openTransfer.de

Jeder Teilnehmer entscheidet durch seine persönliche Auswahl der Sessions, wie viel er für sich aus dem BarCamp mitnimmt.
Ich hatte den Eindruck, dass die Mehrzahl der Teilnehmer durchwegs zufrieden waren. Ich hatte einen netten Tag, und bin um eine neue Erfahrung reicher.

Follow up: www.opentransfer.de/event/otc16-inklusion/


PHP 7 - Suchscript - Chat

Mittwoch, 27. Januar 2016

PHP 7 ist die neueste Version der serverseitigen Scriptsprache PHP, und soll pfeilschnell sein.
Die wohl gravierendste Einschränkung:
Die Verbindung zu MySQL-Datenbanken. Unter anderem werden nur noch Datenbanken der Version 5 unterstützt.

Screenshot
Ein Screenshot des Chatfensters

Die gute Nachricht:
Meine Scripte Chat und Suchscript arbeiten ohne Datenbank. Sie laufen problemlos und ohne jegliche Anpassung auch unter PHP 7.


Der Cookie Warnung Irrsinn - die Dritte

Sonntag, 24. Januar 2016

Es ist etwas ruhiger geworden um den EU Cookie Warnung Irrsinn. Mit etwas Glück verläuft das Thema ebenso im Sand wie zuletzt die unausgegorene Novellierung des Jugendmedienschutz-Staatsvertrags.

Weil man rund um EU-Regulierungen aber nie sicher sein kann, bereite ich mich weiterhin auf den Ernstfall vor. Der Ernstfall, das heißt für mich: Eine Vorschrift auch auf Kundenseiten bei Bedarf möglichst schnell, und vor allem sinnvoll umsetzen.

Screenshot
2 Buttons am Seitenfuß: “Akzeptieren” und “Cookie ablehnen”

Ich habe daher die Cookie-Warnung auf meiner Site um ein Opt-out erweitert. Das Opt-out ersetzt Hinweise wie

Durch die Benutzung erkären Sie sich mit dem Setzen von Tracking-Cookies einverstanden.

Unfug! Wenn ich nicht getrackt werden will, dann muss ich die Site verlassen?

Mit dem Opt-out hingegen kann der Besucher kann durch Klicken eines Buttons das Tracking seines Besuchs durch Google Analytics unterbinden, aber dennoch die Site weiterhin nutzen. Alternativ kann er durch Klicken auf den Button “Akzeptieren” das Tracking zulassen, den Hinweis aber ausblenden. Und, last but not least, kann er den Hinweis auch einfach ignorieren.

Ich bin neugierig, wie viele Besucher das Opt-out wählen. Die Statistik wird es zeigen.

Eine denkbare Alternative wäre ein Opt-in. Der Besucher muss explizit dem Tracking zustimmen, darf aber auch bei Ablehnung nicht an der Benutzung der Site gehindert werden.


Responsive Images via ImageEngine

Montag, 18. Januar 2016

Responsive Images sind die größte offene Herausforderung des Responsive Web Design (RWD). Welchen Sinn macht es, per CSS die Darstellung einer Webseite an die kleinen Smartphone-Monitore anzupassen, und dann mehrere 100 kB schwere Bilder per Mobilfunk zu übertragen, und lediglich die Darstellung für den kleinen Monitor anzupassen?

Es gibt mehrere Techniken, die das mobile Datenvolumen des Besuchers schonen, und nur die wirklich benötigte Größe einer Bilddatei zu übertragen. Alle sind mit mehr oder weniger Aufwand verbunden.

Einen neuen Ansatz wählt ImageEngine. Eine Art intelligenter Proxy für Bilder.

Beispiel

Eine Bilddatei, die im Original mit 230 kB auf dem Server liegt, wird von ImageEngine responsive gemacht, und “wiegt” mobil gerade mal noch schlanke 20 kB.

Screenshot
Typografie von Albrecht Dürer: Albertvs Dvrervs Nvrembergensis pictor hvivs aetatis celeberrimus, versus è Germanica lingua in Latinam …
Bild: Getty

Von ImageEngine gibt es eine kostenlose Version mit max. 5 GB Datenvolumen pro Monat. Die Einrichtung dauert nur Minuten. Bei Mehrbedarf wird’s allerdings richtig teuer.
Zum anderen gilt meine Zurückhaltung, was Abhängigkeit von externen Diensten angeht. Das Ausfallrisiko für die eigene Website steigt mit jedem externen Dienst, von dem man sich abhängig macht. Für ImageEngine sehe ich momentan kein Fallback.


Sitemap - Sinnvoll oder nutzlos?

Montag, 11. Januar 2016

Darstellung der Verlinkung von Seiten untereinander
Symbolische Darstellung der Verlinkung von Seiten untereinander.
Grafik: Wikipedia OgreBot CC BY-SA 3.0

Jede Website muss eine Sitemap besitzen. Bereits 1996 hat der Usability-Papst Jakob Nielsen diese Forderung aufgestellt. Folglich hatte auch meine Site eine. Damit sie auch die Strukur meiner Site wiedergab, hatte ich sie manuell erstellt — und fast nie gepflegt . (Asche auf mein Haupt!)
Ob jemals ein Besucher sie genutzt hat, bezweifle ich.

Unabhängig von dieser, eigentlich für Besucher gedachten, Sitemap, gibt es natürlich auch eine sitemap.xml für Google. Diese Sitemap wird täglich per cronjob automatisch erstellt mit dem Tool von xml-sitemaps.com und automatisch an Google übergeben.

Warum nicht die aktuelle, vollständige sitemap.xml (derzeit 848 Seiten gelistet) dazu verwenden, auch die auf der Site veröffentlichte Sitemap stets aktuell zu halten?
Gesagt — getan: Ein Script von #! code musste ich nur wenig anpassen, um eine ansehnliche HTML-Sitemap zu erzeugen. Natürlich ebenfalls per cronjob täglich aktualisiert.

Gut. Eine richtige Sitemap ist das jetzt zwar nicht. Weil sie keinerlei hierarchische Struktur widerspiegelt. Vielmehr handelt es sich einfach um eine Auflistung aller Seiten mit kurzer Inhaltsangabe (aus dem description-Tag übernommen).

Wozu das Ganze also? Auch diese “Sitemap” wird Besuchern genau so wenig helfen wie die alte. Aber mir hilft sie! Als Hilfsmittel zur Fehlersuche. Allerhand Unsauberkeiten, Dateileichen u. ä. konnte ich beim Überfliegen “meiner” Sitemap bereits erkennen und korrigieren.


Die iPhone Freisprecheinrichtung automatisch aktivieren

Montag, 14. Dezember 2015

Das iPhone hat, wie seit Urzeiten jedes Handy, eine Freisprecheinrichtung. Erreichbar (nur) während eines Gesprächs über den Button “Lautsprecher".

Screenshot
Die während eines Telefonats auf dem iPhone verfügbaren Buttons

Wenn ich also erst im Laufe eines Telefonats auf Freisprechen umschalten will, beispielsweise um etwas Nachzuschlagen, dann muss ich dazu das Smartphone vom Ohr nehmen, und den entsprechenden Button betätigen. Was mein Gesprächspartner in dem Moment sagt, geht mir dadurch verloren.

Das geht natürlich auch intelligenter. Ob das Telefon am Ohr ist, erkennt das iPhone ja bereits jetzt — falls ja, schaltet es nämlich das Display ab und spart so Energie. Die gleiche Technik könnte man natürlich auch einsetzen, um automatisch auf Freisprechen umzuschalten, wenn das Telefon vom Ohr genommen wird. Und genau das macht das iPhone sogar. Aber nur, wenn der integrierte Screen Reader VoiceOver aktiv ist.

Warum nur blinde iPhone User diesen Komfort genießen, ist Apples Geheimnis.


RWD und YouTube einbetten

Montag, 23. November 2015

YouTube Videos einbetten ist nicht schwer. YouTube selbst stellt ja den Code dafür unter “Teilen” - “Einbetten” bereit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
Das Problem dabei: Die hart codierten Abmessungen verbieten sich in einem Responsive Design (RWD). Die maximale Breite ließe sich mit CSS iframe {max-width:100%;} responsive machen. Aber die Höhe? Das für Bilder gebräuchliche height:auto; funktioniert leider nicht.

Die Lösung:

Das iframe wird in ein zusätzliches Div gepackt:

<div class="yt">
<iframe width="560″ height="315″ src="https://www.youtube.com/embed/xxx” allowfullscreen></iframe>
</div>

und ins CSS:

.yt {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
height: 0;
overflow: hidden;
}
 
.yt iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
}

Danke an A List Apart

Demo:

Nachtrag 24.11.2015

Nein, CSS-Tricks hat sicher nicht bei mir abgeschrieben. Sondern die Sache mit der proportionalen Skalierung von beliebigen Inhalten noch weiter gefasst. (Englisch)


Ältere Beiträge:

Kategorien:

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