Web Seiten

Nutzen Sie für Ihre Internet-Projekte meine Erfahrung in der Entwicklung und Begleitung von Web-Projekten. Hier möchte ich Ihnen meine Leistungen, und mein Angebot vorstellen.

Gerne unterbreite ich Ihnen ein individuelles Angebot. Sprechen Sie mich an.


Meine Leistungen

Das Umfeld, in dem Webseiten betrachtet werden, variiert in sehr weiten Bereichen: die Übertragungs-Geschwindigkeit, die Auflösung des Monitors und die Fenstergrösse des Browsers sind keine Konstanten. Es gibt eine Vielzahl von Browsern und Betriebssystemen. Damit Webseiten immer gut aussehen, muss bei der Gestaltung auf die Umgebung geachtet werden. Ich tue dies mit angepasstem Layout, optimierten Seiten und Orientierung an Standards. Die beste Site nutzt nichts, wenn sie nicht gefunden werden kann. Deshalb bereite ich die Webseiten auch für den Eintrag in Suchmaschinen vor.

Angepasstes Layout

Ob der Betrachter einer Webseite einen kleinen, alten Monitor mit niedriger Auflösung oder einen grossen, höchstauflösenden Bildschirm verwendet, wie gross das Browser-Fenster tatsächlich ist, kann man bei der grafischen Gestaltung nicht wissen. Eine "Optimierung" auf eine bestimmte Auflösung oder eine feste Bildschirmgrösse macht deshalb keinen Sinn. Im Gegensatz zu einem Blatt Papier hat das Browser-Fenster keine feste Grösse, darauf muss bei der Gestaltung Rücksicht genommen werden. Damit horizontale Scroll-Balken oder grosse Freiflächen am rechten Fensterrand vermieden werden, benutze ich relative Grössenangaben (z.B. 80% der Fensterbreite), wo immer das geht - (fast) immer.

Auch auf die Darstellung von Bildern kann man sich nicht verlassen. Ein Screen-Reader oder Audio-Browser kann ein Bild seinem blinden Benutzer nicht vorlesen. Zudem gibt es gute Gründe, die Übertragung von Bildern auch im grafischen Browser abzuschalten:

  • langsame Übertragung
  • schmalbandiger Internetzugang
  • Ausblenden von Werbe-Bannern
  • Ungestörter Blick auf die Information

Deshalb erhält jedes Bild einen alternativen Text, einen Titel und, wenn nötig, eine Beschreibung.

Beim Ausdrucken einer Webseite entsteht nochmals eine andere Situation. Ein farbiger Hintergrund oder Hintergrund-Bilder, die auf dem Monitior gut aussehen, stören hier eher, sie kosten nur Zeit und Geld. Der Ausdruck einer Navigations-Leiste macht ebenfalls wenig Sinn. Die unterschiedlichen Gegebenheiten auf dem Monitor und dem Papier berücksichtige ich durch die konsequente Anwendung Medien-spezifischer Stylesheets.

Kleine, optimierte Seiten

Die Untersuchung (N)onliner Atlas 2006 (tns Infratest, August 2006) hat ergeben, dass trotz preiswerter Verfügbarkeit von DSL nur 47,6% der Internet-User Breitband-Technologie für den Internet-Zugang benutzen.
Nach der repräsentativen Umfrage Internet Strukturdaten der Forschungsgruppe Wahlen für das erste Quartal 2005 gehen 62% der privaten Internet-Nutzer analog oder mit ISDN ins Netz, nur 34% mit DSL/Breitband.
Nach der Pilotstudie Informationstechnologie in Haushalten für das Jahr 2003 des Statistischen Bundesamts, Wiesbaden, nutzen 80% der Online-Haushalte das Internet über schmalbandige analoge Telefon- oder ISDN-Anschlüsse.
Auch über 55% der Unternehmen nutzen das Internet über Schmalband-Technologie (Informationstechnologie in Unternehmen und Haushalten 2004, Statistisches Bundesamt, Wiesbaden).

Der Mehrheit der Internet-User steht damit eine maximale Übertragungsrate von 64 KBit (ISDN) bzw. 56 KBit (analog) oder weniger zur Verfügung. Im analogen Fall wird die maximale Übertragungsrate z.B. durch schlechte Leitungen weiter vermindert. Pro Sekunde können also höchstens 7-8 KB übertragen werden.
Als Anforderung ergibt sich daraus, die übertragene Datenmenge so gering wie möglich zu halten.

Die meisten der "Machen Sie Ihre Homepage selbst ganz ohne Programmierkenntnisse" Werkzeuge erzeugen das Design einer Seite mit alten HTML Formulierungen. Dies hat zur Folge, dass Struktur und Formatierung eines Dokuments in einer Art vermischt werden, die den Zielsetzungen von HTML und CSS widersprechen. Da das Design in HTML erfolgt, werden Formate, die bis auf wenige Ausnahmen für eine ganze Seite gelten (Schriftart und Schriftgrösse), für jeden Absatz und jede Zelle einer Tabelle wiederholt: die Folge ist, dass das Design nur schwer zu ändern ist und die Seiten viel grösser als notwendig sind.

Um die volle Kontrolle über Inhalt, Struktur, Präsentation und Grösse zu erhalten, lege ich die Struktur der Seiten mit der Hyper Text Markup Language (HTML 4) "von Hand" fest, die Formatierung davon getrennt in gleicher Weise mit Cascading Style Sheets (CSS). Bereits dadurch werden die so erzeugten Seiten gegenüber der herkömmlichen gemeinsamen Definition von Struktur und Format mit HTML 3 um ca. 30%-60% kleiner. Für Grafiken, die auf indizierten Farben (Farb-Palette) basieren, benutze ich vozugsweise das Portable Network Graphic (PNG) Format. PNG ist dem ebenfalls weit verbreiteten GIF in der Datenkompression um ca 25% überlegen.

Damit wirklich alles für ein schnelles Laden der Seiten getan wird, optimiere ich HTML, CSS und JavaScript in Bezug auf die Grösse: Leerraum, der der besseren Lesbarkeit während der Entwicklungsphase dient, wird entfernt. Dies bringt eine weitere Reduzierung um 10-20%.
Die PNG Grafiken optimiere ich ebenfalls: unbenutzte Einträge der Farb-Tabelle und Kommentare werden entfernt, das beste Kompressionsverfahren wird eingestellt. Dadurch ergibt sich eine Datenreduktion bis 50%.

Was dies in Zahlen ausmachen kann, möchte ich beispielhaft anhand einer "klassischen Navigationsleiste" mit grafischen Knöpfen zeigen

FormatGrösseeingespart
GIF
eingespart
PNG
GIF34615 Byte
PNG25495 Byte26%
optimiertes PNG8911 Byte74%65%

Die Navigationsleiste, ausgeführt mit optimiertem PNG, lädt bei einem analogen Anschluss in weniger als 2 sec. Auf dieselbe Navigationsleiste in nicht optimiertem GIF muss der Betrachter fast 7 sec warten.

Freilich ist es am Besten, für die Navigation gänzlich auf Grafiken zu verzichten, wie ich es auf dieser Seite getan habe, und sie nur in HTML, CSS und JavaScript zu gestalten. Sie ist dann nur noch 1800 Byte gross und wird in weniger als 0,5 sec geladen.

Der Betrachter nimmt einen rasanten Dokumenten-Aufbau wahr, "Laden Abbrechen" wegen zu langer Wartezeiten kommt seltener vor. Der Betreiber einer Web-Site erzeugt ein geringes Übertragungs-Volumen, je nach Provider und Tarif-Modell kann sogar in einen günstigeren Tarif gewechselt werden.

Standards

Die im Web gültigen Standards werden durch das World Wide Web Consortium w3c festgelegt. Die wichtigsten Standards betreffen die Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) sowie das Document Object Model (DOM). Diese Standards sind nötig, damit eine Webseite von allen Browsern auf allen Betriebssystemen angezeigt werden kann.

Die modernen Browser orientieren sich alle an diesen Standards, auch wenn sie nach wie vor nicht Standard konforme, sogenannte proprietäre Features anbieten.

Meine Webseiten überprüfe ich auf die Einhaltung der Standards des w3c. Zusätzlich tue ich alles, damit auch ältere, nicht Standard-konforme Browser die Seiten fehlerfrei anzeigen können.

Um ein wirklich gutes Ergebnis zu garantieren, teste ich die Seiten mit einigen weit verbreiteten Browsern:

  • Microsoft Internet Explorer
  • Firefox
  • Netscape Navigator
  • Opera

Der Standard Platform for Internet Content Selection (PICS), der ebenfalls vom w3c definiert wurde, dient zum Schutz von Kindern vor potentiell schädigenden Inhalten und zum Schutz der Meinungsfreiheit im Internet. Er ermöglicht dem Internet-Nutzer die Erstellung von Filtern, die dafür sorgen, dass sein Browser nur Seiten anzeigt, die bestimmten Kriterien entsprechen. Um zu vermeiden, dass die eigenen Seiten weggefiltert werden, ist die Erteilung eines PICS-konformen Labels nötig.

Ich versehe meine Webseiten mit einem PICS-Label der gemeinnützigen Organisation Internet Content Rating Association (ICRA).

Suchmaschinen

Der Weg zu Ihrer Web Site führt in den meisten Fällen über eine Suchmaschine wie Google oder Yahoo. Man muss seine Site bei den einzelnen Suchmaschinen anmelden, damit sie Kenntnis von deren Existenz erhalten. Die Suchmaschine wird dann in der Regel die Site mit einem sogenannten Robot oder Spider besuchen und sie anhand des vorgefundenen Materials indizieren. Jeder Robot arbeitet nach eigenen Strategien. Manche Robots werten die Meta-Tags aus, andere den Text. Weitere Kriterien können Seitenstruktur, Titel, Überschriften, die Verlinkung der Seiten und die Übereinstimmung von Meta-Tags und Text sein. Bilder werden nie ausgewertet.

Ich kümmere mich um eine Robot-freundliche Strukturierung und um die Meta-Tags.


Mein Angebot

WebStarter Die Internet-Repräsentanz für Selbstständige und kleine Unternehmen zum Festpreis
bis zu fünf Seiten, Ihr Logo auf jeder Seite oder in separatem Frame
Navigation als Textlinks oder
mit Grafik-Buttons (inklusive Herstellung der Buttons) in separatem Frame
Einbinden von bis zu 6 Bildern / Grafiken
Setzen von bis zu 10 externen Links
Texte, Logos, Grafiken und Bilder kommen in digitaler Form vom Kunden
Aufbereiten des gelieferten Materials
Ausführung in HTML 4.0 und CSS inklusive Optimierung und Validierung
Vorbereiten der Meta-Tags für Suchmaschinen
Beratung telefonisch eine Stunde inklusive
Lieferungin zwei Versionen: optimiert und nicht optimiert
als Upload auf Ihre Website oder
als eMail oder
auf Datenträger, CD oder Diskette, Mehrkosten EUR 10,-
HonorarFestpreis EUR 350,-
 
Haben Sie Fragen dazu? Schicken Sie mir eine eMail (b.plugge@plugge-informatik.de).
 
 
individuelle
Leistungen
Individuelles Erstellen oder Überarbeiten von Webseiten
Kodieren in HTML 4.0, inklusive Optimierung und Validierung
Vorbereiten der Meta Tags für Suchmaschinen
Präsentation mit CSS, inklusive Optimierung und Validierung
Navigation, Animation in JavaScript, inklusive Optimierung
Individuelles Erstellen oder Überarbeiten von Grafiken
in PNG, inklusive Optimierung
alternativ in GIF
Scannen oder Überarbeiten von Bildern
von KB Diapositiven
von Farb-Vorlagen bis A4
als progressive JPG
Datenbankanbindung
mit PHP oder Perl
Ortin meinem Büro bevorzugt
in Ihren Räumen möglich
Honorarnach Aufwand, EUR 70,- netto pro Stunde
Pauschal-Preis nach individueller Vereinbarung möglich
 
Haben Sie Fragen dazu? Schicken Sie mir eine eMail (b.plugge@plugge-informatik.de).