Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
technische Tipp

Technische Tipps für qualitativ hochwertige Webseiten

Für die technische Umsetzung bieten viele Provider Baukastensysteme an. Die würde ich Ihnen aber nicht empfehlen, da hiermit nur 0815-Webseiten erstellt werden können. Mit einem Content-Management-System (CMS) oder einer individuellen Lösung treffen Sie auf jedem Fall die bessere Wahl.

Falls Sie ein CMS verwenden wollen, sind Ihnen bereits viele Dinge vorgegeben. Das vereinfacht die Sache. Die Eingriffe in die Software werden sich nur auf ein begrenztes Customizing bzw. auf die Programmierung von diversen Erweiterungen oder die Gestaltung von individuellen Themes beschränken. Bedenken Sie aber, dass die individuellen Anpassungen bei einem Versionswechsel Ihres CMS möglicherweise wieder neu angepasst werden müssen. Weit verbreitete CMS sind Typo3 und Joomla. Für Blogs wird Wordpress sehr gern verwendet.

Es steht Ihnen allerdings auch frei, die Seiten mit einem einfachen Editor z.B. UltraEdit oder Notepad++ zu erstellen oder ein Framework wie z.B. Eclipse zu benutzen. Das verlangt aber ein gewisses technisches Know-How ihrerseits.

Fehlerfreie und browserunabhängige Webseiten sind das oberstes Ziel

Bedenken Sie, dass Besucher:

  • mit verschiedensten Browsern von verschiedensten Systemen aus (PC, Tablet, Smartphone) Ihre Webseiten besuchen
  • teils sehr alte Browser benutzen
  • notwendige Add-ons nicht installiert haben
  • eine niedrige Bildschirmauflösung verwenden
  • einen Anschluss mit geringer Bandbreite besitzen

Deshalb sollte oberste Priorität haben:

  • Halten Sie sich permanent an den W3C-Standard.
  • Versuchen Sie Ihren Webauftritt so „schlank“ wie möglich zu gestalten.
  • Verzichten Sie auf exotische Features.

Legen Sie die Struktur Ihrer Website an

Schon in der Konzeptphase sollten Sie grundlegende Entscheidungen getroffen haben, z.B.:

Danach ist es langsam an der Zeit zu beginnen.

  • Entscheiden Sie sich zuerst für eine passende DOCTYPE-Vorlage.
    Damit signalisieren Sie dem Browser, um welche Art von Dokument es sich handelt und wie es zu interpretieren ist.
    Bei entsprechender Implementierung wird der Browser die Seiten im Standard-Mode anzeigen, was für die korrekte browserübergreifende Darstellung von Vorteil ist. Andererseits wird der Browser auf den Quirks-Mode umschalten.
  • Entscheiden Sie sich für eine Zeichen-Kodierung, z.B. ISO-8859-1 oder UTF-8 Kodierung.
  • Strukturieren Sie Ihr Projekt, um:
    • den Überblick zu behalten und
    • die Wartung zu erleichtern
  • Legen Sie Bilder, Scripte, Styles etc. in separaten Unterverzeichnissen ab.
  • Verwenden Sie zentrale Stylesheet-Files für Formatierungen und hinterlegen Sie keine Stylesheet-Informationen direkt im Quellcode der Webseiten.
  • Verwenden Sie keine Sonder- und Leerzeichen in Verzeichnis- und Seitennamen.

Programmieren Sie zuerst die komplexeste Webseite

  • Beginnen Sie mit der Implementierung der komplexesten Seite und gestalten Sie diese vollständig fertig.
  • Lösen Sie aus dieser Seite die Basiselemente heraus und verwenden Sie sie als Templates für die anderen Seiten.
  • Falls die Inhalte noch nicht vollständig sind, setzen Sie einen „Lorem ipsum“ Generator ein, um Fülltexte zu erzeugen. Damit können Sie Lücken temporär füllen und sich leichter einen Gesamteindruck verschaffen.
  • Verwenden Sie einen Codevalidator, um zu überprüfen, ob alle Tags korrekt gesetzt sind und dem W3C-Standard entsprechen. W3C (World Wide Web Consortium) ist das Gremium, zur Standardisierung der Web-Techniken, d.h. dieses Gremium gibt den Standard vor und die meisten Browser unterstützen mittlerweile diesen Standard.
    Es gibt Online-Codevalidatoren, die Ihre Seiten auf die Einhaltung des Standards überprüfen und Sie auf Unkorrektheiten hinweisen. Offline-Validatoren, wie z.B. der Html-Validator als Firefox Add-on sind aber auch recht hilfreich.
  • Diverse Browser (meist Internet Explorer) verstehen zusätzliche Tags, die nicht zum Standard gehören. Von deren Verwendung ist abzuraten. Auch wenn die Features teils sehr verlockend sind, gibt es keine Garantie, dass diese Features in der nächsten Generation des selben Browsers weiterhin unterstützt werden.

Optimieren Sie Ihre Webseiten

  • Verwenden Sie nur webtaugliche Bildformate (GIF, JPG, PNG)
  • Optimieren Sie die Bilder fürs Web, um die Ladezeiten zu reduzieren.
    Die Bildgröße sollte vorher mittels Graphikprogramm angepasst werden. Versuchen Sie nicht mit width- und height-Tags die Bilder erst im Browser an die Zielgröße anzupassen. In diesem Fall würde trotzdem das gesamte (große) Bild übertragen werden und die Qualität des Bildes wird ebenfalls reduziert.
  • Verwenden Sie evtl. kleine Thumbnails in den Seiten und laden erst beim Klick darauf die Bilder in ihrer ganzen Größe.
  • Kombinieren Sie Bilder in CSS-Sprites.
  • Setzen Sie evtl. einen Preloader ein, um Bilder vorab in den Browsercache zu laden.
  • Versuchen Sie, die Anzahl der Serveranfragen (requests) zu minimieren.
  • Wenn Sie Dateien zum Download anbieten, verwenden Sie nur weit verbreitete Formate, z.B. PDF.
  • Wenn Sie Ihre PDF’s Suchmaschinen zugänglich machen wollen, so achten Sie darauf, dass es sich um lesbare PDF’s handelt.
  • Bei Flashs und Videos achten Sie auf die Dateigröße und denken Sie dabei besonders an die Besucher mit geringer Bandbreite bzw. an mobile Besucher.
  • Als Videoformat hat sich in letzter Zeit FLV stark verbreitet.
    Entspr. Player, die hierfür in die Webseiten integriert werden müssen, findet man kostenlos im Internet.
  • Bieten Sie eine Druckversion an, falls die Seiten mit normalen Browser-Einstellungen nicht korrekt ausdruckbar sind. Am Einfachsten gelingt dies durch spezielle Stylesheet-Angaben, die sich nur auf das media="print" beziehen.

Vergessen Sie nicht den Abschlußtest

  • Rufen Sie Ihre Seiten mit verschiedenen Browsern auf.
    Besonders der Internet Explorer in den verschiedenen Versionen ist ein wenig eigenwillig in der Interpretation diverser Stylesheetangaben.
  • Falls Sie Javascript verwenden, deaktivieren Sie in Ihrem Browser die Javascript-Unterstützung und schauen danach, wie sich die Webseite verhält. Es ist klar, dass heutzutage kaum noch eine moderne Webseite ohne Javascript funktioniert. Es sollten aber wenigstens die Grundfunktionen noch funktionieren. Besonders wenn Sie ein HTML5-Fallback verwenden, kann es hierbei zu bösen Überraschungen kommen.
  • Testen Sie Ihre Webseiten mit verschiedenen Bildschirmauflösungen bzw. auf verschiedenen Geräten.
  • Überprüfen Sie Ihre Webseiten regelmäßig auf broken Links (insbesondere die Verlinkungen zu anderen Websites).

Dynamische Webseiten und Applikationen

Für die Erstellung von dynamischen Webseiten (z.B. mit PHP) oder mit Datenbankanbindung (z.B. mySQL) sind zusätzliche Aspekte zu berücksichtigen. Das Thema ist recht komplex. Deshalb hier nur die wesentlichen Punkte:

  • Verwenden Sie möglichst aktuelle Versionen der Scriptsprache und Datenbank und spielen Sie die neuesten Sicherheitspatches zeitnah ein (sofern das nicht bereits ihr Provider macht).
  • Parametrieren Sie die Applikation und Datenbank so, dass sie sicherheitstechnisch auf dem aktuellen Stand ist (Hardening).
  • Verwenden Sie z.B. in PHP möglichst restriktive ini-Einstellungen.
  • Unterdrücken Sie jegliche Fehlermeldung und alle sonstigen Systemausgaben im Browser. Durch Preisgabe diverser Informationen bieten Sie bereits den ersten Ansatzpunkt für potentielle Angreifer.
  • Schützen Sie Ihre Applikation und Datenbank gegen Manipulationen jeglicher Art (z.B. SQL-Injection, Cross Side Scripting, Session Hijacking, etc.)
  • Geben Sie dem User, mit dem Sie über das Web auf die Datenbank zugreifen, nur die unbedingt notwendigen Rechte. Der User sollte keinesfalls Eigentümer von Datenbankobjekten sein oder Änderungen an Dattenbankobjekten vornehmen dürfen. Wenn der Datenbankuser, mit dem Sie über die Applikation zugreifen, in manchen Tabellen nur lesen muss, dann entfernen Sie z.B. das Recht, Daten in den Tabellen zu verändert (insert, update, delete).
  • Übergabeparameter sind ausnahmslos auf ihre Sinnhaltigkeit zu überprüfen, z.B.:
    • wo numerische Werte erwartet werden, dürfen auch nur numerische Werte akzeptiert werden
    • Zeichenkettenvariablen sind, wenn möglich, gegen Wertebereiche zu testen.
    • Eingabewerte, die Emailadressen enthalten, sind syntaktisch zu validieren.
    • Spezielle Zeichenketten sind innerhalb von Parametern generell auszuschließen (z. B. <script>, union, interselect, cmd, command, ../, ..\)
  • Verwenden Sie beim Datenbankzugriff die Parameter möglichst als Bind-Variablen.
  • Wenn Sie ein Gästebuch oder ein Kommentarfeld anbieten, so schützen Sie das Formular gegen Spam-Bots.
  • Verschleiern Sie die Email-Adressen, die auf Ihren Webseiten stehen, um sie gegen Spam-Harvester (sammelt Email-Adressen von Webseiten) zu schützen.