Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Ich will meine Scrollbar sehen

Mittwoch, 24. August 2016

Das Problem:

Fast alle aktuellen Browser verbergen Scrollbars nach kurzer Zeit, wenn nicht gescrollt wird. Für Ästheten eine feine Sache. Und auch kein Problem, wenn es um die Scrollbars für den Viewport, also für die ganze Seite geht. Der User weiß aus Erfahrung, dass er scrollen kann und muss, um Inhalte "below the fold" zu sehen.
Wenn aber einzelne Seitenelemente (z. B. divs) übergroße Inhalte besitzen, die nur durch Scrollen in Gänze sichtbar werden (CSS: overflow:auto/scroll), dann kann das ein entscheidendes Usability Problem darstellen; Weil der User nicht ohne weiteres erwartet, dass er diesen Bereich scrollen kann / muss.
IE / Edge machen, wie so oft, eine Ausnahme. Diesmal zum Besseren. Sie blenden per default die Scrollbars nicht aus.

Die Lösung:

weiterlesen…


Stockfotos Creative Commons Zero

Freitag, 5. August 2016

Stockfotos kann man als Webworker nie genug haben.
Schön, wenn die Fotos unter CC0 1.0 (Creative Commons Zero) angeboten werden. Unsplash.com bietet so etwas.

Als nette Zugabe: Die Suchfunktion.


Nur ein Test

Sonntag, 31. Juli 2016

So, ich hab' jetzt auch mein Blog für die Nutzung von PhotoSwipe eingerichtet.

… und irgendwann werde ich dann Fancybox "entsorgen".

Nachtrag 02.08.2016:

Ja ist denn heute schon "Irgendwann"? 😀 Fancybox ist hier im Blog durch Photoswipe ersetzt. ✔︎


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 1
Die Startseite von classic.startpage.com auf dem iPhone
Screenshot 2
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 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 kann nach einer konfigurierbaren Mindestzeit neu geladen werden, um die Anzeige des Tickers zu aktualisieren.
Die bis zum möglichen 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…


Archiv:

Kategorien:

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