Kategorien
Design E-Business SEO & Online-Marketing UI/UX

Gute Texte reichen nicht: So gestaltest du Online-Inhalte interessant und auffindbar

Dass die Inhalte – und damit ist in erster Linie Text gemeint – entscheidend zum Erfolg einer Website beitragen, weiß inzwischen jeder. Weniger einhellig ist die Meinung darüber, wie diese Inhalte für das Medium Internet optimal aufbereitet werden, so dass sie gut und komfortabel lesbar und vor allem auch zu finden sind. Wie du Texte für Mensch und Suchmaschine richtig strukturierst und mit anderen Elementen wie Podcasts, Fotos oder Videos anreicherst und damit das Anwendererlebnis steigerst, erfährst du hier.

Kategorien
E-Business E-Commerce

500+ kostenfreie Icons für (mobiles) Webdesign & E-Commerce

Icons kann man immer brauchen. Je frischer und ansprechender gestaltet, desto besser für kreative Portfolios, Blogs und Online-Werbung. Hier eine umfassende Sammlung  neuer oder noch nicht so bekannter Icons und Buttons für Webdesign, E-Commerce und User Interface Design.

Neuheiten und Kuriositäten

iMobile Device Icons

Info │ Download (Zip/5,3 MB)

Bei diesem Rundum-Sorglos-Paket mit jeweils 60 Icons in den Maßen 128 x 128 beziehungsweise 256 x 258 Pixel bleibt kaum ein Wunsch offen. Vom iPhone über Blackberry, Samsung und diversen PDAs bis hin zu Tablet PCs ist so ziemlich alles dabei, was unter den Begriff Smart Phone und Mobile Computing fällt. Die Icons dürfen sowohl privat als auch kommerziell verwendet werden.

iPhone App Icons

Info & Download

Im Portal Icon Finder finden sich unter dem Schlüsselwort „iPhone app“ ingesamt 92 Icons rund um die mobilen Apple-Geräte, iTunes bis hin zu Mini Mac und iMac. Alle Icons werden jeweils als PNG-File für den Einsatz auf Linux und Mac beziehungsweise in Bildbearbeitungsprogrammen sowie als ICO-Dateien für den Einsatz auf Windows-Systemen angeboten.

Achtung: Je nach Urheber variieren die Nutzungsrechte – während manche Icons kommerziell und privat verwendet werden dürfen, sind andere nur für den privaten Gebrauch bestimmt. Bitte immer über den Link „INFO“ prüfen, unter welchen Bedingungen die Icons eingesetzt werden dürfen.

Touch Screens Icons

Info & Download

193 Icons zählt diese Sammlung zum Stichwort „Touch Screens“ im Portal Icon Finder. Die einzelnen Symbole stammen von verschiedenen Desginern und Blogs. Der Großteil ist unter der GNU Public Licence frei verfügbar; andere unter Creative Commons, manche sind nur für den privaten Gebrauch verwendbar. Bitte jeweils prüfen!

Origima Icons

Info | Download

Wie Origami-Faltspiele sehen sie eigentlich nicht aus, dafür passen die fröhlich-bunten Symbole mit dem typischen Web-2.0-Schatten gut auf moderne Websites und Apps. Dafür dürfen sie auch eingesetzt werden. Verfügbar ist das Set in vier verschiedenen Größen (16px, 32px, 48px, 128px, und 256px) sowohl im PNG- als auch im skalierbaren Illustrator-AI-Format.

Snow Sabre Silver Icons

Info & Download

Set aus 50 Icons von Minimamente/devianArts – jeweils als PNG und ICO – allerdings nur für den persönlichen Gebrauch.

I love icons

Download (Zip/13,2 MB)

Dieses Set stammt von dem jungen italienischen Grafiker und Webdesigner Sven Vath: 10 Icons in den Abmessungen 512 x 512 Pixel in den Formaten ICN und ICO zur freien Verwendung für den privaten Gebrauch und Webprojekte.

Kurios bis dekorativ

Majong Icons


Info & Download

37 Icons mit verschiedenen japanisch anmutenden Symbolen, gestaltet von Martin Persson. Die Icons haben ein Maß von 128 x 128 Pixel und können jeweils einzeln als ICO für Windows beziehungsweise PNG für Linux, Mac oder zum Öffnen mit einem Bildbearbeitungsprogramm kostenfrei heruntergeladen werden. Sie dürfen auch in kommerziellen Projekten benutzt werden, wenn ein Link auf die Seite des Designers gesetzt wird.

Merry Christmas

InfoDownload (Zip, 145 KB)

Weihnachtliches aus China – warum nicht? Die Merry-Christmas-Sammlung von JJ-Maxer enthält 7 Icons im PNG-Format (128px) und ist frei verfügbar, auch für kommerzielle Zwecke.

Social Icon Sets

Orange Jelly Social Media Icons

InfoDownload (Zip/5,2 MB)

Passend zum Herbst und für Halloween ist dieses komplett orange gehaltene Set von Webtreats mit 40 frei verfügbaren Icons für den privaten und kommerziellen Einsatz.

Social Media Balloons

Info │ Download (1,3 MB)

Als Sprechblasen machen sich Social Icons auch sehr gut. Das Paket enthält angesichts der wie Pilze aus dem Boden schießenden Sozialen Netzwerke mittlerweile 64 Symbole – jeweils in den Formaten 128px, 96px, 64px, 48px und 32px – und ist sowohl für private wie auch kommerzielle Projekte unter der Creative Commons Lizenz frei verfügbar.

Social Tags

Info & Download

… oder als Schlüsselanhänger. Diese Variante stammt von dem indischen Designer Deepu Balan. Die Icons dürfen unter der Creative Commons Attribution Works 2.5 India frei verwendet und sogar geändert werden.

Social Store Icon Set

Download (Zip/23,7 MB)

Dieses Set von Mateusz Dembek besteht aus 10 Icons in vier verschiedenen Größen (512px, 256px, 128px, 64 px). Verwendet werden dürfen die schicken Dinger leider nur für den privaten Gebrauch.

Buddycons

InfoDownload (PNG- und AI-Dateien)

Lohnende Beute für „Jäger und Sammler“ ist diese Kollektion von 126 Icons – je einmal als PNG-Datei (32px) und als skalierbare Vektorgrafik im Illustrator-Format. Die Icons dürfen sowohl in privaten als auch kommerziellen Projekten eingesetzt, aber nicht über die eigene Website weitergegeben werden.

Simple Glossy Silver Social Networking Icons

Info | Download

154 Icons mit so ziemlich allen Symbolen für Soziale Netzwerke, Blogsoftware und Content-Management-Systeme zur freien Verfügung.

Free Grunge Social Media Icons

Info | Download

Zwar nur 10 Icons, dafür aber in zwei verschiedenen Größen (256px, 64px) und je einmal mit Glanz und Lichteffekt, einmal ohne. Noel Tock stellt diese Icons unter der Creative Commons Lizenz (Attribution Share Alike 3.0) zur freien Verfügung.

Web Cartoon

InfoDownload (Zip/236 KB)

Wunderschön gezeichnet sind diese 40 Mini-Icons (48 x 48 Pixel) von der russischen Grafikdesignerin Anna Shylapnikova. Die PNG-Dateien dürfen frei verwendet werden.

Bulb Social Media Icons

Info | Download (Zip/398 KB)

Momentan besteht dieses Set aus 9 Icons – es soll aber bald um weitere ergänzt werden. Die Icons sind frei verfügbar – einzige Bedingung: Ein Hinweis auf den Urheber mit Link auf die Quelle.

Icons rund ums Geld und Geldverdienen

Currency Stock Icons

Info & Download

Nicht zum Geldverdienen – also für den Einsatz in Online-Shops oder anderweitige kommerzielle Zwecke verwendbar, ist dieses schicke Icon-Set. Wer in privaten Projekten Dollarzeichen, Pfund, Yen oder das Euro-Symbol benötigt, darf die Icons unter der Creative Commons Lizenz (Attribution Noncommercial) frei verwenden.

e-commerce

Info & Download

Diese Sammlung aus insgesamt 10 Icons darf auch für kommerzielle Projekte kostenfrei eingesetzt werden. Es ist jedoch nicht erlaubt, die Sammlung weiterzuvertreiben.

E-Commerce Glossy

Info | Download

Dieses hochwertige Set enthält 21 Icons in drei verschiedenen Dateiformaten: PNG, Photoshop PSD und Illustrator AI. Die Icons dürfen für private und kommerzielle Zwecke verwendet werden.

Weby Icons

InfoDownload

100 Icons rund ums Thema E-Commerce bietet Icon Media zur freien Verwendung in privaten und kommerziellen Projekten an. Sämtliche Icons sind als PNG, ICO und ICNS im Paket enthalten.

Tipp: Das Smashing Magazin bietet heute ein Set von 18 freien Kreditkarten. Bereits vor einiger Zeit erschien eine ganze Kollektion verschiedener Kreditkarten-Icons im Smashing Magazine.

Beliebte Icon-Sammlungen auf Dr. Web:
Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Photoshop-Tipps: Fotos beim Freistellen umrechnen oder gerade rücken

Mit dem Freistellungswerkzeug können Sie nicht nur Bilder zuschneiden, Sie können es auch dazu benutzen, um den freigestellten Bereich auf ein bestimmtes Pixelmaß zu reduzieren, den Horizont gerade zu rücken oder das Seitenverhältnis zu ändern. Außerdem können Sie das Originalfoto erhalten und die Ränder lediglich ausblenden.

1. Ränder verstecken

Falls Sie auf die Schnelle einen Ausschnitt von einem Foto benötigen – sagen wir nur das Gesicht von einem Ganzkörperfoto, das sie gerne erhalten möchten – können Sie die Ränder auch verstecken.

  • Dazu klicken Sie in der Ebenen-Palette bei gedrückter Alt-Taste doppelt auf die Hintergrund-Miniatur. Daraufhin ändert sich die Bezeichnung der Hintergrundebene in „Ebene 0“.
  • Wählen Sie nun den gewünschten Bildausschnitt aus und aktivieren Sie die im folgenden Bild rot umrandete Option Ausblenden.
  • Mit dem Verschieben-Werkzeug können Sie anschließend das eigentliche Bild im sichtbaren Bereich zurecht rücken.
  • Um es wieder einzublenden, wählen Sie den Befehl Bild, Alles anzeigen.
  • Das Freistellungswerkzeug verdeckt den kompletten Außenbereich, den Sie verstecken wollen. Über die Optionen können Sie Farbe und Deckkraft der Abdeckung steuern.

FOTO: Fotostudio Stock-Müller, Freiburg

2. Horizont gerade rücken

Bei Fotos von Gebäuden oder bei Landschaftsaufnahmen kommt es immer wieder vor, dass der Horizont schief ist. Auch das können Sie mit dem Freistellungswerkzeug im wahrsten Sinne des Wortes gerade rücken:

  • Aktivieren Sie das Freistellungswerkzeug
  • Wählen Sie wiederum den gewünschten Bildausschnitt aus.
  • Klicken Sie mit dem Mauszeiger außerhalb der Auswahlkante ins Bild und drehen Sie die Auswahl so, dass die obere Auswahlkante parallel zum Horizont steht.
  • Beim Freistellen rückt Photoshop das Bild dann gerade.


Über das Freistellungswerkzeug können Sie je nach Bedarf den Horizont schräg stellen oder gerade rücken. FOTO: Manuela Müller

3. Seitenverhältnis oder Pixelbreite ändern

Wenn Sie Fotos als Wallpaper aufbereiten und zu dem Zweck auf das 16:9-Seitenverhältnis umrechnen wollen, können Sie auch das beim Freistellen ganz einfach einrichten:

  • Öffnen Sie Ihr Foto und aktivieren Sie das Freistellenwerkzeug.
  • In den Optionen geben Sie im Feld Breite „16 cm“ und im Feld Höhe „9 cm“ ein; lassen Sie das Feld Auflösung frei.
  • Wählen Sie erst danach den Bildausschnitt und stellen Sie das Foto frei.
  • Ihre Auswahl wird nun auf das gewünschte Seitenverhältnis umgerechnet.
  • Falls Sie das Seitenverhältnis beibehalten möchten, aber eine vorgegebene Breite wünschen – zum Beispiel 500 Pixel – geben Sie ins Feld Breite einfach „500 px“ ein. Dieses Mal bleiben die Felder Höhe und Auflösung leer. Der freigestellte Bereich wird anschließend auf die gewünschte Breite und die dazu passende Höhe umgerechnet.
Beim Freistellen wird das Seitenverhältnis umgerechnet. FOTO: Manuela Müller
Kategorien
Webdesign

Icons, Tools, Plugins – die Inflation der langen Listen

33 brandneue Wallpaper fürs iPad, 50 rockende jQuery-Plugins, 66 super coole Illustrator-Tutorials, 100 kostenlose Icon Sets zum Download, 1000+ Pinselspitzen für Photoshop und so weiter und so weiter. Ohne inflationäre Sammlungen von Tipps, Tools, Fotos und Tutorials kann heute offenbar kein Designblog mehr bestehen. Zählt wirklich nur noch Masse und wer liest das eigentlich alles? Vor allem aber: Was brauchen und was wollen Sie im Blog Ihres Vertrauens gerne lesen. Und: Nach welchen Kriterien bewerten Sie, ob ein Beitrag gut ist oder schlecht?

Wir wüssten gern, worauf es Ihnen ankommt

Schaut man sich an, wonach am häufigsten gesucht wird und was in den Kommentaren über entsprechende Beiträge gesagt wird, entsteht ein ziemlich zwiespältiges Bild: Über Listenbeiträge wird zwar kräftig gemeckert, abgerufen werden Sie jedoch äußerst gerne. Zwei bis dreimal so oft wie die per Kommentar immer wieder als „fehlend“ angemahnten Fachbeiträge.

Kleines Beispiel: Obwohl Fotosammlungen nominell verpönt sind, führen Dr.-Web-Listen mit Graffiti-Art, Action- oder Forced-Fotografie die Hitliste gleich nach Icon- und Photoshop-Tutorial-Sammlungen die Besucherstatistik an. Dagegen dümpeln Fachbeiträge über CSS3 oder mobile Webentwicklung, selbst ausführliche Photoshop- oder Gimp-Tutorials weit abgeschlagen auf den unteren Rängen. Da drängt sich die Frage auf, ob letztendlich eher Masse als Klasse – sprich megalange Listen mit Icons, Plugins, Tools und Tutorials – das Objekt der Begierde sind.

Nicht mehr trendy oder allgemeine Kommentier-Unlust?

Außerdem: Anlässlich des Relaunchs von Dr. Web und bei einigen anderen Beiträgen taucht in den Kommentaren der Vergleich zum Smashing Magazine auf. Tenor: Dort erschienen interessantere Beiträge, es sei auch viel mehr los, weil dort rege diskutiert wird. Der konkrete Vergleich bringt Interessantes zu Tage. So erschienen im Smashing Magazine und auf Dr. Web am selben Tag jeweils der Originalbeitrag und dessen deutsche Übersetzung, „HTML 5 und Flash – Koexistenz, statt Krieg“. Auf Dr. Web bekam dieser Beitrag bislang 14 Kommentare, im Smashing Magazin 267.

Bei anderen vergleichbaren Beiträgen beziehungsweise Themen fällt die Kommentarbilanz auf Dr. Web noch schlechter aus. Gibt es im deutschen Sprachraum eine andere Kommentar-Kultur oder ist es momentan einfach nicht mehr in, ein deutsches Blog zu lesen?

Jede Menge Fragen, die wir uns ohne eine Reaktion von Ihnen nicht beantworten können. Wer gerne diskutieren und uns seine Meinung sagen mag, kann das entweder hier in den Kommentaren tun oder völlig anonym an einer Online-Befragung teilnehmen.

Buchverlosung als Danke-Schön

Unter denjenigen, die hier in den Kommentaren eine Antwort auf unsere Fragen geben, verlosen wir ein Buch. Es ist Modernes Webdesign von Manuela Hoffmann aus der Edition PAGE vom Galileo Verlag, im Wert von 39,80 Euro, Hardcover, farbig illustriert und selbstverständlich originalverpackt.

Wir freuen uns auf konstruktive Kritik und Eure Meinung – entweder hier in den Kommentaren oder anonym via Online-Formular bei PollDaddy.

Kategorien
Design HTML/CSS Inspiration Tutorials

HTML 5 & CSS 3: Tutorials, Tipps und Referenzen

Die Entwicklung W3C-konformer, sprich Browser-übergreifender Standards geht voran. Nachdem nun auch Microsoft auf die Schiene einschwenkt und mit dem just vorgestellten Preview des Internetexplorer 9  sowohl HTML-5-Elemente wie canvas als auch CSS-3-Eigenschaften wie border-radius fehlerfrei unterstützt, ist es Zeit, die neuen Techniken zu lernen. Schließlich lassen sich HTML 5 und CSS 3 nicht nur für klassische Websites, sondern auch für Benutzeroberflächen und Applikationen auf mobilen Geräten, die ohne Internetexplorer auskommen, hervorragend einsetzen.

Es geschehen noch Zeichen und Wunder: Animated Border-Radius im Preview des IE 9

Tutorials, Tipps & Referenzen

HTML 5 rocks – Google zeigt wie’s geht

Webentwicklung der nächsten Stufe

Googles Antwort auf Apple’s HTML 5 Showcase: Gut strukturiert und interaktiv gestaltet ist diese umfassende Präsentation der neuen Feature von HTML 5, CSS 3 und JS APIs wie Geolocation, Notifications oder SQL-Database. Die Funktionen der JS APIs und CSS-3-Eigenschaften wie Text- oder Box-Shadow, HTML-Elemente zur Gestaltung von Formularfeldern, dem dynamischen Rendern und Skalieren von Bitmap- beziehungsweise Vektorgrafiken sowie die neuen Möglichkeiten zum Einbinden von Video, Audio und vieles andere mehr lassen sich direkt online ausprobieren.

Außerdem interessant: Die neuen semantischen HTML-Tags und Link-Attribute.


Interaktive Präsentation der neuen Feature von CSS3, HTML5 und JS APIs

Optimiert sind die 48 „Folien“ dieser Präsentation von Marcel Wichary und Ernesto Delgado für Google Chrome. Nach Installation des kostenlosen Chrome Frame PlugIn lassen sich viele der Effekte auch im IE betrachten – so zum Beispiel die vielfachen Möglichkeiten, die das canvas-Element bietet. Per JavaScript und canvas, deutsch für Leinwand, lassen sich auf einem Hintergrund Grafiken beliebig anordnen und verändern. Diese Technik ist inzwischen in fast allen gängigen Browsern implementiert. Große Überraschung: Die brandneue Preview des IE 9 verfügt ebenfalls über dieses Element und schnitt bei Tests sogar besser ab als die so genannten Webkit-Browser.

Lesetipp: Eine kleine Canvas-Einführung von Peter Kröner


Solche Effekte lassen sich mit canvas realisieren.

Tipp: Die JavaScript-Abfrage, mit der Nutzer des IE (6 bis 8) beim Laden der HTML-5-Präsentation ermittelt und auf das kostenfreie Herunterladen und Installieren des Chrome Frame Plugin hingewiesen werden, ist eine nachahmenswerte Idee, um die neuen „Segnungen“ von CSS 3 und HTML 5 auch unter Nutzern der älteren IE-Versionen zu verbreiten. Sofern die so ermittelnden Anwender das Plugin installieren dürfen, können Sie beim Surfen fortan ebenfalls gerundete Ecken sehen oder Lupeneffekte einsetzen, mit denen sich einzelne Bereiche einer Vektorgrafik vergrößern lassen, wie die folgende Abbildung zeigt.

Selektierte Bildbereiche per HTML vergrößern oder verkleinern. Demo*

*) Funktioniert in Google Chrome, IE mit Google Frame PlugIn, Firefox und Opera – nicht in Safari.

Drop-down-Menü mit HTML 5 & CSS 3

Ein ausführliches Tutorial für das unten abgebildete Drop-down-Menü lässt sich laut seinem Verfasser, Dan Wellman, in 25 Minuten nachbauen. Zum Einsatz kommen das HTML-5-<nav>-Tag und CSS-3-Eigenschaften wie border-radius und opacity. Die Hover-Effekte für die zweite Menü-Ebene sind mit jQuery umgesetzt.
Das Ergebnis läuft in allen Webkit-Browsern ohne Probleme. Die Demo funktionierte beim Dr.-Web-Test auch im Internetexplorer (IE), allerdings mit kleinen Einschränkungen – abgerundete Ecken sind wegen der mangelnden CSS3-Unterstützung im IE nicht zu sehen.


Ausklappmenü mit transparenten Auswahllisten und Hover-Effekten ….

DemoTutorial


… das dank Fixes auch im IE 7 und 8 weitgehend funktioniert.

Modale Fenster, Infoboxen & Sprechblasen

Drop-in Modals

Anleitungen für zwei schicke Modalfenster, die mittels CSS-3-Effekten und -Eigenschaften aufpoppen beziehungsweise vom oberen Monitorrand ins Bild klappen, finden sich im ZURB-Playground.


Beschreibung und Demo

Infobox mit CC3-3D-Ribbon

Ausschließlich mit CSS 3 ist diese Infobox mit 3D-artiger Bauchbinde für die Überschrift gestaltet. Zum Einbinden der Dreiecke links und rechts, lohnt es sich, die Kommentare zu lesen. Dort wird die Platzierung der Dreiecke per :before und :after anstelle von Z-Index empfohlen, was den Code schlanker macht.

DemoTutorial

Info-Bubbles – Sprechblasen mit CSS 2.1 und CSS 3

Schön gelöst durch Progressive Enhancement (siehe auch hier) sind diese komplett in CSS realisierten Sprechblasen von Nicolas Gallagher. Die grundlegende Gestaltung der Blockquotes erfolgt in CSS 2.1 – vor allem durch den Einsatz der Pseudo-Eigenschaften :before und :after, während CSS 3 mit Eigenschaften wie gradient, border-radius und transform für ein etwas kompakteres und ausgefalleneres Erscheinungsbild der Sprechblasen sorgt.

Vorteil dieser Methode: Dank des mehrschichtigen Aufbaus, stellen die Browser das dar, was sie anzeigen können. Die Zitate selbst sind in allen – auch den ältesten Browsern zu sehen. Dank weitgehender Browser-Unterstützung von CSS 2.1 werden die einfachen Sprechblasen in den meisten gängigen Browsern dargestellt. Die einzige Ausnahme bildet Firefox 3.0 (zwei bis drei Prozent Marktanteil), der CSS 2.1 nicht unterstützt. Am Ende dieses Postings finden Sie eine detaillierte Checkliste für Browser-Unterstützung von CCS-3-Selektoren, -Eigenschaften und HTML-5-Elementen.

Animierte Bildergalerien und Image Slider

CSS Polaroid Photo Gallery

Schön gemachte Fotogalerie mit den CSS-3-Eigenschaften box-shadow und transform. Gut geeignet für die Präsentation ausgewählter Fotos oder Arbeitsproben.


Tutorial / Demo

CSS 3 Image Slider

Diese Variante ist auch für umfangreichere Sammlungen und vor allem zum Jonglieren mit der CSS-3-Eigenschaft transition interessant.

Tutorial / Demo

Apple Web Gallery mit CSS 3 2D und 3D transforms

Wie man die Eigenschaft transform noch mit 2D- und 3D-Effekten aufpeppen kann, zeigt diese Demo von aus dem Apple Safari Dev Center. Unerfreuliche Einschränkung: Die Demo erfordert einen Safari-Browser.


Demo

Dokumentationen & Browser-Checklisten

Spezifikationen des W3C, Referenzen

HTML-5-Spezifikation (Entwurf, W3C)

CSS-3-Spezifikation (Entwurf, W3C)

HTML 5 – Was geht heute, was geht nicht? Überblick von Peter Kröner

CSS 3 Opacity: Eine ausführliche Referenz (englisch)

Safari CSS Reference

Web Designer’s Checklist

Einen schnellen Überblick, welche Browser, welche Eigenschaften und Attribute unterstützen bietet die Checkliste von findmebyIP.


Browser-Unterstützung von CSS 3 und HTML 5 als Checkliste bei findemebyIP

Schlussbemerkung

Diese Beispiele zeigen insgesamt, dass es sich schon jetzt lohnt, die neuen Möglichkeiten von HTML 5 und CSS 3 für aktuelle Webprojekte einzusetzen. Vor allem deshalb, weil nun auch Microsoft mit dem Internetexplorer 9, der im August 2010 auf den Markt kommen soll, endlich die neuen Techniken implementiert. Damit auch die vielen Nutzer der älteren IE-Versionen in den Genuss von HTML-5- und CSS-3-Effekten kommen, empfiehlt es sich, diese Nutzer mit modalen Fenstern auf den kostenlosen Download und die Installation des Google Frame Plugin hinzuweisen. Vielleicht spornen solche Methoden die Browser-Hersteller auch dazu an, W3C-konform zu arbeiten, damit Kunden nicht zu anderen Anbietern abwandern, die diese Techniken schon nutzen. Äußerst schade ist in diesem Zusammenhang, dass nun andere große Hersteller wieder eigene Süppchen kochen – wie das Beispiel der Apple Web Gallery zeigt.

Auch wenn es noch ein langer Weg ist, bis HTML 5 und CSS 3 vom W3C engültig verabschiedet und flächendeckend unterstützt werden, empfiehlt es sich, die neuen Techniken einzusetezn. Vor allem dann, wenn durch Progressive Enhancement gewährleistet ist, dass auch Nutzer von älteren Browsern eine möglichst gute User Experience haben.

Kategorien
Webdesign

Brush up your English (1): Apostroph oder kein Apostroph?

Auf den ersten Blick scheint Englisch eine recht einfache Sprache zu sein. Bei den Feinheiten wird’s dann aber haarig. Thema Apostroph – heißt es boss’s oder bosses‘, it’s oder its, your oder you’re ? Wie so häufig, gibt es mehrere mögliche Antworten auf diese Fragen. Hier sind 4 Regeln, die Ihnen helfen, das Apostroph richtig zu setzen und Ihre E-Mails oder Blogs wie ein Profi zu texten.

Schaut man sich in englischsprachigen Weblogs aufmerksam um, sieht man eine erstaunliche Vielfalt an Schreibweisen: Entweder steht das Apostroph da, wo es nicht hingehört, oder es fehlt gänzlich, wo es eigentlich stehen sollte. Selbst Muttersprachler kämpfen mit dem Apostroph. Dennoch sehen solche Fehler in Ihrem Portfolio oder Firmen-Blog nicht gut aus. Prüfen Sie bei künftigen Zweifelsfällen nach den folgenden vier Regeln.

1. Ein fehlendes Zeichen oder Wort anzeigen

Ausdruck / Beispielsatz
You are You’re right on top.
I will not I won’t be supporting IE6 no more.
It is It’s time to code for webkit browsers.
It would It’d be nice to see more of these horizontal layouts.

Vorsicht Stolperfalle

Verwechseln Sie nicht „its“ und „it’s“. Its ist ein Persononalpronomen wie ours, hers, yours und andere.

2. Fehlende Ziffern in einem Datum anzeigen

Anders als im Deutschen wird der Kurzschreibweise von Jahreszahlen im Englischen ein Apostroph vorangestellt – zum Beispiel so:

I started Webdesign in ’96.

3. Um den Genitiv oder den besitzanzeigenden Fall anzuzeigen

Die folgende Tabelle gibt erläuternde Beispiele zu dieser Regel. Beachten Sie, dass unregelmäßig gebildete Pluralformen (men, women, chilrdren) wie Nomen im Singular behandelt werden.

Singular / Plural
The div’s background image.
(1 div, 1 Hintergrundbild)
The divs‘ in the outer content wrapper …
(2 oder mehrere divs, 1 wrapper)
The class’s property
( 1 Klasse, 1 Eigenschaft)
The classes‘ properties
(2 oder mehrere Klassen, mehrere Eigenschaften)
The woman’s children were busting the office.
(1 Frau, 2 oder mehrere Kinder)
The women’s children were busting the office.
(2 oder mehre Frauen, 2 oder mehrere Kinder)

4. Zum Anzeigen des Plurals von Abkürzungen und Buchstaben

Dieser Fall ist besonders trickreich, da es Unterschiede zwischen britischem und amerikanischem Englisch gibt, wie die folgende Tabelle zeigt.

Britisches Englisch / Amerikanisches Englisch
Kein Apostroph im Plural von Abkürzungen Abkürzungen mit Apostroph.
CDs CD’s
1970s 1970’s
Diese Regel wird seit den Zeiten des Internet weniger strikt angewandt als zuvor üblich.

Britisches und amerikanisches Englisch
Der Plural von Buchstaben wird durch einen Apostroph angezeigt – Beispiel:
There are four i’s and four s’s in „Mississippi“.

„Do’s and don’t’s“ oder „dos and don’ts“?

Ein Pendant zum Duden gibt es für Englisch nicht. Auch auf einschlägigen Websiten von Experten werden Sie unterschiedliche Antworten auf diese Streitfrage finden. Manche sagen do’s and don’t’s, andere schreiben dos and don’ts.

Don’t’s ist korrekt, wenn Sie es genau nehmen. Es sieht aber nicht sehr schön aus, mit den zwei korrekt gesetzten Beistrichen. Wenn Sie ohnehin zur Schreibweise „dos and don’ts“ neigten, nutzen Sie diese Variante ruhig weiterhin.

Kleiner Tipp zum Schluss

Wenn Sie sich nicht sicher sind, ob Sie „it’s“ oder „its“ schreiben sollen, nutzen Sie einfach diesen Trick:

  • Wenn Sie statt der Kurzform „it is“ sagen können, schreiben Sie „it’s“ – Beispiel:
  • Wenn das inhaltlich nicht stimmt, benutzen „its„.

Beispiele
It’s very easy = it is very easy.
Adobe is going to release its fifth edition of Creative Suite.

Kategorien
Design

Die Form folgt der Funktion: Re-Design bei Dr. Web

Während draußen im realen Leben die alljährliche Metamorphose von grau zu grün abläuft, wird’s in der virtuellen Welt von Dr. Web jetzt noch ein wenig blauer. Haben Sie es schon gemerkt? Wir haben etwas umgebaut und Dr. Web eine neue Navigation spendiert.

Das neue Design bietet vor allem eine verbesserte Navigation

Wozu soll das gut sein?

Falls Sie sich jetzt fragen, was Sinn und Zweck des Umbaus sein soll, lassen Sie uns das kurz und knapp auf die folgende Punkte bringen:

  • Die neue Hauptnavigation bietet schnelleren Zugriff auf die beliebtesten Kategorien für Dr. Web und Dr. Web PLUS
  • Über die Register-Karten greifen Sie gezielt auf die Inhalte des jeweiligen Bereichs zu.
  • Verbesserter Dr.-Web-Plus-Zugang
  • Syntax-Highlighting in Quellcode-Beispielen der Java-Script-, jQuery- und PHP-Tutorials (wird nach und nach ergänzt)
  • Eine klarere Artikelübersicht (in Planung)

Angesichts des umfangreichen Contents feheln bei einigen Beiträgen zunächst noch die Illustrationen in der Themenübersicht. Auch das Syntax-Highlighting ist noch nicht flächendeckend eingeführt. An einigen Beiträgen haben wir es ausprobiert. Der große Rest muss nun konvertiert werden – ein trotz cleverer Scripts doch sehr zeitaufwändiger Prozess, der nicht ganz ohne menschliches Handanlegen und Nachkontrolle auskommt.

Wo ist die Suchfunktion geblieben?

Manche unter Ihnen werden vielleicht das Suchfeld mit dem kulleräugigen Fernglas-Icon vermissen. Nun – dieses hübsche Suchsymbol gehört leider zu den Opfern unseres Umbaus. Wie Sie sicherlich schon scharfsinnig kombiniert haben, steht unser Re-Design im Zusammenhang mit dem Smashing Magazine. Ganz richtig. Wir haben das Design der beiden Websites aneinander angeglichen. Deshalb steht die Suche auf Dr. Web nun ganz oben im Kopfbereich und nicht mehr rechts unten in der Sidebar.


Die Suchfunktion finden Sie jetzt oben in der Navigationsleiste, über dem Login

An der Funktion hat sich bis auf die fehlende gelbe Markierung jedoch nichts geändert. In gewohnter Dr.-Web-Qualität werden nach dem Eingeben des Suchbegriffs und Klick auf SUCHE die relevanten Artikel übersichtlich untereinander aufgelistet.

Die Trefferlisten können wie bisher nach Relevanz, Datum oder Titel gefiltert werden.

Ihre Meinung ist gefragt

Natürlich würde uns interessieren, wie Ihnen das Re-Design gefällt. Wir freuen uns auf Kommentare zu diesem Post.

Kategorien
Webdesign

Frisch aktualisiert – das Dr. Web PLUS Lexikon

Wozu ein Dr.-Web-PLUS-Lexikon führen, wenn es Wikipedia gibt? Ganz einfach – weil das Dr.-Web-PLUS-Lexikon ganz gezielt und kompakt Begriffe und Sachverhalte erklärt, mit denen freelancende Webworker in der Berufspraxis häufig konfrontiert sind.

Stichwort Steuern: Von A wie Abgabenordnung bis Z wie Zahllast finden Sie in diesem gerade aktualisierten Beitrag prägnante Erklärungen zu allen relevanten Begriffen und Angaben, die Sie für Ihre Buchführung oder Steuererklärung parat haben müssen.


Steuerbegriffe von A bis Z kompakt erklärt

Ebenfalls frisch für Sie überarbeitet: Ein Mini-Lexikon zur Buchführung sowie Lexikon für Gründer (und solche, die es werden wollen). Ersteres bietet Ihnen das für Freiberufler, Selbstständige und Unternehmen wichtige Fachvokabular kompetent und knapp erläutert. Das zweite unterstützt Sie auf dem Weg in die Selbstständigkeit – es bahnt Ihnen eine Schneise durch den Begriffsdschungel von Businessplänen und Antragsformularen sowie Merkblätter für Gründer.

Weitere betriebswirtschaftliche Stichworte sind Versicherung, Telefonie und Finanzen. Aber auch zum Bereich Webdesign und Hosting finden sich einige erste Beiträge. Das PLUS-Lexikon wird in loser Reihenfolge fortgeführt. Wenn Sie schon immer etwas rund ums selbstständige Webworken wissen wollten und sich bisher nie trauten, zu fragen – posten Sie’s uns. Wir greifen Ihre Themenwünsche gerne auf!