Nachlese August 2007 - Die Seiten des Monats
Werbung
Der monatliche Rundumschlag mit den besten Links, Tools, Artikeln und Themen für Seitenbetreiber und Webdesigner. Seiten, die man nicht verpaßt haben sollte. Dies ist die deutsprachige Ausgabe des Originals bei Smashing Magazin. Hier geht's zur Ausgabe des letzten Monats.
CSS-Techniken, (X)HTML, PHP
- CSS: The right sprite
Eine neue Anwendung von CSS Sprites-Technik: um die Anzahl der Angaben in CSS zu minimieren, wird anstelle des background-image-Attributs das margin-Attribut ausgenutzt. Foreground Sprites: gleicher Ansatz, detaillierter erklärt. - Purple-Include
Eine JavaScript-Bibliothek, mit der Sie Fragmente Ihrer HTML-Dokumente ineinander dynamisch einfügen können, ohne den Inhalt der Dokumente zu kopieren. In der Fachsprache heißt ads "remote transclusions" (transcluding content not hosted on your web server). XPath und PHP im Einsatz. - How to create VISTA style toolbar with CSS
CSS-basiertes Navigationsmenü in Vista-Look.
- Creating a table with dynamically highlighted columns
Eine "frische" CSS+JavaScript-basierte Technik zur Darstellung eines Auswahlmenüs. Beispiel (wählen Sie eine der Optionen, um den Effekt zu sehen). - A Stripe of List Style Inspiration
Eine etwas andere Art, ein CSS-basiertes Navigationsmenü zu realisieren. In Form von Streifen.
- A CSS styled table version 2
Veerle Pieters erklärt, wie man zugängliche und benutzerfreundliche Tabellen mit CSS-Styling realisiert. Follow-up zum ersten Teil. Das Ergebnis. - Fade Out Bottom
Damit der untere Seitenbereich schrittweise in Hintergrund zu treten scheint, wird eine simple CSS-Technik verwendet, die sich ein transparentes .png-Bild sowie die z-index-Eigenschaft zunutze macht. - Javascript Progress / Percentage Bar with CSS
Statusindikator ist insbesondere in dynamischen Web-Applikationen unvermeidbar. Eine elegante Methode zur Erzeugung von "Progress Bars" mit ein wenig CSS und JavaScript.
- Professional horizontal menus
Ein elegantes CSS-basiertes Navigationsmenü von Stu Nicholls.
Tools, Web-Dienste
- RegexPal: JavaScript Regex Tester
RegexPal lässt reguläre Ausdrücke anschaulich - anhand eines beliebig vorgegebenen Textes auf die Korrektheit überprüfen. Gematchte Teilausdrücke werden grafisch hervorgehoben. Dazu: Regular Expressions: alles, was Sie zum Thema wissen sollten. Mit zahlreichen Beispiel und Tutorials.
- BuiltWith - Web Technology Profiler
Der Dienst berichtet über die Konfiguration (Hardware und Werkzeuge) einer vorgegebenen Web-Seite - etwa Server, Analytics-Werkzeuge, Widgets, Frameworks oder (X)HTML-Spezifikation. Die globale Statistik ermöglicht einen direkten Vergleich einer Seite mit dem durchschnittlichen Profil von 5000 "Top"-Seiten.
Siehe auch Dr. Web. - Google Gears (beta)
Web-Anwendungen lassen sich ab jetzt auch offline verwenden. Im Rahmen des diesjährigen Developer's Convention veröffentlichte Google eine Browsererweiterung, mit der Web-Applikationen ihre Funktionalität auch offline beibehalten können. Unter anderem ist es möglich, beliebige Datenbestände herunterzuladen und lokal auf dem PC abzulegen; asynchrone JavaScript-Anfragen können wie gewohnt ausgeführt werden und sind sofort wirksam. Sämtliche Offline-Aktionen (etwa Tagging, Sharing u.a.) werden bei der nächsten Online-Verbindung synchronisiert und ausgeführt. Die Erweiterung ist 700 Kb groß und bis dato nur für Firefox 1.5+ und Internet Explorer 6.0+ verfügbar. - Google Web Toolkit
Google veröffentlichte die erste Release-Version seines Java-basierten Software-Development-Frameworks, mit dem sich Ajax-Anwendungen einfacher und schneller programmieren lassen. Insbesondere wurde das Augenmerk der Entwickler auf Kompatibilitätsprobleme gelegt; diese sollen nun in GWT leicht zu handhaben sein. - YAML Builder
Ein elegantes Werkzeug von Dirk Jesse, mit dem die visuelle Erstellung von YAML-basierten Layouts direkt im Browser ermöglicht wird. YAML (Yet Another Multicolumn Layout) ist ein (X)HTML/CSS-Framework zur Erstellung moderner, flexibler Layouts mittels Floats. Ausführliche Beispiele und Online-Dokumentation sollen Anfängern wie Profis helfen, robuste und flexible Layouts schnell und leicht zu erstellen.
- Deliverables That Work: Design Description Documents (DDD)
Um eine optimale Kommunikation zwischen Kunden und Designern zu erreichen, ist es oft hilfreich, sog. Wireframes, also die schematische Darstellung der Interaktion, zu verwenden. Diese sollen dazu benutzt werden, um Seitenbetreibern eine kompakte und präzise Vorstellung über die Seitenfunktionalität sowie Seitenstruktur zu vermitteln - etwa durch eine begleitende Infobox, die über einzelne Seitenbereiche informiert. Robert Hoekman Jr stellt einige solcher Wireframes kostenlos zum Download bereit (für Apple iWork). Eine PowerPoint-Vorlage wird ebenfalls mitgeliefert. - Stripemania - Striped background generator
Ein simples Werkzeug zur Erstellung von Zebra-Streifen (etwa als Hintergrundbilder) online.
- XRAY
Das Bookmarklet, mit dem sich Web-Seiten "röntgen" lassen, gibt es nun auch für IE 7. Das Werkzeug gibt zu einem ausgewählten Seitenelement detaillierte Informationen über dessen Eigenschaften, seine Position in DOM und dazugehörige CSS-Klassen und Bezeichner.
CSS Tools und Dienste
- pzImageCombine
Mehrere Bilder in ein Gesamtbild zu integrieren und die passende Darstellung anschließend mit der background-position-Eigenschaft festzulegen, ist keine neue CSS-Technik. Dieses Desktop-Tool automatisiert die mühselige Erzeugung von Bildern: ist ein Verzeichnis vorgegeben, so werden alle .png-Bilder "on the fly" in ein Bild gepackt. Ein alternatives Online-Tool gibt es auch — zusätzlich liefert es die background-position-Angaben der jeweiligen Teilbilder. - Designing Your CSS with A Grid Overlay
How-To: Raster-basiertes Design im Einsatz in Adobe Fireworks and Photoshop.
- CSS Sculptor
Eric Meyer veröffentlichte die Release-Version seiner Dreamweaver-Erweiterung, mit der sich vielfältige standardkonforme CSS-basierte Layouts generieren lassen. Preis: 149$ - Tripoli - a CSS standard for HTML rendering
Diese Sammlung von Default-CSS-Schablonen soll eine solide Grundlage für browserunabhängige Seitendarstellung ermöglichen. Dabei braucht sich der Entwickler nicht um gewisse Seitenelemente zu kümmern, die anschließend extra hinzugefügt werden sollen - sämtliche Default-Vorgaben inklusive Tabellen, Listen, Typografie, aber auch Abkürzungen und Formulare werden mit dazugehörigen Default-CSS-Angaben für optimale Lesbarkeit verliehen. - Blueprint Grid CSS Generator
Mit dem Tool lassen sich flexible Versionen der raster-basierten Designs aus dem Blueprint CSS Framework online erstellen.
Ajax, Javascript
- Best Practices in Javascript Library Design
Ein Talk von John Resign, dem Entwickler von jQuery JavaScript-Library, über die besten Praktiken und Techniken zur Programmierung von robusten, wiederverwendbaren und plattformunabhängigen JavaScript-Bibliotheken. - JavaScript Tips for Novices, Acolytes, and Gurus
JavaScript für Anfänger: eine Übersicht von grundlegenden Regeln und Syntax von JavaScript - im Schnelldurchlauf. - AjaxView
Stellt eine Art Server-Side-Proxy (Web-Server-Plugin) dar, über die sämtliche Aktivitäten der Seitenbesucher sich genauer dokumentieren und erfassen lassen. - Accessible News Slider
Zugänglicher News Slider als JavaScript-Plugin für jQuery.
- DatePicker using Prototype and Scriptaculous
Ein Skript zur dynamischen Einbettung eines Datumwählers bei der Eingabe eines Datums. Programmiert mit Prototype und Scriptaculous. - ModalBox
Ein JavaScript-Modul zur Erzeugung von benutzerfreundlichen Dialogmenüs oder Sequenzen von Dialogmenüs (Wizard) wie man sie aus Desktopanwendungen kennt. - LiveValidation - Validation as you type
Ein kleines JavaScript-Widget, mit dem die Angabe des Nutzers in einem Feld "live" überprüft werden.
Referenzen, Tutorials, Tipps
- Firefox 2 Spelling Dictionary Hacks
Gut zu wissen: Firefox 2 stellt unter anderem eine Rechtschreibprüfung zur Verfügung. Nötig dazu sind jeweilige Sprachmodule, die als Erweiterungen installiert werden können. Der Beitrag beschreibt, wie genau die Rechtschreibprüfung für Eingabefelder aktiviert wird. Wörterbücher zum Herunterladen. Deutschsprachige Seiten können auch online getestet werden. Englischsprachige ebenfalls. - Photoshop Secret Shortcuts
30 unbekannte Tastaturkürzel für Adobe Photoshop, die die Effektivität steigern helfen. - 10 Free, Innovative Web Analytics Tools
10 eher unbekannte Web Analytics-Tools, die als eine solide Alternative oder Ergänzung zu Google Analytics dienen können. Darunter Enquisite.com, 103bees und Clicky. - Keryx (X)HTML Elements Best Practice Sheet
Eine Auflistung sämtlicher HTML-Elemente inklusive ihres Auftretens in verschiedenen Versionen der (X)HTML-Sprache, semantischer Bedeutung sowie SEO-, Usability- und Accessibility-Regeln. - 30+ Firefox Add-ons for Web Developers & Designers
Über 30 nützliche Firefox-Erweiterung, die ihren Dienst im Alltag eines Web-Entwicklers gut leisten können. Unter anderem enthält die Liste Aardvark, X-Ray, Web Developer's Extension und - natürlich - Firebug. - Gadgets for ExpressionEngine
Eine kleine Sammlung von mächtigen Erweiterungen, Modulen und Plugins für ExpressionEngine.
Web-Typografie
- Web typography: bottom margins of paragraphs and lists
Eine perfekte vertikale Anordnung von Seitenelementen lässt sich mit wenigen Zeilen CSS-Code bewerkstelligen. Makro Drugonic zeigt, wie es geht.
Artikel und Beiträge
- 6 Keys to Understanding Modern CSS-based Layouts
Jonathan Snook über 6 wichtige Aspekte des CSS-basierten Designs, darunter Box Model, Floats, Sizing Using EMs, Bildersetzungtechniken und CSS Sprites. - How to use Photoshop to create Product Box
Ein simples Step-by-step-Tutorial zur Erzeugung von 3D-Product Boxen in Adobe Photoshop.
- New Minimalism in web interface design
Ein ausführlicher Beitrag über Minimalismus in modernen Web- und Interface Designs mit zahlreichen Beispielen, typischen Schemata des Ansatzes sowie weiterführenden Referenzen zum Thema. - Better Writing Through Design
Ein effektives Design baut auf Seiteninhalten auf; eine Seite, die überzeugen soll, hat eine erkennbare Stimme, mit der sich Seitenbesucher identifizieren können. Der Beitrag setzt sich mit der Bedeutung des Content im Web design auseinander und gibt konkrete Ratschläge zur Verbesserung seiner Qualität. - Design by Metaphor
Wenn ein Kunde seine Seite "wie eBay" haben möchte, ist unklar, was eigentlich gemeint ist. Ein Designer würde daraus "visuell ansprechendes Farbschema" ableiten, ein Entwickler "eine skalierbare Seitenstruktur" und ein Nutzer vielleicht "eine Bewertungsfunktionalität". Ein Beitrag darüber, wie man dahinter kommt, was gemeint ist, wieso solche Metapher effektiv sind und wie man mit ihnen effizient umgeht. - Put Your Content in My Pocket
Mit der zunehmenden Popularität von iPhone stellt sich die Frage nach Design von Applikationen für iPhone und andere mobile Geräte. Ende 2008 soll es weltweit insgesamt 10,000,000 mobile Geräte mit Internet-Zugang geben. Dieser Beitrag bietet eine ausführliche Einführung in das Thema. Den zweiten Teil gibt es auch. - Ten: The Next Big Thing
In diesem Jahr wird CSS 10 Jahre alt. Håkon Wium Lie, der CSS-Evangelist, dessen Bemühungen zur Etablierung von Cascading Stylesheets geführt haben, nutzt dies, um der Entwicklung von CSS einen neuen Impuls zu vermitteln. Sein Vorschlag an W3C: TrueType-Schriftarten ins Web zu verlagern und Textinhalte durch Server laden und rendern lassen. Geschehen soll dies mithilfe von media queries. - The Ultimate Design Brief
Um bei der Umsetzung eines Entwurfs Missverständnissen vorzubeugen, ist es wichtig von vornherein sämtliche Unklarheiten aus dem Wege zu räumen. Eine Check-Liste mit allen Details, die vor der Umsetzung besprochen und exakt dokumentiert werden sollen. - Designing the "Future Of" Sites
Ein Einblick ins Workflow von professionellen ist immer interessant und hat professionelles Know-How zu bieten. In diesem Beitrag dokumentiert Ryan Nichols seine Entscheidungen im Designprozess beim Entwurf von "Future Of"-Auftritten (Konferenzen "The Future of Web Apps", "The Future of Web Design" und "The Future of Online Advertising").
- This Way to the Web, Print Designers!
Der Umstieg von Print Design zum Web Design ist keine einfache Angelegenheit, da im Web die absolute Präzision der Print-Mediums absoluter Dynamik des Web preisgegeben wird. Khoi Vahn gibt Einstiegspunkte sowie Buchempfehlungen für Print-Designer, die ihre Fertigkeiten im Web umzusetzen versuchen. - Fixing the Web
In den letzten 7 Jahren seiner Entwicklung hat sich das Web nur mühselig weiterentwickeln. Welche Probleme hat das heutige Web? Wozu soll es sich weiter entwickeln? Auf welche Herausforderungen müssen wir uns einstellen? Experten diskutieren die Zukunft des Web. - CSS Layouts: The Fixed. The Fluid. The Elastic.
Mike Cherim erklärt den Unterschied zwischen verschiedenen Layouttypen sowie Vorteile und Nachteile der einzelnen Techniken. Zur Wiederholung: Layouts fester Breite (pixelgenaue Angabe) verändern sich bei der Skalierung des Seitenfensters nicht, erzeugen also bei genügend kleiner Fenstergröße einen horizontalen Balken. Flüssige Layouts arbeiten mit Prozentwerten; die Breite von Seitenelementen hängt von der Breite des Fensters (viewport) ab — der Horizontalbalken entsteht nur bei einer schmalen Fensterbreite. Elastische Layouts hängen dagegen von der Schriftgröße im Text ab (em-Angaben). - Home Sweet Home
Die Startseite eines Web-Auftritts ist wichtig, aber bei weitem nicht so wichtig wie Entscheidungen, die Kunden wegen weit verbreiteter falscher Vorstellungen darüber machen. Paul Boag erläutert 4 typische Denkfehler, auf die Kunden beim Design von Startseiten hingewiesen werden sollen. - Primary & Secondary Actions in Web Forms
Luke Wroblewski setzt sich mit der Frage nach dem optimalen Ablauf der primären und sekundären Aktionen beim Ausfüllen von Online-Formularen. Ergebnis: unterschiedliches visuelles Gewicht (etwa Schriftgröße) von Aktionen hilft dem Seitenbesucher, Fehler zu vermeiden und zum Ziel zu gelangen. Außerdem: der Seitenbesucher soll einem direkten Pfad folgen - daraus resultiert die Notwendigkeit, durchgehend eine gleiche Ausrichtung zu verwenden. - iconeye manifestos
Das iconeye Magazin hat in seiner 50. Ausgabe 50 einflussreiche Architekten, Designer und Denker unserer Zeit um ein "Manifesto" gebeten. Das Ergebnis weiß zu beeindrucken.
- Banner Blindness: Old and New Findings (Jakob Nielsen)
Web-Nutzer reagieren kaum auf die Werbung. In seinen letzten Studien konnte Jakob Nielsen das Phänomen der Bannerblindheit bestätigen. Außerdem: unmoralisches Design zahlt sich aus. - 15 Design Decisions That Annoy Readers
15 lästige Erscheinung im modernen Webdesign, die nach Möglichkeit vermieden werden sollen. - Give Me Some Zzzzz's
Ein ausführlicher Beitrag über z-index-Eigenschaft in CSS und ihren Einsatz beim Aufstapeln von div's. Wichtig: nur relativ oder absolut positionierte Elemente können einen z-index besitzen. - Semantics in HTML
Das zukünftige Web sehen viele Web-Evangelisten als das Semantische Web. Doch was macht es aus? Und wie ist der Stand der Dinge? John Allsopp setzt sich mit dem Thema auseinander. - The Elements of Design Applied to the Web
Eine Übersicht von modernen Trends in Web Design und Prinzipen, welche die heutige Seitengestaltung ausmachen: Balance, Proportion, Rhythmus, Betonung, Einheit. - The 10 Biggest Mistakes Freelancers Make, and How to Avoid Them
Ein Übeblick von Fehlern, die Freiberuflern häufig unterlaufen: etwa nicht eingehaltene Deadlines und zu kleiner Preis für zu viel Arbeit. - Getting A Form's Structure Right
Ein sehr ausführlicher Beitrag über das effektive Design von komplexen Online-Formularen - mit vielen Beispielen und Erläuterungen zum Thema.
Design-Showcases, Inspiration
- muse | a collection of inspiration
Eine "frische" Design-Galerie von Drew Wilson. Zweck der Seite: nicht nur schicke Designs zur Schau zu stellen, sondern auch die Inspiration dahinter. - Showcase: WordPress CSS Gallery Theme
Ein Wordpress-Theme für Design-Galerien, wie man sie etwa aus einschlägigen CSS-Showcases kennt. Davon gibt es zwar mehr als genug, aber es ist schön, das Template in greifbarer Nähe zu haben. - Contact Forms Showcase
Die Galerie von Kontaktformularen enthält 30 Einträge. Christian Watson präsentiert 62 weitere Formulare sowie eine Galerie von Anmeldeformularen. - Yuxt - artist: typography_in_music_videos
Eine Galerie von Musik-Videos, in denen Typografie eine besondere Rolle spielt.
- MagWerk
Über 100 Seiten schicke Designs, Fotos und Interviews mit Designers und Illustratoren. Die September-Ausgabe des Onlinemagazins "encore".
- CMS Showcase
In CMS Showcase werden Designs nicht nach ihren Inhalten oder äußerer Darstellung sortiert, sondern nach der (Weblog)-Engine, die sie verwenden. - LogoLounge.Com Article Archive
Aktuelle Trends in Logo Design 2007 im Schnelldurchlauf. - typography - a photoset on Flickr
Eine Galerie von schönsten Schnitten und Schriftarten: Typografie in ihrer schönsten Form. Zugabe.
- Portfolio - a photoset on Flickr
Polaroid-Photos - zum Teil von Werbeplakaten und Printmaterialien. Exzellent zum Nachschlagen von "funktionierenden" Farbpaletten. - Idea Mapping Set - a photoset on Flickr
Wie erfasst man Ideen schriftlich auf einem Blatt Papier? Einige elegante Beispiel für sog. Mindmaps auf Flickr.
Der letzte Klick
- Content Aware Image Resizing
Im Laufe der letzten Jahrzehnte durften sich Seitenbesucher auf die statische Darstellung von Bildern gewöhnen, während Web-Autoren sich mit mangelhaften Möglichkeiten zur Aufbereitung von Bildern im Web zufrieden stellen sollten. Mit der neuen Technologie, entwickelt von Dr. Ariel Shamir und Dr. Shai Avidan, lassen sich Bilder dynamischer skalieren und verformen. Dabei verändern sich nicht nur die Dimensionen der Bilder, sondern auch der Inhalt der Bilder. Da Shai Avidan sofort bei Adobe eingestellt wurde, könnte die Technik schon in kommenden Versionen von Adobe Photoshop zum Einsatz kommen. - A Brief Message
Das Projekt bietet Designern ein Podium, mit dem sie ihre Botschaften, Kritiken und Gesichtspunkte zum Ausdruck bringen können. Die einzelne Voraussetzung: Designer müssen sich kurz fassen. Neben einem Bild darf die Botschaft höchstens 200 Zeichen enthalten. Das gleiche gilt auch für Kommentare. - HistoryShots Information Graphics - Prints
12 beeindruckende Ansätze der Datenvisualisierung. Weitere Ansätze. - Stop Motion Commercial
Eine Million Notizblockblätter, 96.314 Photos, 2.5 Terabyte Speicher, 4.9 km Film. Ergebnis: eine 60-Sekunden-lange Werbung für MTN.
Über Vitaly Friedman
Verwandte Artikel
(No Ratings Yet)
