News mit tag »Design«

12 Nov 2009

Expertenkonferenz in der Tradition des Bauhauses

An der Bauhaus-Universität Weimar beginnen heute Beratungen einer nationalen Expertenkonferenz über die Entwicklung von einfachen, verständlichen und international wettbewerbsfähigen Produkten. Es geht um das Design der Zukunft.

Industrieunternehmen, Dienstleister, Designer und Politiker haben das Problem erkannt und fordern ein Design für alle, ein ›universal design‹. Dabei ist es nicht so, dass auf diesem Feld bisher überhaupt nichts geschehen würde: Türen, die sich wie von Geisterhand öffnen, Busse, die sich dem einsteigenden Fahrgast entgegen neigen – praktisch für jedermann, für den Bücher beladenen Studenten ebenso wie für die 70-jährige Rentnerin, die junge Mutter mit Kinderwagen oder den Rollstuhlfahrer.

Eine stark alternde Gesellschaft braucht leicht bedienbare und verständliche Produkte und Dienstleistungen. An den beiden Konferenztagen kommen Vertreter des universal design zusammen, um Strategien zu finden, wie Politik und Öffentlichkeit für das Thema sensibilisiert werden können.

»Deutschland hat eine lange Tradition in der Entwicklung demographiefester Produkte, Architekturen und Dienstleistungen«, unterstreicht Wolfgang Sattler, Professor für Produkt-Design an der Bauhaus-Universität Weimar. Dabei bezieht er sich unter anderem auf die Bauhaus-Bewegung, die bereits vor 90 Jahren Universalität von Architektur und Design forderte. »Diese Potentiale in wirtschaftlich sinnvolle und ergebnisorientierte Strategien umzusetzen, ist uns aber bisher noch nicht ausreichend gelungen«, so Sattler.

Am Samstag öffnet sich die Konferenz mit einer Veranstaltung für das Publikum. In Gesprächsrunden kann sich dann jeder in das Thema einbringen, der das möchte. Wer mehr darüber erfahren möchte, findet das Programm dieses Tages auf der Internetseite der Bauhaus-Universität.
(bei kobinet abgeschrieben)

24 Jul 2009

Wochenendbeilage:
Neues vom W3C und was mit CSS 3

Die CSS-Arbeitsgruppe des W3C hat eine ganze Reihe neuer Entwürfe für Module der kommenden CSS 3-Spezifikation vorgestellt. Ganz frisch am Start sind Flexible Box Layout Module und CSS Image Values Module, beide vom 23. Juli und beide erscheinen uns beim ersten Drüberlesen sehr sinnvoll zu sein. Besonders flexbox hat es uns angetan, weil es mit sehr einfachen Regeln ermöglicht, eine Menge HTML- und CSS-Hacks zu ersparen:

»In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ›flex‹ to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.«

Bereits beim Status eines Last Call angelangt ist Ende letzten Monats der Entwurf des CSS 3-Moduls Multi-column layout, das, wie der Name schon sagt, wirklich echte mehrspaltige Layouts ermöglicht. Hier bittet die Arbeitsgruppe um Kommentare bis zum 01. Oktober diesen Jahres.

Wir hatten neulich schon mal etwas mit Multi-column layout herumgespielt und siehe da: es funktioniert sogar in modernen Browsern wie Safari 4, Google Chrome 2 oder Firefox 3.5 3.0. Zum selber ausprobieren: die Liste im Kasten »mehr zum wettbewerb:« ganz unten auf einfach-fuer-alle.de/biene-2009 basiert auf einer simplen Mehrspalten-Anordnung mit reinem CSS ohne jegliche Eingriffe ins HTML.

Weiterlesen …

Einige weitere Entwürfe aus der letzten Zeit:

• CSS Fonts Module, W3C Working Draft vom 18. Juni 2009;
• CSS 3D Transforms Module, W3C Working Draft vom 20. März 2009;
• CSS 2D Transforms Module, W3C Working Draft vom 20. März 2009;
• CSS Transitions Module, W3C Working Draft vom 20. März 2009;
• CSS Animations Module, W3C Working Draft vom 20. März 2009.

Die letzten vier basieren allesamt auf Vorschlägen von Apple und funktionieren teilweise schon in aktuellen Versionen der Webkit-Engine, sind aber sicher noch nicht für den Produktiveinsatz geeignet. Und sie sind auch nicht ganz unumstritten: OK, dass von Flash-Hersteller Adobe Einwände gegen zu viel Animationen in CSS kommen mussten war vorhersehbar, aber die Frage bleibt doch, wo die Präsentations-Ebene aufhört und wo die Ebene des Verhaltens von Elementen anfängt und ob man da nicht etwas vermischt, was besser getrennt bleiben sollte.

Andererseits gibt es neben fundamentalen Fehlern noch eine Menge Löcher in den CSS-Spezifikationen aller Versionsnummern, die es zu stopfen gilt. Eine ganze Reihe von Wünschen aus der Community hatten sich schon im vergangenen Jahr aus dem WaSP Community CSS3 Feedback 2008 ergeben, wie zum Beispiel die Möglichkeit, Selektoren zu gruppieren (hier die Erklärung bei Eric Meyer) oder ein wirkliches Layout-System, dass diesen Namen auch verdient.

Und das eigentliche Problem – dass sich die CSS-Arbeitsgruppe mit geradezu Gletscher-artiger Geschwindigkeit zu bewegen scheint – ist damit auch noch nicht behoben. Zum Vergleich hier eine Liste der aktuellen CSS 3-Module mit ihrem letzten Aktualisierungs-Datum: CSS3 Module Status bei CSS3.Info – da sind schon ein paar Dinge drin, die Web-Entwickler dringend bräuchten, die aber teilweise seit 2002 (!) niemand mehr angefasst hat.

Was geht?

Gut dass zumindest ein Teil der Browser-Hersteller da etwas schneller ist und Teile der Spezifikation schon fleißig implementiert. Wenn man sich von dem Mantra verabschiedet, dass Webseiten in allen Browsern 100%ig gleich aussehen müssen (müssen sie das?), dann kann man schon vieles davon verwenden, wie die folgenden Tutorials zeigen (teilweise schon was älter, aber immer noch gut):

• »Vier CSS3-Tricks für sauberes HTML« von den Webkrauts
• »RGBa Browser Support« bei CSS-Tricks.com
• »ZURB – Super Awesome Buttons with CSS3 and RGBA« von Mark Otto
• »Schönes neues CSS: box-shadow« bei Peter Kröner
• »Fun with WebKit css gradients« im Martini Lab Blog (ein passendes Tool zum Erstellen von Linear Gradients gibt es von John Allsopp)
• »The Power of HTML 5 and CSS 3« bei Perishable Press

Wenn das noch nicht reicht: hier ist eine der zurzeit ach so beliebten Top-irgendwas-Listen: »CSS3 Exciting Functions and Features: 30+ Useful Tutorials«

23 Mär 2009

beta.w3.org

Das World Wide Web Consortium (W3C) bittet um Meinungen zur neuen Website, die Ende letzter Woche als Beta-Version online gegangen ist. Das neue Site-Design ist nun weitestgehend harmonisiert, die Informationsarchitektur wurde vereinfacht, die sog. ›Technical Reports‹ (vulgo: Web-Standards) haben ein neues Aussehen; dazu gibt es neue Inhalte wie einen Kalender und aggregierte Blogs der W3C-Mitarbeiter.

Weitere Informationen zum Redesign sieht und hört man in einem 10-minütigen Screencast sowie als ausführlichen Text auf der Seite About the W3C Site Redesign, wo die Ziele, Features, Einschränkungen und die zukünftige Weiterentwicklung beschrieben werden. Falls jemand Vorschläge zur Verbesserung hat oder Fehler findet kann man diese an site-comments@w3.org schicken.

Noch'n Relaunch

Die Mozilla Foundation sitzt ebenfalls an einem öffentlichen Relaunch der Seiten für ihre Open-Source-Anwendungen unter www.mozilla.org. Strategische Überlegungen dazu findet man im MozillaWiki unter »Mozilla.org: Big Picture«, ebenso das Design-Briefing: »Mozilla.org/Redesign/Communication Brief« und Infos zu den verschiedenen Designs bei der beauftragten Agentur: »The Mozilla.org Redesign: Round 1«.

Hier drei Entwürfe zur Auswahl:

• Mozilla Design Presentation: Concept 1: Home Page
• Mozilla Design Presentation: Concept 2: Home Page
• Mozilla Design Presentation: Concept 3: Home Page

19 Dez 2008

EfA-Laborbericht № 8

Wie bei den vorangegangenen Überarbeitungen dieser Seiten in den Jahren 2001, 2003, 2004 und 2006 gab es auch diesmal wieder heftige Kritik aus vielen Richtungen. Sofern diese Kritik sachlich bleibt, stellen wir uns ihr gerne – sehr gerne sogar. Auch wir lernen täglich dazu, sonst sähen diese Seiten immer noch so aus wie früher.

Ein Teil der Kritik bezog sich auf die (vermeintliche) Nicht-Validität dieser Seiten – hierzu gab es bereits eine Folge unseres Laborberichts und wir hoffen, dass damit alle Missverständnisse ausgeräumt sind. Ein anderer Aspekt, an dem sich viele Kommentare hier und in anderen Blogs gerieben haben, sind die vermeintlich zu schwachen Kontraste in der Gestaltung dieser Seiten, und um die dreht es sich in der heutigen Folge.

Weiterlesen …

Ein Plädoyer: Kontraste mit Köpfchen

Die am 11. Dezember 2008 veröffentlichten Web Content Accessibility Guidelines (WCAG 2.0, wir berichteten) setzen Mindest-Kontraste für unterschiedliche Arten von Inhalten (Text, Text in Bildern etc.) fest. Diese sind je nach WCAG-Level unterschiedlich strikt: für Level AA braucht man einen Kontrast zwischen Vorder- und Hintergrundfarbe von 4,5 zu 1; für Level AAA schon 7 zu 1. Dabei gibt es allerdings noch Abstufungen – so reicht für Level AA bei großem und / oder fettem Text auch 3 zu 1, für Level AAA auch 4,5 zu 1 (dass es keine Obergrenze für Kontraste gibt, hatten wir bereits an anderer Stelle bemängelt, dies hat aber nichts mit dem heutigen Thema zu tun).

Allerdings sind dies nicht die einzigen Ausnahmen, sondern es werden noch weitere Beispiele genannt, bei denen diese Anforderungen nicht anwendbar sind:

• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Der zweite Punkt ist eindeutig: für Text, der Teil eines Logos oder Markennamen ist, gibt es keine Minimal-Anforderungen für Kontraste. Dies trifft auf den gesamten Kopfbereich dieser Seiten zu, in dem der Name, der Claim und das Logo der Initiative ›Einfach für Alle‹ zu finden ist.

Der erste Punkt hingegen lässt, oberflächlich betrachtet, einigen Spielraum für Interpretationen zu: Was ist »pure decoration«? Nehmen wir als Beispiel unsere Seite mit der Inhaltsübersicht: in dieser findet sich eine Überschrift »Artikel« in weiss auf hellblauem Hintergrund. Wenn man nun ein Prüfwerkzeug stur nach Schema F anwendet, erhält man einen Fehlerbericht, in dem dies bemängelt wird. Nur – ist dies wirklich ein Fehler? Ist dies wirklich eine unüberwindbare Barriere?

Der Nutzer erreicht diese Seite ausschließlich über Links, die eindeutig das Wort »Artikel« oder »Inhaltsverzeichnis« enthalten. Diese Links sind bei Maus- und Tastaturbedienung schwarz oder dunkeldunkelgrau auf weiss, haben aber bereits in ihrem Urzustand ohne Interaktion ausreichende Kontraste. Auf der Seite selbst findet sich dann (den Browser-Chrome mitgerechnet) sechsmal das Wort »Artikel« in ausreichenden Kontrasten (im verlinkten Screenshot mit einer durchgehenden grünen Linie gekennzeichnet) und genau einmal mit nicht ausreichenden Kontrasten (im Screenshot mit einer gestrichelten roten Linie gekennzeichnet).

Ein grundsätzliches Problem bei der Forderung nach maximalen Kontrasten für Alles und Jedes: Wenn alles hervorgehoben ist, dann ist nichts hervorgehoben und man kann es auch gleich sein lassen und unformatierte Seiten ins Netz stellen. Abstufungen im Kontrast sind also bewusste Design-Entscheidungen, um den Fokus auf Elemente zu lenken oder fernzuhalten und genau dafür setzen wir diese Abstufungen ein.

Ja, aber …

Diese ›Ausrede‹ zieht natürlich nur, wenn die wesentlichen und relevanten Inhalte der Seite über ausreichende Kontraste verfügen, und genau darauf haben wir beim letzten Relaunch geachtet. Die WCAG 2.0 begründet den für Level AA geforderten Wert von 4,5:1 mit der wissenschaftlich nachgewiesenen Fähigkeit von ca. 80-jährigen Nutzern, bestimmte Kontraste noch zu differenzieren. Der Text, den Sie gerade lesen (der wesentliche Bestandteil dieser Seite), verfügt über einen Kontrast zwischen Vorder- und Hintergrundfarbe von 14,0:1 (#222 auf #f3f1e1) – damit sollten wir wohl auf der sicheren Seite sein.

Aber das schützt nicht vor weiteren Tests: So wie Toningenieure beim Abmischen einer Symphonie Autoradios berücksichtigen, so sollte man ein Design nicht nur auf nagelneuen LED-Monitoren bewerten, sondern zusätzlich noch auf einer 10 Jahre alten 17"-Röhre. Einen gewissen Einfluss auf die wahrgenommenen Kontraste hat auch die Frage, ob der Nutzer mit oder ohne Schriftglättung unterwegs ist, daher gehört das Abschalten derselben zu einem vollständigen Test.

Mehr zum Thema:

• WCAG 2.0: »Understanding Success Criterion 1.4.3 – Contrast (Minimum)«
• WCAG 2.0: »Understanding Success Criterion 1.4.6 – Contrast (Enhanced)«
• Techniques for WCAG 2.0: »G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text«
• Web Accessibility Tools Consortium: »Contrast Analyser, Version 2.2«
• Joe Dolson: »Minimum Color Contrast Ratio Changed in WCAG 2«
• Kevin Hale: »Calculating Color Contrast for Legible Text«
• Jonathan Christopher: »Respecting Color Contrast in Web Design«
• Dmitry Fadeyev: »Manage Focus Effectively Using Contrast«

03 Dez 2008

EfA-Laborbericht № 6

Widgets ade

Fast täglich erreichen uns in der EfA-Redaktion Mails mit der Frage nach dem Verbleib des EfA-Fontsize-Skriptes, das den letzten Relaunch nicht überlebt hat. Die kurze Antwort: es war weg, ist weg und wird auch weg bleiben. Die lange Version der Antwort wollen wir unseren Lesern aber auch nicht vorenthalten:

Eine fiktive aber durchaus realistische Diskussion zwischen einem Frontend-Entwickler (im folgenden F. genannt) und einem Projektmanager (im folgenden P. genannt; eventuelle Ähnlichkeiten mit tatsächlichen Personen sind rein zufällig und unbeabsichtigt).

Projektmanager (P.): »Die Website muss ganz dringend barrierefrei sein. Deswegen brauchen wir da noch unbedingt so ein Ding, womit man die Schriftgröße ändern kann.«

Entwickler (F.): »Aber warum? Wir haben doch ganz andere Probleme mit der Website!«

P.: »Egal, wir brauchen so ein Ding, damit endlich diese Mails und Anrufe aufhören, wo sich Besucher über die Unzugänglichkeit der Website beschweren.«

F.: »Das wäre aber doch nur an den Symptomen rumgedoktert und würde nicht die Ursachen kurieren. Und ausserdem kann das doch jeder Browser…«

P.: »Aber unsere Statistiken sagen, dass immer noch 20% aller Besucher den IE6 benutzen. Und ich habe gehört dass der keine Schriften vergrößern kann.«

F.: »Kann er wohl…«

P.: »Egal, der Kunde will das so und basta…«

An dieser Stelle endet unsere Aufzeichnung des Gesprächs, weil F. mit dem Kopf auf die Tischplatte aufgeschlagen ist.

Weiterlesen …

Der Häufigkeit nach zu urteilen, mit der man diese »Widgets« zur Schriftskalierung oder Kontrastverstärkung auf Web-Seiten findet, muss es solche Gespräche in der ein oder anderen Form wohl häufig gegeben haben.

Zugegeben, wir sind daran nicht ganz unschuldig, denn viele davon basieren auf einem Skript, dass wir in den Anfangstagen von ›Einfach für Alle‹ veröffentlicht und auf diesen Seiten eingesetzt haben. Nun ist es aber weg und unsere Redaktion erreichen fast täglich Mails und Anrufe, wo denn das Skript geblieben sei. Es ist weg, und es wird auch nicht wiederkommen.

Warum war das Skript früher mal gut und jetzt auf einmal nicht mehr?

Machen wir einen kleinen Ausflug in die Zeit, in der das Skript entstanden ist. Damals, d.h. so um die Jahrtausendwende, waren Web-Standards nur eine nette Idee, die sich aber in den Browsern der vierten Generation nur von Spezialisten in mühsamer Handarbeit umsetzen liessen (und auch das nur höchst lückenhaft). Modernere Browser wie Firefox, Opera, Safari & Co. waren teils noch gar nicht auf dem Markt oder ausgesprochene Exoten; Microsoft hatte gerade die Weiterentwicklung des marktführenden IE 6 effektiv eingestellt. Ein »Page Zoom« war noch nicht erfunden, und damalige CSS-Layouts waren noch relativ instabil und gingen bei der kleinsten Änderung kaputt.

Dazu kam, dass (ausser dem IE/Mac) kein Browser in der Werkseinstellung über Knöpfe verfügte, mit denen Benutzer die Schriftgröße mit einem Klick verändern konnte. In den meisten Browsern waren die entsprechenden Optionen sehr gut vor dem Nutzer versteckt – so gut versteckt dass sich der Mythos festsetzen konnte, der IE könne keine in px bemaßten Schriften skalieren. Und damals wie heute galt, dass man es bei der Wahl der Schriftgröße nicht immer allen Recht machen kann: Für manche Nutzer ist die gewählte Schrift zu klein, für manche zu groß. Wie Sie sehen hatte das Skript also zur damaligen Zeit durchaus seine Berechtigung.

Allerdings bieten mittlerweile sämtliche aktuellen Browser die Möglichkeit, Seiten komplett zu skalieren, d.h. das gesamte Layout zoomt und bleibt intakt (und der kommende IE 8 korrigiert hierbei einige Fehler der Vorgängerversion und zieht so mit Firefox, Opera, Safari & Co. gleich). Mittlerweile sind moderne Browser wie der Firefox 3 sogar in der Lage, sich die vom Nutzer eingestellten Schriftgrade für jede Website einzeln zu merken. Zudem lässt sich in vielen Browsern eine Mindestschriftgröße angeben, die vom Ersteller der Seiten durch nichts überschreiben werden kann.

Solange Microsoft den Vista-Nachfolger nicht wieder mit dem IE 6 oder IE 7 ausliefert, wird die Zahl der Nutzer der problematischen Browser weiterhin stetig abnehmen; die Zahl der Nutzer mit moderneren Browsern nimmt jedoch täglich zu (relativ und absolut) – warum also Ressourcen für ein vermeintliches Problem aufwenden, wenn sich das Problem mittelfristig in Luft auflöst?

Ähnlich sieht dies übrigens auch das W3C, dass in den User Agent Accessibility Guidelines (UAAG 1.0 Checkpoint 4.1) die Verantwortung für solche Funktionalitäten eindeutig den Browser-Herstellern zuschiebt. Von den Erstellern einer Seite kann man lediglich verlangen, dass der Web-Inhalt weiterhin benutzbar bleibt, wenn der Nutzer eine entsprechende Funktion betätigt – mehr nicht.

Traditionelle Textskalierung ist damit also eindeutig ein Ding der Vergangenheit.

Ok, aber was ist mit den Nutzern?

Ganz einfach:

• Bei blinden Nutzern ist der gewählte Schriftgrad egal. Per gesetzlicher Definition verfügt ein blinder Nutzer höchstens über einen Sehrest, der nicht wirklich nutzbar ist. Die Frage nach der richtigen Größe für Schrift stellt sich hier also erst garnicht.
• Bei stark sehbehinderten Nutzern kann man in der Regel davon ausgehen, dass der Computer an die individuellen Bedürfnisse angepasst ist und Hilfsmittel benutzt werden, mit denen diese Diskussion ebenso irrelevant wird.
• Dann wäre da die große Grauzone von Nutzern, die zwar die ein oder andere Form der Behinderung haben, jedoch (noch) keine speziellen Hilfsmittel benutzen. Dies sind nicht nur leicht sehbehinderte Nutzer, sondern auch Menschen mit Lernbehinderungen oder anderen kognitiven Behinderungen, die unter Umständen von größerer Schrift profitieren würden. Aber auch bei dieser Gruppe stellt sich die Frage, ob solch ein Schriftskalierungs-Widget irgendwem wirklich nachhaltig hilft – und das nicht nur weil es letztendlich nur eine Funktionalität dupliziert, die der verwendete Browser bereits von sich aus anbietet. Diese Benutzer werden immer und immer wieder auf das gleiche Problem stoßen und über kurz oder lang mehr Zeit mit der Nachjustierung von Schrift verbringen als mit der Aufnahme von Informationen.
• Bleibt noch die den unerfahrenen Nutzern nachgesagte Angst vor dem Computer und davor »etwas kaputtzumachen«. Nutzer, die oftmals nicht wissen welchen Browser sie benutzen, geschweige denn was ein Browser ist. Ob ausgerechnet diese Nutzer auf (fremden) Webseiten auf einmal alle möglichen Knöpfe drücken, wenn sie schon Angst haben auf Ihrem (eigenen) Computer irgendwelche Knöpfe zu betätigen? Daran wird man wohl zweifeln dürfen. Sind dies die Nutzer, die einen 20"-Monitor auf 800×600 stellen weil dann die Schrift so schön groß ist? Und was ist wenn die Sehkraft weiter nachlässt? Stellen die Nutzer den Monitor dann auf 640×480? Wenn die Nutzer Probleme mit zu kleinen Schriften haben – wie sind sie dann auf die Seiten gekommen? Wie kommen sie mit dem Rest des Computers zurecht?

Sie sehen: solche Widgets lösen das Problem nur temporär, denn spätestens auf der nächsten Web-Seite steht der Benutzer wieder vor dem selben Problem. Die Widgets helfen also nicht bei der Lösung des Problems, sondern führen den Nutzer effektiv weiter von einer echten Problemlösung fort, indem sie an den Symptomen herumdoktern, statt die Ursachen zu beheben. Streng genommen erweist man seinen Benutzern sogar einen Bärendienst, da man eine Erwartungshaltung schürt, die nur von den wenigsten Websites erfüllt wird.

Wesentlich sinnvoller und von nachhaltigerem Effekt sind hier Ansätze wie bei der BBC-Seite »My Web My Way - Making text larger in Internet Explorer«, wo Nutzern erklärt wird wie sie das Problem dauerhaft beheben können. Wenn man also schon Ressourcen in diese Thematik steckt, dann doch wohl besser so, dass dem Nutzer wirklich geholfen wird.

Darüber hinaus stellt sich an diesem Punkt auch eine philosophische Frage: können wir einerseits verlangen, dass Webdesigner möglichst viel Kontrolle über das Erscheinungsbild aufgeben und dann wiederum das genau Gegenteil fordern? Standard-konforme Webdesigner machen nur Vorschläge - das C in CSS steht für die Kaskade (engl.: Cascading), und die endet beim Nutzer – dieser hat das letzte Wort über die Größe der Schrift.

Merke: wenn Browser oder Hilfsmittel in der Lage sind, ein Accessibility-Problem zu lösen, dann müssen Sie als Anbieter einer Seite dies nicht mehr machen. Und deswegen ist das fontsize-Skript weg.

27 Jun 2008

Wochenendbeilage

Gesammelte Werke mit CSS:

• Dirk Jesse: »Flexible Layouts: Challenge For The Future«
• Ansgar Hein: »Und es hat Zoom gemacht (oder: Spiel mit dem Feuer)«
• Jonathan Christopher: »Will Page Zoom Prove Relative Units Less Useful?«
• Peter Kröner: »Wie man die fehlerhaften Ligaturen im Firefox 3 per CSS los wird«
• Martin Kliehm: »Better Foreground Sprites«
• Rachel Andrew: »Nifty Navigation Tricks Using CSS«
• Jina Bolton: »Breaking Out of the Box With CSS Layouts«
• Ralf Herrmann: »Fonts available for @font-face embedding«
• Rob Glazebrook: »An Argument Against Faux Absolute Positioning«
• Niels Matthijs: »CSS Nesting Specifics - When CSS Misbehaves«

30 Mai 2008

Wochenendbeilage: Rasterfahndung

In Klein-Bloggersdorf tobt gerade mal wieder die Aus­einander­setzung pro und contra Grid Layouts (nicht zu verwechseln mit Layout Grids!). Aber lesen Sie selber (und auch die zahllosen Kommentare):

• Dirk Jesse: »Grid-Layouts - sinnvoll umsetzbar mit YAML?« sowie
  »Flexible Layouts vs. Fixe Layouts – 5:0«
• Jens Grochtdreis: »Grid-Layouts – das neue Tabellenlayout?«

Weitere lesenswerte Ressourcen zum Thema Gestaltungsraster:

• Mark Boulton: »Why Use a Grid«, »Feeling Your Way Around Grids« und »5 Simple Steps to Designing Grid Systems« (Part 1, Part 2, Part 3, Part 4, Part 5)
• Khoi Vinh: »Grids Are Good« (PDF)
• Wilson Miner: »Setting Type on the Web to a Baseline Grid«
• David Yeiser: »Using Spreadsheets to Brainstorm Grid Layouts«
• Molly Holzschlag: »Thinking Outside the Grid«
• Position is Everything: »Vertical Grids«
• Michael Angeles: »Cutting and Sewing Grid-Based Design: Working with Other People’s Comps«

Nachtrag: »Flexible Layouts – die Herausforderung der Zukunft«

28 Mai 2008

Gesammelte Werke

Grundlegende konzeptionelle & gestalterische Erwägungen, um dies hier zu verhindern:

• Markus Angermeier: »Sprecht miteinander! Designmuster im Web 2.0«
• Joshua Porter: »Designing for the Social Web: The Usage Lifecycle«
• PhysOrg: »Too many choices -- good or bad -- can be mentally exhausting«
• Jared M. Spool: »3 Important Usability Challenges for Designing Web Apps« und »Two More Usability Challenges for Designing Web Apps«
• Mike Padilla: »User Interface Implementations of Faceted Browsing«
• Dave Shea: »The Web Beyond the Desktop«
• George Oates: »Community: From Little Things, Big Things Grow«
• Joshua Clanton: »6 Web Design Tips from Leonardo da Vinci«
• Jessica Enders: »Zebra Striping: Does it Really Help?«
• Wilson Miner: »Accessible Data Visualization with Web Standards«
• Luke Wroblewski: »Sign Up Forms Must Die«

20 Mai 2008

Gesammelte Werke

Was mit CSS:

• Dirk Jesse: »Ein paar Hinweise zu den @-Regeln von CSS«
• Philipe Fatio: »Informationen über Linkziel darstellen« und »Bildeffekte mit ›background-attachment: fixed‹«
• Boris Stumpf: »Definitionslisten, wie sie im Buche stehen«
• Chris Coyier: »How To: Resizeable Background Image«
• Smashing Magazine: »Improving Code Readability With CSS Styleguides«
• Eric Meyer: »line-height: abnormal«
• Paul O’Brien: »Easy Vertical Centering with CSS«
• Linda Chadbourne: »CSS Shorthand, Step by Step How-To«
• Dustin Brewer: »CSS Hack:Getting Safari to behave«
• David Walsh: »Combine Your CSS Media Styles Into One File«
• Bedrich Rios: »How To Zebra-Stripe Tables Using CSS and jQuery«
• Ryan Singer: »Padded link targets for better mousing«
• Will Speak: »Five Star Rating With CSS«
• David Rodriguez: »Simple CSS: Creating More Readable Text«
• Kevin Yank: »CSS Gradients, Transforms, Animations, and Masks«
• Natalie Jost: »Override Inline Styles from the Stylesheet«
• Brian Suda: »Stay on :target«

16 Mai 2008

Gesammelte Werke

Heute mal was mit Usability und wie man auf dem Nutzer auf die Spur kommt:

• Jonathan Follett: »Recycle These Pixels: Sustainability and the User Experience«
• Aarron Walter: »Findability, Orphan of the Web Design Industry«
• Jeremy Keith: »The User Experience Curve«
• Mia Northrop: »IA Summit 2008: User-Centred Design Is Dead?«
• Dirk Knemeyer: »Defining Experience: Clarity Amidst the Jargon«
• Alexander Rehm: »On Information Architecture and user-testing«
• Daniel Lafreniere: »Extreme User Research«
• Vitaly Friedman: »Usability-Studien«

15 Mai 2008

Gesammelte Werke

Heute zur Abwechselung mal was mit Typographie:

• Gerrit van Aaken: »Interpunktion in Verlinkungen«
• Jason Teague : »Web Typography: Tell Me What You Want«
• John D Boardley: »On Choosing Type«
• Oliver Reichenstein: »Web Design is 95% Typography«
• David Rodriguez: »Don't Be Afraid of Serif Fonts«
• Sean Hodge: »5 Principles And Ideas Of Setting Type On The Web«
• Jon Gos: »The Untold History of Web 2.0 Fonts«
• Christopher Phin: »Ten typographic mistakes everyone makes«
• Lois Knight: »Typography Essentials - A Getting Started Guide« und »Typography Essentials - Part 2«

18 Apr 2008

Wochenendbeilage

Dem Schönen, Wahren, Guten: ganz viel CSS.

• Michael Preidel: »Eigener Lupen-Cursor mit reinem CSS (Update: Cross Browser-Lösung)«
• Nico Wenig: »MoreCSS«
• Matthias Kretschmann: »Text-Shadow Exposed: Make cool and clever text effects with css text-shadow«
• Boris Stumpf: »Definitionslisten, wie sie im Buche stehen«
• Matthew Griffin: »3 Layouts that Handle Screen Resolution with Dignity«
• Niels Matthijs: »border model / the four dots issue«
• Jonathan Snook: »Content Overlay with CSS«
• Fabian van Luyn: »CSS Adjacent-Sibling Selector«
• Chris Coyier: »Fine Use for the Adjacent Sibling (+) Selector«
• John Faulds: »Legends of Style Revised«
• Adriana Palazova: »Links with background images - three simple fixes for IE«
• Rob Glazebrook: »Perma-Closing Message Boxes with JavaScript + CSS«
• Alen Grakalic: »Pure CSS Animated Progress Bar«
• Antonio Lupetti : »Perfect pagination style using CSS«

Und die wöchentlichen Wiedergänger zum Endlosthema »Reset oder nicht?« dürfen natürlich auch nicht fehlen:

• Jonathan Snook: »No CSS Reset
• Eric Meyer: »Crafting Ourselves«

16 Apr 2008

Gesammelte Werke: CSS

Eine Liste mit ganz vielen Listen, die Listen zum Thema CSS beinhalten:

• Alen Grakalic: »8 Premium One Line Css Tips«
• Fabian van Luyn: »12 Articles And Tools For Css Structuring And Optimising«
• Vandelay: »65 Resources for Grid-Based Design«
• admin: »10 Must use CSS and Coding Techniques«
• Tim Wright: »Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know«

Auch gut:

»The Highly Extensible CSS Interface ~ The Series« von Cameron Moll:

• Extensible CSS Interface I: The Foundation,
• Extensible CSS Interface II: CSS Selectors & jQuery,
• Extensible CSS Interface III: Adding Ajax Interactivity
• Extensible CSS Interface IV: Testing for Extensibility

12 Mär 2008

Wieviel kostet eine Webseite?

designfragen.de richtet sich an Unternehmen und Personen, die bisher noch keine Erfahrung mit Design haben und nun ein Logo, eine Webseite oder ähnliche Designarbeiten in Auftrag geben möchten. Diese Seite beantwortet die gängigsten Einsteigerfragen, und einfache Erklärungen finden wir immer gut: designfragen.de.

07 Mär 2008

Wochenendbeilage

Mal wieder was mit Design und wie man's hinbekommt:

• Alexandra Labudda: »YAML 3 und der YAML Builder«
• Björn Seibert: »Nicht nur (r)eine Designfrage«
• Kevin Scoresby: »How to design a system that everybody hates«
• Paul Burke: »Designing for Disagreement«
• Paul Graham: »Six Principles for Making New Things«
• Jeff Parks: »Using Design Visuals To Communicate Ideas«
• Andrew Hinton: »Personas and the Role of Design Documentation«
• Kevin Hale: »Visualizing Fitts’s Law«
• Andy Rutledge: »On Creativity«
• Naz Hamid: »Design is in the Details«
• Paul Annett: »How to recreate Silverback’s Parallax«
• Roger Johansson: »Specify a maximum width for em-based layouts«
• Steven Clark: »Elastic Layouts Still Have Issues«
• Rob Glazebrook: »Create a Microsoft Word-Style Outline with CSS«
• Trevor Davis: »PNGs, the AlphaImageLoader Filter, and hasLayout«
• Kevin Yank: »Table-Based Layout Is The Next Big Thing«

18 Feb 2008

Gesammelte Werke

Wo wir gerade beim Thema CSS sind:

• Gerrit van Aaken: »Unterstreichungen in Screendesigns«
• Dejan Cancarevic: »10 best CSS hacks« (Nr. 6 kannten wir auch noch nicht, bzw. der Fehler war uns zwar schon mal begegnet, aber der Workaround noch nicht)
• Alen Grakalic: »Custom Double Solid Borders for Images« und »Create Resizing Thumbnails Using Overflow Property«
• Noupe: »101 CSS Techniques Of All Time«
• Smashing Magazine: »Powerful CSS-Techniques For Effective Coding«

Auch cool: CSS Type Set

14 Feb 2008

Gesammelte Werke

• Eric Eggert: »Wozu braucht man eigentlich ein 12-Spalten-Grid?«
• Björn Seibert: »Nicht nur (r)eine Designfrage«
• David Pogue: »Designing What’s Right for Consumers«
• Tim Kadlec: »Detailed Look at Stacking in CSS«
• Jon Tan: »The Incredible Em & Elastic Layouts with CSS«
• Peter Gasston: »Image Replacement in CSS3«
• Rob Glazebrook: »Book-style Chapter Introductions Using Pure CSS«
• Fredrik Wärnsberg: »Cross-browser transparent columns«
• Paul Chaplin: »CSS reset and quirky quotes«
• Peter Paul Koch: »W3C DOM CSS compatibility table updated«
• Alen Grakalic: »Create Resizing Thumbnails Using Overflow Property«

05 Feb 2008

Gesammelte Werke

• Markus Wäger: »Was wiegt eine Überschrift?«
• Brian Suda: »Stay on :target«
• Cameron Moll: »Overcoming blankcanvasphobia«
• John Ferrara: »Search Behavior Patterns«
• Design Council: »Eleven lessons: managing design in eleven global brands« (PDF)
• Verne Ho: »Vertically center content with CSS«
• Dejan Cancarevic: »Vertical align div«
• Eric Wendelin: »CSS Adjacent Sibling Selectors«
• Alen Grakalic: »Pure Css Data Chart«
• Alex Bischoff: »Keeping Your Elements’ Kids in Line with Offspring«
• Niels Matthijs: »come on my selector pt2«
• Stephanie Sullivan: »Scaling Fonts using em units«

22 Jan 2008

Gesammelte Werke: was mit Usability

• Jeff Croft: »Solutioneering, or putting solutions before problems«
• Stephen Turbek: »Advancing Advanced Search«
• B&A Staff: »Our Way: The Ingenuity of Unintended Uses«
• Dave Shepard: »Evolve Your User Interface To Educate Your Users«
• David Travis: »Paper Prototyping with Morae«
• John Gruber: »Where Keyboard Shortcuts Win«
• Joshua Porter: »Personas and the Advantage of Designing for Yourself«
• Al: »Button placement and style from a usability perspective«
• Peter Conradie: »Introduction to Good Usability« (ebook als PDF)
• Jessica Hupp: »Top 100 User-Centered Blogs«
• John S. Rhodes: »Choice Kills Usability«
• Jesper Rønn-Jensen: »Usability of Pagination Links«