Gesagt, getan! Der TwentyTen-Ordner wurde kopiert, umbenannt und wieder eingefügt. Die Templates habe ich nach meinen Wünschen angepaßt.

Es ist also kein Child-Theme von TwentyTen, weil mir die Bearbeitung von Child-Themes entschieden zu frontenderunfreundlich ist.

Wenn etwas nicht funktionieren sollte, könnt ihr das gerne hier posten. auch Kommentare zum neuen Erscheinungsbild, ob positiv oder negativ, sind gerne gesehen.

Als erstes legen wir ein weißes Blatt Papier vor uns auf den Schreibtisch, zücken einen Bleistift (Kuli ist lt. Designprofis verboten!) und horchen ganz tief in uns hinein.

Irgendwo da muss das Plätschern der Kreativitätsquelle doch zu hören sein?

Mmmh………, ich hör nix. Ach und zeichnen kann ich auch nicht.

Ein Lineal wird dazugelegt…………noch immer nix zu hören!

Letzter Versuch! Von http://www.raincreativelab.com/paperbrowser/ lade ich mir ein landscape + notes herunter, drucke es aus und lege es auf den Schreibtisch. Schön und jetzt??

So geht es nicht, für mich jedenfalls nicht.

Also mach ich es wie immer:

Ich treffe den Kunden zu einem ersten Gespräch, was ungefähr 2 – 3 Std. dauert. Durch Fragen bekomme ich erst ein Profil des Unternehmens.

Wie will sich der Kunde im Internet präsentiert sehen? Was für Farben kommen in Frage oder gibt es Unternehmensfarben? Layout verspielt oder sachlich? Wie viel Unterseiten werden gebraucht und wie könnte die Navigationsstruktur aussehen? Usw. usw.

Wichtig ist imho sich vorher über den Kunden etwas zu informieren oder zumindest über die Branche, in der er tätig ist. Daraus ergibt sich ein Fragenkatalog, der während des Gesprächs mehr oder weniger abgearbeitet wird.

Je nachdem bekomme ich die Texte geliefert, oder teilweise geliefert und muss den Rest dazu fabulieren. Vielleicht gibt es noch Logo und/oder diverse Fotos dazu, in oft übersichtlicher Qualität.

Jetzt setze ich mich hin und erstelle den Quelltext für die Startseite. Ist das getan versuche ich ein paar Farben festzulegen. Dabei ist der Color Scheme Designer oft ganz hilfreich.

Manchmal greife ich dann tatsächlich zu Papier und Stift, um etwas hinzu kritzeln. Meistens vergeblich. Das Gekrakelte wandert in den Papierkorb und ich schaue mir im Internet einen Haufen Templates an, diverse Sites gibt es ja genug.

Formt sich dann noch keine Vorstellung in mir, lasse ich es mindestens 24 Std. liegen.

So können mehrere Tage vergehen, bis ich endlich einen Ansatz gefunden habe.

Er kann kommen wenn ich im Photoshop missmutig ein paar Kästchen hin- und herschiebe, oder beim Templateschauen , oder wenn ich ratlos anfange die CSS-Datei auszubauen, oder einfach so wenn ich grad was anderes mache.

Den einen wahren Weg gibt es bei mir nicht. Geplant wird aber trotzdem, auf meine eigene Weise.

Bitte verwendet diese Technik zur Einbindung von Google Maps nur für eure privaten Seiten und nicht für gewerbliche Websites!

Zuerst braucht ihr ein Google Konto, welches ihr in der Google-Maske oben rechts unter dem Menüpunkt Anmelden und dann unter Legen Sie jetzt ein Konto an erledigen könnt.

Unter Mein Konto könnt ihr bei dem Punkt Maps Eigene Karten anlegen. Wollt ihr für euer Unternehmen so ein blaues Fähnchen mit dem Standort eurer Firma in Google Maps meldet Ihr euch beim Lokalen Branchencenter an. Das kann ein paar Tage dauern, wenn ihr den Weg über die Postkarte mit dem Verifizierungscode wählt.

Habt ihr das erledigt besucht euren Google Account und geht dort bei Maps auf Meine Karten. Auf der linken Seiten könnt ihr im darauffolgenden Fenster normalerweise den Namen eurer Karte anklicken.

Die Karte mit eurem zentrierten Fähnchen sollte nun erscheinen.

Oben rechts den Menüpunkt Links anklicken und im sich öffnenden Fenster Eingebettete Karte anpassen und Vorschau anzeigen auswählen.

Es öffnet sich ein neues Fenster, wo ihr die Kartengröße anpaßt und weiter unten den entsprechenden Code herauskopiert und an geeigneter Stelle in eurer Dokument einfügt.

Der Code schaut ungefähr so aus:

Sehr praktisch finde ich das man nur das Fähnchen anklicken muss, damit sich ein kleines Popup mit der Anschrift öffnet. Unter Route berechnen: Hierher gibt man nur die Startadresse ein und einer Routenberechnung steht nichts mehr im Wege.

Habt ihr einen Strict-Doctype ist die Seite nicht mehr valide, weil da keine iframes erlaubt sind. In diesem Fall ändert ihr den Doctype einfach auf Transitional.

An der zweiten Codezeile würde ich noch ein paar Modifikationen vornehmen:

small gegen p austauschen und die Inline-Styles entfernen, damit eure normalen Formatierungen wieder greifen.

Grundsätzlich kann ich iframes nicht ausstehen, aber manchmal ist ein gesunder Pragmatismus auch nicht verkehrt.

Update: seit kurzem (01.10.2011 ?) funktioniert das Einbetten von Google Maps per iFrame im Internet Explorer (IE7) NICHT mehr. Die Karte wird angezeigt, aber nicht der Standort und es gibt einen Javascript-Fehler.

Deshalb stelle ich hier kurz meine 10 Lieblings-Addons für den Firefox vor:

Firebug

Unverzichtbar um Webseiten zu analysieren, Änderungen einzugeben und die Auswirkungen direkt live im Browser sehen.

Damit ihr euch in das Tool einarbeiten könnt gibts hier einen Link zu einem deutschsprachigen Tutorial und noch einen zu englischen Erläuterungen nebst Downloadmöglichkeit.

Web Developer

Die Möglichkeiten des Webdeveloper sind fast unübersehbar. Man kann Bilder, Java, Javascript deaktivieren, CSS anzeigen und bearbeiten, den Antwort-Header anzeigen lassen, alles mögliche validieren, usw. usw.. Im Grunde ebenso unverzichtbar wie Firebug.

HTML Validator

Fehler in anderen Webseiten oder dem eigenen Geschreibsel einfach unten rechts im Browser anzeigen lassen. Dort nistet sich der HTML-Validator nämlich ein. Je nach Status erscheint dort ein weißer Haken im grünen Kreis (kein Fehler), ein gelbes Warndreieck (Warnungen und unkritische Fehler) oder ein weißes Kreuz in rotem kreis (kritische HTML-Fehler).

Ein kurzer Doppelklick darauf gibt Details inkl. Quelltext preis.

HTML-Tidy sollte der Algorithmus eurer Wahl sein, wenn der Validator konfiguriert wird.

Color Zilla

Ihr würdet gerne den Hexcode einer Farbe wissen, die euch im Web vor die Füße fällt?

Mit Color Zilla kein Problem. Nach dem Installieren nistet das Addon sich als Pipette im Kästchen unten links im Browser ein. Mit Rechtsklick dorthin kommt ihr an die Optionen. Ein Linksklick und noch ein zweiter auf die Fläche dessen Farbcode euch interessiert und schon wird derselbe sowohl als RGB- und als -Hexcode rechts neben dem Color-Zilla-Kästchen angezeigt.

Search Status

Ein nützliches Addon, was euch u.a. den Goggle Page Rank und den Alexa Rank jeder Webseite anzeigt auf der ihr gerade seid.

Bei mir ist es ganz oben links im Browser, sogar noch links von Datei. Ein Rechtsklick auf das Search Status Symbol offenbart euch noch eine Reihe weiterer Möglichkeiten, z.B. No-Follow-Links highlighten, Metatags anzeigen, Whois (Wem gehört die Domain?) anzeigen, die Keywort-Dichte für bestimmte Schlüsselwörter anzeigen, usw..

WordPress Helper

Wenn ihr einen oder mehrere WordPress-Blogs betreibt, könnt ihr mit diesem Addon schnell mal ins Backend/Frontend der jeweiligen Blogs jumpen. Es nistet sich rechts unten im Browser ein. Ein Klick auf das Symbol gibt euch Zugang zu seinen Möglichkeiten

Fire Shot

Wenn ihr schnell mal einen Screenshot braucht, ist Fireshot ein nützliches Addon.

CSS Validator

Ein Rechtsklick ins Browserfenster einer beliebigen Website eröffnet euch die Möglichkeit das CSS beim CSS-Validator des W3C zu validieren.

Adblock Plus

Werbung ade! Praktisch ein Muss, wenn einen die Werbung auf Webseiten nervt.

Unter Einstellungen – Filter – Filter-Abonnement hinzufügen sind die Filter Easy List Germany, Easy List USA und der Filter von Dr. Evil zu empfehlen.

Wörterbuch EN/DE

Wenn man z.B. ein einzelnes Wort vom Deutschen ins englische oder umgekehrt übersetzen will ist das Addon ganz praktisch. Wort markieren Rechtsklick drauf und den entsprechenden Punkt wählen.

Diese Sammlung von Ratschlägen erhebt keinen Anspruch auf Vollständigkeit.

Da sich Google nicht so richtig in die Karten gucken läßt, ist einiges was mit dem Thema zusammenhängt immer auch die Weitergabe von Gerüchten, Meinungen und der eigene Glaube an die Richtigkeit seiner Erfahrungen.

Trotzdem glaube ich, das euch die Beachtung dieser Tips bei der Erstellung von Websites helfen kann, ein günstiges Suchmaschinenranking zu erreichen.

Ob und an welcher Stelle innerhalb des Suchmaschinenrankings eine Domain gefunden wird hängt von der Art der Suchbegriffe ab, die der Suchende eingibt.

Es hängt auch vom Alter der Domain ab, wie sie von den Suchmaschinen bewertet wird, d.h. eine Domain die schon mehrere Jahre existiert, wird i.d.R. von Suchmaschinen wohlwollender betrachtet, als eine Domain die erst seit einem Monat existiert.

Man kann eine Domain hinsichtlich bestimmter Suchbegriffe oder Begriffskombinationen für Suchmaschinen optimieren.

Diese Begriffe und Begriffskombinationen könnten im:

• Domainnamen
• dem Titel der Webseite
• dem „Description-Metatag“
• dem alt,- und/oder title-Attribut von Bildern
• dem title-Attribut von Links
• dem Quelltext

ein,- oder mehrmals vorkommen.

Vorteilhaft für die Auswertung durch Suchmaschinen ist:

Semantischen Quelltext schreiben

Benutzt die XHTML-Elemente zur Auszeichnung des Textes und Bilder die der Bedeutung des Inhaltes entsprechen, der in ihnen hockt. D.h. eine Überschrift wird mit dem h-Tag ausgezeichnet, ein normaler Textabsatz mit dem p-Tag, usw.

Aussagekräftiger Domainname

webdesign-buxtehude.de z.B. ist günstiger als rappzapp.de, wenn das Unternehmen in Buxtehude ansässig ist und sich mit Webdesign beschäftigt

Vor Bindestricheritis möchte ich allerdings warnen, z.B. webdesign-printdesign-werbetexte-logos-buxtehude.de wird Google sicher nicht lustig finden

Eine große Relevanz zum Inhalt schadet sicher auch nicht, d.h die Wörter des Domainnamens sollten auch im Webseitentext vorkommen

Aussagekräftiger title-Text

Nicht mehr als 64 Zeichen inkl. Leerstellen.

Möglichst große Relevanz zum Inhalt der Webseite

title-Tag sollte für jede Unterseite angepasst werden

Auf welcher Seite man sich befindet sollte man immer zuerst in den title schreiben, da die modernen Browser alles in Tabs organisieren. Die Beschriftung der Tabs umfasst nur ca. 20-25 Zeichen, dann wird abgeschnitten.

Aussagekräftiger Description-Metatag:

Nicht mehr als 145-155 Zeichen inkl. Leerstellen

Möglichst große Relevanz zum Inhalt der Webseite, d.h. die Wörter des Description-Metatags sollten auch im Webseitentext vorkommen

Description-Metatags sollte für jede Unterseite angepasst werden

Alle Bilder mit Alternativtext (alt-Attribut) ausstatten

Suchmaschinen können mit Bildern nichts anfangen. Sollte das Bild einen Text enthalten, so kann dieser deshalb nicht indexiert werden

Dafür gibt es das „alt-Attribut“. Dort kann ein aussagekräftiger Text hinterlegt werden, der von Suchmaschinen ausgewertet wird

Der Text sollte 8 – 80 Zeichen inkl. Leerstellen lang sein

Die Angabe eines Alternativtextes bei Bildern durch das „alt-Attribut“ ist Pflicht.

Die zweite Möglichkeit einen Text einzugeben, wenn das Bild z.B. nicht angezeigt werden kann bietet das „title-Attribut“

Außerdem können Besucher, die auf ein Bildschirmlesegerät (Screenreader) angewiesen sind, so über den Inhalt des Bildes informiert werden

Links mit dem title-Attribut ausstatten

Beim Überfahren des Links mit der Maus wird in modernen Browsern (Firefox, Opera, Safari) ein kleines Popup mit dem Inhalt des title-Attributes angezeigt

So ein Popup kann aber durchaus störend wirken, weil dadurch Inhalte der Webseite evtl. verdeckt werden

Häufigkeit und logische Struktur der Überschriften

Überschriften werden von Google besonders gewichtet, wobei es Indizien dafür gibt, das die Überschriften h2 – h6 stärker als die h1-Überschrift gewichtet werden.

Man sollte die logische Reihenfolge der Überschriften einhalten, d.h. erst h1 dann h2 usw..

Es ist davon abzuraten, die h1-Überschrift wegzulassen, weil sie weniger als die anderen Überschriften gewichtet wird. Google hat das sicher berücksichtigt und wird eine Webseite, die die logische Struktur der Überschriften nicht eingehält, sicher nicht belohnen.

Überschriften sollten auch nicht zu lang sein. Wer versucht einen Roman als Überschrift zu deklarieren, wird z.B. bei Google nicht auf allzu große Gegenliebe stoßen.

Länge des Quelltextes

idealerweise zwischen 200-500 Wörter, sofern das möglich und wünschenswert ist

Es gibt eine Möglichkeit die Relevanz von title, description, keywords zum content prüfen zu lassen. Außerdem wird Keyword-Häufigkeit,- und -Dichte ausgegeben und noch ein paar andere Kleinigkeiten.

Schaut euch mal diese Website an und testet ein wenig rum.

Was Suchmaschinen nicht können:

• Sie können weder in Bildern, noch in Scripten (Javascript) lesen
• In iFrames angezeigter Content kann von Google nicht indexiert werden

Was man besser vermeiden sollte:

• Bestimmte Schlüsselwörter im Quelltext zu häufig wiederholen. 3-4% Häufigkeit sind ein guter Wert. Mehr als 6% sind sicher nicht anzuraten.
• Ausufernde Texte hinterlegen, wenn es sich vermeiden lässt
• Zusatztexte einfügen, die nur von Suchmaschinen gelesen werden können, z.B. weiße Schrift auf weißem Grund
• Große Textmengen im Quelltext hinterlegen, die per CSS aus dem sichbaren Bereich geschoben werden

Dank Davids Kommentar hier noch eine kleine Ergänzung:

Meine Tips beziehen sich auf die Onpage-Optimierung. Das ist das, was Ihr während der Erstellung einer Website beachten solltet. Für Google sind die Anzahl der Backlinks sehr wichtig. Das sind Links von anderen Webseiten, die auf eure Website zeigen.

Euer Einfluß darauf mag begrenzt sein, ihr könnt aber ein paar Sachen tun, um zu Backlinks zu kommen:

Postet in Foren. Dort könnt ihr im Kontrollzentrums eures Accounts oft eine Signatur definieren. Es spricht nichts dagegen dort den Link eurer Website zu hinterlegen. Dann erscheint bei jedem eurer Beiträge ein Link zu eurer Website.

Postet in Blogs. Dort könnt ihr meistens neben Name und E-Mail noch die Adresse eurer Website eintragen.

Tragt euch in Webverzeichnisse wie z.B. dmoz ein.

Man sollte bei aller Optimierung immer bedenken das Webseiten primär für die Besucher geschrieben werden und nicht für Suchmaschinen.

Ein Text der ausschließlich für Suchmaschinen optimiert wird, wirkt auf einen Besucher sicher nicht sehr attraktiv und gut lesbar.

Mit etwas Geschick beim Texten kann man da sicher einen guten Kompromiss finden.

Falls euch noch was einfällt, nur heraus damit!

Ein sarkastischer Rückblick auf meine Erfahrungen mit Hilfestellungen für andere zum Thema Zugänglichkeit.

Persönlich mußte ich leider feststellen, das Ältere den Ratschlägen die Zugänglichkeit betreffend aufgeschlossener gegenüberstehen als Jüngere.

Thomas hat übrigens in seinem Blog einen ähnlichen Artikel geschrieben, den ich sehr lesenswert finde: Blogdesign für Profis

Die Welt ist aufs flimmernde Rechteck beschränkt. Störungen von außen werden erst mit Verwirrung und dann mit Ungehaltensein quittiert.

Ein Hauch von Autismus liegt in der Luft.

Vielleicht etwas überspitzt ausgedrückt, aber ist es nicht auch ein bißchen wahr?

Ich finde es manchmal etwas schwierig mich meiner Umwelt wieder zu öffnen, besonders wenn ich mich grade irgendwo festgebissen habe, bzw. es nicht so klappt, wie ich mir das vorstelle.

Daher habe ich mir angewöhnt, die Kiste erstmal auszumachen wenn die Liebste heimkommt.

In Urlauben und auch bei nur mehrtägigen Ausflügen gehe ich in kein Internetcafe und nehme auch kein Netbook mit.

Wie geht eure Umwelt damit um, bzw. was tut ihr, damit ihr mit derselben nicht in Konflikt geratet?