neontrauma.de » XHTML & CSS
Hier siehst du alle Artikel mit dem Schlagwort Links
7. April 2010

Um den Leser darüber zu informieren, ob er mit dem nächsten Klick die aktuelle Webseite verlassen wird oder nicht, kann man externe Links gesondert kennzeichnen. Eingebürgert hat sich eine kleine Grafik hinter dem Link, was dann beispielsweise so aussehen kann:

allwissende.muellhal.de

Der “Trick” dahinter ist, dass dem Link eine rechts platzierte Hintergrundgrafik zugewiesen wird. Damit der Linktext aber neben und nicht auf dem Bild steht, wird dieser mit padding-right eingerückt.

den Link ansprechen

Da natürlich nicht sämtliche Links einer Webseite als extern gekennzeichnet werden sollen, reicht es nicht, die obige Formatierung im Stylesheet einfach dem a-Element zuzuweisen. Sonst würden ja alle, also auch die seiteninternen Links, gekennzeichnet werden.
Es gibt zwei verschiedene Möglichkeiten, lediglich externe Links anzusprechen:

1. über eine Klasse

Man weist allen externen Links die Klasse “extern” zu:
<a title="die allwissende Müllhalde" href="http://allwissende.muellhal.de" class="extern" >allwissende.muellhal.de</a>
Im CSS wird .extern dann formatiert:
a.extern { background: url(img/externalURL.png) right center no-repeat; margin-right: 3px; padding-right: 13px; }
Der Nachteil dieser Methode ist natürlich, dass man jeden zu kennzeichnenden Link um diese Klasse erweitern muss, was bei umfangreicheren Projekten mit viel Arbeit verbunden ist.

2. über den absoluten Pfad

Die zweite Technik erfordert keinerlei Änderungen im HTML. Sie besteht darin, im Stylesheet sämtliche Links anzusprechen, deren href-Attribut mit “http:” beginnt:

a[href^="http:"] { background: url(img/externalURL.png) right center no-repeat; margin-right: 3px;padding-right: 13px;}

Hier kommt es allerdings zu Problemen, wenn man auch interne Verlinkungen absolut statt relativ angegeben hat – diese werden dann ebenfalls als extern gekennzeichnet. Danke an Fabian für den Hinweis, dass man dieses Problem umgeht, indem man die eigene Domain für eine gesonderte Formatierung angibt:

a[href^="http://domain.de"] { background: none; margin: 0; padding: 0;}

21. Oktober 2009

Aus aktuellem Anlass – es wurde heute erst ins Leben gerufen und meinereiner musste sich natürlich gleich mal registrieren ;-) – stelle ich euch heute zur Abwechslung mal ein Forum vor: den Admintreff.

admintreff.net - das Forum für Admins und Moderatoren

Hier könnt ihr euch über alles austauschen, was mit der Leitung eines Forums zu tun hat, ganz egal ob ihr Administratoren seid oder auch Moderatoren.

Ich bin dort übrigens unter dem altbekannten Nick neontrauma zu finden. ;-)

2. August 2009

Mit bitgefluester.de möchte ich euch heute ein recht junges Magazin der Szene vorstellen. :)

bitgefluester.de

Die Idee zu diesem Projekt wurde im The Other View-Forum geboren, als man dort über die Streitigkeiten in der GFX-Szene diskutierte. Es entstand der Wunsch, den Zusammenhalt und Austausch der einzelnen Seiten untereinander zu fördern und dem ewigen Konkurrenzdenken somit etwas entgegenzusetzen.

Herausgekommen ist ein Magazin, an dem momentan zehn Mitarbeiter beteiligt sind.

Wir stellen Seiten & Projekte vor, führen Interviews, informieren über Neuigkeiten und wollen Gerüchte vermeiden. Ja, richtig. Wir wollen nicht die Bildzeitung der Grafikszene werden, sondern gut recherchierte Artikel bieten. Im Forum gibt es einen extra Bitgefluester-Bereich, in dem ihr gerne Themenvorschläge machen oder uns Fragen zu Artikeln stellen und mit uns darüber diskutieren könnt.

Ein Besuch auf bitgefluester.de lohnt sich auf jeden Fall! :)

10. Juli 2009

Ein weiteres Einsteiger-Tutorial: hier geht um die wichtigste Eigenschaft des Internets, nämlich die Hyperlinks. Verlinkungen dürfen auf keiner Webseite fehlen – entweder, um auf andere Seiten zu verweisen oder um innerhalb der eigenen Seite zu navigieren.

Wenn ihr eine Seite verlinken möchtet, braucht ihr das a-Tag. Dem fügt ihr verschiedene Attribute hinzu, um etwa die Linkadresse, das Linkziel oder den Linktitel festzulegen:

<a href="http://neontrauma.de" title="neontrauma.de bietet Tutorials zum Thema Webdesign" target="_blank">hier klicken</a>

Zwischen den öffnenden und das schließende a-Tag schreibst du den Linknamen, so wie er später angezeigt werden soll (“hier klicken”). Das href steht für Hypertext Reference und gibt die URL der zu öffnenden Webseite an. Nun habt ihr schon das Grundgerüst einer jeden Verlinkung!

title

Die beiden weiteren Attribute sind nicht zwangsläufig erforderlich. Das title-Tag solltet ihr allerdings verwenden, damit eure User schon vor dem Öffnen des Links eine kurze Beschreibung erhalten, was sie denn erwartet. Aus dem Linktext allein geht das ja oft nicht hervor. Der Inhalt des title-Tags erscheint als sogenanntes Tooltip in einer kleinen Box, wenn ihr mit dem Mauszeiger über den Link fahrt.

target

Das target-Attribut gilt mittlerweile eigentlich als veraltet, aber manchmal ist es doch ganz nützlich. Hiermit könnt ihr vor allem angeben, ob sich ein Link im gleichen Fenster/Tab öffnen soll oder in einem neuen. Lasst ihr dieses Attribut weg, so öffnen sich die Links im gleichen Fenster, andernfalls müsst ihr target=”_blank” notieren.
Wieso man target eigentlich nicht mehr verwenden sollte, könnt ihr hier nachlesen.

Links via CSS stylen

So. Im nächsten Schritt wenden wir uns der Formatierung der Links zu.
Standardmäßig werden noch nicht aufgerufene Links blau dargestellt und die bereits besuchten lila, und beide unterstrichen. Das ist zwar praktisch, weil diese Kennzeichnung mittlerweile so ziemlich jedem Internetuser in Fleisch und Blut übergegangen sein dürfte und er so einen Link gleich als solchen erkennt und auch weiß, welche Verweise er bereits aufgerufen hat – aber stylish ist das nun nicht gerade. ;-)

Im Stylesheet könnt ihr nun festlegen, wie eure Links aussehen sollen. Dazu notiert ihr einfach:

a {
color: #000;       // schwarze Schrift
text-decoration: none;       // nicht unterstrichen
font-variant: small-caps;        // Kapitälchen
}

Wie eure Links ausschauen, wenn man gerade mit dem Mauszeiger darüber fährt oder gerade draufklickt, legt ihr so fest:

a:hover, a:active, a:focus {
color: #ccc;       // graue Schrift
border-bottom: 1px dotted #ccc;       // gepunktete graue Linie unten
}

Bereits besuchte Links werden durch diese Pseudoklasse angesprochen:

a:visited {
color: #000;       // schwarze Schrift
text-decoration: line-through;       // durchgestrichen
}

4. Juli 2009

gedankenschnitt.de

Auf ihrer Seite mit dem tollen Namen Gedankenschnitt bloggt Joana über ihr Leben und hält für die Besucher einen umfangreichen interaktiven Bereich sowie zahlreiche Grafiken bereit.

Layout

Wer kennt es nicht, dass man seine Gedanken auf einen Notizblock kritzelt und sie so festhält? Das Layout greift den Seitentitel gut auf, indem es einen Notizblock imitiert, kenntlich gemacht durch die Spiralen am oberen Rand. Gefällt mir!
Die restliche Gestaltung hat dann zwar nichts mehr mit einem Notizblock zu tun, hier bestimmen nun abgerundete Ecken und verschnörkelte kleine Pflanzen das Bild, aber das Layout wirkt dennoch harmonisch.

Im Header befinden sich zwei Bilder von Bruce Willis, daneben ein Zitat aus Grey’s Anatomy (“Hiermit verrate ich euch die Wahrheit über die Wahrheit. Sie tut weh, also lügen wir, denn Lügen ist eine Notwendigkeit”).

Die Anordnung der einzelnen Links im Menu finde ich etwas unpraktisch gewählt. Bevor man weiß, auf was für einer Seite man da gelandet ist, um was es geht, wer dort schreibt, stehen im Menu erst einmal Credits, der Linkage-Bereich, die Affiliates und das Ask me. Erst dann kommen die Punkte “History” und “Webmiss”. Das würde ich anders anordnen, gleich als erstes, da neue Besucher sich oft von oben nach unten durch die Navigation klicken und hier erstmal jede Menge Informationen bekommen, die in diesem Moment für sie noch irrelevant und daher uninteresant sind.

Das Rot in der Navigationsleiste tut mir in den Augen weh, während ich die rote Schrift auf dunkelgrauem Grund im Inhaltsbereich nur schlecht lesen kann. Die Counteranzeige, die im Menue ganz unten steht, kann man aufgrund des mangelnden Kontrasts kaum erkennen.
Generell passt die Farbwahl mit Rot und Schwarz aber gut zum Titel der Seite, da man mit einem Schnitt Blut assoziiert.

Bei einer höheren Auflösung entsteht am rechten Bildschirmrand ein grauer Streifen. Da könntest du ganz leicht Abhilfe schaffen, indem du die Hintergrundfarbe der Seite auf Weiß setzt.

Auf einigen Unterseiten tauchen plötzlich waagerechte Scrollbalken auf, so etwa in der Galerie deiner früheren Layouts oder auf der Postkarte-Seite.

Hier gibt es 21 von 35 Punkten.

Coding

Deine Styleangaben sind in validem CSS 2.1 geschrieben – fantastisch! :)

Nur im HTML haben sich ein paar kleinere Fehler eingeschlichen, wie du auf der Validatorseite nachlesen kannst (die du ja bereits bei dir im Footer verlinkt hast).

Was den HTML-Bereich angeht, so könntest du hier noch ein paar Dinge verbessern, indem du die Formatierungsanweisungen allesamt in das Stylesheet auslagerst. Momentan hast du im body-Tag noch die Angaben zu margin und padding stehen und verwendest im Footer sogar das font-Tag.

Ein kleiner Verbesserungsvorschlag zum Thema Klassen und IDs: deine Navigation sitzt in einem Div mit der ID “navi”. Den einzelnen Links innerhalb dieses Divs hast du nun noch die Klasse “navi” zugewiesen, um sie im Stylesheet anzusprechen. Diese Klasse benötigst du aber gar nicht, sondern du kannst einfach angeben, dass alle Links innerhalb des Divs mit der ID “navi” angesprochen werden sollen:

div#navi a {
… }

Außerdem hast du viele Angaben im Stylesheet mehrfach vorgenommen, beispielsweise die Festlegung der Schriftart Verdana. Dank des Vererbungsmechanismus von CSS brauchst du das aber nicht: wenn du einem übergeordneten Element eine Eigenschaft zuweist, wird diese automatisch auf seine Kindelemente vererbt. Sprich, wenn du für den body-Tag eine Schriftart festlegst, gilt diese für sämtliche anderen Elemente.

Macht 15 von 30 Punkten.

Inhalt

Wie schon gesagt: deinen Seitentitel sowie die URL finde ich interessant & gut gewählt!

Mit einem Steckbrief, einer kleinen Fotogalerie, deiner Wunschliste und etlichem mehr stellst du dich deinen Besuchern ausführlich vor – das gefällt mir gut, da man so einen kleinen Einblick bekommt, wer die Person hinter gedankenschnitt.de ist. Das macht deine Seite sehr persönlich.

Auch über die Entwicklung deiner Seite erfährt man etwas und kann sich auch Screenshots der vorigen Layouts ansehen, die du sogar kommentiert hast.

Im Großen und Ganzen schreibst du ordentlich, aber oft auch umgangssprachlich oder mit vielen Abkürzungen (“… mein Zimmer eig weiß/rosa werden sollte, nur iwie blieb es weiß”).

Kommen wir zum Schwerpunkt deiner Seite: dem Bereich für deine Besucher.
Hier bietest du wirklich viel an, sei es ein Reviewservice, Tutorials,ein Postkarten-Wettbewerb, ein Starqualitäts-Voting, ein SotM-Voting, … Leider hat bei all diesen interaktiven Angeboten noch niemand teilgenommen, sodass es etwas leer aussieht. Aber das wird mit der Zeit sicherlich anders werden.
Die Unterseite “Lustiges” bietet einige Witze und Links zu lustigen YouTube-Videos und Webseiten. Musste stellenweise ziemlich grinsen. ;-)

Bei den Tutorials habe ich allerdings ein paar Dinge auszusetzen. ;-)
Bei “HTML für Anfänger” fehlt beim Bild-Code die schließende spitze Klammer; der alt-Tag ist nicht ganz richtig erklärt: er ist nicht dafür da, dass der Text beim Hovern mit dem Mauszeiger als Tooltip angezeigt wird, sondern als Information über die Grafik für den Fall, dass das Bild nicht angezeigt werden kann (etwa, weil jemand einen reinen Textbrowser verwendet oder ein Vorlesegerät). Auch für Suchmaschinen ist dieser Text wichtig. Zum Thema Trennlinien führst du dort das p-Tag auf – das ist aber für Absätze zuständig, Trennlinien macht man mit Hilfe von <hr/>.
Auch gibst du viele Hinweise, um die Formatierungsangaben direkt im HTML vorzunehmen (beispielsweise: border=”0″), das gilt aber als veraltet und stattdessen sollte man dies ausschließlich im Stylesheet festlegen.
Beim Verlinken von Bildern fehlt das ausleitende a-Tag.
Der Link zum Tutorial über den HTML-Aufbau führt zu einer Fehlerseite.
Im Formular-Tutorial schreibst du, “Wenn ihr wissen wollt, wie ihr es hinbekommt, dass das Formular dann an eure EMail Adresse geschickt wird, klickt hier.”, allerdings führt dieser Link nur auf die gleiche Seite, auf der man sich bereits befindet.

Noch umfangreicher als dieser interaktive Bereich fällt der Grafikteil deiner Seite aus: hier können sich deine Besucher mit Layouts, Wallpapern, Icons, Headern und Signturen eindecken. Darüber hinaus bietest du zahlreiche Ressourcen an.
Wow! Da merkt man, dass du viel Arbeit hineingesteckt hast.

Für das Grey’s Anatomy-Zitat hast du leider keine Quelle angegeben, aber ansonsten hast du deine Credits sehr ordentlich aufgeführt. Auch ein Impressum ist vorhanden.

Macht 32 von 35 Punkten.

Insgesamt komme ich somit auf 68 von 100 Punkten!

3. Juli 2009

Screenshot mallowgraphs

Als nächstes hat sich Yellow mit ihrer noch sehr jungen (gerade mal seit 17 Tagen online) GFX-Seite mallowgraphs zum Test auf Herz & Nieren angemeldet – here we go!

Layout

Dein Layout wirkt professionell und es macht Spaß, sich auf deiner Seite aufzuhalten: große, abgerundete Ecken dominieren das Erscheinungsbild und lassen das Layout zusammen mit dem Altrosa der Überschriften und Links feminin und freundlich wirken. Der weiße Hintergrund unterstützt diese Wirkung, und dank des guten Kontrasts zur grauen Schrift lassen sich die Inhalte alle angenehm lesen.

Die abgerundeten Ecken greifst du in der Headergrafik nochmals auf – hier hast du neben einem Foto einer jungen Dame (wer auch immer das ist, ich bin in der Welt der Stars und Sternchen nicht so bewandert) eine Navigation mit sechs Links platziert und auch hier wieder die sich diagonal gegenüberliegenden zwei Ecken abgerundet und die anderen beiden im 90°-Winkel abschließen lassen. Gefällt mir gut!

Zwischen Header und Inhalt befinden sich die vierspaltige Navigation sowie ein kleiner Willkommenstext. Allerdings werden dadurch nun die meisten der Links aus dem Header überflüssig, da sie nun “doppelt gemoppelt” auftauchen. Zudem existiert rechts neben dem Inhalt eine dritte Navigation – in der wiederum einige Links aus dem Header auftauchen, aber auch einige andere.
Hier würde ich unbedingt auf die doppelten Nennungen verzichten, weil sie unnötig sind und mich ziemlich verwirrt haben (so habe ich zwar gleich die Links zum Bewerben um eine Affiliateschaft sowie die Sammlung der mallowgraphs-Buttons gefunden, aber die Auflistung deiner Affiliates ist mir dann erst später in der Sidebar begegnet).

Aber du bietest deinen Besuchern ja schließlich noch ein zweites Layout an, das man in der Sidebar auswählen kann: dieses wirkt sehr viel kantiger und kombiniert den weißen Hintergrund des Inhalts mit viel Grau sowie etwas Blaugrün. Hier sitzt die waagerechte Navigation über dem Header und die Sidebar links neben dem Inhalt.
Dieses Design wirkt meiner Meinung nach etwas gewöhnlich und mir gefällt das andere wesentlich besser.

Alles in allem wirkt dein Layout rund und ausgewogen und bis auf die Sache mit der verwirrenden Navigation sehr schön!

Macht 30 von 35 Punkten.

Coding

Leider springt mir gleich beim Betreten deiner Seite eine durch CuteNews verursachte Fehlermeldung entgegen:

Deprecated: Function eregi() is deprecated in /users/mallowgraphs/www/filemanager/cutenews/show_news.php on line 41
Deprecated: Function eregi() is deprecated in /users/mallowgraphs/www/filemanager/cutenews/inc/shows.inc.php on line 54
Deprecated: Function eregi() is deprecated in /users/mallowgraphs/www/filemanager/cutenews/inc/shows.inc.php on line 54

Ein Blick in den Quelltext zeigt, dass deine komplette Seite sich in einem Iframe innerhalb einer Tabelle befindet – weia. Ich nehme mal an, dass dies an der *.de.be-Domain liegt.

Man merkt, dass du beim Erstellen deiner Seite auf ein sauberes Coding geachtet hast. Die einzelnen Elemente sind ordentlich eingerückt, die Bilder weisen alt-Tags auf usw.
Allerdings verursacht dein Counter sehr viele Fehlermeldungen und es gibt noch einige weitere Fehlermeldungen. Welche das sind, kannst du hier genau ansehen.

Zwar verwendest du vorbildlich Stylesheets zur Formatierung deiner Seite, aber am CSS kannst du noch Einiges verbessern. So hast du viele überflüssige Angaben notiert – dadurch, dass die Eigenschaften in CSS vererbt werden, musst du zum Beispiel den Hover-Links und den Active-Links nicht nochmals die Schriftgröße zuweisen, wenn du das schon generell für Links getan hast.
Auch die Angabe 0px kannst du einfach auf “0″ kürzen, da null Äpfel schließlich genauso viel (oder wenig ;-) ) sind wie null Birnen oder null Pixel.

Hier gibt es 15 von 30 Punkten.

Inhalt

Beim Lesen des Domainnamens hatte ich zunächst mit einem etwas anderen Seitenthema gerechnet, da graphs schließlich Diagramme sind und man so eher mit Statistik rechnet als mit Grafiken. Dennoch klingt der Titel gut und ragt aus der Masse der “x-y-GFX” und “soundso-licious”-Seitennamen heraus.

Da es einfach professioneller wirkt, würde ich dir zu einer TopLevel-Domain raten – statt *.de.be also beispielsweise *.de. TLDs sind mittlerweile sehr günstig zu haben. Außerdem würdest du dadurch die oben bereits angesprochene Tabellen-Iframe-Konstruktion loswerden, auf die Suchmaschinenbots allergisch reagieren und du so von Google & Co. eher schlecht gefunden werden kannst.

Was das Menue angeht, so hast du die Punkte “designs”, “brushes” und “pixel&smilies”  zwar aufgeführt, aber noch nicht verlinkt und stattdessen mit dem Hinweis “coming soon” versehen. Da daran deine Besucher merken, dass die Seite teilweise noch eine Baustelle ist, würde ich auf diese Punkte so lange verzichten, bis die entsprechenden Unterseiten auch tatsächlich vorhanden sind.
Die Überschriften der vier Spalten finde ich nicht allzu treffend gewählt: “main”, “graphics”, miscellaneous” und “&more”. Hmm. Die unter “Miscellaneous” aufgeführten Unterseiten drehen sich doch auch um Grafiken, und die Bezeichnungen “main” und “&more” sind nicht gerade aussagekräftig.

Stellenweise ist deine Seite noch etwas leer (so sprichst du etwa in der Lounge von “vielen tollen Dingen” und hast dann nur ein Angebot, auch von den Tutorials gibt es erst zwei), aber in Hinblick auf die erst kurze Bestehenszeit ist das in Ordnung. Sicherlich wirst du hier in Zukunft noch Einiges mehr für deine Besucher bereithalten.
Die Idee, dass sich deine Besucher zu einem Interview mit dir anmelden können, habe ich so noch nicht oft gesehen und gibt daher Pluspunkte. :-)

Ein Impressum sowie eine Angabe der Credits sind vorhanden.

Hier gibt es 24 von 35 Punkten.

Insgesamt ergibt das 69 von 100 Punkten – herzlichen Glückwunsch & weiter so, deine Seite hat definitiv Potential! :-)

27. Juni 2009

Review: Milchreis.org

Milchreis ist lecker, und wie Lisa mit ihrer privaten Seite milchreis.org beweist, auch online ein Erlebnis.
Auf geht’s zum Reviewen. :)

Layout

Die Farbgebung ist hell und freundlich: ein weißer Hintergrund mit vorwiegend grauer Schrift, wobei Grün und Hellblau für ausreichende Farbtupfer sorgten. Gut lesbar ist auch alles – kurzum, dein Layout wirkt frisch und einladend!

Im Header hast du nebst dem Titel deiner Seite einige chinesische Schriftzeichen untergebracht (was gut passt, da du ja schreibst, dass du Chinesisch magst), aber leider konnte ich nirgendwo eine Angabe finden, was sie denn bedeuten. Ich bin ja neugierig. :o)
Daneben befindet sich ein kleiner Kalender, bei dem du statt der schnöden Daten bei allen Events kleine Icons verwendet hast. Das ist süß, habe ich schon seit Jahren nicht mehr gesehen und gefällt mir gut.

Auch die Sache mit der Übersichtlichkeit ist dir gelungen: links die Spalte mit der Navigation, rechts der Inhalt, und die einzelnen Inhalte sind durch die Gestaltung der Überschriften auch gut gegliedert.

Ein bisschen überflüssig finde ich das Linktrio am Ende jeder Seite, das neben dem sinnvollen “nach oben”-Link auch jeweils einen javascriptgestützten Link zum Vor- und Zurückblättern anbietet. Wieder an den Anfang der Seite springen zu können ist praktisch, aber zum Blättern nutzt man eigentlich immer den entsprechenden Button im Browser. Zudem ist der Vorwärts-Link in den meisten Fällen, eben wenn man eine Unterseite erstmalig aufruft, ohnehin nutzlos.

Und wenn wir schon mal am unteren Ende der Seite sind: schade, dass es keine Footergrafik gibt und die Seite da einfach so abgeschnitten wird.

Was du noch ergänzen könntest, wäre ein Favicon. Wie man die kleine Grafik einbindet, kannst du hier nachlesen: Favicons

Macht 27 von 35 Punkten!

Coding

Ein Blick in deinen Quelltext zeigt, dass du dir Mühe gegeben hast, den Code ordentlich zu notieren und zur besseren Lesbarkeit einzurücken. Toll!

Leider haben sich ein paar Fehler eingeschlichen. ;-)
Welche das genau sind, kannst du dir auf der Webseite des Validators angucken.

Zu Beginn deines Quellcodes fehlt die Angabe eines Doctypes und die meisten Bilder besitzen kein alt-Attribut mit einer kurzen Beschreibung des Bildes. Außerdem hast du einen kleinen Verschachtelungsfehler in der Liste des Blogeintrags vom 20.6.2009: da hast du zwischen die einzelnen Listenpunkte (<li>) schräg gesetzten Text eingefügt. Der muss aber auch innerhalb von li-Tags stehen und darf nicht einfach so in der Liste auftauchen.
Aber alles also keine wahnsinnig aufwendig zu lösenden Probleme. ;-)

Pluspunkte gibt’s dafür, dass du im Layout mit Divs arbeitest und ein Stylesheet verwendest.

Hier gibt es 25 von 30 Punkten.

Inhalt

Du legst großen Wert auf Individualität – das sieht man nicht nur daran, dass du das Layout & Coding deiner Seite selber erstellt hast, sondern auch der Domainname hat eine persönliche Bedeutung, alldieweil Milchreis zu deinen Leibspeisen zählt.

Tote Links konnte ich keine entdecken. Aber diverse “Platzhalter” – sprich, Rubriken oder Links, deren Inhalt erst noch folgen wird. So findet sich in der Liste deiner Partnerseiten, die du nach den jeweiligen Domainendungen sortiert hast, zwar die Rubrik “.com”, in der aber noch keine Einträge vorhanden sind, und in der Navigationsspalte wird die Unterseite über die Programm-Reviews auch nur angekündigt. Davon haben deine Besucher nichts, weshalb ich es sinnvoller fände, auf die Platzhalter zu verzichten und die Links auch wirklich erst dann einzufügen, wenn die jeweiligen Inhalte auch vorhanden sind.

Die Startseite wird gleich doppelt verlinkt; einmal ganz oben (“Index”) und dann noch einmal unter “Ihr Tagebuch”. Ein einzelner Link würde da auch reichen.

Über dich selbst erfahren deine Besucher eine ganze Menge: dank einiger kleiner Fotos in der Navi sowie eines größeren Fotos auf der entsprechenden Unterseite kann man sich gleich ein Bild von dir machen – dadurch wirkt deine Seite nochmal ein ganzes Stück persönlicher. Du beschreibst dich selber in einem Steckbrief, zeigst deine Handschrift samt einer von dir kommentierten Deutung, stellst deinen Freund vor, gewährst Einblick in deinen Stundenplan und lässt uns sogar ein einem ausführlich geschilderten Schultag von dir teilhaben. Der bereits erwähnte Kalender im Header hält deine Besucher zudem immer auf dem Laufenden, welche Daten bei dir so anstehen.

Aber deine Leser sind hier nicht nur Leser, sondern können auch selber aktiv werden: zum Beispiel, indem sie eine deiner drei Fortsetzungsgeschichten ein wenig weiterspinnen. Die Idee gefällt mir gut, so etwas findet man nicht auf jeder Seite.

Desweiteren bietest du diverse Reviews an: Bücher, Filme, Homepages…
Die einzelnen Bewertungen finde ich bei den Büchern und Filmen ein bisschen knapp, da du meist nur einen Satz kommentierst sowie die Bewertung in Sternchen angibst. Bei den Beschreibungen der Filme habe ich außerdem keine Quellenangaben finden können, obwohl du die Texte anscheinend von irgendwoher kopiert hast. Dahingegen fällt das (bisher einzige) Homepage-Review schön ausführlich aus.

Wirklich cool finde ich deine Idee, die Übersetzungskünste der Suchmaschinen anhand von Sprichwörtern auszutesten!
Mein Favorit ist da ganz klar “Er sieht die halbe Gesamtmenge, um die Hälfte des Kristalles nicht abzulassen.” (Sieh das Glas halb voll, nicht halb leer.)… *g*

Hier gibt es 30 von 35 Punkten.

Insgesamt komme ich somit auf 82 von 100 Punkten – herzlichen Glückwunsch! :-)

26. Juni 2009

Wenige Tage nach der Wiedereröffnung von Shizoo ist nun auch eine weitere große GFX-Seite zurückgekehrt: The Peril.

The Peril

Zwei Monate lang war die Seite offline und machte die User mit einer Fortschrittsanzeige neugierig, wann denn wohl das neue Layout fertig sein würde. Heute ist es nun soweit, und das anlässlich eines ganz besonderen Tages: The Peril feiert seinen vierten Geburtstag!

An dieser Stelle einmal herzlichen Glückwunsch. :-)

die Autorin
neontrauma neontrauma, 23 Jahre alt, Studentin und freiberufliche Webdesignerin, liebt Coding & Fotografie und wohnt in Leverkusen. mehr?
neontrauma im www
flickr fotocommunity deviantART twitter facebook StudiVZ lifestream.fm last.fm