Logo

Eigene Homepage

Beispiele für Webdesign

Ich verlinke hier mal ein paar Internetauftritte, über die ich im Laufe der Zeit "gestolpert" bin. Heißt: "sieht zwar ganz nett aus, aber wie schauts drinnen aus?" Du solltest bei jedem Webauftritt mal mit der rechten Maustaste den Seitenquelltext aufrufen. Außerdem kannst Du die Eignung für Smartphones prüfen, wenn Du das Browserfenster schmal ziehst.

Die Webseite des Campingplatzes in Harra ist entschieden das mieseste, was ich je gesehen habe. Es sieht nicht schlecht aus, aber wer auch immer die Seite erschaffen hat: er hat sorgfälig drauf geachtet, alle Grundregeln für Internetauftritte zu vermeiden! Generator: Adobe Fireworks MX Dreamweaver.

Die Seite besteht nur aus Bildern, eine Vorlesesoft ware findet nichts zum Lesen, die Indexierer der Suchmaschinen auch nicht, weswegen auch nichts über den Campingplatz im Netz bekannt ist, außer, das es ihn gibt. Sollte mal ein bisschen Text geändert werden müssen, dann kann man alle Bilder neu rendern. Dabei können moderne Browser problemlos diese Darstellung selbst übernehmen mit ein wenig css. Ich habe diese Seite mal spaßeshalber neu geschrieben: soll möglichst genauso aussehen, aber normal erstellt: Camping-Harra-neu.

Dieser Internetauftritt der Sportfischer Varel sieht auch ordentlich aus. Er besteht auch wirklich aus Texten, außer bei der Navigation. Ausgerechnet dabei gibt es keine Text-Links, was die Navigation für Sehbehinderte nahezu unmöglich macht. Dafür glänzt die Seite mit einer nervös machenden Laufschrift. Und das Header-Bild "Sportfischer Varel e.V." ist eine Adobe-Flash-Darbietung, obwohl die sich nicht bewegt.

Wenn man sich den Quelltext ansieht, dann wird das ganze Ausmaß an Schlechtigkeit sichtbar: Frameset (ist heute verpöhnt) und Formatierung mit Tabellen und jeder Menge Abstandsbildchen. Eine hochkomplizierte Angelegenheit, durch die nie wieder jemand durchblickt, falls das überhaupt jemals jemand durchschaut hat. Generator: Netobjects Fusion 10 for Windows.

Startseite

Jetzt gehen wir mal zu einer Gemeinde: Oberbettingen in der Eifel. Die hatten mal eine nette Startseite (dieser Quelltext ist von mir) mit vielen Fehlern. Als ich den Bürgermeister darauf angeschrieben habe, bekam ich keine Antwort. Aber ein halbes Jahr später fand ich dieses Design vor.

Der Quelltext ist in Ordnung, aber das Design stimmt nicht: die Seite wird grundsätzlich so breit, wie der Bildschirm und damit werden die Bilder riesig. Und riesig sind die Bilder so schon: das Startbild misst 2000x1300 Pixel bei 2,3MByte. 800x520 und 400kByte tut es genauso.

Textseite

Wenn man dann mal Text lesen will, sieht das so aus: auch der Text dehnt sich über die Seite aus, ohne dass die Schift größer wird. Damit leidet die Lesbarkeit dramatisch. Prüfen die Macher solcher Seiten das nicht? Dabei ist die Lösung so einfach: ein Klammer-DIV mit max-width: 800px; und die Sache ist erledigt. Immerhin stimmt auf diese Weise die Darstellung auf dem Smartphone. Generator: Typo 3 CMS

Auf der Seite vom Wasserverband bin ich einem Link zum Twistesee gefolgt und das Ergebnis sieht man hier rechts: extrem übersichtlich und von Design kann kaum eine Rede sein. Aber: der Quelltext ist genauso übersichtlich und ziemlich sauber. Einziges Manko: besteht aus einem Frameset. Aber sonst: OK! Generator: 1 Gehirn, 2 Augen, 10 Finger ....

Die Seite des Cafe im Twistesee ist typisch für die Nutzng eines Homepage-Baukastens. Dort finden sich im Quelltext jede Menge solche Blüten:

<div style="text-align: center;"><span style="font-family: Verdana;"><span style="font-family: Verdana;"><span style="font-family: Verdana;"><span style="font-size: large;"><em><span style="color: rgb(0, 255, 0);">SAMSTAG  FRÜHSTÜCKSBUFFET KLASSIK<br /> </span></em></span></span></span></span></div>

Wo es doch ein

<div class="menu">Samstag Frühstücksbuffet Klassik</div>

problemlos getan hätte.

Ähnlich auch beim Modellbauclub Büdingen. Die entsprechende Zeile heißt hier:

<a href="OberhofLuftaufnahmen.html" class="w3-bar-item w3-button w3-border w3-hover-blue w3-medium" style="width:187.5px">Luftaufnahmen</a>

Das witzige daran: dieser Link hat eine Klasse, es gibt also einen Eintrag in der CSS-Datei, aber trotzdem ist hier in der html-Datei eine Stil-Auszeichnung zu finden. Die CSS-Datei stammt übrigens vom W3-Konsortium, die auch eine Abteilung "Schule für Internetsachen" haben. Wer möchte, kann sich die Datei von hier runterladen oder auch gleich ansehen. Da blickt kein Mensch durch, deswegen habe ich eher Verständnis für die genannten Zeilen. Ärgerlicher ist da schon, dass der Webauftritt in der Zeichenkodierung windows-1252 ausgeliefert wird. Das sollte seit 15 Jahren vorbei sein.

Das war es jetzt mal mit den kritischen Äußerungen. Jetzt darfst Du mal selbst meckern, denn ich zeige Dir ein paar Seiten, die von mir gestylt wurden. Und immer dran denken: Quelltext anschauen und Browserfenster schmaler und breiter machen ...

Das war's erstmal. Viel Spaß damit ...



Zurück zum selbstverändernden Webdesign