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.

Fischereiverein Lichtenberg Sieht gut aus, klar strukturiert, schlicht. Und das bleibt auch so durch die Seiten, es hat sich wohl jemand ordentlich Gedanken gemacht. Warum man allerdings Adobe-Flash als Besucherzähler braucht, hat sich mir nicht erschlossen.

Ich konnte auch nicht rauskriegen, womit die Seiten erstellt wurden, warum man für soviel Schlichtheit soviel Javascript braucht und warum keine Textlinks vorhanden sind. Ein Link aus deren Menü sieht im Quelltext so aus:

" href="termine-2.html"><img src="mediapool/69/699847/resources/tree/6481125_934662873.png" border="0" alt="Termine " title="Termine " name="menuimg6481125"></a><script type="text/javascript">MM_preloadImages('mediapool/69/699847/resources/tree/6481125_934662873a.png')</script><br></td></tr><tr><td><a onMouseOut="MM_swapImgRestore()" onMouseOver=" MM_swapImage('menuimg16186485',''

Wer blickt da noch durch?

Die Fischeivereine sind ein unerschöpflicher Quell von Web-Quelltext-Unsinn, aber die Seiten sehen meist gut aus.

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

Vom Wasserverband Diemelsee stammt diese Webseite. Schmuck und ansprechend, außerdem schmal, was gute Lesbarkeit verspricht. Wenn da nicht die ekelig kleine Schrift wäre. Und die Seite hat eine fixe Breite - nix für kleine Bildschirme.

Der Seitenquelltext zeigt eine Navigation ohne Text, nur mit Bildern, das Design der Seite besteht aus einem heftigen Tabellen-Verhau. Aber das schlimmste an dem Webauftritt: die Aktualität! Das jüngste Datum, das ich den Seiten entnehmen konnte, ist 6 jahre alt und das steht auf der Seite "Aufgaben und Projekte" in der Rubrik "Aktuelle Projekte". Warum hat der Wasserverband eigentlich so einen Webauftritt? Ob die Menschen, die im Text vorkommen, noch leben? Generator: Adobe GoLive 6.

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.

Beim Modellbauclub Heusenstamm wurde es für mich echt geheimnisvoll: ich traf im Quelltext auf ein Geflecht von DIVs und SPANs, bei denen ich echt Mühe hatte, zu erkennen, was wofür da ist. Kostprobe nach Aufdröseln:

<p style="text-align: center;">
<br>
	<span style="color: rgb(0, 0, 0);">
	<big style="color: red;">
		<big style="font-family: Arial;">
			<big>
				<big>
					<big>
						<big>
						<span style="font-size: 16px;">
							<strong> </strong>
						</span>
						</big>
					</big>
				</big>
			</big>
		</big>
	</big>
	<strong></strong>
	</span>
</p>

Die Schriftfarbe wird zuerst auf schwarz und dann auf rot gesetzt, die Schrift wird per <big> sechsmal vergrößert um dann per <font-size> doch auf 16px gesetzt und mit all dem wird nichts dargestellt!, Und davon wimmelt es. Die Startseite besteht als Hauptobjekt aus einer Tabelle mit einer Tabellenzeile mit einer Tabellenzelle! Geil! Dafür ist die Tabelle genau 4510 Pixel hoch - 3500 zu viel. Und natürlich fixe Maße, nichts für kleine Bildschirme. Ich habe diese Seite mal nachgebaut. Sie ist schlicht, deswegen war das eine Sache von einer Stunde Arbeit: MSC-Heusenstamm-neu.

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