F-LOG-GE » Webdesign

Die ersten Adventskalender-Türchen

Jens Grochtdreis — Thu, 01 Dec 2011 07:34:44 +0000

Adventskalender bieten in der Realität wie im Netz immer nette Überraschungen. Heute sind im Netz einige für Webentwickler interessante Adventskalender gestartet. Anbei meine ersten Fundstücke.

Der Adventskalender der Webkrauts macht mit einem Artikel von Ansgar Hein auf. Ansgar betrachtet “Wireframes für Startseiten“.

Der englischsprachige Kalender “24ways” macht mit einem Artikel über eine Eigenschaft von @font-face auf. Drew McLellan beschreibt, wie man mittels der Eigenschaft “unicode-range” den Einsatz einer Schrift auf wenige Zeichen (oder nur eines) beschränken kann. Eine interessante Idee mit diversen Pferdefüssen.

Sven Wolfermann beschreibt im ersten Türchen des “CSS3-Adventskalenders” eine Lösung, Rahmenlinien mit Verläufen zu versehen.

Auch Mozilla macht bei den Adventskalendern neuerdings mit. Hier werden empfehlenswerte Links spendiert. Bei sitepoint ist man hingegen geschäftstüchtig und verkauft drei ausgesuchte ebooks zu einem gnadenlos günstigen Preis. Ich habe mir gleich das ebook über mobile Webentwicklung gekauft.

Ich warte nur noch drauf, dass sich das erste Türchen des “Performance Calendars” öffnet. Habe ich einen Adventskalender übersehen? Ergänzungen sind in den Kommentaren willkommen. Die Kalender sollten aber etwas mit Webentwicklung zu tun haben.

Linkfutter 5

Jens Grochtdreis — Mon, 10 Oct 2011 15:20:00 +0000

Artikel über Navigationen

Jens Grochtdreis — Tue, 30 Aug 2011 07:36:30 +0000

Bei “Einfach für alle” schreibt Domingos de Olivera in einem kompakten Artikel über “Wege durch die Website – die Navigation“. Eine knappe und gut durchdachte Darstellung sehr wichtiger Faktoren bei der Erstellung einer Navigation. Es gibt für Navigationen keine Patentlösung. Es hilft aber, sich vieler Rahmenfaktoren bewusst zu sein, um den eigenen Navigationsansatz bewerten und einordnen zu können.

Prototypen testen – mit oder ohne Design?

Jens Grochtdreis — Wed, 22 Jun 2011 07:17:55 +0000

Wenn man Prototypen einem Usability-Test unterziehen will stellt sich die Frage, ob der Test mit oder ohne ein ausgearbeitetes Design stattfinden soll. Aus dem Bauch heraus finde ich es naheliegend, dass ein designter Testcase zu anderen Ergebnissen führt, als einer, der mehr mit Grautönen und ohne Bilder arbeitet und sich damit auf die Funktionen und die Struktur konzentriert.

eResult hat einen Versuch gemacht, der diese Frage klären soll. Wie immer in diesem Bereich werden kleine Fallzahlen von insgesamt 24 Testpersonen für beide Testreihen genommen. Die Aussagekraft solcher Tests liegt also eher im “ich glaube das mal, weil ich will”-Bereich, als dass eine statistische Relevanz hätte. Aber es gibt schonmal interessante Hinweise.

Das wirklich interessante Ergebnis der Studie ist, dass es keinen relevanten Unterschied zwischen schlicht und angehübscht gibt. Nur in einem Detail unterschieden sich die Ergebnisse. Interessante Sache. Allerdings würde mich eine Wiederholung der Studie interessieren, wenn die Probanden wirklich ein Design vorgelegt bekommen, das sich vom grauen Prototypen unterscheidet. Der bunte Testcase ist in meinen Augen zu nah am grauen. Ein paar Farben und ein Hintergrundbild sind ein zu geringer Unterschied. Oder wie seht ihr das? Kann jemand von ähnlichen Erlebnissen berichten?

Videoeinbindung

Jens Grochtdreis — Mon, 20 Jun 2011 15:07:50 +0000

Ich habe in der Vergangenheit selten die Notwendigkeit gehabt, in Projekten Videos einzubinden. Trotzdem versuche ich immer den aktuellen Stand der Diskussion mitzubekommen. Für mich läuft es derzeit auf zwei Wege hinaus:

Wenn ich kein HTML5 nutze, dann nehme ich entweder den JWPlayer oder die barrierefreie Verbesserung aus Wien.
Wenn ich HTML5 nutze und ältere Browser mit Flash oder Silverlight beglücken möchte, nutze ich auch den JWPlayer oder etwas wie mediaelement.js, das Gerrit van Aaken so toll findet.

Gibt es noch andere, richtig tolle Vorschläge?

Neues Webentwicklungstool von Microsoft

Jens Grochtdreis — Thu, 19 May 2011 12:47:31 +0000

Microsoft hat ja leider keine heroische Vergangenheit in Bezug auf Webentwicklunsgtools. Obwohl der IE jahrelang (bis zum Erscheinen des IE6) technisch führend war, waren die Entwicklungstools für Frontendentwicklung zeitgleich erbärmlich schlecht. Vor einigen Jahren versuchte man dann den Neustart mit Expression Web. Ich kenne die zweite Version und war relativ angetan. Allerdings auch amüsiert, konnte man doch das CSS gegen das Profil “IE6-CSS” validieren lassen.

Das Tool konnte meinem Eindruck nach allerdings nichts gegen die komplexen Platzhirsche Dreamweaver und Eclipse tun. Für Profis war es aber offenbar auch weniger gedacht. Die Bedienung und Optik erinnerte eher an ein Office-Programm. Ich schätze, der ambitionierte Hobbyist war eher die Zielgruppe. Obgleich das Programm dafür dann zu teuer war.

Heimlich still und leise scheint Microsoft nun seit Kurzem – seit wann eigentlich? – ein neues Tool zu bewerben. Diesmal ist es kostenlos: Microsoft WebMatrix.

Die Beschreibungen lesen sich sehr interessant. Aber da ich seit Ende 2009 nur noch am Mac arbeite und den PC eher selten zum Testen anschmeisse, habe ich wenig Motivation, dieses Tool mal auszutesten. Hat einer meiner Leser das Programm vielleicht getestet oder Interesse daran?

Sehr schön finde ich bei der Site übrigens im Footer den – als Grafik eingebundenen – Spruch “Make Web Not War”

Ein paar Fireworks-Links

Jens Grochtdreis — Fri, 06 May 2011 07:02:04 +0000

Es ist mal wieder Zeit für ein paar nette Links zu Fireworks.

Die immer weiter anwachsende Flut an Video-Tutorials bei Wolfgang Wagners Fireworks-Seite ist auf alle Fälle immer einen Blick wert. Aktuell hat er 47 Tutorials versammelt.
In Fireworks 4 wurden die früheren “Frames” verändert und “Seiten” kamen hinzu. Dieser englischsprachige Artikel bei Adobe erklärt den Unterschied und Sinn von Seite, Status und Ebene.
Eine ähnliche Zielrichtung hat dieser Artikel mit Video bei WebdesignTuts
Es ist immer ätzend, in einem Bildbearbeitungsprogramm eine Tabelle zu malen. Dafür sind diese Programme einfach nicht ausgerichtet. Ein Glück gibt es eine neue Fireworks-Erweiterung, mit der es richtig Spaß machen kann, eine Tabelle zu gestalten.
Wie wäre es mit einer Bibliothek von 260 Vektor-Icons?
Die CreareGroup hat ein paar Design-Tutorials für Fireworks veröffentlicht.
Nett ist auch diese Platzhalter-Extension, bei der die Dimensionen des Platzhalters automatisch aktualisiert werden, wenn man die Größe verändert.

Platzhalter für Bilder

Jens Grochtdreis — Mon, 11 Apr 2011 06:19:07 +0000

Während der Entwicklungsphase einer Webseite hat man selten die später endgültigen Bilder zur Hand. Und möchte man nur eine Testdatei erstellen, gibt es in dem Sinne keine endgültigen Bilder. Um die Suche nach adäquaten Bildern zu verkürzen, empfehle ich zwei spezielle Webseiten – eine dritte kann man sich aus Jux auch noch anschauen.

Der “Dynamic Dummy Image Generator” erzeugt Bilder beliebiger Größe, deren Hintergrund- und Schriftfarbe man genauso auswählen kann, wie die Bildgröße und das Ausgabeformat. Das Ergebnis kann man dann entweder herunterladen oder mittels einer URL direkt einbinden. Ich nutze diese Dienst vor allem dazu, um mir schnell Bilder eines bestimmten Formates zu erstellen, dessen Dimensionen dann direkt im Bild stehen. Diese sammele ich in meiner lokalen Entwicklungsumgebung. Ein ähnlich gelagerter Dienst ist placehold.it.

Aus der Nähe von Stuttgart stammt ein neuer, sehr interessanter Dienst namens lorempixum. Auf dieser Seite wählt man neben der gewünschten Bildergröße auch ein Motivthema aus und ob es sich um ein Farb- oder Schwarzweissbild handeln soll. So kommt man an verblüffend interessante Bilder heran. Die Bilder stammen von Flickr und stehen unter einer CC-Lizenz. Ein interessanter Dienst, um stimmungsvolle Bilder statt Fabrflächen als Platzhalter zu nutzen.

Stimmung herrscht bestimmt auch, wenn man dem Kunden eine Testseite mittels Bilder von placekitten zusammenzimmert. Wie es der Name andeutet, kann man hier Katzenfotos als Platzhalter finden. Leider scheint es nur die paar Bilder, die auf der Startseite angezeigt werden, zu geben. Die Variation bezüglich Motiv und Größe sind also sehr beschränkt. Aber vielleicht ändert sich das ja noch. Den Dienst werde ich sicherlich beobachten.

Interessantes CAPTCHA

Jens Grochtdreis — Fri, 04 Mar 2011 12:44:49 +0000

CAPTCHAs haben immer wieder das Problem, daß sie entweder sicher die Bots draussen lassen oder keinen möglichen menschlichen Nutzer ausgrenzen. Entweder werden Sehbehinderte ausgegrenzt, die die seltsam entstellten Buchstaben nicht entziffern kann, die man ohne Sehbehinderung schon kaum erkennt. Oder es handelt sich um Rechen- oder Quizaufgaben, die für den einen oder anderen zu hoch sind.

Eine sehr schöne Demonstration, wie man es übertreiben kann und was Ausgrenzung bedeutet, findet man beim Formular der Seite random.irb.hr. Eine herrliche Satire.

Viele Informationen rund um CAPTCHAs und deren Alternativen gibt es heute bei Smashing Magazine in einem sehr interessanten Artikel.

Aktuelle Fireworks-Tutorials

Jens Grochtdreis — Thu, 03 Mar 2011 12:42:33 +0000

Am 11. Februar habe ich meiner Enttäuschung Ausdruck verliehen, daß für Webdesign leider noch immer Photoshop das Maß aller Dinge ist, obwohl doch Fireworks viel besser für das Erstellen von Layouts geeignet ist. Ergebnis des Artikels und des interessanten Meinungsautauschs in den Kommentaren war offenbar, daß sich Wolfgang Wagner aufraffte, eine Seite über Fireworks zu erstellen. Mittlerweile hat er schon vierzehn Videotutorials (Stand 03. März) auf FWTutorials.de veröffentlicht. Eine super Leistung, die mir Respekt abnötigt.

Jeder Webdesigner, der bislang nur mit Photoshop gearbeitet hat, sollte mal einen Blick auf die Tutorials werfen. Das Arbeiten ist mit diesem Programm anders, aber besser. Vielen Dank, Wolfgang. Ich hoffe noch auf viele weitere interessante Videotutorials.