Kategorien
Inspiration Webdesign

Volle Breitseite: Webdesign jenseits des klassischen Spaltenlayouts

Katrin Eythorsdottir / Manuela Müller

Etwas breitere Hauptspalte, schmale Sidebar, heller Hintergrund oder vielleicht ein wenig Textur. So oder ähnlich präsentiert sich das Gros der meisten Blogs und Firmen-Websites – vor allem im deutschen und anglo-amerikanischen Sprachraum. In Osteuropa und Russland finden sich dagegen häufiger Webdesigns mit üppigen Hintergrundbildern und horizontalen Layouts. Die Suche nach typischen Beispielen führte dann doch zurück in die Welt der Dot-coms, Dot-des und anderer Domains.


Panoramabilder, wie bei alexarts, kommen bei breiten Bildschirmen besonders gut.

Gibt es länderspezifisches Webdesign?

Kann man Webdesign tatsächlich nach Ländern unterscheiden, wie die Serie Global Web Design des drweb-Ablegers Smashing Magazine nahelegt? Und wenn ja – was macht die jeweilige Bildsprache oder das typische Webdesign eines Landes aus? An arabischen und russischen Websites fiel drweb-Praktikantin Katrin Eythorsdottir der lustvolle Einsatz von breiten Formaten und detailreichen Bildern ins Auge. Als Isländerin und Kunststudentin, außerdem Inhaberin eines Abschluss‘ in Produkt und Slow Design, fand sie die Frage, ob es in bestimmten Ländern charakteristische Merkmale im Webdesign gibt, spannend.

Auf der Suche nach Beispielen für eine Sammlung mit länderspezifischen Webdesign-Elementen, kam der erste Eindruck, dass horizontale Layouts typisch für Russland und Osteuropa sind, ins Wanken. Je mehr Seiten Katrin anklickte, desto weniger ließ sich die simple Formel: „Russische Websites verwenden vor allem horizontale Layouts“ bestätigen. Auch wenn auf russischen Websites häufiger opulente Bilder anzutreffen sind – wie bei alexarts – ist das noch lange nicht bei allen ru-Domains der Fall.

Spalten-Layouts beherrschen das Bild

Ernüchternde Feststellung nach tagelangem Stöbern: Zwei- und Drei-Spalten-Layouts beherrschen rund um den Globus das Webdesign – egal ob in Europa, Afrika, Asien, Australien oder Amerika. Dass horizontale, oder nennen wir es „Breitbild“-Layouts, die Ausnahme von der Regel sind, liegt wohl weniger in kulturellen Vorlieben als in der Anwenderfreundlichkeit begründet. Ganz gleich welcher Nationalität: Anwender sind daran gewöhnt, vertikal zu scrollen. Und wenn sie denn schon scrollen müssen, dann bitte möglichst nur in eine Richtung, nicht in beide. Dies gilt besonders für das Surfen mit mobilen Geräten.

Beispiele für horizontale und „Breitbild“-Layouts

Minimalismus gepaart mit Fotografie

Solange das Frontend anwenderfreundlich, sprich, mit möglichst wenig Scrollen, und auch auf kleinen Displays gut zu nutzen ist, haben horizontale Layouts dennoch ihren Reiz. Besonders in Kombination mit minimalistischem Design und ausdrucksstarken Fotos, sind horizontale Layouts ein echter Hingucker, wie die folgenden Beispiele zeigen.


Orengina: Gewöhnungsbedürftig, aber ästhetisch: Das Bild ist fix, die Navi lässt sich scrollen.


Ein Menü, ein Bild und etwas JavaScript – damit kommt FLOWmarket aus.


Beispiel Davidia: Gut geeignet für Möbelhäuser, Inneneinrichter und Architekturbüros


Klingt nach Casting-Agentur oder Filmproduktion, Medis ist jedoch die Website einer Tapas-Bar.


G2: Ähnlicher Ansatz, etwas anders aufgeteilt – für Restaurants ist dieses Layout ideal geeignet.

Cartoons mit JavaScript in Szene gesetzt

Mit ein wenig Java- oder ActionScript beziehungsweise Flash lassen sich horizontale Layouts ganz wunderbar automatisch scrollen – egal in welche Richtung. Angesichts des weiten Verbreitungsgrades von JS und Flash sollte man sich diese Möglichkeit aus reinem Purismus nicht von vornherein versagen, solange die grundlegenden und wichtigen Inhalte (in diesem Fall die Abfahrtszeiten der Busse) auch für Menschen mit Sehschwäche zugänglich sind.

Next Bus Dublin

Next Bus Dublin: So schön können öffentliche Fahrpläne aussehen …

Als Extra-Bonbon oder vielleicht als eine Form von Easter Egg flitzen bei diesem Design ein Rollerfahrer, gefolgt von einem Eichhörnchen, durchs Bild, wenn man das Browserfenster zusammenschiebt. Fluid Layout at its best :-).

… sogar bei schmalem Viewport.

Image-Slider einmal nur als Beiwerk für die Infos, die Illustrationen sind der Blickfang von Tijuana Flats.

Scrollen der dritten Art – einfach den Cursor aufs Bild halten bei Never mind the bullets.

Zwar kein Cartoon, aber dank JavaScript interaktiv ist die Website von tiny fluid grid.

Portfolios und Blogs mit „Überbreite“

Bei dieser Kategorie von Websites ist es schon bedeutend schwieriger, horizontale Layouts zu finden.

Je breiter der Viewport, desto mehr Arbeitsproben erscheinen auf Tokio Illustrators.

Bei derart detailreichen Arbeitsproben, kommt das Portfolio von Magomed Dovjenko ganz ohne sonstigen Schnickschnack aus.

Im Prinzip ist das zwar auch ein Spaltenlayout, doch die großzügige Titelgrafik und Typografie lassen diesen Blog von Marc Hinse sehr flächig erscheinen.

Durch die vielen nebeneinander floatenden Posts und den Header nutzen Zaum & Brown vor allem auf der Startseite die volle Breite, während auf den Unterseiten nur der Header über die gesamte Breite läuft.

Ziemlich voll, dennoch prägnant und gut zu erfassen ist diese in voller Breite mit 3D-Grafiken verzierte Landeseite für die iPhone-App Mathster.

Auch diese räumliche Gestaltung von Basil Gloo kommt durch die Nutzung der vollen Breite besonders gut zur Geltung.

Eure Kommentare zu Erfahrungen mit Webdesigns für bestimmte Länder und Kulturen, Eure Meinung zu vertikalen und horizontalen Layouts sowie Links zu weiteren Beispielen für gelungene „Breitbild“-Layouts sind sehr willkommen.

(tm)

Kategorien
Webdesign

25 nützliche Tools für Webdesigner

Webdesign und -entwicklung ist ein zeitintensives Metier. Neben dem eigentlichen Gestalten und Entwickeln, Absprachen mit Kunden und Kooperationspartnern, fressen Testläufe, Fehlersuche und Informationsrecherche die Zeit. Wie schön, dass die Community mit vielen kleinen Helferlein auf diesen Zeitdruck reagiert. Hier ist eine Sammlung nützlicher Tools und Referenzen, die das Leben als Webdesigner leichter machen.

Quick Links: Tools nach Themengruppen

CSS, Styleguides, Referenzlisten

csstender

Wenn Sie Ihre Websites schon heute mit CSS-3-Eigenschaften wie border-radius, canvas oder opacity gestalten möchten – und zwar so, dass Ihr Layout auch in nicht-CSS-3-konformen Browsern korrekt angezeigt wird, ist ecsstender (sprich extender) von Aaron Gustafson eine mögliche Lösung. Das Besondere an dem Tool ist der saubere CSS-Code, der ohne die üblichen Browser-Hacks und Stylesheet-Weichen auskommt.

Gustafsons Ziel ist es, modernes Webdesign mit CSS 3 zu fördern und den Einsatz von CSS3 von der Unterstützung der Browser-Hersteller unabhängig zu machen Allerdings: Das, was sonst von Hacks und Conditional Comments erledigt wird, ist nun die Aufgabe von JS-Extensions, was offenbar die Ladezeiten zu beinträchtigen scheint. Zum Experimentieren mit neuen Gestaltungsmitteln ist ecsstender aber allemal geeignet.

Download / Demo

Primer CSS
Klein und handlich: Primer CSS (was so viel heißt wie CSS-Grundierung) arbeitet online und hat nur eine Funktion: Per Copy & Paste können Sie von einer HTML-Seite das Markup beziehungsweise das Grundgerüst der Seite extrahieren und daraus automatisch ein separates Stylesheet mit IDs und Klassen erstellen. Das funktioniert ganz hervorragend, wenn Sie zuerst die Struktur in HTML anlegen und dann die Formen und Farben im Stylesheet zuweisen.

Screenshot

Style Guides für Anwenderschittstellen
Wenn Sie Unterstützung beim Verfassen eines Style Guide für Anwenderschnittstellen benötigen, werden Sie auf dieser Seite fündig: User Interface Style Guides bietet Hilfe und Orientierung durch zahlreiche Beispiel-Style-Guides großer Internetauftritte von Firmen, Nachrichtenagenturen und Rundfunkanbietern wie zum Beispiel der BBC Style Guide. Auch interessant: Erläuterungen zu Anwenderschnittstellen-Richtlinien und Style Guides für Web-Autoren (Editorial Style Guide) beziehungsweise das Erstellen von Texten fürs Web.

Screenshot
Unicode Codepoint Chart
Eine sehr übersichtliche Online-Referenz für Symbole und Sonderzeichen bietet Unicode Codepoint Chart. Die alphabetisch geordnete Liste bietet Zeichen für internationale Sprachen von Arabic über Basic Latin bis zu Tai Lee sowie Zeichensätze für Mathematische Operatoren, Pfeile und vieles mehr. Ein Klick auf das gewünschte Symbol oder Zeichen öffnet eine Seite mit Detailinformationen nebst einer Browser-Test-Seite und den Codierungen und Zeichensätzen (HTML Entitites, UTF-8, UTF-16, UTF-32, ISO-8859-8 und andere).

ASCII Table
Noch umfassender, als das vorhergehende Tool und vor allem interaktiv gestaltet kommt die Online-Referenz ASCII Table daher. Ein unverzichtbares Nachschlagewerk für jeden Webdesigner.

ASCII Table

Tastaturkürzel und Befehle für Linux
Aus den knapp 3.000 verfügbaren Befehlen für die Administration von Linux haben Stan und Peter Klimas unter Linux Newbie Guide eine systematisch geordnete Auswahl der gebräuchlisten Shortcuts und Befehle erstellt.
Linux Newbie Guide

99 Abkürzungen aus dem Online Business
Ein alphabetisch sortiertes Glossar mit 99 der gängigsten E-Commerce-Abkürzungen hilft Ihnen auf die Sprünge, wenn Sie mal wieder eine kryptische Nachricht von Ihrem Server-Administrator oder einem Kunden aus dem Marketing bekommen. Schlagen Sie’s nach. Unter 99 Ecommerce Acronyms finden Sie – wie der Name schon sagt – 99 Abkürzungen aus dem Online Business – von Marketing über Informationstechnik, Suchmaschinenoptimierung, Webentwicklung, -design und analyse bis hin zu Logistik.

Typografie und Layout

AltFontPrev
Ein einfaches, aber wirkungsvolles JavaScript-Bookmarklet ist AltFontPrev. Mit diesem Tool können Sie die auf jeder beliebigen Website verwendeten Schriftarten ermitteln. Sinn und Zweck: So können Sie gewährleisten, dass Ihr Layout auch dann gut aussieht, wenn bestimmte Fonts auf dem System eines Anwenders nicht installiert sind. Ohne den Quellcode zu durchforsten, sehen Sie auf einen Klick, welche Schriften im Font-Ordner der Website enthalten sind. Sie können sogar eine benutzerdefinierte Schrift festlegen.

Screenshot

Web Font Specimen
Mit Web Font Specimen können Sie sehr bequem überprüfen, wie Schriften laufen. Sie können Überschriften in verschiedenen Fonts nebeneinander darstellen lassen und den Effekt vergleichen. Zudem generiert das Online-Tool ganze Textblöcke und Punktaufzählungen, so dass Sie sehen können, wie die gewählte Schriftart sich auf das Gesamtbild der Website auswirkt.

Screenshot

Typografix
Mit Typografix können Sie Webtypografie direkt korrigieren. Das Script Auslassungen und Zitate. Außerdem fügt es automatisch  die Tags für  <script>, <pre> und <code> ein. Der en-Gedankenstrich wird zum Beispiel immer dann eingefügt, wenn Typografix einen von Leerzeichen eingeschlossenen Bindestrich findet; während zwei aufeinander folgende Bindestriche durch den em-Gedankenstrich ersetzt werden.Typografix ist mit C# geschrieben und benötigt den Windows Installer nstaller 3.1 und das .NET Framework 3.5 SP1.

Screenshot

#grid
Was im Printdesign schon seit den 1930er erfolgreich eingesetzt wird, ist im Webdesign noch relativ neu: Ein Gitternetz, mit dem sich Text und Bilder in regelmäßigen, optisch ansprechenden Abständen ausrichtgen lässt. Ein entsprechendes Hilfsmittel bietet #grid. Das Tool fügt Gitternetzlinien auf einer Webseite ein, die sich per Tastaturkürzeln verschieben sowie ein- und ausblenden lassen.

Screenshot

Online-Lineale
Nicht schön, aber praktisch: Messen muss man immer wieder, wenn man ein neues Layout anlegt. Ganz flott geht das mit einem Online-Lineal. Fünf verschiedene Lineale – für jede gängige Plattform von Mac bis Ubuntu eines.

 Five Awesome On-Screen Rulers

CSS Usage
Das Firebug-Addon CSS Usage untersucht Websites auf die verwendeten CSS-Regeln. Per Mausklick können Sie komplexe Websites durchsuchen. Öffnen Sie dazu die erste Seite, die Sie untersuchen möchten und klicken Sie auf  „Scan“ auf dem FIrebug-Reiter „CSS Coverage“. Bei Seiten mit Ajax oder DHTML sollten Sie so viel möglich divs, Pop-ups und Taben öffnen und erneut auf „Scan“ klicken. Wiederholen Sie das auf allen zu untersuchenden Seiten des Internetauftritts. Mit jedem erneuten Klick auf „Scan“, werden die mit der Site verbundenen CSS-Dateien zur Analyse hinzugegefügt und die Anzahl der auf der zu untersuchenden Seite angewandten CSS-Regeln angezeigt.

Juicer: CSS-Stylesheets und JS-Scripts packen
Ein relativ neues Tool zum Komprimieren und Packen von CSS- und JavaScript-Dateien ist Juicer. Während es für die Entwicklung von Style Sheets und Scripts jede Menge Veröffentlichungen zur Best Practise gibt, bleibt das Einbinden dieser Dateien in eine Website relativ im Dunkeln – oft zum Nachteil der Performance, wenn etwa CSS-Code auf viele einzelne Dateien aufgeteilt wird. Mit Juicer lassen sich all diese Dateien und zusätzlichen Dokumentationen komprimieren und zusammenfassen, so dass sich später auf dem Server im Idealfall jeweils eine einzige kompakte CSS- und JS-Datei befindet.

Farbwähler, Farbreferenzen

Interkulturelles Farben-Rad
Welche Bedeutung Farben in den verschiedenen Kulturkreisen dieser Erde zugeschrieben wird, können Sie auf Colours In Cultures an einer kreisrunden Infografik ablesen. Infografiken sind nämlich die Spezialität von David McCandless, der diese beachtlich komplexe Farb-Referenz für sein Buch Information is Beautiful kreiert hat.
Colours In Cultures

Farbschemata erstellen
Mit dem Color Scheme Designer können Sie auf sehr intuitive Art fein aufeinander abgestimmte Farbschemata erzeugen. Je nach Voreinstellung können Sie Ton-in-Ton-Abstufungen, komplementäre, tetradische und andere Zusammenstellungen wählen.

Color Tools für Webworker
Explizit für Webmaster und Webdesigner ist diese Kollektion von zwölf Online-Color-Tools zur Farbwahl, dem Ermitteln von websicheren RGB-Werten sowie dem Mischen und Zusammenstellen von Farben nach verschiedenen Aspekten zusammen gestellt.

Dateien konvertieren, Drucken & Testen

Videos konvertieren
Miro Video Converter ist ein einfach anzuwendendes und absolut frei verfügbares Werkzeug zum Konvertieren von Videos in MP4, WebM (vp8), Ogg Theora oder für Android, iPhone und mehr

Miro Video Converter

Modernes Dokumenten-Management mit AurigaDoc
AurigaDoc ist ein Java-XML-XSL basiertes Tool mit dem XML-Dokumente schreiben und in andere offene Formate wie HTML (Einzel- und Mehrfachseiten), DHTML, PDF, PostScript, Formatting Object(FO), RTF, Java Help and HTML Help(.chm). Achtung: AurigaDoc ist kein XML-Editor. Das Tool soll vielmehr die medienneutrale Datenhaltung fördern. Content wird grundsätz im XML-Dokument erstellt und bearbeitet und anschließend je nach Zweck in einem anderen Format ausgegeben – etwa als HTML fürs Internet oder als PDF zum Druck von Büchern, Broschüren und Magazinen oder als HTML-Help/Java Help für Online-Hilfen.

AurigaDoc

Printliminator
Im angeblich papierlosen Zeitalter wirkt das Bookmarklet  The Printliminator fast ein wenig anachronistisch. Dennoch werden lange Texte nach wie vor lieber auf Papier als am Bildschirm gelesen. Wenn Sie zu den Zeitgenossen gehören, die Dokumentationen gerne ausdrucken, wird Ihnen dieses Tool gefallen, mit dem Sie überflüssige Grafiken und Werbung mit ein paar Klicks entfernen und den interessanten Text für den Druck optimieren können.
The Printliminator

ProtoFluid – Prototyping für Web-Apps
Nicht nur für Web-Anwendungen, auch für mobile Versionen von HTML5- und CSS3-Websites eignet sich der Online-Service ProtoFluid ganz hervorragend zum Testen und Optimieren. Mit dem Tool können Sie Ihre Apps und Websites in einer Vorschau testen – so wie sie auf auf verschiedenen mobilenen Geräten angezeigt würde. Neben bestimmten Geräten wie iPhone und iPad können Sie Display-Größen manuell vorgeben, was für die vielen verschiedenen Android-basierten Geräte interessant ist. Zudem lässt sich die Orientierung des Geräts – Hochformat oder Querformat – einstellen und die Darstellung Ihrer App in dieser Ansicht testen.

HTML5 and CSS3 Web App Prototyping

Lesezeichen, Shortcuts & Websites administrieren

Quix
Wäre es nicht schön, eine Befehlszeile im Browser zu haben, mit der sie Zugriff auf Tastaturkürzel und Befehle für Ihre Routineaufgaben als Webmaster, Administrator oder Blogger haben und so Ihren Arbeitsablauf schneller und komfortabler gestalten? Genau das bietet Ihnen Quix. Das Tool ist ein sehr pfiffiges und erweiterbares Bookmarklet, mit dem Sie nicht nur Lesezeichen aufrufen, sondern tägliche Routineaufgaben schneller erledigen können, wie zum Beispiel HTML-5-Validierung, das Kürzen und Versenden von Links und vieles mehr. Eine Übersicht der verfügbaren Befehle finden Sie hier.

Screenshot

WP-Toolbar bookmarklet
Ähnlich praktisch allerdings rein auf WordPress zugeschnitten ist das WP-Toolbar bookmarklet. Einmal installiert, blendet ein Klick aufs Bookmarklet eine zusätzliche Symbolleiste im Browser-Fenster ein, über die Sie das WordPress-Backend aufrufen, direkt zu den Kommentaren, zur Benutzerverwaltung und anderen Bereichen im Backend springen können. Direkter Zugriff auf einen bestimmten Post ist zwar nicht möglich, dennoch spart das Booklet einige Klicks bei der täglichen Arbeit. Über ein zusätzliches GreaseMonkey script wird die Symbolleiste automatisch geladen, wenn Sie eine bestimmte Website aufrufen.

Screenshot

Gpanion
Schnellen Zugriff auf beliebte Google-Apps bietet Gpanion. Wenn Sie langwieriges Klicken und Suchen nervt, installieren Sie dieses Tool, mit dem Sie eine Art Dashboard installieren können, dessen grafische Oberfläche Ihnen guten Überblick und direkten Zugriff auf Ihre Lieblings-Apps bietet.

Linkifikation
Linkification verwandelt Textlinks in echte anklickbare Hyperlinks. Das Add-on für Firefox ist zwar frei verfügbar, aber eine Spende wird vom Entwickler gerne gesehen.

Die Liste erhebt keinen Anspruch auf Vollständigkeit. Wir freuen uns auf Links zu weiteren neuen und nützliche Tools in den Kommentaren.

(tm)

Kategorien
Webdesign

Frage an die Community: Player in Website integrieren – aber wie?

Man kennt das Problem mit Music-Playern auf Web-Seiten: Falls die Seite nicht in Flash gelöst ist, fängt der Song wegen HTTP-Request immer wieder von vorne an. Lässt sich das intelligenter abschalten als mit den mir bereits bekannten Methoden über PopUps oder iFrames?

Soweit ich weiß, gibt es zwei Möglichkeiten, die meiner Meinung nach aber alle nicht schön sind, entweder das Pop-Up oder iFrame

  • PopUps werden heute viel geblockt,
  • iFames sind meiner Meinung nach veraltet.

Derzeit arbeite ich mit einem Kunden zusammen, der eigene Loops produziert und diese an Firmen verkauft. Der Kunde möchte natürlich, was ich verstehen kann, auf seiner Web-Seite einen Song laufen lassen, was seine Arbeit unterstreichen soll.

Nun zur meiner Frage: Könnt Ihr mir eine Möglichkeit vorschlagen, einen Player in eine Seite zu integrieren? Kann man den HTTP-Request umgehen (was für eine blöde Frage..)?

Auf rettende Antworten und Lösungen in den Kommentaren hofft dennoch ein momentan ratloser Dr.-Web-Leser :-).

(mm),

Kategorien
Webdesign

Einfach köstlich – 6 Tipps für gut gemachtes Gastro-Webdesign

Paulo Canabarro, Manuela Müller, Christina Sitte

Obwohl es selbst in jeder x-beliebigen Kleinstadt eine Riesenauswahl an Restaurants gibt, sind wirklich gute Lokale nicht so üppig gesät. Fast noch dünner ist die Ausbeute gut gemachter Restaurant-Websites. Dabei könnte es doch relativ einfach sein – bieten die Themen Essen & Trinken beziehungsweise Küche & Koch jede Menge schöner Bildmotive und wunderbare Farbkombinationen.


Urban Influence setzt auf witzige Bildideen und pfiffige Animationen für interaktive Websites.

Diese Sammlung von Restaurant-Websites aus verschiedenen europäischen Ländern, den USA, Australien und Japan beleuchtet, worauf es bei Internetauftritten für Gastro-Betriebe in punkto Webdesign und Usability ankommt.

1. Aufs Angebot neugierig machen mit Flash-Filmen und interaktiven Elementen

Was bei anderen Internetauftritten bisweilen störend wirkt, bei Gastro-Websites sind sie ganz hervorragend einsetzbar: Flash-Filme, die User zum Klicken animieren und so ins Angebot hineinziehen.


Frontierroom (Seattle/USA) hat eine gut gelungene Kombination aus animierter Navigation und interaktiven Elementen auf den Unterseiten, die Lust machen, sich durch das komplette Angebot zu klicken.


Das Cour des Loges (Lyon/Frankreich) lockt mit einer Flash-gesteuerten Dia-Show aus stimmungsvollen Fotos zum Betreten seiner virtuellen und im zweiten Schritt auch der realen Räume.


Lust auf kühl perlendes Bier macht die Flash-Animation des Berliner Biergartens Burg am See.


Diabolisch kommen die Flash-Filme von Pekado in Spanien daher. Nette Idee: Die Speisekarte in Form animierter Tarot-Karten.


Was für Spielernaturen und Anhänger virtueller Welten, ist die Website der US-amerikanischen Grillhaus-Kette Buffalo Wings.

2. Das Besondere des Restaurants und ihrer Betreiber herausstellen

Was im Prinzip auf jede Firmen-Website gehört, gilt für Restaurants besonders: Angesichts der großen und unmittelbaren Nähe zu anderen Mitbewerbern in einer Stadt oder sogar einem Viertel, sollte die oftmals stiefkindlich behandelte Seite „Über uns“ mit ganz besonderer Sorgfalt gestaltet werden.

Die möglichst inidividuelle und gut getexte Firmenphilosophie sollte durch das passende Design unterstrichen werden.


Die Motivation von Eros Ouzeri, lebenslange Liebe zum Essen, zur Familie und zum Leben, drückt sich auch im sorgfältigen Webdesign mit schönen Fotos und aufwändiger Typografie aus.


Ein Feeling „wie bei Oma“ wollen die Zwei vom Sorgenfrei Berlin ihren Gästen bieten. Das spiegelt sich auch im Retro-Design des Internetauftritts.


Auf voluminöse Leibspeisen – illustriert durch den Umfang der eigenen Bäuche – setzen die (Küchen)Chefs des Carraba’s.


Das Motto „mit einfachen, Zutaten gut kochen“ kommt bei Ajanta durch den Kontrast der farbenfrohen asiatischen Gewürze zum monochromen Wallpaper und dem Familienfoto im 60er-Jahre-Stil gut zur Geltung.


Eine Vorliebe für Schwarz und gehobene galizische Küche reklamiert Gallo de Oro für sich.

3. Usability heißt bei Restaurants vor allem komfortable Online-Reservierung

Echtes Entwicklungspotential besteht bei deutschen und europäischen Websites in der benutzerfreundlichen Online-Reservierung. Auf dem Gros der besuchten Seiten gibt es lediglich herkömmliche Kontaktformulare, die eine Bestätigung per E-Mail oder ein zusätzliches Telefonat erfordern. Auf amerikanischen Websites sind Online-Buchungssysteme dagegen wesentlich weiter verbreitet.


In Deutschland noch nicht selbstverständlich: Ein Formular für Online-Reservierung wie bei XII Apostel in Köln.

Im service-orientierten Amerika finden sich solche Reservierungsmöglichkeiten wesentlich öfter, wie hier bei Mortons, die das Formular prominent im Header der Website eingebunden haben. Lästiges Suchen und Klicken durchs Menü entfällt.

Professionelle Online-Reservierungssysteme externer Anbieter nutzen

Um sich selbst nicht mit einer komplizierten Datenbank und der Verwaltung einer Online-Reservierung herumschlagen zu müssen, können Gastronomen auf einen professionellen Buchungsservice zugreifen. Vorteile bietet das sowohl für Gäste als auch für Gastronomen: Während potentielle Restaurantbesucher rund um die Uhr buchen können, gewinnen Gastronomen wertvolle Kundendaten und laut diverser Studien mehr Gäste als ohne Reservierungssystem.


reserviermich.de – die deutsche Antwort auf den amerikanischen Vorreiter …

Open Table, der inzwischen auch in Europa seine Dienste anbietet.

Klassische Formulare anwenderfreundlich gestalten

Wenn Ihren Kunden das zu teuer ist, sollten Sie bei der Gestaltung des Reservierungsformulars mit HTML, CSS und jQuery nicht nur auf formschöne Gestaltung, sondern auch auf alle relevanten Felder wie Platzwunsch im Raucher- oder Nichtraucherbereich oder aber die Angabe von Lebensmittelallergien achten.

Optionsschaltflächen für Sonderwünsche sind nutzerfreundlich und ein Pluspunkt für das jeweilige Restaurant.

4. Gute gemachte Menüs in jeder Hinsicht

Ein weiterer Aspekt für erfolgreiche Restaurant-Websites sind übersichtliche und interessant gestaltete Menüs. Weniger kann dabei wie so oft im Leben deutlich mehr sein. Verzichten Sie auf überladene Menüs oder komplett animierte Navigationssysteme. Eine klare Struktur mit einer zentralen Menüleiste oben oder einem seitlichen Menü hat den Vorteil eines hohen Bekanntheitsgrades – auch bei Nutzern, die mit dem Internet weniger vertraut sind.


Einfach, aber gut: Die Navigation des milk’ed café ist ebenso übersichtlich wie ansprechend.


Gut gemeint, aber doch daneben – die komplett animierte Navigation von Tijuna Flat ist ein wenig zuviel des Guten.

Menü à la carte

Nicht sehr ausgefallen, aber durchaus verlockend – Sean’s Speisekarte mit Fotos.

Schöne Spielerei: Gallo de Oro präsentiert die Gerichte als Memory-Karten, die sich per Mausklick in rotierende 3D-Würfel verwandeln.

5. Appetitanregende Farben

Bei der gezielten Suche nach Gastro-Websites fällt die hohe Dichte von rot-organgen Hintergründen auf. Besonders amerkanische Restaurant-Ketten setzen auf die als appetitanregend geltenden Farben Rot, Orange und Gelb.


Ponderosa


Bones


Outback


Oporto

Appetitzügelnde Farben und Formen …


Andere Länder, andere Farben: Sushinomidori, Japan


10 Tipps, wie man es nicht machen sollte, scheint das Motto der Mittagstisch-Übersicht Freiburg zu sein.


Omeros macht mehr Lust auf Urlaub als auf Essen. Blau gilt als appetitzügelnd.

6. Der Weg zum Restaurant

Was nützt die schönste Website, wenn den potentiellen Besuchern nicht klar ist, wo das Restaurant Ihres Kunden zu finden ist? Bei einem Restaurant, dass existentiell auf regen Publikumsverkehr angewiesen ist, darf eine Navigationshilfe im Angebot der Website nicht fehlen.


Eher für den US-amerikanischen Markt relevant – so genannte Restaurant-Locator.


Für deutsche Verhältnisse durchaus angemessen: Schön gemachte Anfahrtsskizze passend zum übrigen Webdesign.

Interaktive Rootenplaner bieten mehr Komfort

Noch mehr Komfort bieten interaktive Routenplaner, die den Weg zum Lokal des Kunden exakt berechnen. Den passenden Code dafür bieten verschiedene Online-Rootenplaner wie Google Maps oder Map24 an.


Der frei verwendbare Routenplaner von NAVTEQ lässt sich einfach in eigene Projekte einbinden.

Weitere Tipps zum Erstellen von Anfahrtsskizzen bieten die Dr.-Web-Beiträge Google-Maps mit Straßenverbindungen und Tipps und Tricks mit Open Street Map.

Fazit

Ähnlich wie beim Kochen gilt es beim Design von Gastro-Websites, qualitativ hochwertige Zutaten ohne viel Brimborium gekonnt zu verarbeiten. Hochwertiges Bildmaterial, appetitanregende Farben und ein klar durchdachtes Konzept sind besonders wichtig, denn das Auge isst sozusagen mit.

Eine ständig aktuell gehaltene Speisekarte, die zudem pfiffig präsentiert ist, sowie ein effizientes Tischreservierungssystem runden eine gut gemachte Gastro-Website ab.

(mm), ™

Kategorien
Webdesign

Dr. Web Newsletter – Reinkarnation in neuem Gewand

Bis zu seiner Grablegung vor fast genau zwei Jahren war der Dr. Web Newsletter (DWN) äußerst beliebt. 303 mal begeisterte er mit Fachinformationen, Tipps und Tricks rund ums Worken im Web den Großteil seiner Leserinnen und Leser. Ein anhaltender Strom von E-Mails zeigt uns, dass der Verstorbene nach wie vor vermisst wird und seine Wiederbelebung sehr erwünscht ist.

Kurz vor Ostern nun die frohe Botschaft der Wiederauferstehung des DWN – wenn auch in neuem Gewand beziehungsweise anderer Sprache: Dr. Web Magazin proudly presents the Smashing Newsletter.

In englischer Sprache präsentiert der kompakte E-Mail-Newsletter kurze, knackige Beiträge zu exklusiven Tipps und Tricks für Designer, Web-Entwickler und -Administratoren, garniert mit gleichermaßen Lachmuskel-trainierenden wie inspirierenden Fundstücken aus dem Netz, damit der Arbeitsalltag nicht zu öde wird. Einmal pro Woche, voraussichtlich dienstags, wird der neue Informationsdienst versandt.

Den DWN hatten wir angesichts der massiven Probleme mit Spam-Sperrlisten und des infolgedessen zu kleinen Kreises an tatsächlich erreichten Abonnenten einstellen müssen. Die Kooperation mit dem Smashing Magazine und der Zugriff auf dessen großen weltweiten Leserkreis erlaubt uns nun, erneut viel Energie und Zeit in einen exklusiven und informativen Newsletter für Sie zu investieren.

Wir wissen zwar, dass viele unter Ihnen Informationen in deutscher Sprache bevorzugen. Dies gibt die Reinkarnation des DWN dann leider doch nicht her. Lieber einen Newsletter in englischer Sprache als gar keinen, dachten wir uns. Aber – vielleicht kommt ja an Pfingsten, die Gabe der Zungen (spontane Mehrsprachigkeit) über die „Apostelschar“ ;-).

Jetzt Jünger werden und den Smashing Newsletter abonnieren

Machen Sie die Probe aufs Exempel und geben Sie dem Nachfolger des Dr. Web Newsletter eine Chance. Mit dem folgenden Formular können Sie den Newsletter abonnieren. Selbstverständlich werden wir Ihre Daten vertraulich behandeln und nicht an Dritte weitergeben. Einfach Ihre E-Mail-Adresse eintragen, gewünschtes Format anklicken und abschicken. Fertig.

Abonnieren Sie den Smashing Newsletter JETZT!



Falls das Formular in Ihrem Feedreader nicht funktioniert, rufen Sie den Artikel bitte in Ihrem Browser auf. Bitte entschuldigen Sie den Umstand!

Der Newsletter ist und bleibt kostenfrei. Natürlich können Sie ihn jederzeit abbestellen. Wir behandeln Ihre Daten wie gesagt vertraulich, das heißt wir werden Sie nur zum Versand des E-Mail-Newsletters verwenden. Spam bekommen Sie von uns nicht.

Viel Spaß und Erfolg mit dem Smashing Newsletter!

Kategorien
Webdesign

75 tolle Dual-Monitor Desktop Wallpapers

Heute präsentieren wir eine Sammlung mit Wallpapern für Dual-Monitor-Systeme. Solche Dual-Displays werden immer beliebter, weil sie sehr praktisch sind und effektives Arbeiten in mehreren Fenstern nebeneinander ermöglichen. Für Leute, die zahlreiche Programme gleichzeitig im Auge haben müssen, sind sie fast unverzichtbar. Und hier kommt die passende Dekoration dafür.

Die Sammlung enthält 75 Dual-Monitor-Wallpaper. Gesammelt überall im Web. Ein Klick auf einen Screenshot führt zum Original.

Space And Planets

Deep Sky
Screenshot
Resolution: 3200 × 1200 px

Horsehead Nebula
Screenshot
Resolution: 2560 × 1024 px

Aurora
Screenshot
Resolution: 2560 × 1024 px

Prodigium
Screenshot
Resolution: 3360 × 1050 px

Last Day
Screenshot
Resolution: 2560 × 1024 px

Nature’s Beauty

Blue Sky
Screenshot
Resolution: 3200 × 1200 px

Umbrella
Screenshot
Resolution: 2560 × 1024 px

Crashing Waves At Sunset
Screenshot
Resolution: 2048 × 768 px

Nature wallpaper
Screenshot
Resolution: 3200 × 1200 px

Golfing The Day Away
Screenshot
Resolution: 3200 × 1200 px

Reptile
Screenshot
Resolution: 3200 × 1200 px

Clouds
Screenshot
Resolution: 3200 × 1200 px

Sea
Screenshot
Resolution: 3200 × 1200 px

Beautiful Sky
Screenshot
Resolution: 3200 × 1200 px

The Birth Of The Moon
Screenshot
Resolution: 2560 × 1024 px

Car Wallpaper
Screenshot
Resolution: 4226 × 1703 px

Retro World
Screenshot
Resolution: 2000 × 625 px

Christmas Comes Early
Screenshot
Resolution: 3200 × 1200 px

Gondolas at the Rialto
Screenshot
Resolution: 2750 × 1717 px

Plant
Screenshot
Resolution: 2560 × 1024 px

Green Simplicity
Screenshot

Abstract And Weird

Inferno
Screenshot
Resolution: 2680 × 1050 px

Thought that hurts
Screenshot
Resolution: 3200 × 1200 px

Paper Art
Screenshot
Resolution: 3200 × 1200 px

Angry
Screenshot
Resolution: 3200 × 1200 px

Azure Eye
Screenshot
Resolution: 2560 × 1024 px

Dual Neurons
Screenshot
Resolution: 3200 × 1200 px

Teal Space Sea
Screenshot
Resolution: 2000 × 750 px

Gravity Well
Screenshot
Resolution: 2680 × 1050 px

Hot vs Cold
Screenshot
Resolution: 2560 × 1024 px

Bright Ideas
Screenshot
Resolution: 2560 × 1024 px

Rtx Wallpaper
Screenshot
Resolution: 2560 × 1024 px

Pretty Bird
Screenshot
Resolution: 2560 × 1024 px

Games And Movies

Dual Wallpaper
Screenshot
Resolution: 2560 × 1024 px

Spiderman Contra Octopus
Screenshot
Resolution: 3200 × 1200 px

Final Fantasy Yuna
Screenshot
Resolution: 3200 × 1200 px

Game Wallpaper
Screenshot
Resolution: 3200 × 1200 px

Game Wallpaper
Screenshot
Resolution: 3200 × 1200 px

Dinosaurs
Screenshot
Resolution: 3200 × 1200 px

Horror Girl
Screenshot
Resolution: 3200 × 1200 px

Game Wallpaper
Screenshot
Resolution: 3200 × 1200 px

Mario Luigi and Others
Screenshot
Resolution: 2560 × 1024 px

Diablo III
Screenshot
Resolution: 3200 × 1200 px

Dual Screen Yoko
Screenshot
Resolution: 3200 × 1200 px

Light Sabers
Screenshot
Resolution: 3200 × 1200 px

Angry Orc
Screenshot
Resolution: 3200 × 1200 px

World of Warcraft
Screenshot
Resolution: 3200 × 1200 px

Wolverine
Screenshot
Resolution: 2560 × 1024 px

Horrific
Screenshot
Resolution: 2560 × 1024 px

Halo Soldier
Screenshot
Resolution: 2560 × 1024 px

Dual3 695111
Screenshot
Resolution: 2560 × 1024 px

Dual Monitor Game
Screenshot
Resolution: 2560 × 1024 px

Lucan
Screenshot
Resolution: 3200 × 1200 px

The Red Arrows
Screenshot
Resolution: 3200 × 1200 px

Miscellaneous

Western Walls
Screenshot
Resolution: 2880 × 900 px

Sheep Dual Display
Screenshot
Resolution: 3200 × 1200 px

On the Grass
Screenshot
Resolution: 2400 × 900 px

Cartoon
Screenshot
Resolution: 2560 × 1024 px

Firefox
Screenshot
Resolution: 2560 × 1024 px

Weitere Sites mit Dual-Screen-Wallpapers

(al), (sl)

Kategorien
Webdesign

Dr. Web Autorenwettbewerb – die Entscheidung

Aus den Einsendungen zum Wettbewerb hatten wir 13 Beiträge ausgewählt und über die vergangenen Tage hinweg zur Diskussion gestellt. Nicht berücksichtigt wurden zu lange Beiträge oder solche deren Themen nicht passten. In umgekehrter Reihenfolge sind erschienen:

  • T.W.a.T., oder: Wie ich den inneren Schweinehund bändigte!
    Michael Sahm
  • HTML Newsletter Crashkurs – Das perfekte Layout
    Janina Nikoley
  • Arbeiten in Remote Teams
    Michael Schwarz
  • Ich weiß, wo du wohnst – IP-GeoLocation
    Christian Harms
  • Schönere Webseiten mit CSS 3
    Maximilian Zimmer
  • Das Kaufhausbummeldesign – Wie der Alltag Ihnen bei Design-Ideen hilft
    Björn Dammann
  • Das Schweigen der Bilder: Barrierefreies Internet – Mehr Untertitel für Youtube
    Katrin Fegert
  • „…und immer an den Leser denken“ – Schreibe im Netz
    Johannes Klockenhoff
  • Wissen und Inspiration frei Haus
    Sven Read
  • Die CMS-Falle
    Philip Bolting
  • Das jQuery live Event
    Michael Dietz
  • Grafikdesigner, Mediengestalter, Webdesigner und andere Berufskrankheiten
    Jenny Habermehl
  • Rendering von Vektorgrafiken: Die Mitte finden
    Markus Schlegel

Einige Kurzartikel haben für Diskussionen unter den Lesern gesorgt. Allerdings ist die bloße Menge der Kommentare kein ausreichendes Kriterium zur Kür eines Siegers. Ebenso verhält es sich mit dem Traffic, populäre Themen wären immer vorn. Letztlich geht es darum, dass Interesse der Leser zu wecken und Informationen fachgerecht aufzubereiten und darzustellen. Wie immer ist es nicht ganz einfach die Preisträger zu bestimmen. Schließlich gehen die Meinungen zu den einzelnen Artikeln nicht selten auseinander.

Die Gewinner

Entschieden haben wir uns für Maximilian Zimmer als Gewinner des Apple’schen Mac Minis. Sein Artikel „Schönere Webseiten mit CSS 3“ bereitet das Thema gut auf, liefert einen Überblick für die Praxis und ist verständlich geschrieben.

Platz 2 belegt Philip Bolting mit „Die CMS-Falle“. Sein Artikel beleuchtet ein Problem aus der Sicht des „Normal-Webdesigners“. Lohn der Arbeit ist ein Asus Eee PC 1101HA 11.6 Zoll Netbook.

Die übrigen 11 veröffentlichten Teilnehmer erhalten jeweils ein Buch (Einstieg in TYPO3, Design und Layout verstehen und anwenden, Das Grafikdesign-Buch, The Smashing Book, Surprise me, Geometric: Das Buch der Muster und andere). Die Preise werden von Christiane Rosenberger verteilt, die in Kürze E-Mails heraus schicken wird. Das Dr. Web Magazin und das Team bedanken sich bei allen die Artikel eingereicht, diese gelesen oder kommentiert haben!

(sl), (cr)

Kategorien
Webdesign

Das Smashing Book ist erschienen und lieferbar!

Da ist es nun, das funkelnagelneue Smashing Book. Vor vielen Monaten und in mehreren Beiträgen bereits angekündigt, nun ist es da. Besser noch: Sie können das englischsprachige Smashing Book jetzt und sofort im Shop kaufen. Und übrigens, nur dort. Die Lieferzeit innerhalb Deutschlands beträgt rund 3 Tage. Ausgeliefert wird ab Berlin.

Screenshot

Das Smashing Book handelt in englischer Sprache vom modernen Web-Design. Es zeigt bewährte Vorgehensweisen in Programmierung, Usability und Optimierung. Es untersucht, wie man erfolgreich User-Interfaces und Marketing-Grundsätze zur Steigerung der Umsätze nutzt. Es zeigt, wie man das Beste aus Typografie und Farbe herausholt, so dass am Ende intuitive und effiziente Web-Designs stehen. Und schließlich werfen wir einen Blick hinter die Kulissen des Smashing Magazines.


Paperback, 312 Seiten, farbige Illustrationen und Abbildungen auf gestrichenem Papier. Versandkostenfrei innerhalb Deutschlands. Reduzierte Versandkosten in alle übrigen Länder. 30 Tage Geld-zurück-Garantie.

Das erste Kapitel kann man auch kostenlos als PDF herunterladen: Chapter 1: User Interface Design in Modern Web Applications.

Ein Wort noch an alle, die das Buch im Vorwege mit 20% Rabatt bestellt haben. Die Vorbestellungen sind seit vorgestern auf dem Weg zu ihren jeweiligen Empfängern. Und ja, wir wissen, dass wir zu lange gebraucht haben. Es tut uns leid. Wir sind ein kleines Design Magazin, kein großer Verlag. Logistik und Kontakte haben wir erst aufbauen müssen. Immerhin, niemand bekam das Buch preisgünstiger, schneller und konnte vorab das Probekapitel einsehen. Aber genug der Entschuldigungen, beim nächsten Mal klappt alles besser.

Und was gibt es für das Geld?

Das Buch enthält 312 Seiten und 10 Kapitel. Seine Größe beträgt 21 × 14 cm. Es ist ein Paperback und es wurde komplett in Farbe auf seidenmattem Bilderdruckpapier gedruckt. Der Versand innerhalb Deutschlands ist kostenfrei.

Die Autoren und Kapitel sind:

Alessandro Cattaneo (redigiert von Jon Tan), Andrew Maier, Chris Spooner, Darius A Monsef IV, David Leggett, Dmitry Fadeev, Jacob Gube, Kayla Knight, René Schmidt, Steven Snell.

021

The Art And Science Of CSS-Layouts
In modern web design, developing a modern site’s layout is a craft that requires patience, precision and a solid knowledge of CSS. While design elements create a flow and the hierarchy in the design, web layouts build up a skeleton of the site, providing a space and structure where design elements can breathe and serve their purpose. However, laying out a page is often a tricky and time-consuming matter that is undermined by numerous browser-inconsistencies and trade-offs between various types of layouts.

Good news: there are some practical guidelines that may help you to approach the issue in a manageable and effective way. This article aims to throw the light at various kinds of layouts, show their advantages and disadvantages and suggest situations in which they may work best. We’ll also talk about the main techniques and related issues that will help you gain a better understanding of CSS-layouts in general.

021

User Interface Design In Modern Applications
User interface design isn’t just about buttons and menus-it’s about the interaction between the user and the application or device, and in many cases it’s also the interaction between multiple users through that device. This means that user interface design isn’t about how a product looks, it’s about how it works. It’s not just about arranging buttons and picking colors-it’s about choosing the right tools for the job. Does this interface even need buttons? If so, what do they need to do? What do I need to provide the user with so they can figure out how my application works and accomplish what they want with ease?

021

Web Typography: Rules, Guidelines And Common Mistakes
Typography leads you to a wide range of topics and applications, even more so with digitalization of information and web. Typography involves not just choosing a nice font, it is a complex meta language that brings value to communication, that increases the readability and legibility of content, giving tone to brand and corporate image alike, helping to sell products or enabling information to better understood by the audience. At the same time, bad application of a few common rules about typography alone can be enough to make readers run away from the provided content.

Typography leads you to a wide range of topics and applications, even more so with digitalization of information and web. Typography involves not just choosing a nice font, it is a complex meta language.

021

Usability Principles For Modern Web-Sites
We don’t know a single Web designer who wouldn’t want an outsider’s opinion of their website. Bonus points if you find a designer willing to give you feedback. Keep in mind, though, that a designer’s opinion isn’t your users’ opinion. To identify with our users, we must focus on much more than the outward appearance of our websites, as difficult as that is to do. To complicate matters, modern websites quickly become huge multi-faceted structures. Competing websites often offer similar functionality, but one will win out because it provides a superior user experience. This is where the Web is headed, a sort of evolution of website design.

021

The Guide to Fantastic Color Usage In Web Design and Usability
It is important to consider the cultural implications of the colors you use on your website, especially when you expect international traffic. Green, for instance, a popular color, is taken in Western society to mean environmental consciousness. In China, a green hat could imply that a man’s wife is cheating on him. The color is sacred in the Islamic world, and it has significance in Catholicism. In some African countries, green represents the natural richness of Africa. It has also been associated with money, jealousy, growth, sickness, inexperience, evil, fertility, hope, youth and death.

021

Performance Optimization For Web-Sites
Slow and unresponsive websites are annoying. And if your website is annoying, your visitors are unlikely to buy goods or contact you. You lose money. Hence, it is important for you to optimize your website to provide a good user experience. Yahoo’s Firefox plug-in YSlow provides tips on how to make websites more responsive. We will not settle with just YSlow’s tips, though, but take two further steps by optimizing MySQL and PHP as well.

In this chapter things will get technical. You will require root-level access to your server machine. If you are in a shared-hosting environment, you may not have this level of access. This section will still be useful to you because you can check if your Web host’s machine meets your requirements, and if it does not, you will know what to demand from your host.

021

Design To Sell: Increasing Conversion Rates
Most websites are not works of art or things made to be appreciated solely for their beauty or expression. Websites are functional interfaces that serve a specific purpose. If you run an online store, the purpose of your website is to sell goods. If you run a Web application, your website is there to get people to sign up. Whatever industry you operate in and whatever type of business, organization or community you run, you want your website to perform by getting those sales, sign-ups, subscribers or clicks.

“Conversion” is an online marketing term that describes an instance of a visitor to your website performing an action that you deem to be desirable. The main question is, how do you turn a new visitor to your website into a loyal customer? To answer this, let’s look at what it takes to sell effectively.

021

How To Turn A Site Into A Remarkable Brand
The term “remarkable” means being worthy of notice or attention or, in the context of Web development, naturally persuading the viewer to mention or recommend a website to a friend. Developing a remarkable brand for your website means that people will likely give credit or refer to your website voluntarily, which is a big bonus when you are starting to build and develop your website.

Any niche or industry has hundreds or thousands of websites all based on the same topic, but from the crowd always emerges a bunch of websites that re-appear time and again. These websites are often mentioned in conversation and cited in sources of information or are the homes of highly sought after products. Given their high profiles, they can all be classified as remarkable, but how did they manage to build this great reputation?

021

Learning From Experts: Interviews And Insights
Many of the most successful and well-recognized designers are willing and eager to provide guidance to others who want to improve their own skills. We posed a series of questions to leading designers and developers in an effort to get some answers to common questions. The participants bring a great deal of diversity in skills and expertise, and all have valuable insight that can help those looking to grow.

This chapter contains ideas, insights and tips from Dan Rubin, Jason Santa Maria, Paul Boag, Jeff Croft, Andy Budd, Collis Ta’eed, Wolfgang Bartelme, Keith Robinson, Jonathan Snook, Elliot Jay Stocks, Khoi Vinh, Veerle Pieters, Chric Coyier, Dave Shea, Darren Hoyt, Henry Jones, Kiam McKay, Nick La, Jon Hicks, Larissa Meek and others.

021

The Smashing Story
How did Smashing Magazine come into existence? How do we work, and what happens behind the scenes? What is our secret recipe for success? Our readers are asking, and Smashing Magazine is answering.

The Smashing Magazine story is not the classic story of two guys coming up with a great idea in the right place at the right time. It is a story of dedication, patience and hard work… truly hard work. Perhaps the most unusual thing about Smashing Magazine’s birth is that we never actually sat down together to discuss the whole thing. We never threw up a whiteboard and brainstormed on a groundbreaking concept for a successful magazine with a solid marketing model. In fact, Smashing Magazine is the result of a random experiment, initiated by two like-minded Web workers with shared passion and knowledge, as well as valuable experience and energetic motivation.

(tm), (sl), (vf), (md)

Kategorien
Webdesign

Der große Dr. Web Autorenwettbewerb

Anfragen und Angebote erhalten wir jeden Tag. Daran mangelt es nicht. Was uns immer mal wieder fehlt sind Angebote von fleißigen Autoren. Davon wünschen wir uns mehr. Um das zu ändern, schreiben wir nun diesen Bewerb mit attraktiven Preisen aus. Und keine Angst, niemand muss sich einen 5-Seiten-Artikel abringen, nur um dann doch abgelehnt zu werden. Wir haben da eine bessere Idee…

Die Preise

Natürlich gibt es etwas zu gewinnen, nämlich insgesamt 10 attraktive Preise. Als da wären:

Platz 1: Apple Mac Mini, MC238D/A, 2.26 GHZ, 2GB, 160 GB mit Mac OS X 10.6 Snow Leopard und AirPort Extreme Wi-Fi (802.11n) integriert, Bluetooth 2.1 + DER, 5 x USB 2.0, FireWire 800. Enthält keinen Monitor und keine Tastatur (PC-Teile passen).

Platz 2: Macht Spaß, das Asus Eee PC 1101HA 11.6 Zoll Netbook mit Intel Atom Z520 1.3GHz, 2GB RAM, 250GB HDD, Intel GMA 500 und Windows 7 Home Premium in schwarz.

Platz 3-10: Bücher. Unter anderem: Einstieg in TYPO3, Design und Layout verstehen und anwenden, Das Grafikdesign-Buch, The Smashing Book, Surprise me, Geometric: Das Buch der Muster…

Was wird gesucht?

Einen Kurzbeitrag unter dem Motto: „Mein Tipp aus der Praxis oder „Was ich in meinem Arbeitsleben gelernt habe„. Lang muss das nicht sein, ein Bild wäre prima, Code-Schnipsel, sofern zum Thema passend, sind auch toll. Uns geht es neben dem guten Tipp und der Idee auch und gerade darum wie etwas geschrieben, rübergebracht und präsentiert wird.

Wichtig: Die Einsendungen müssen zu unseren Themen passen. (Web)design, Usability, PHP, Javascript, Grafik, SEO gehen immer. Auch möglich sind Tipps für Freelancer und Selbständige, die helfen im Berufsleben zu bestehen.

Die Rechte bleiben beim jeweiligen Autor, wir möchten die Einsendungen lediglich hier im Magazin veröffentlichen dürfen, nur so kann der Wettbewerb stattfinden.

Wir treffen eine Vorauswahl und präsentieren die besten Einsendungen – das geschieht in kurzer Folge zwischen dem 7. und 11.12. – Erst danach geht es um die Preisvergabe. In die Bewertung nämlich fließen ein: die Anzahl und Qualität der Kommentare die ein Beitrag erzielt, welche Reaktionen er hervorruft und wie viel Traffic er erzeugt. Ein Voting sparen wir uns, um niemanden zur Manipulation zu verleiten.

Wie muss mein Beitrag genau aussehen?

  • Länge: zwischen 150 und 500 Wörtern. Bitte nicht darüber hinaus.
  • Ein guter Kurzartikel braucht eine knackige Überschrift und eine spannende Einführung, die Interesse weckt.
  • Abbildungen sind gern gesehen (PNG, JPEG, GIF). Wichtig: eventuelle Bildrechte müssen beim Einsender liegen.
  • Bitte das HTML-Format oder ASCII-Text benutzen – Formate wie fett, Überschriften etc. nicht verwenden.

Warum dieser Wettbewerb?

Der Sinn der Aktion besteht nicht darin möglichst viele Beiträge zur Veröffentlichung zu erhalten, sondern wir möchten talentierte Autoren finden, die möglicherweise anschließend für uns schreiben und dabei ordentlich bezahlt werden. Wer das tun will, ohne einen Beitrag für den Wettbewerb einzureichen, darf sich ebenfalls gern melden.

Einreichen

Sämtliche Dateien in ein einziges Archiv packen (ZIP oder RAR). Der Dateiname des Archivs ist der eigene Name. Beispiel:

klaus-mustermann.zip

Für die Dateinamen innerhalb des Archivs auf Sonderzeichen und Leerzeichen verzichten. Keine urheberrechtlich geschützten Materialien verwenden. Namen und Anschrift beifügen (Daten geben wir nicht weiter). Der Einsender muss der Autor sein.

Der Einsendeschluss für diesen Wettbewerb ist der 05. Dezember 2009. Die Archive per E-Mail an redaktion@drweb.de schicken. Betreff (Subject) ist „Wettbewerb“.

(md), (sl)

Kategorien
Webdesign

Was ist… Lexikon: Book on Demand

„Book on Demand“ meint „Buch bei Bedarf“. Das heißt, es wird keine fixe Auflage produziert, sondern das Buch digital vorrätig gehalten und erst hergestellt, wenn es einen Käufer dafür gibt. Diese Art der Produktion ist wie geschaffen für kleine Auflagen oder Sonderausgaben. Denkbar sind außerdem: Großdrucke schon existierender Titel; Nachauflagen vergriffener Titel, für die nur eine geringe Nachfrage besteht; personalisierte oder individualisierte Ausgaben, bei denen kein Exemplar dem anderen gleicht; außerdem Aktionsauflagen, Vorabauflagen, Testauflagen, Weihnachtsausgaben und vieles mehr.

Für den Laien unterscheiden sich solch digital hergestellte Bücher nicht von anderen.

Book on Demand eignet sich für Auflage bis etwa 1000 Exemplare. Jenseits davon wird der klassische Druck preiswerter und damit die Verdienstspanne größer. Qualitativ sind sie für den Laien nicht von anderen Büchern zu unterscheiden.

Dem Betreiber inhaltsreicher Seiten bietet der digitale Druck eine erstklassige Möglichkeit, Einnahmen zu erzielen, die über die bloße Kostendeckung hinausgehen. 

Kategorien
Webdesign

Googlemail – die Features

Ständig kommen neue Services und Features hinzu. Inzwischen stellt Googlemail nicht nur einen Spamfilter zur Verfügung, sondern enthält auch eine Rechtschreibprüfung, ein Adressbuch, eine zentrale Archivierung und einen speziellen Benachrichtigungsdienst. Dieser Notifier meldet neue E-Mails auch dann, wenn Googlemail gar nicht geöffnet ist. Als einziger Freemail-Dienst bietet Googlemail darüber hinaus an, E-Mails in kyrillischer oder asiatischer Schrift zu versenden, ohne dass Übertragungsfehler auftreten.

Neue Features bei Googlemail
Obwohl die Beta-Phase von Googlemail noch nicht lange abgeschlossen ist, kommen ständig neue Services hinzu. Die Oberfläche kann mittlerweile an vielen Stellen individuell angepasst werden. Weitere Kommunikationsmodule wie WAP-Services, Google Talk, Chats und Gears sind neu hinzugekommen.

Googlemail WAP-Service
Mit dem Googlemail WAP-Service kann der Großteil der Googlemail Dienstleistungen nun auch über das Handy genutzt werden.

Google Talk
Mit Google Talk kann man ab jetzt Kontakte aus dem eigenen Googlemail Adressbuch direkt anschreiben, mit ihnen chatten, telefonieren oder per Video kommunizieren. Das geht auch dann, wenn die Kontaktperson andere Messaging-Dienste wie MSN, Yahoo, ICQ oder AIM nutzt. Was man dazu benötigt? Nicht mehr als eine Webcam und ein kleines Programm und schon kann man mit Freunden und Familie von Angesicht zu Angesicht chatten. Chatten lässt es sich übrigens jetzt auch in Gruppen.

Unterschiedliche Absenderadressen
Mit Googlemail kann der Nutzer unter unterschiedlichen Absenderadressen mailen und E-Mails anderer Konten mit POP3-Servern abrufen.

Gears
Neuerdings kann Googlemail auch offline verwendet werden. Seit 2009 unterstützt Google Mail auch Gears.

Individuelle Hintergrundbilder und Motive
Ganz neu stehen auf Googlemail nun auch weitere vier Motive zur Auswahl, mit denen Googlemail ein ganz persönliches Aussehen bekommt. Je nach Geschmack kann man Googlemail nun den Look eines Videospiels oder das Layout einer Blumenwiese verpassen. Wem unter den vielen Motiven die Entscheidung schwerfällt, klickt einfach auf „Zufall“ und erhält jeden Tag ein neues Aussehen.

Übersetzungen in andere Sprachen
Wer häufig E-Mails aus anderen Ländern bekommt, wird sich über den neuen Googlemail Service besonders freuen. Nun können Texte nämlich auch automatisch übersetzt werden. Mit nur einem Klick übersetzt Googlemail alle Nachrichten in die ausgewählte Sprache.

To-Do Listen
In Googlemail lassen sich nun auch To-Do Listen erstellen und Aufgaben zuteilen. Diese Funktion ist verfügbar für Googlemail, für den Kalender, für Ihr Handy und für iGoogle.

Drag & Drop von Labels
Nachrichten können nun mit Hilfe von Drag & Drop auch direkt in Labels gezogen werden. Damit es übersichtlich bleibt, erfolgt die Darstellung der meist genutzten Labels direkt oberhalb der Chat-Liste. Die anderen Labels können mit Klick auf „Mehr“ eingeblendet werden. Natürlich kann jeder Nutzer selbst entscheiden, welche Labels immer angezeigt werden sollen. In der Rubrik Einstellungen lässt sich dies individuell festlegen. Die Labels sind zur besseren Unterscheidung übrigens jetzt farbig.

Google Mail Tester werden
Wer möchte, kann sich als Tester von Google Mail Labs engagieren und neue Funktionen und geplante Services bereits im Vorfeld testen. So stellt Google sicher, dass die neuen Dienstleistungen auch exakt den Wünschen der Nutzer entsprechen.

PDF Vorschau
PDF-Anhänge lassen sich nun ganz schnell öffnen. Ohne lange darauf zu warten, dass der Download erfolgt, werden PDFs in Googlemail nun direkt angezeigt. Dazu muss man lediglich auf den Button „Anzeigen“ neben dem PDF-Anhang klicken.

Diashow
Powerpoint-Anlagen kann man sich auf ähnliche Weise nun als Diashow anzeigen lassen. Dazu muss der Anhang nicht einmal downgeloaded werden. Ähnlich wie beim Anzeigen von PDFs muss man bei Powerpoint-Anhängen nur auf den Button „als Diashow anzeigen“ klicken.

Emoticons
Emoticons stehen nun nicht nur für Chats, sondern auch für alle E-Mails uneingeschränkt zur Verfügung.

Kontinuierlicher Virencheck
Bei jedem Öffnen oder Senden einer Nachricht wird diese von Googlemail automatisch auf Viren überprüft.

Automatische Antwort
Sind Sie in Urlaub oder kurzfristig nicht zu erreichen, sendet Googlemail an alle, die Ihnen E-Mails schicken, eine automatische Antwort oder Abwesenheitsnotiz.

Emails an alle Freunde
Emails an eine Gruppe oder einen ganzen Freundeskreis lassen sich nun per Googlemail ganz einfach versenden. Dazu muss endlich nicht mehr jeder Absender getrennt angeklickt werden.

Sicherheit
Damit nichts verloren geht, auch wenn die Technik einmal aussteigt, speichert Googlemail alle E-Mails und Nachrichten kontinuierlich ab.

Kategorien
Webdesign

The Smashing Book – Jetzt mit 20% Rabatt vorbestellen!

Ende September Am 23.11. 3.12.* ist es soweit. Das „Smashing Book“ erscheint. Gedruckt und in englischer Sprache. Kaufen kann man es schon ab heute. Und zwar innerhalb Deutschlands auch über den Dr. Web Shop. Interessenten außerhalb Deutschlands folgen bitte dem Link zum Smashing Magazine.

Update vom 2.10.2009
Wir arbeiten noch immer hart daran, Ihr sehnlichst erwartetes Smashing Book so schnell wie möglich auszuliefern. Durch die überraschend große Nachfrage und einige Layout-Schwierigkeiten (das Buch wird nun 12 Seiten länger als angekündigt) gab es leider einige Verzögerungen. Dafür bitten wir vielmals um Entschuldigung.

Doch nun ist es endlich soweit und das Buch befindet sich im Druck. Ein Vorteil Ihrer Vorbestellung ist natürlich, dass Sie zu den ersten zählen werden, die das Smashing Book frisch aus der Presse zugesandt bekommen werden. Der Versand wird voraussichtlich Mitte November beginnen. Wir werden Sie weiterhin über den Fortschritt auf dem Laufenden halten.

Und nun, um Ihnen ein wenig Einblick in den Produktionsprozess zu geben, hier ein paar Bilder aus der Druckerei mit einem Digital-Proof, der uns vor einigen Wochen zugesandt wurde:

Vielen Dank für Ihre Geduld und großartige Unterstützung! Die Wartezeit wird sich lohnen. In der Zwischenzeit werden wir Sie natürlich weiterhin mit einem konstanten Strom lesenswerter Artikel von Dr. Web und Smashing Magazine versorgen.

Warum sollte man jetzt schon kaufen? Weil es einen satten Rabatt gibt. Sie zahlen nicht 5, nicht 10, Sie zahlen 20% weniger. Das heißt nur 18,99 € statt wie später 23,90. Und Sie gehören zu den ersten, die das Buch bekommen. Das Angebot gilt bis zum Erscheinen des Buches.
Abbildung

Das Smashing Book handelt vom modernen Web-Design. Es zeigt bewährte Vorgehensweisen in Programmierung, Usability und Optimierung. Es untersucht, wie man erfolgreich User-Interfaces und Marketing-Grundsätze zur Steigerung der Umsätze nutzt. Es zeigt, wie man das Beste aus Typografie und Farbe herausholt, so dass am Ende intuitive und effiziente Web-Designs stehen. Und schließlich werfen wir einen Blick hinter die Kulissen des Smashing Magazines.

  • Paperback, 300 312 Seiten
  • Farbige Illustrationen und Abbildungen auf gestrichenem Papier
  • Versandkostenfrei innerhalb Deutschlands
  • 30 Tage Geld-zurück-Garantie
  • Jetzt kaufen und 20% Rabatt mitnehmen
  • Das Buch erscheint Ende September Mitte November.

Button

Die Autoren sind

Und was gibt es für das Geld?

Das Buch enthält  300 312 Seiten und 10 Kapitel. Seine Größe beträgt 21 × 14 cm. Es ist ein Paperback und es wurde komplett in Farbe auf seidenmattem Bilderdruckpapier gedruckt. Erhältlich ist es nur bei Dr. Web und Smashing-Magazine. Folgende Kapitel in englischer Sprache sind enthalten:

021

The Art And Science Of CSS-Layouts
In modern web design, developing a modern site’s layout is a craft that requires patience, precision and a solid knowledge of CSS. While design elements create a flow and the hierarchy in the design, web layouts build up a skeleton of the site, providing a space and structure where design elements can breathe and serve their purpose. However, laying out a page is often a tricky and time-consuming matter that is undermined by numerous browser-inconsistencies and trade-offs between various types of layouts.

Good news: there are some practical guidelines that may help you to approach the issue in a manageable and effective way. This article aims to throw the light at various kinds of layouts, show their advantages and disadvantages and suggest situations in which they may work best. We’ll also talk about the main techniques and related issues that will help you gain a better understanding of CSS-layouts in general.

021

User Interface Design In Modern Applications
User interface design isn’t just about buttons and menus-it’s about the interaction between the user and the application or device, and in many cases it’s also the interaction between multiple users through that device. This means that user interface design isn’t about how a product looks, it’s about how it works. It’s not just about arranging buttons and picking colors-it’s about choosing the right tools for the job. Does this interface even need buttons? If so, what do they need to do? What do I need to provide the user with so they can figure out how my application works and accomplish what they want with ease?

021

Web Typography: Rules, Guidelines And Common Mistakes
Typography leads you to a wide range of topics and applications, even more so with digitalization of information and web. Typography involves not just choosing a nice font, it is a complex meta language that brings value to communication, that increases the readability and legibility of content, giving tone to brand and corporate image alike, helping to sell products or enabling information to better understood by the audience. At the same time, bad application of a few common rules about typography alone can be enough to make readers run away from the provided content.

Typography leads you to a wide range of topics and applications, even more so with digitalization of information and web. Typography involves not just choosing a nice font, it is a complex meta language.

021

Usability Principles For Modern Web-Sites
We don’t know a single Web designer who wouldn’t want an outsider’s opinion of their website. Bonus points if you find a designer willing to give you feedback. Keep in mind, though, that a designer’s opinion isn’t your users’ opinion. To identify with our users, we must focus on much more than the outward appearance of our websites, as difficult as that is to do. To complicate matters, modern websites quickly become huge multi-faceted structures. Competing websites often offer similar functionality, but one will win out because it provides a superior user experience. This is where the Web is headed, a sort of evolution of website design.

021

The Guide to Fantastic Color Usage In Web Design and Usability
It is important to consider the cultural implications of the colors you use on your website, especially when you expect international traffic. Green, for instance, a popular color, is taken in Western society to mean environmental consciousness. In China, a green hat could imply that a man’s wife is cheating on him. The color is sacred in the Islamic world, and it has significance in Catholicism. In some African countries, green represents the natural richness of Africa. It has also been associated with money, jealousy, growth, sickness, inexperience, evil, fertility, hope, youth and death.

021

Performance Optimization For Web-Sites
Slow and unresponsive websites are annoying. And if your website is annoying, your visitors are unlikely to buy goods or contact you. You lose money. Hence, it is important for you to optimize your website to provide a good user experience. Yahoo’s Firefox plug-in YSlow provides tips on how to make websites more responsive. We will not settle with just YSlow’s tips, though, but take two further steps by optimizing MySQL and PHP as well.

In this chapter things will get technical. You will require root-level access to your server machine. If you are in a shared-hosting environment, you may not have this level of access. This section will still be useful to you because you can check if your Web host’s machine meets your requirements, and if it does not, you will know what to demand from your host.

021

Design To Sell: Increasing Conversion Rates
Most websites are not works of art or things made to be appreciated solely for their beauty or expression. Websites are functional interfaces that serve a specific purpose. If you run an online store, the purpose of your website is to sell goods. If you run a Web application, your website is there to get people to sign up. Whatever industry you operate in and whatever type of business, organization or community you run, you want your website to perform by getting those sales, sign-ups, subscribers or clicks.

“Conversion” is an online marketing term that describes an instance of a visitor to your website performing an action that you deem to be desirable. The main question is, how do you turn a new visitor to your website into a loyal customer? To answer this, let’s look at what it takes to sell effectively.

021

How To Turn A Site Into A Remarkable Brand
The term “remarkable” means being worthy of notice or attention or, in the context of Web development, naturally persuading the viewer to mention or recommend a website to a friend. Developing a remarkable brand for your website means that people will likely give credit or refer to your website voluntarily, which is a big bonus when you are starting to build and develop your website.

Any niche or industry has hundreds or thousands of websites all based on the same topic, but from the crowd always emerges a bunch of websites that re-appear time and again. These websites are often mentioned in conversation and cited in sources of information or are the homes of highly sought after products. Given their high profiles, they can all be classified as remarkable, but how did they manage to build this great reputation?

021

Learning From Experts: Interviews And Insights
Many of the most successful and well-recognized designers are willing and eager to provide guidance to others who want to improve their own skills. We posed a series of questions to leading designers and developers in an effort to get some answers to common questions. The participants bring a great deal of diversity in skills and expertise, and all have valuable insight that can help those looking to grow.

This chapter contains ideas, insights and tips from Dan Rubin, Jason Santa Maria, Paul Boag, Jeff Croft, Andy Budd, Collis Ta’eed, Wolfgang Bartelme, Keith Robinson, Jonathan Snook, Elliot Jay Stocks, Khoi Vinh, Veerle Pieters, Chric Coyier, Dave Shea, Darren Hoyt, Henry Jones, Kiam McKay, Nick La, Jon Hicks, Larissa Meek and others.

021

The Smashing Story
How did Smashing Magazine come into existence? How do we work, and what happens behind the scenes? What is our secret recipe for success? Our readers are asking, and Smashing Magazine is answering.

The Smashing Magazine story is not the classic story of two guys coming up with a great idea in the right place at the right time. It is a story of dedication, patience and hard work… truly hard work. Perhaps the most unusual thing about Smashing Magazine’s birth is that we never actually sat down together to discuss the whole thing. We never threw up a whiteboard and brainstormed on a groundbreaking concept for a successful magazine with a solid marketing model. In fact, Smashing Magazine is the result of a random experiment, initiated by two like-minded Web workers with shared passion and knowledge, as well as valuable experience and energetic motivation. ™

Button

Kategorien
Webdesign

10 nützliche Techniken für Web-Applikationen

Dieser Artikel ist eine Übertragung des englischsprachigen Beitrages 10 Useful Web Application Interface Techniques von Dmitry Fadeyev. Die Übersetzung wurde von Rene Schmidt angefertigt.

Immer mehr Anwendungen werden ins Web verlagert. Dort entfallen die sonst üblichen Plattform-Beschränkungen oder Installationsprobleme. Das lässt das Software-as-a-Service-Vertriebsmodell attraktiv erscheinen. Design für Web-Anwendungen ist im Kern Web-Design der Fokus liegt allerdings stärker auf der Funktion. Um mit Desktop-Anwendungen konkurrieren zu können, müssen Web-Anwendungen einfache, intuitive und schnell reagierende Benutzeroberflächen haben, damit sie mit ihnen effizienter arbeiten können.

In der Vergangenheit haben wir Web-Anwendungen nicht den Platz eingeräumt, den sie verdienen. Daher werden wir uns nun einige nützliche Techniken und Designansätze ansehen, die Web-Anwendungen benutzerfreundlicher und schöner machen. Dieser Beitrag ist das erste Ergebnis unserer Untersuchung zu Design-Elementen und Benutzerfreundlichkeit von Web-Anwendungen.

1. Interface-Elemente auf Kommando

Ein wichtiges Ziel beim Interface-Design ist Einfachheit. Je mehr Bedienelemente auf dem Bildschirm gleichzeitig erscheinen, desto mehr Zeit müssen Nutzer damit verbringen, die Bedienung zu verstehen. Wenn weniger Auswahl an Bedienelementen besteht, treten die derzeit verfügbaren Funktionen besser hervor und sind für Nutzer leichter zu erfassen. „Einfachheit“ ist allerdings nicht einfach zu erreichen, insbesondere wenn Sie keine Funktionen weglassen möchten.

Kontain-Suche
Wenn Sie bei Kontain auf den Such-Knopf klicken, erscheint ein Drop-Down-Menü. Der Nutzer kann mit den zusätzlichen Optionen seine Suche einengen. Die Suchfunktion wirkt einfacher, wenn diese Optionen zunächst nicht sichtbar sind.

Ein Weg zu mehr Einfachheit ist, fortgeschrittene Funktionen zu verbergen oder zu kaschieren. Finden Sie zunächst heraus, welche Funktionen Ihrer Benutzeroberfläche am häufigsten verwendet werden und verbergen Sie die anderen, beispielsweise mit Drop-Down-Menüs.

CollabFinder search
Wenn Sie bei CollabFinder auf den Such-Link klicken, gelangen Sie nicht zu einer neuen Seite. Stattdessen erscheint die Eingabemaske für die Suche.

2. Spezielle Bedienelemente

Es ist wichtig, dass Sie passende Bedienelemente wählen. Technisch gesehen sind Sie recht frei, was die Auswahl angeht – trotzdem sind bestimmte Bedienelemente je nach Aufgabe besser als andere geeignet.

Backpack calendar picker
Backpack verwendet ein kompaktes Kalender-Control, mit dem Nutzer Erinnerungsdaten eingeben können.

Man könnte auch ein Datum aus einer Drop-Down-Liste für Tag, Monat und Jahr auswählen. Das ist allerdings recht umständlich. Besser dafür geeignet sind Kalender-Controls, bei dem man ein Datum wie bei einem Kalender direkt und schnell auswählen kann.

MyBankTracker APY Calculator
Der „APY calculator“ von MyBankTracker nutzt einfach zu bedienende Schiebe-Regler, mit denen Nutzer verschiedene Szenarien ausprobieren können.

Ein weiteres gutes Beispiel sind Schieberegler. Man könnte natürlich Zahlwerte auch manuell eingeben. In bestimmten Situationen sind Schieberegler eine weit bessere Wahl. Sind sind nicht nur einfach zu nutzen, man muss nur klicken und ziehen, sondern sieht sofort, innerhalb welcher Grenzen man sich bewegen kann.

3. Gedrückte Knöpfe deaktivieren

Eines der Probleme von Web-Anwendungen liegt in der Übertragung von Formularinhalten. Einfache Formulare senden Inhalte so oft, wie man auf den Absenden-Knopf drückt. Das ist in der Regel nicht gewünscht, weil es zu redundanten Inhalten führt. Diese zu vermeiden, ist wichtig und nicht besonders schwer.

Es gibt zwei Stufen, doppeltes Absenden von Formularen zu vermeiden. Es gibt Mechanismen dazu auf Client- und auf Server-Seite. Die Serverseite behandeln wir hier nicht. Es geht hier primär um Benutzeroberflächen.

Yammer disabled button
Yammer deaktiviert den “Update”-Knopf, während die Nachricht übermittelt wird.

Auf der Client-Seite ist es viel einfacher. Nachdem in einem Formular der Absenden-Knopf gedrückt wurde, wird er deaktiviert. Mit JavaScript ist es sehr einfach, das zu tun:

<input type="submit" value="Submit" onclick="this.disabled=true" />

Natürlich ist es trotzdem sinnvoll, auch serverseitig Maßnahmen gegen Doubletten zu treffen — beispielsweise für den Fall, dass ein Nutzer das Formular ohne JavaScript sendet.

4. Schatten für modale Fenster

Schlagschatten um Popup-Menüs und -Fenster sind nicht nur reine Dekoration. Sie heben es vom Hintergrund ab und verstärken dessen Wirkung, indem unwichtige Informationen in den „Schatten“ gestellt werden.

Diese Technik hat seine Wurzeln bei traditionellen Desktop-Anwendungen und hilft Nutzern, ihre Aufmerksamkeit auf das neue Fenster zu richten. Durch den Schlagschatten unterscheiden sich modale Fenster klar von normalen Dialogfenstern, weil sie scheinbar dreidimensional über dem Inhalt eine Website schweben und so näher am Nutzer sind.

Digg login window
Das Login-Fenster von Digg hat einen breiten Schatten und hält die Informationsrauschen der Website darunter in Schach.

Um das zu erreichen, geben Designer dem Container ein transparentes PNG-Bild als Hintergrund. Der Inhalt hat nach oben, unten, rechts und links überall den gleichen Abstand zum Rahmen. Eine andere Möglichkeit ist, ein Hintergrundbild mit einem transparenten Rahmen zu verwenden und den Inhalt absolut innerhalb des Rahmens zu platzieren. Genau so macht es Digg und dieses Bild verwenden sie dafür (dialog.png). So sieht das HTML aus:

(X)HTML:

	<div id="container">
		<div style="display: block; top: 236px; opacity: 1;" class="dialog">
			<div class="body">
        		<div class="content">
        			...
        		</div>

        	</div>
        </div>
      </div>

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;
}

Weiterhin besteht die Möglichkeit, eine JavaScript-basierte Lightbox oder CSS3-Schatten zu verwenden, wobei letztere vom Internet Explorer nicht unterstützt werden.

Basecamp project switcher
Die Screenshot-Lightboxen Basecamps haben einen weichen Schlagschatten, der sie vom Rest der Website abhebt.

5. Anfangszustände

Wenn Sie eine Web-Anwendung entwickeln, ist es nicht nur wichtig, sie ausgiebig zu testen, sondern auch den Anfangszustand benutzbar zu gestalten, wenn der Nutzer noch nichts gemacht hat.

Wenn der Nutzer noch neu ist und bisher nichts gemacht hat, füllen Sie Leerraum mit aussagekräftigen Hilfen, mit denen der Nutzer den Einstieg findet. Beispielsweise könnte eine Projektmanagement-Anwendung direkt nach dem Login eine Liste seiner Projekte anzeigen. Falls noch keine Projekte existieren, könnte ein Link angezeigt werden, mit dem der Nutzer ein neues Projekt direkt neu anlegen kann. Selbst wenn es schon eine Möglichkeit dafür geben sollte, schadet es sicher nicht, den Nutzer mit der Nase drauf zu stoßen.

Campaign Monitor empty state
Campaign Monitor lenkt Nutzer in die richtige Richtung, wenn sie eine neue E-Mail-Kampagne beginnen.

Auf diese Weise ermutigen Sie die Besucher, einen Dienst tatsächlich auszuprobieren und nach der Registrierung zu nutzen. Ein Rundgang durch die Applikation hilft, dem Nutzer dessen Vorteile nahe zu bringen. Auch ist es wichtig, dem Nutzer ausschließlich die wichtigsten Funktionen zu präsentieren. Es ergibt keinen Sinn, ihn mit allen möglichen verfügbaren Einstellmöglichkeiten zu überfordern. Bedenken Sie, dass Nutzer in der Regel erstmal nur wissen möchten, ob ein Dienst überhaupt für sie interessant ist — Details interessieren in dem Moment nicht und stören nur.

Sorgfältig vorbereitete Anfangszustände können Nutzer motivieren und Anbietern von Web-Applikationen helfen, mehr potenzielle Nutzer in tatsächliche Nutzer zu konvertieren.

Wufoo empty state
Wufoos Formular-Seite lädt den Nutzer mit einer freundlichen Meldung ein, ein neues Formular zu erstellen.

6. Gedrückte Knöpfe

Viele Web-Applikationen verwenden selbst gestaltete Knöpfe. Standard-Knöpfe sind oft nicht geeignet und Text-Links sind leicht zu übersehen. Links, die Sie wie Knöpfe aussehen lassen wollen, sollten sich wie Knöpfe verhalten. Das ist eine Herausforderung. Wenn Nutzer auf sie klicken, sollten sie “eingedrückt” aussehen.

Eingedrückte Knöpfe sind nicht nur etwas fürs Auge. Dem Nutzer eine Rückmeldung auf seine Aktion zu geben, vermittelt ihm das Gefühl, die Applikation unter Kontrolle zu haben und ähnelt dem gewohnten Verhalten von Desktop-Benutzeroberflächen.

Man kann einem Knopf den gedrückten Zustand mit der CSS-Pseudoklasse active geben. Wenn ein Link beispielsweise die CSS-Class add_task_button hat, kann man für diesen Link mittels add_task_button:active den gedrückten Zustand definieren.

Highrise button pushed
Knöpfe bei Highrise werden eingedrückt, wenn man auf sie klickt. Das gibt dem Nutzer eine Rückmeldung zu seiner Handlung.

7. Verlinken Sie die Registrierungsseite auf der Login-Seite

Nicht registrierte Nutzer werden unweigerlich irgendwann auf Ihrer Login-Seite landen. Sie wollen wahrscheinlich die Anwendung oder eine Funktion ausprobieren, die registrierten Nutzern vorbehalten ist, finden aber oft in der Eile das Registrierungsformular nicht.

Delicious sign in
Wenn Sie kein Delicious-Benutzerkonto haben — kein Problem! Der Link zum Registrierungsformular ist auf der Login-Seite zu finden.

Goplan sign in
Goplan hat einen netten bunten Knopf auf der Login-Seite, der zum Registrierungsformular führt.

Machen Sie es Nutzern einfach, in dem Sie Links zum Registrierungsformular auf der Login-Seite anbieten. Wenn Nutzer noch kein Benutzerkonto haben, müssen sie auf diese Weise nicht lange danach suchen. Untersuchungen bestätigen: 18% der betrachteten Websites haben einen Registrierungs-Link auf der Login-Seite (zum Beispiel YouTube, Reddit, Digg, Lulu, Metacafe).

8. Kontext-abhängige Navigation

Es ist wichtig zu wissen, was Nutzer in bestimmten Situationen machen möchten. Man braucht ihnen aber nicht überall dieselbe Navigation bieten, weil sie nicht zu jeder Situation in einer Anwendung passt.

Eines der besten Beispiele für kontextabhängige Navigationsoptionen ist die neue Benutzeroberfläche von Microsoft Office 2007. Sie zeigt anstatt der normalen Symbolleiste so genannte Ribbon Controls. Jeder Tab eines solchen Ribbons enthält Bedienelemente, die zu einer bestimmten Tätigkeit passen, beispielsweise „Text schreiben“, „Diagramme bearbeiten“, oder „Korrekturlesen“. Auch Web-Anwendungen könnten von einer solchen kontextabhängigen Navigation profitieren, weil sie Benutzeroberflächen nicht überfrachtet. Es werden nur die Navigationsoptionen gezeigt, die derzeit wirklich benötigt werden..

Lighthouse sub-navigation
Lighthouse hat eine gewöhnte Navigation mit Tabs. Allerdings gibt es noch eine zweite Navigationsebene rechts unter den Tabs. Diese Ebene ist kontextabhängig.

9. Fokus auf Schlüsselfunktionen

Nicht alle Bedienelemente sind gleich wichtig. Ein Beispiel: In einem Dialog zum Erstellen eines neuen Objekts gibt es zwei Knöpfe. Einmal “Erstellen” und einmal “Abbrechen”. “Erstellen” ist wichtiger als der andere, weil das der Knopf ist, den ein Nutzer wahrscheinlich anklicken wird. Abbrechen werden dagegen nur die wenigsten wollen. Beide Knöpfe sollten daher nicht gleichberechtigt nebeneinander stehen.

Lighthouse create or cancel
Der “Neues Ticket”-Knopf auf Lighthouseapp. Der “Abbrechen”-Link ist direkt daneben, aber als Text-Link. Der Knopf sieht nicht nur wichtiger aus, er ist auch leichter anklickbar und zieht aufgrund seiner Gestaltung mehr Aufmerksamkeit auf sich.

Um die Aufmerksamkeit auf den “Erstellen”-Link zu lenken, kann man verschiedene Bedienelemente oder Stile für Bedienelemente verwenden. Einige Anwendungen nehmen einen Input-Knopf für die Aktion und einen Text-Link zum Abbrechen. Nicht nur ist die Klick-Fläche für die Aktion größer als die des Abbrechen-Links, sondern lenkt die Aufmerksamkeit der Nutzer auf die Aktion, nach der sie gesucht haben.

10. Eingebettetes Video

Bilder und Texte sind ein guter Weg, Produktinformationen zu vermitteln. Videos können aber eine noch bessere Alternative sein, wenn Sie die Ressourcen haben, sie zu produzieren. Seit einigen Jahren schon werden Videos im Web immer beliebter. Funktionen und Eigenschaften von Web-Applikationen werden häufig in Screencasts vorgestellt. Allerdings ist das nicht der einzige Einsatzzweck von Videos im Web.

GoodBarry video
GoodBarry zeigt einen Video-Screencast auf ihrer Startseite, um das Produkt zu präsentieren. Auch für Anleitungen werden dort Screencasts verwendet.

Mailchimp video
MailChimp stellt Tutorial-Videos direkt in der Admin-Konsole bereit, um ungeübten Nutzern zu helfen.

Einige Web-Applikationen nutzen Video als Hilfe für Nutzer. Ein Video vermittelt die Funktion einer Anwendung schneller als es eine Seite mit Text könnte. Nutzer sehen sofort, was zu tun ist. ™

Kategorien
Webdesign

54 kreative Blogdesigns

Es gibt Dinge, die sieht man gar nicht oft genug. Tolle Blogdesigns zum Beispiel. Diese Blogs glänzen durch originelle, eigene Designs. Es handelt sich nicht um vorgefertigte Templates, wie man sie nicht nur für WordPress an jeder Ecke herunterladen kann. Hier stecken jede Menge Mühe und Aufwand dahinter. Und natürlich sind es die grafisch Opulenten, die hier vor allem zum Zuge kommen. Nicht zuletzt weil sie auf den letztlich doch schmalen Screenshots am besten zur Geltung kommen. Trotzdem sind allerlei verschiedene Stile vertreten.

Siehe auch:

Die Abbildungen können angeklickt werden. Das Aussehen der Blogs kann im Laufe der Zeit vom Screenshot abweichen.

Fritz Quadrata

Screenshot

A Crayons Life

Screenshot

Duiwaigh

Screenshot

Blog me Tender

Screenshot

The Art of Nonconformity

Screenshot

Nice Web Type

Screenshot

Iemai

Screenshot

Addicted to New

Screenshot

Nalden

Screenshot

Creative Curio

Screenshot

The Klog

Screenshot

Marina

Screenshot

Metalab

Screenshot

Mateus Neves

Screenshot

Blendesign

Screenshot

Lubuskihi Hiphop

Screenshot

D-Lists

Screenshot

idsgn

Screenshot

Cindy Pepper

Screenshot

Blup!

Screenshot

Kris Colvin

Screenshot

Ryan MacMaster

Screenshot

Rin & Wendy

Screenshot

Amour Chaleur

Screenshot

Get and Give

Screenshot

Ayaka Ito

Screenshot

Cuisine Saine

Screenshot

All for Design

Screenshot

Duchy

Screenshot

The Astonishing Adventures of Lord Likely

Screenshot

Matt Mullenweg

Screenshot

Argee

Screenshot

Kaxigt

Screenshot

Steven Mullen

Screenshot

UGSMag

Screenshot

Zinaz

Screenshot

Owltastic

Screenshot

Pixelpretation

Screenshot

Snailbird

Screenshot

TJ Mapes

Screenshot

Illustract

Screenshot

Darkmotion

Screenshot

Henry Hoffman

Screenshot

The Ryerson Photography Blog

Screenshot

duoh!

Screenshot

Helen Rowland

Screenshot

Cracked Window

Screenshot

Guillermo Esteves

Screenshot

Santzzz

Screenshot

Ciao Cimba

Screenshot

Maciej Kwas

Screenshot

The Vandas

Screenshot

Skylab

Screenshot

Gary Nock

Screenshot

Kategorien
Webdesign

Website Entwürfe mit MockView und andere Lösungen

MockView ist ein kostenloses Online Werkzeug zur einfachen Erstellung von Websites. Mit MockView haben die Ersteller von Websites einen kreativen Spielraum, Show – Modus und eine Editorleiste mit Shapes. Den Erstellern stehen die gesamte Software und alle Daten online zur Verfügung. Deshalb kann an den Projekten auch online zusammengearbeitet werden. Die einzelnen Websites lassen sich problemlos als Bilder exportieren.

Die Kategorien von MockView

Im Bereich E-Learning kann man auf eine einfache Art und Weise Screencasts gestalten, wobei das Modul GoView mit nur zwei Klicks gestartet werden kann. Mit GoView können unerwünschte Segmente einfach ausgeblendet werden und die individuellen Texte nach der Betätigung von nur einem Button eingefügt werden.

Die Kategorie Informationsvermittlung stellt ein CMS bereit, das auf einer Admin -Oberfläche die Eingabefelder sofort so zur Verfügung stellt, dass sie der folgende Content – Lieferant auch gleich einbinden kann.

Mit einem Mausklick auf den Button „Kommunikation“ gelangen die Benutzer von MockView in das Modul Sendible. Hier können die Kommunikationskanäle und die dazugehörigen Kontaktdaten verwaltet werden. Sendible plant Nachrichten über SMS, E-Mail und in Soziale Einrichtungen und sendet sie nach dem Eingeben automatisch ab. Die gesamten Kanäle werden zentral über dieses Modul erreicht und gesteuert. Für Soziale Netzwerke und für Blogs sind Status Updates und Reminder inkludiert. Angebotspakete gibt es bei Sendible kostenlos oder kostenpflichtig.

MockView hat auch neue Konzepte. Am Netzwerk Contenure sind User und Content -Provider beteiligt. Die neue Idee bringt einen bezahlten Content. Die Provider werden auf dem jeweiligen Traffic basierend bezahlt. Von den Usern wird eine monatliche Content-Fee gefordert, die auf die aufgerufenen Websites nach der Anzahl der Klicks verteilt wird. Contenure blendet für die registrierten Benutzer die Werbung aus, spezielle Features wie z. B. Benachrichtigungen sind jedoch möglich.

Auf der Seite Social Content geht es zum Download für ein interessantes Dokument, das Lektoren und Vortragenden die rechtlichen Voraussetzungen beschreibt, wie Medien urheberrechtlich korrekt zum Einsatz gebracht werden müssen.
Das Modul Social Network vermittelt mit dem Entrepreneur Connect ein spezielles Netzwerk für Unternehmer. Es eignet sich für die Vermittlung von Geschäftspartnern und hat viele Community – Features.

Mit Social Search können durch Turtilla Contents aus verschiedenen Quellen gesammelt werden. Das Resultat wird in einem RSS Feed aufbereitet. Empfehlungen und Video -Rating sind enthalten. Turtilla definiert Themen über Keywords. Für die Nutzung ist kein Account notwendig. Es bietet ein Vorschau -Widget auf Videos mit Direkt-Link an.

Im Bereich Trends erhalten die Benutzer von MockView nützliche Angaben mit einer Kurzbeschreibung und Links zu den neuesten Entwicklungen aus vielen Bereichen des täglichen Lebens. Zur Veranschaulichung der interessanten Texte werden oft Videos angeboten.

Wissensmanagement ist ein Modul für alle, die Fakten und Ideen strukturiert ablegen möchten. MockView bietet mit Listography einen solchen kostenlosen Account. Lehrer und Trainer haben die Möglichkeit mit Litmos ihre Unterrichtseinheiten zu planen und zu erstellen. Die Vorbereitungen müssen nur einmal getätigt werden, weil der Unterricht online durchgeführt werden kann.

Vorteile

Mit Teamness sorgt MackFlow für eine Arbeitsteilung im Web. Teamness ist ein Werkzeug für das Projekt -Management, das eine online Zusammenarbeit von spezialisierten Gruppen ermöglicht und deren Wissen zusammenträgt. Kontup ist eine Möglichkeit für alle, die sich keine komplexe ERP-Lösung integrieren können und kann die anstehende Zertifizierung erfolgreich unterstützen. Es zeichnet die Arbeitsvorgänge auf, dokumentiert die Kundendaten und bestätigt den Projektablauf. Durch seine mannigfaltigen Nutzungsmöglichkeiten ist MockView eine interessante Business Lösung für Selbstständige und Kleinunternehmer, die mit der Erstellung der Entwürfe von Websites ihren Internetauftritt komfortabel vorbereiten können.

Kategorien
Webdesign

Browser: Google Chrome

Chrome ist einer der schnellsten und modernsten Browser, die wir zurzeit kennen. Besonders seine einfache Bedienbarkeit und die Fähigkeit virtuos mit Javascript umzugehen machen ihn attraktiv. Die erste Version des Browsers erschien im Sommer 2008 als kostenloser Download bei Google.

Die Oberfläche von Google Chrome ist ein modernes simples Browser-Fenster. Das Äußere des Browsers spielt eine eher unwesentliche Rolle. Den meisten Internetnutzern ist es wichtig, schnell auf Inhalte zugreifen zu können und alle möglichen Anwendungen nutzen zu können. Google Chrome ist sehr übersichtlich angeordnet und schnell und bringt den Nutzer auf kürzestem Weg an das Ziel seiner Wünsche im Internet.


So sieht Google seinen Browser

Google Chrome kann die komplexen Anwendungen, die das Web bietet, deutlich besser ausführen als bisherige Browser. Jeder Tab arbeitet einzeln, sodass der Ausfall eines Tabs, sich nicht auf die anderen Tabs überträgt, was gleichzeitig auch einen deutlich besseren Schutz vor „bösen“ Webinhalten bietet.

In Google Chrome ist eine neue, zu mehr Leistung fähige Javascript-Engine (V8) integriert, die auch die kommende Generation von Webanwendungen möglich macht, die manche traditionelle Browser heute gar nicht ausführen können.

  • Ermöglicht superschnelle Ausführung von Webseiten und Anwendungen
  • Kann vom Desktop aus gestartet werden
  • Sekundenschnelles Laden von Webseiten
  • Ausführung von interaktiven Webseiten, Webanwendungen und Javascript in atemberaubender Geschwindigkeit
  • Hohe Effizienz und Anwenderfreundlichkeit
  • Ein einziges Eingabefeld reicht aus, um Webseiten aufzurufen oder zu durchforsten
  • Die Tabs können beliebig geordnet werden
  • Mithilfe so genannter Thumbnails können häufig besuchte Seiten schnell geöffnet werden
  • Eigene Browsergestaltung möglich

Mit Einführung von Google Chrome gab es auch etwas Kritik, weil die Beta-Version noch nicht ausgereift war und dennoch einem breiten Publikum zur Verfügung gestellt wurde. Im Verlauf des vergangenen Jahres wurden allein 21 Beta-Updates und 15 Aktualisierungen von mehr als 50 Entwicklern, die bei Google am hauseigenen Browser arbeiten, fertig gestellt, die jetzt eine neue stabile Version anbieten können.

Eines kann allerdings auch die beste Version eines Browsers nicht bieten, wer eine langsame Verbindung oder einen überlasteten Server nutzt, bei dem wird mit Google Chrome auch nichts wirklich schneller gehen.

Jeder, der die entsprechende Hardware hat und auf einen modernen hochleistungsfähigen Browser mit vielen Raffinessen zurückgreifen möchte, sollte Google Chrome testen und seine eigenen Erfahrungen machen. Wer bisher andere Browser wie zum Beispiel Firefox genutzt hat, bekommt die Möglichkeit ihm lieb gewordene Passwörter, Bookmarks und Ähnliches auf Google Chrome zu importieren.

Allerdings hat Google Chrome den großen Nachteil, dass Google Daten zum Surfverhalten sammeln und diese für seine Zwecke ausnutzen kann. Wer damit kein Problem hat, der kann Google Chrome bedenkenlos nutzen. Mit Kill-ID können Sie Ihre persönliche Identifikationsnummer löschen, die entsprechenden Einstellungen deaktivieren und jegliche Datenwege an Google blockieren.

Immerhin wurde Google Chrome auch im letzten Lifehacker-Test der Sieger, wenn es um die Geschwindigkeit geht.

Mittlerweile gibt es auch verschiedene Lösungen, die ebenfalls auf dem Chromium Quellcode basieren, die Internetnutzer anwenden können, wenn sie Bedenken beim Schutz ihrer Daten haben.


Unchrome Logo

Wer sich Google Chrome herunterlädt, bekommt von Google eine persönliche ID zugeteilt, mit deren Hilfe Google den Anwender jederzeit identifizieren kann. Mithilfe von UnChrome, das ist ein kostenloses Tool, ist es möglich, diese ID zu verschlüsseln und dann wieder anonym im Internet zu surfen. Wer Unchrome aktivieren möchte, muss vorher den Browser von Google schließen.