Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Google Suche entrümpeln - mobil

Donnerstag, 28. Juli 2016

Über die total vermüllte Google Suche, und was man dagegen tun kann, habe ich erst kürzlich geschrieben: Google entrümpeln. Schön und gut — auf dem Desktop. Aber was unterwegs, auf dem Smartphone. Dort empfinde ich den Müll als noch hinderlicher. Und leider kenne ich keine Möglichkeit, mittels eines User-Stylesheets o.ä. die unerwünschten Inhalte auszublenden. Zumindest nicht auf dem iPhone.

Doch auch für diesen Fall gibt es eine Lösung:
Startpage von Ixquick ist eine Suchmaschine, die anonym auf Google zugreift, und, erfreulicher Nebeneffekt, den von Google ausgelieferten Müll nicht anzeigt.

Screenshot
Die Startseite von classic.startpage.com auf dem iPhone
Screenshot
Eine Suche nach dem Suchbegriff “webdesign” zeigt auf classic.startpage.com ausschließlich organische Treffer.

Startpage als Standardsuchmaschine in iOS einzustellen, geht leider nicht. Die dort möglichen Alternativen Bing, Yahoo und DuckDuckGo sind meines Erachtens von der Qualität der Suchergebnisse nicht mit Google vergleichbar.
Also entweder

  • Im Browser vor der eigentlichen Suche classic.startpage.com aufrufen, oder, besser
  • classic.startpage.com als Icon auf den Homebildschirm legen ("zu Homebildschirm hinzufügen"). Diese Variante hat den Vorteil, dass man Startpage nach den eigenen Wünschen (Sprache usw.) konfigurieren kann, bevor man das Icon speichert.

Komfort für Tastaturnutzer

Sonntag, 24. Juli 2016

Blinde Menschen, die mit einem Screen Reader surfen, haben gegenüber sehenden Tastaturnutzern — also Surfern, die aus welchem Grund auch immer keine Maus benutzen können — seit jeher einen Vorteil: Sie können mit Hilfe ihres Screen Readers verschiedene Elemente auf der Seite direkt anspringen. Z. B. alle Überschriften auf der Seite.
Tastaturnutzern ist dieser Komfort verwehrt. Navigieren mit der Tastatur bedeutet: mit der Tabulator-Taste mühsam von Link zu Link springen. Mit viel Glück besitzt eine Website wenigstens einen oder mehrere Skiplinks, um mit der Tastatur direkt zu wichtigen Inhalten zu navigieren.

Aber Besserung ist in Reichweite. Das PayPal Accessibility Team und die University of Illinois stellen ein geniales Script zur Verfügung, das den einfachen Skiplink zu einer komfortablen Navigationshilfe erweitert: SkipTo.js

Das Script erzeugt eine anklickbare Liste aller Überschriften auf der jeweiligen Seite

Das Skript kann praktisch ohne Konfiguration “out of the box” benutzt werden. Wobei “out of the box” heißt: Einbinden der externen JavaScript-Datei ins HTML, also eine Zeile HTML:
<script type="text/javascript" src="https://paypal.github.io/skipto/downloads/js/SkipTo.min.js"></script>

Das Skript ist hier auf meiner Site in Aktion.
Der Aufruf erfolgt entweder unmittelbar nach dem Laden der Seite mit der Tab-Taste und Enter, oder, von überall auf der Seite, mit einem Tastaturkürzel:

  • Microsoft Internet Explorer – ALT+0(Null).
  • Mozilla Firefox – ALT+SHIFT+0 (Windows) oder CONTROL+ALT+0 (Mac OS).
  • Google Chrome – CONTROL+ALT+0 (Windows) oder CONTROL+OPTION+0 (Mac OS).
  • Safari – CONTROL+0 (Windows) oder CONTROL+OPTION+0 (Mac OS).

Nachtrag 25.07.2016

Für Smartphones habe ich SkipTo deaktiviert. Da auf diesen Geräten typischerweise keine Tastatur zur Navigation genutzt wird.

Nachtrag 28.07.2016

SkipTo ist jetzt auch vor Screen Reader Nutzern versteckt. Weil das Script in Verbindung mit einem aktiven Screen Reader zu unvorhersehbarem Verhalten bis zum Absturz des Browsers führt. (Das ist übrigens keine Diskriminierung von blinden Seitenbesuchern; Screen Reader Nutzern stehen ohnehin weit umfangreichere Navigationshilfen zur Verfügung.)


Mit CSS ein Symbol (Wasserzeichen) über ein Bild legen

Donnerstag, 21. Juli 2016

Dass Bilder auf Webseiten per Mausklick vergrößert werden können, zeige ich mit einem Lupensymbol in der rechten unteren Ecke des Vorschaubildes an. (Die Technik zur Vergrößerung ist nicht Themas dieses Beitrags. Ich mache das mit Fancybox oder Photoswipe).


Demobild

Hinweis: Dieses Demobild wird bei Mausklick nicht vergrößert. Es soll lediglich das eingeblendete Lupensymbol gezeigt werden.

Diese Lupensymbol könnte man natürlich mit einem Bildbearbeitungsprogramm einfügen.
Eleganter geht es aber mit HTML, und einigen Zeilen CSS.

Das Lupensymbol wird dazu im HTML als img mit der Klasse “after” eingesetzt, und beide (Vorschaubild und Lupensymbol) in ein Element (z. B. span) mit der Klasse “over” eingeschlossen. Der HTML Code sieht dann — vereinfacht, ohne den Code zur Anzeige des vergrößerten Bildes — so aus:

<span class="over">
<img src="pfad_zum_Vorschaubild.jpg" alt="Demobild">
<img span class="after" src="pfad_zum_Lupensymbol.png" alt="" />
</span>

Und das CSS dazu:

.over {
position: relative;
display:inline-block;
}
.over .after {
position: absolute;
bottom: 5px;
right: 5px;
}

Eventuell möchte man das Lupensymbol auch noch per CSS stylen:

img.after {width:20px height:auto;opacity:.8; …}


Lightbox Alternativen angetestet

Donnerstag, 7. Juli 2016

Menschen in einer Bildergalerie
Foto: deviantart.com Lizenz: CC Attribution-Share Alike 3.0.

Eine Bildergalerie braucht man immer wieder. Seit jeher benutze ich Fancybox als Galerie-Script, als Lightbox-Alternative.
Weil es:

  • valides HTML erzeugt,
  • relativ schlank und
  • einigermaßen barrierefrei ist.

Im Laufe der Jahre sind aber doch immer mehr Schwächen aufgetaucht:

  • Fancybox 1 (letzte Version 1.3.4) wird seit 2011 nicht mehr weiter entwickelt. Vermutlich (und verständlich), weil der Entwickler wohl die (kostenpflichtige) Version 2 bevorzugt behandelt.
  • Fancybox 1.3.4 arbeitet mit aktuellen Versionen von jQuery nur noch, wenn zusätzlich das Migrationstool jquery-migrate.js geladen wird.
  • Barrierefreiheit: Der (unvermeidbare, aber für blinde Menschen nutzlose) Link zum Vergrößern der Bilder irritiert Screen Reader Nutzer.

Ich habe mich daher nach Alternativen umgeschaut. Klar, Lightbox-Alternativen gibt es wie Sand am Meer. Ich bin einfach mal einer Empfehlung von Matthias Mees gefolgt:

  1. Magnific Popup von Dmitry Semenov, und
  2. PhotoSwipe vom gleichen Entwickler

Für die beiden Scripte, sowie für Fancybox habe ich jeweils eine Demo-Seite erstellt. Ich habe die Einstellungen jeweils so gewählt, dass der optische Eindruck in allen drei Demos möglichst identisch ist. Vor allem habe ich die Scripte in mein übliches Layout eingebaut, um eventuelle Unverträglichkeiten mit anderen Scripten zu testen.

Die Demos:

Fazit

PhotoSwipe hat das Zeug zum “Testsieger”. Unabhängig von jQuery, perfektes Look & Feel auf Touchscreens und kleinen Smartphone-Monitoren. Zudem: Bildunterschriften / Bildbeschreibungen perfekt umsetzbar. Sowohl für sehende, als auch blinde Nutzer.

PS: Es gibt natürlich auch “handgemachte” Lösungen, die wirklich alle Wünsche bezüglich Barrierefreiheit erfüllen. Die blinde Bloggerin Eva Papst präsentiert auf Ihrer Website Bilder mit Bildbeschreibungen.


Countdown zum Reload

Freitag, 24. Juni 2016

Die Seite sms2web.php mit dem Ticker wird in regelmäßigen Intervallen neu geladen, um die Anzeige des Tickers zu aktualisieren.
Die bis zum Reload verbleibende Zeit wird angezeigt.

tl;dr Weil ich danach gefragt wurde, hier eine Gebrauchsanweisung für Interessierte: weiterlesen…


Und jetzt das Zwangs-EU-Cookie

Sonntag, 19. Juni 2016

Screenshot
Ein - scheinbar - ganz üblicher Cookie Hinweis
"Dieser Blog benutzt Cookies. Wenn Sie die Website weiter nutzen, stimmen Sie der Verwendung von Cookies zu."

tl;dr Wer vom Thema EU-Cookie-Hinweis ausreichend genervt ist, braucht ab hier nicht mehr weiter zu lesen. weiterlesen…


Der Cookie Warnung Irrsinn - die Vierte

Dienstag, 14. Juni 2016

Man hört nicht mehr viel über den EU-Cookie-Hinweis. Die Gemüter haben sich anscheinend beruhigt. Wer dieses geniale Browser-Addon noch nicht einsetzt, hat sich entweder an die diversen Hinweise gewöhnt, oder er klickt resigniert auf “Zustimmen".

Screenshot
Ein typischer Hinweis, wie er auf vielen Websites zu finden ist.
Wenn Sie Cookies akzeptieren, können wir Ihnen die bestmögliche Erfahrung auf dieser Website bieten. Akzeptieren - Mehr Informationen”

Was sagt mir dieser Hinweis jetzt?
Was ist die “bestmögliche Erfahrung", und was wäre wohl eine “weniger gute Erfahrung"?
Was genau passiert, wenn ich auf “Akzeptieren” klicke? Und was, wenn ich nicht klicke? Ich befürchte, der einzige Unterschied besteht darin, dass nach einem Klick der nervende Hinweis verschwindet, mein Besuch auf der Site aber so oder so von Google & Co. getrackt wird.
Eine Möglichkeit, dies zu verhindern, einen Button “Ablehnen” sehe ich nicht.
weiterlesen…


IndieWeb - die Zweite (und Letzte?)

Sonntag, 29. Mai 2016

IndieWeb — im ersten Moment klang das so, als ob es etwas für mich wäre.

Logo Indie Web Camp

Bild: Indie Web Camp

Die Prinzipien des IndieWeb:

Your content is yours
When you post something on the web, it should belong to you, not a corporation. Too many companies have gone out of business and lost all of their users’ data. By joining the IndieWeb, your content stays yours and in your control.

You are better connected
Your articles and status messages can go to all services, not just one, allowing you to engage with everyone. Even replies and likes on other services can come back to your site so they’re all in one place.

You are in control
You can post anything you want, in any format you want, with no one monitoring you. In addition, you share simple readable links such as example.com/ideas. These links are permanent and will always work.

Quelle: https://indiewebcamp.com/

Bei genauerer Betrachtung der Werkzeuge und Schritte, die zur Umsetzung dieser Prinzipien erforderlich sind, bleibt jedoch nur Ernüchterung. Hinter großen Worten stecken überwiegend nur Selbstverständlichkeiten:

(Quelle: https://indiewebcamp.com/Getting_Started)

  • Get a personal domain — Hab’ ich: webdesign.weisshart.de ✔︎
  • Get a place for your content — Hab’ ich ✔︎
  • Set up your home page and web sign-in — Erledigt ✔︎
  • Set up your authorship information — Na ja, wer lesen kann, findet auch das auf meinen Seiten. ✔︎
  • Publish content on your domain — Erledigt ✔︎
  • Add microformats to your content — Wozu?
  • Publish (on your) Own Site, Syndicate Elsewhere — Mach’ ich. Mit einer Besonderheit: Ich entscheide von Fall zu Fall, was ich “elsewhere” veröffentlichen will, und wo. Und dabei wird es auch bleiben.✔︎
  • Port old silo content to your site — Das musste ich einmal machen. Als Posterous schloss. Und einmal ist genug. Deshalb beherzige ich seitdem das erste Prinzip des IndieWeb: “Your content is yours”
  • Set up a personal URL shortener — Hab’ ich auch: w7t.de ✔︎

Fazit:

Entweder ich bin bereits Indie, oder ich hab’ da etwas nicht verstanden?


Das Vertical Video Syndrom - und das Rezept dagegen

Mittwoch, 25. Mai 2016

Schnell mal ein Video mit dem Smartphone gedreht. Und weil man Smartphones für gewöhnlich hochkant hält, wird das Video eben auch Hochformat. So lange man das Filmchen nur auf dem Smartphone schaut, ist alles in Ordnung.

Ein typisches Smartphone-Video — hochkant gefilmt.

Was aber, wenn der Film zuhause auf dem Computer, oder gar auf dem Fernseher / Beamer gezeigt werden soll?
weiterlesen…


DNT - Do Not Track

Mittwoch, 18. Mai 2016

Do Not Track (DNT; engl. für „nicht verfolgen“) ist ein HTTP-Header-Feld und signalisiert einer Website oder Webanwendung den Wunsch, dass diese über die Aktivitäten des Besuchers kein Nutzungsprofil erstellt.

Quelle: Wikipedia

Bild: Hugh D’Andrade

Hm? Das wäre doch die saubere Lösung für das Problem, über das ich unter der Überschrift “Cookie Warnung Irrsinn” mehrmals geschrieben habe. Wenn, ja wenn Webseitenbetreiber den gesetzten DNT entsprechend respektieren würden. (Noch einfacher und sauberer wäre es, wenn Google Analytics & Co es täten.)

Nichts jedoch hindert mich, es auf meiner Site zu tun. Gesagt - getan. Wer im Browser DNT aktiviert hat, wird von Google Analytics nicht getrackt, und bleibt auch vom Cookie Hinweis verschont.


Archiv:

Kategorien:

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