Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Browser werden immer besser

Mittwoch, 28. September 2016

Moderne Browser - in Verbindung mit CSS3 - ersparen dem Webworker immer mehr Arbeit.

Aktuelles Beispiel:
position:sticky

Die Aufgabenstellung:

Ein bestimmtes Element einer Webseite - typischerweise eine Navigation - soll immer sichtbar, und damit nutzbar - sein. Bisher erforderte diese Aufgabenstellung den Einsatz von JavaScript plus CSS. Und beides musste sehr genau aufeinander abgestimmt werden. Probleme mit unterschiedlichen Monitorgrößen (Stichwort RWD) waren vorprogrammiert.
Ein Beispiel mit der bisher nötigen Technik zeigt diese Demo

"position:sticky" erledigt nun diese Aufgabe mit einer einzigen CSS Anweisung. Auf intelligente Weise.

Browser Unterstützung:

  • Unterstützt wird "position:sticky" von allen modernen Browsern.
  • Wie nicht anders zu erwarten: Microsoft-Produkte kennen das Feature nicht.
  • Im Chrome-Browser muss dazu unter chrome://flags "experimental Web Platform features" enabled werden.
  • Schön, dass iOS das Feature unterstützt. Gerade auf iPads kann das sehr hilfreich sein.

Eine Anmerkung: Einen ähnlichen Effekt kann man natürlich auch mit position:fixed erreichen. Allerdings ist position:fixed bei weitem nicht so flexibel. Es fixiert einen Bereich immer in Relation zum Viewport, also zum Browserfenster. Im schlimmsten Fall kann position fixed dazu führen, dass Elemente nicht mehr sichtbar/nutzbar sind. Nämlich dann, wenn der fixierte Bereich größer ist als das Browserfenster. Wenn es sich um eine Navigation handelt, dann wäre das der GAU!
position:sticky fixiert in Relation zum übergeordneten Container, und greift nur, wenn es benötigt wird. Die Fixierung wird bei Bedarf durch Scrollen aufgehoben. Das Risiko einer nicht nutzbaren Navigation wird dadurch zuverlässig vermieden.

Wenn dein Browser das Feature unterstützt (und das Browserfenster klein genug gezogen wird), dann kannst du die Funktion hier auf der Seite in Aktion sehen. Und wenn nicht: dann ist die Navigation natürlich dennoch nutzbar.


Noch mehr Komfort beim Copy & Paste

Samstag, 3. September 2016

Eine weitere Komfortsteigerung nach dem 1-Klick-Markieren hat Opera im Köcher (derzeit nur in der Developer Branch V. 41 zu bewundern Version 40+):

Screencast: Opera zeigt sofort nach dem Markieren einen Button zum Kopieren (und Suchen).

Sehr pfiffig!

(PS: Der Suchen-Button öffnet übrigens eine Suche nach dem markierten Text mit der Standardsuchmaschine.)


Code automatisch markieren zum copy & paste

Donnerstag, 1. September 2016

Die Darstellung von Codeschnipseln auf meiner Site habe ich in letzter Zeit ja in mehreren Schritten optimiert. (Hoffentlich verbessert, und nicht verschlimmbessert.)

  1. Den Container mit dem Codeschnipsel scrollbar machen
  2. Die Scrollbar permanent sichtbar machen
  3. Zeilen abwechselnd einfärben

Jetzt ein weiterer Schritt zu Verbesserung der Usability:

Den ganzen Codeschnipsel mit einem Klick markieren zum copy & paste

Folgende Anweisung im CSS bewirkt das (im Beispiel für das <code> Element:
code {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}

Das funktioniert in fast allen modernen Browsern. (Crome 53+, Firefox 43+, Safari 9+, Opera)
Ältere Browser, die das Feature nicht unterstützen, ignorieren die CSS Angabe einfach.


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.


Archiv:

Kategorien:

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