Photoshop Tutorial – Wie erstelle ich ein Website Design?

In diesem Website-Tutorial zeige ich euch, wie man das Design bzw. den Header einer einfachen Website mit dem Grafikbearbeitungsprogramm Adobe Photoshop erstellt.

Selbstverständlich müssen danach noch sowohl ein Layout erstellt als auch technische Anpassungen vorgenommen werden.

Photoshop Tutorial – Wie erstelle ich eine Düse?

In diesem Düsen-Tutorial zeige ich euch, wie man mit dem Grafikbearbeitungsprogramm Adobe Photoshop eine Düse erstellen kann. Im Prinzip ist das gar nicht allzu schwer, aber seht selbst:

Dabei habe ich mit einer relativ alten Version von Photoshop gearbeitet, natürlich lässt sich so eine Düse mit neueren Versionen genauso realisieren.

W3C Valider xHTML und CSS Code

Valider Code ist wichtig, um für Seitenbesucher eine einwandfreie Darstellung zu garantieren. Daher ist es sinnvoll, sich bei der Gestaltung möglichst an die Vorgaben der Standardsetter zu halten. Auch Suchmaschinen legen Wert auf validen Code.

Die strikten Programmier-Richtlinien des xHTML 1.1 Standards (xHTML 1.0 Strict ist ähnlich) sind ziemlich aufwendig umzusetzen. Das habe ich bei den jüngsten Anpassungen des Designs und der Plugins meines Blogs gemerkt. Falsche oder ungültige Attribute, Fehler in den URLs und ungültige oder ehemals gültige HTML Tags sind häufige Ursachen dafür, dass der Code nicht validiert wird.
Meine Vorgehensweise beim Validieren bestand darin, die Fehler schrittweise und systematisch zu eliminieren, wobei nach jedem behobenem Fehler erneut überpüft wurde.

Im CSS Code sind häufig Fehler bezüglich ungültiger  Eigenschaften zu finden: bei Fehlern ist meist entweder die Eigenschaft nicht CSS 2.1 konform, oder es liegt nur eine Kompatibilität zu bestimmten Browsern z.B. bei moz-opacity für Firefox vor.

Für mich neu war, dass das <iframe>-Tag ab xHTML 1.0 Strict nicht mehr unterstützt wird. Stattdessen nimmt nun das <object>-Tag im weitesten Sinne seinen Platz ein. Was allerdings auch ein interessanter Fehler im xHTML Code war, ist, wenn in URLs fälschlicherweise das „kaufmännische Und“ ( & ) verwendet wird. Stattdessen sollte das „&“ durch das HTML-Entity &amp; ausgedrückt werden.

Im Anwendungsbeispiel sieht das konkret so aus:

aus:

http://blog.omaximus.de/?p=655 & preview=true

wird:

http://blog.omaximus.de/?p=655& a m p ;preview=true

 

Naja, das Resultat hat sich wenigstens gelohnt. Mein CSS und xHTML Code ist nun vollständig valide. Das sichert die Qualität meiner Website durch seine Zukunftssicherheit und Kompatibilität zu allen Browsern … mein RSS-Feed ist übrigens auch valide.

„W3C Valider xHTML und CSS Code“ weiterlesen

Duplicate Content (DC) bei Google & Co

Wer nicht will, dass Google und Co. seine Website aufgrund von Duplicate Content (kurz auch als DC zu finden) abstrafen oder gar aus dem Index entfernen, der sollte beim Aufbau einer Website folgende Punkte beachten:

  • Die Website sollte entweder mit oder ohne „www.“ zu erreichen sein.
  • Sie sollten den gleichen Text nicht zweimal verwenden oder gar Text von anderen Websites kopieren.
  • Sie sollten Ihre Website möglichst so aufbauen, dass Crawler von Suchmaschinen den selben Text nicht mehrmals auslesen können; etwa über die Hauptseite, Kategorien und nochmal über die Archive (vgl. WordPress).

301-Redirect (Permanente Weiterleitung)

301-Redirect ist das Stichwort, um DC bei der „www.“ Subdomain zu verhindern. Das lässt sich am effektivsten per htaccess Datei umsetzen. Die .htaccess (mit Punkt und ohne Endung) Datei wird in das Root-Verzeichnis, das übergeordnetste Verzeichnis, auf das die Domain leitet, eingefügt. Die Umsetzung via htaccess ist zudem sehr suchmaschinenfreundlich, da sie serverseitig stattfindet.

Will man die Domain omaximus.de dann permanent auf die Subdomain „www.“ omaximus.de weiterleiten, müsste der Inahlt der htaccess Datei wie folgt aussehen:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.omaximus\.de$ [NC]
RewriteRule ^(.*)$ http://www.omaximus.de/$1 [R=301,L]

Möchte man es genau anders herum haben (ohne „www.“-Subdomain), geht das so:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.omaximus.de$ [NC]
RewriteRule ^(.*) http://omaximus.de/$1 [L,R=301]

Mit Scriptsprachen wie PHP lässt sich eine solche Weiterleitung übrigens auch einrichten:


<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location:http://omaximus.de");
exit;
?>

 

Klientseitige Weiterleitungen

Klientseitige Weiterleitungen werden mittels HTML oder JavaScript ausgeführt und sind dementsprechend ungünstig für Crawler von Suchmaschinen – JavaScript wird nicht ausgeführt und HTML-Redirects werden abgewertet.
Die Umsetzung eines HTML-Redirects im Head-Bereich der Seite sollte dennoch kurz angesprochen werden:

<meta http-equiv=refresh content="1; URL=http://omaximus.de">

Die 1 gibt die Anzahl der Sekunden, die bis zur Weiterleitung vergehen sollen – in diesem Fall 1 Sekunde -, an.