Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Webfonts in iOS Bug

Freitag, 23. November 2012

Webfonts sind ja eine feine Sache. Endlich kann man auch auf Webseiten so richtig in Typographie schwelgen - oder was Webworker eben so für Typographie hält.
Ich habe für ein Projekt den Font "Waiting for the Sunrise" aus der Google Webfonts Kollektion gewählt. Auf iOS wird dieser Font jedoch leider - hm - merkwürdig dargestellt:

Screenshot 1
In der Normalansicht wird der Webfont "Waiting for the Sunrise" mit doppelten Konturen dargestellt.
Screenshot 2
Mit etwas Zoom wird der Font auch von iOS korrekt dargestellt, wie in allen anderen Browsern, unabhängig von einem eventuellen Zoom: Bold mit Schatten.

Ein iOS Bug? Oder ein Fehler im Font?


Hyphenation - Silbentrennung

Montag, 19. November 2012

Seit CSS 3 gibt es Hyphenation, die automatische Silbentrennung. Unterstützt wird das von Firefox seit Version 6.0, vom Safari auf OS X und iOS, und vom IE 10.

Die Syntax:
body{ -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto;}

Meines Wissens funktioniert das in allen o.a. Browsern bisher nur mit dem Vendor-Prefix.

Fließtest sieht damit auf jeden Fall besser aus, selbst wenn noch die eine oder andere "merkwürdige" Trennung passiert. Überschriften mit Silbentrennung gefallen mir jedoch gar nicht. Deshalb schließe ich automatische Silbentrennung für Überschriften aus, durch

h1, h2, h3, h4{-webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual;}

Fallweise ist damit immer noch die manuelle bedingte Trennung durch ­ möglich.


Media Queries und JavaScript

Sonntag, 11. November 2012

Media Queries und JavaScript? Was hat das miteinander zu tun?

[Wikipedia:]

Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde und das Prinzip des Medientyps in CSS2 erweitert. Anstatt starr zu definieren, welches Medium das Zielmedium ist, können mit Media Queries die Eigenschaften des aktuellen Gerätes direkt abgefragt werden.

Mit Media Queries werden CSS Stylesheets oder einzelne CSS Anweisungen gezielt je nach den im aktuellen Gerät verfügbaren Eigenschaften (z. B. Monitorgröße) vergeben. Grundvoraussetzung für Responsive Design.
Was aber, wenn abhängig vom Client nicht nur CSS-Eigenschaften vergeben, sondern z. B. JavaScript ausgeführt werden soll?
Hier hilft ein Trick:
Mittels getComputedStyle und getPropertyValue können einzelne Style Deklarationen abgefragt werden.
Nehmen wir an, per Media Queries wurde ein CSS Stylesheet aufgerufen mit folgender Deklaration:

body {max-width:320px;}

Dann lässt sich die Eigenschaft max-width des body-Elements mit folgendem JavaScript auslesen und abhängig davon JavaScript Code ausführen:

<script type="text/javascript">
var mod = window.getComputedStyle(document.body).getPropertyValue('max-width');
if (mod == '320px') {
… auszuführender JavaScript Code
}
</script>

Hinweis: Der Internet Explorer versteht diese Syntax (ebenso wie Media Queries) erst ab Version 9.


Hokusai Audio Editor - jetzt auch mit VoiceOver bedienbar

Samstag, 10. November 2012

Manchmal sind es nur Kleinigkeiten, die eine App für blinde und sehbehinderte iPhone-/iPad-User unbedienbar machen. Bei Hokusai, einem Audio Editor für iOS, mit vielen Möglichkeiten zur Audiobearbeitung, war es der Start-/Stop-Button, der von VoiceOver nicht erkannt wurde. Für einen Audio Editor ein nicht unwesentliches Bedienelement.
Heute wurde Version 1.0.12 bereit gestellt, und dieses Problem behoben.
Audiophile, ob sehbehindert oder nicht, könnten sich die kostenlose App mal anschauen.

Auszug aus der Entwickler Website [englisch]:

With Hokusai it's easy to record or import a track, and make it sound awesome: not just trimming the ends, but full cut, copy, paste and delete, and a suite of filters and special effects.

Edit many tracks side-by-side, mix them together, and export to wave or MPEG 4 (AAC) format — then transfer them to your computer via USB or Dropbox, or send them to another app on your device.


Quelltext von Webseiten auf dem iPhone / iPad lesen

Freitag, 9. November 2012

Heute musste ich zum Debuggen eines mobilen Layouts einen Seitenquelltext auf dem iPhone anschauen. Ja, das geht tatsächlich. Hier der Beleg:

Screenshot
Der Quelltext einer Webseite, angezeigt auf dem iPhone

Wie das geht? Mit einem Javascript Bookmarklet. Hier die genaue Anleitung.
VoiceOver kann den Quelltext leider nicht lesen. Schade.


Styleswitcher

Mittwoch, 7. November 2012

Styleswitcher, die Möglichkeit, alternative Seitenstile auf einer Website zu wählen, sind etwas aus der Mode gekommen.
Zu Recht?
Eva Papst setzt auf Ihrer Website aus-meiner-feder.at seit vielen Jahren auf helle Schrift und dunklen Seitenhintergrund - "ein Zugeständnis an blendempfindliche Leser".
In einem ausführlichen Gedankenaustausch anlässlich des A-TAG 2012 haben wir die Grundzüge eines zweiten, hellen Seitenstils für Evas Site festgelegt:

  • Wiedererkennbarkeit: Der Stammgast muss sofort erkennen, dass er sich nach wie vor auf Evas Site befindet.
  • Lesbarkeit hat oberste Priorität. WCAG 2 - Wahrnehmbarkeit
  • Der zusätzliche Stil soll nicht nur einfach die Farben des bisherigen Stils invertieren, sondern insgesamt freundlich und einladend wirken, zum Verbleiben auf der Site animieren. Dabei darf er ruhig auch etwas moderner daherkommen.

Ich glaube, dass ich diese Prinzipien gut umgesetzt habe.

Screenshot
Der zusätzliche, helle Seitenstil auf aus-meiner-feder.at. Unterhalb der Navigation der Styleswitcher, überschrieben mit "Seitenstil"

Archiv:

Kategorien:

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