kl-design.eu Design+Inhalt+Code (EDITOR)

[Junny]

Zuerst muss man sich überlegen, was ein Menü inhaltlich darstellt. Am nähesten beschreibt das Tag ul (ungeordnete Liste) den Inhalt.

Dann hat man die Wahl zwischen zwei verschiedenen Linkarten: Textlinks oder Bilderlinks.

Menü mit Textlinks:

<ul id="nav-main">
  <li><a href="index.html">Aktuelles</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

Diese Variante ist zu bevorzugen, da die Schriftgröße flexibler ist.

Menü mit Bilderlinks:

<ul id="nav-main">
  <li><a href="index.html"><img src="nav-main-aktuelles.jpg" width="100" height="20" alt="Aktuelles" /></a></li>
  <li><a href="kontakt.html"><img src="nav-main-kontakt.jpg" width="100" height="20" alt="Kontakt" /></a></li>
</ul>

Diese Variante bietet dem Designer mehr gestalterische Freiheit (schräger Text/Effekte), geht aber etwas zulasten der Benutzerfreundlichkeit. Bei Eurem Menü sehe ich die Notwendigkeit für Bilderlinks nicht.
Wenn man hier die Bilder abschaltet, wird übrigens der Alternativtext als Alternative angezeigt. Somit werden die Bilderlinks automatisch zu Textlinks und das Menü bleibt benutzbar.

Hat man das Menü inhaltlich ausgezeichnet, gehts mit der Gestaltung los. Dafür benutzen wir nicht das style-Attribut, sondern entprechende Selektoren in der CSS-Datei. Hilfreich dabei ist die ID der ungeordneten Liste. Insbesondere wenn Hintergrundbilder verwendet werden, ist darauf zu achten, dass die Lesbarkeit bei verschiedenen Schriftgrößen erhalten bleibt.

Ein Hovereffekt lässt sich leicht durch andere CSS-Regeln für

ul#nav-main li a:hover

realisieren. Theoretisch kann man die Pseudoklasse :hover mit ganz vielen Elementen sinnvoll kombinieren, aber der Internet Explorer kennt nur a in Verbindung mit :hover.

Gruß
Junny

 

[Atlan]

Danke für den Kommentar. In meiner umgearbeiteten Version (noch nicht im Netz) habe ich die Navigation bereits in einer ul. Leider lässt sich das Problem nicht so leicht nach dem von dir genannten Schema lösen, denn der Text hat Farbverläufe und Schlagschatten.

Edit:
Ich habe noch eine Frage:
Auf der Seite befinden sich momentan horizontale Trennlinien, die ich mit einem div dargestellt habe^^ Das wollte ich jetzt per hr darstellen, stoße aber auf das Problem, dass der IE immer einen Rahmen um das hr-Element zeichnet. Kann man das irgendwie umgehen? Wenn nicht, sollte ich die Trennline in ein img-Element packen?

MfG

 

[_Thor_]

Im IE kannst du den Rahmen nicht entfernen, aber mit

hr {color: #xxx;}

kannst du ihm eine Farbe geben. Frag mich nicht, wieso er dafür color brauch, habs nur gerade probiert.

 

[Atlan]

Hi,

hab grad ein bisschen mit color experimentiert. Das Problem ist ja, dass ich einen Verlauf im Hintergrund habe, deshalb kann ich dort keine feste Farbe vergeben. "color: none;" und "color: transparent;" funktioniert leider auch nicht.

Ich habe die Trennlinien jetzt einfach mal per img eingefügt. Habe die Seite nun übrigens geupdated. Ich habe mich vorwiegend darauf konzentriert die divs zu ersetzen. Dem Navigationsproblem habe ich mich noch nicht angenommen außer die Navigation als Liste zu schreiben.

MfG

 

[Junny]

Das Menü mit der ungeordneten Liste ist zur Zeit unbenutzbar, man kann nichts anklicken. Habe den CSS-Code nur überflogen, aber der Grund könnte sein, dass ul, li und a im Menü als block dargestellt werden sollten, damit sie eine Breite zugewiesen bekommen können.

Ich sehe da keinen Farbverlauf, sodass ich bei der Meinung bleibe, es kann fast genauso mit Textlinks umgesetzt werden. Wenn Ihr das anders seht, nehmt auf jeden Fall für jeden Link ein anderes Bild und bindet es per img-Tag mit alt-Attribut ein. Gerade auch für die Suchmaschinenoptimierung ist der Inhalt zwischen <a href="index.html"> und </a> ein äußerst wichtiges Kriterium! Die Linien zwischen den Links würde ich als Hintergrundbild der Listeneinträge einfügen.

Warum sehen einige Menüpunkte anders aus? Sind die nicht alle gleichberechtigt?

Gruß
Junny

 

[Efchen]

In dem Fall ist es ja so, dass es funktioniert. Man hat halt nur nicht die Freiheit die Schriftgröße zu ändern und man sollte die Bilder nicht wegschalten

Wenn man aber darauf angewiesen ist, die Schriftgöße zu ändern, oder Bilder nicht sehen kann (weil es der Browser oder die Augen nicht hergeben), dann funktioniert es eben nicht und man hat die berühmte A-Karte gezogen. Das ist nicht prfessionell!

Also sag bitte, was du über den Inhalt denkst. Wir wollen ja schließlich nicht, dass jeder von uns abrät

Das kann man zusammenfassen zu "Informiert Euch, was das WWW ist und was die Nutzer für Ansprüche daran stellen". Dann fällt Dir selber auf, was nicht passt.

Aber hier ist bei mir nun mal das Problem, dass das Design schon steht und auch komplett umgesetzt ist und scheinbar 100%ige Nutzbarkeit nicht möglich ist.

In dem Fall würde ich empfehlen, das Design nochmal zu überdenken.

Die Internetnutzer werden ja auch immer älter und die Auflösung der Bildschirme immer höher, ich denke, es gibt schon einige, die die Schriftart auf groß oder sehr groß gestellt haben. Nicht nur die, die als Sehbehindert gelten, sondern auch einfach ältere Menschen mit zu großen Bildschirmen.

Ich kann da meine Eltern nicht ausschließen, die am liebsten mit 800x600 unterwegs sind, weil sie die Schrift da einfach besser lesen können.
Außerdem möchte ich noch hinzufügen, dass die Auflösung der Bildschirme nicht nur immer höher wird, sondern auch immer geringer.

Ich stimme euch da voll zu. Es ist halt die Frage, ob es sich lohnt für 1,5% der Besucher große Änderungen vorzunehmen, obwohl Sie z.B. bei den aktuellen Browsern schon die Möglichkeit haben zu zoomen und obwohl das nur unser Hobby ist.

Wenn Du das gewerblich anbieten willst, dann sollte es mehr als nur ein Hobby sein. Denn wenn Du Geld verlangst, dann kann Dein Kunde von Dir erwarten, dass Du gute Arbeit ablieferst. Diese Einstellung ist aber nicht professionell. Die 1.5% sind auch nur Menschen! Es gibt keinen Grund, denen vors Gesicht zu stoßen und zu sagen "Du kmmst hier net rein".
Das WWW ist die große Chance für behinderte Menschen, am normalen Leben teilzunehmen, sie können da Dinge machen, die sie im realen Leben nicht können. Und diese Deine Einstellung führt dazu, dass sie sogar da ihrer letzten Chancen beraubt werden. Und das ist nicht richtig. Die ganze Welt redet von Antidiskriminierung, von Zivilcourage, von Hilfe für Hilfsbedürftige. Daher verstehe ich nicht, warum im WWW - wo die Technik alles bietet, das auch hier anzuwenden - die Webmaster mit der Einstellung dara gehen dürfen "das sind doch nur 1.5%".

Überdenke das mal.

Es ist noch kein Meister vom Himmel gefallen. Jeder lernt noch dazu, auch ich (auch wenn ich mich vielleicht anders anhöre). Keine Website kann von Anfang an perfekt sein. Aber jemanden absichtlich aussperren und damit noch zufrieden sein ("sind ja nur 1.5%") ist nicht okay.

Viel Erfolg mit Deinem Gewerbe. Kannst ja als Referenz auf diesen Thread verlinken ;ugl

 

[Atlan]

Hi Junny,

Das Menü mit der ungeordneten Liste ist zur Zeit unbenutzbar, man kann nichts anklicken.

Ich hatte das leider nur für den IE7 und Firefox3 getestet, bevor ich es hochgeladen habe. Es war ja schon etwas später ;) Dort hat es aber einwandfrei funktioniert. In Opera 9.61 und Safari 3.2.1 ebenfalls. Also bei mir funktioniert alles. Im IE6 hab ich's mir noch nicht angeschaut. Hast du zufällig einen? Wenn der wieder spinnt, muss ich das nochmal ändern.

Ich werde die Navigation für den Übergang erstmal mit der Bildlink-Variante umsetzen und mir Gedanken über eine Neugestaltung machen, weil wenn ich die grafisch aufgepeppelte Schrift durch normalen Text ersetze sieht das nicht sehr gut aus. (Schon getestet)

Warum sehen einige Menüpunkte anders aus? Sind die nicht alle gleichberechtigt?

Gruß
Junny

Nicht alle.
"Konzept", "Design" und "Programmierung" sind Unterpunkte von "Leistungen".
Die Kontaktdaten findet man unter "Kontakt" und somit ist das Impressum nur noch für diejenigenigen von Bedeutung, die mehr als nur die Kontaktdaten von uns erfahren wollen.
Das Glossar befindet sich noch im Aufbau. Es ist ja momentan noch sehr übersichtlich. Deshalb ist es auch kleiner in der Navigation dargestellt.

Hi Efchen,

"Informiert Euch, was das WWW ist und was die Nutzer für Ansprüche daran stellen"

Beziehst du das jetzt auf den Inhalt der Seite oder darauf, dass ich mich vorerst gegen eine Neugestaltung der Navigation gewehrt hatte? Wenn du das auf die Seite beziehst, kannst du ein Beispiel auf der Seite nennen?

Wenn Du das gewerblich anbieten willst, dann sollte es mehr als nur ein Hobby sein.

Es ist und bleibt unser Hobby. Das Geld verdienen ist ein glücklicher Nebeneffekt, weil wir anscheinend schon Arbeit verrichten, für die andere Geld bezahlen. Das möchten wir aber nicht illegal verdienen und deshalb haben wir ein Gewerbe angemeldet. Außerdem bedeutet "Hobby" nicht, dass man seine Arbeit unsauber erledigt. Bei einem Kunden hätte ich dieses Problem gleich in Angriff genommen, aber da es für unsere eigene Seite ist, habe ich mich vor der vielen Arbeit gesträubt und musste feststellen, dass es keinen Sinn hat sich zu sträuben.

Keine Website kann von Anfang an perfekt sein. Aber jemanden absichtlich aussperren und damit noch zufrieden sein ("sind ja nur 1.5%") ist nicht okay.

Zufrieden ist der falsche Begriff. Ich war damit einverstanden, weil der Mehraufwand in keiner Relation zu dieser verschwindend geringen Zahl stand. Aber ich habe ja bereits eingesehen, dass es so nicht geht.

MfG

 

[Efchen]

Beziehst du das jetzt auf den Inhalt der Seite oder darauf, dass ich mich vorerst gegen eine Neugestaltung der Navigation gewehrt hatte? Wenn du das auf die Seite beziehst, kannst du ein Beispiel auf der Seite nennen?

Weiß nicht mehr...ist schon zu lange her ;-)
Aber z.B. schreibt Ihr was von der relevanten Zielgruppe.
Die Zielgruppe im WWW ist z.B: immer die ganze Welt. Auch eine Website, die Sonnenbrillen verkauft, sollte barrierefrei sein, ein blinder Onkel könnte seinem Neffen eine kaufen wollen.
Da gibt es etliche Dinge solcher Art. Dass die Auflösung irrelevant ist, dass Nutzer ihre Schriftgröße im Browser verstellen können und und und.

Außerdem bedeutet "Hobby" nicht, dass man seine Arbeit unsauber erledigt.

Der Eindruck ist aber anfangs entstanden.

Zufrieden ist der falsche Begriff. Ich war damit einverstanden, weil der Mehraufwand in keiner Relation zu dieser verschwindend geringen Zahl stand. Aber ich habe ja bereits eingesehen, dass es so nicht geht.

Viele Unerfahrene glauben, es läge ein Mehraufwand vor. Tatsache ist aber, dass eine vernünftige Arbeitsweise, Trennung von Inhalt und Layout, semantisches HTML usw. automatisch 100%ige Nutzbarkeit und Barrierefreiheit mit sich zieht und letzten Endes gar kein Mehraufwand ist, sondern eine Ersparnis. Mehraufwand ist "optimiert für Browser xyz".

Man muss nur wissen, was im WWW möglich ist. Wer ein pixelgenaues Layout in einem Grafikprogramm malt und das dann sliced und als Tabellen auf die Seite packt, der wird schnell an die Grenzen stoßen und dann erheblichen Mehraufwand haben, das wieder gerade zu biegen. Nicht alles, was man aus dem Print-Design kennt, lässt sich vorbehaltlos im WWW anwenden.

 

[Atlan]

Weiß nicht mehr...ist schon zu lange her ;-)
Aber z.B. schreibt Ihr was von der relevanten Zielgruppe.
Die Zielgruppe im WWW ist z.B: immer die ganze Welt. Auch eine Website, die Sonnenbrillen verkauft, sollte barrierefrei sein, ein blinder Onkel könnte seinem Neffen eine kaufen wollen.
Da gibt es etliche Dinge solcher Art. Dass die Auflösung irrelevant ist, dass Nutzer ihre Schriftgröße im Browser verstellen können und und und.

Das ist dann vielleicht auf der Seite zu knapp formuliert. Damit ist nicht gemeint, dass die Seite nur von einer bestimmten Zielgruppe betrachtet werden kann. Damit ist viel mehr gemeint, dass die Struktur der Seite so angepasst wird, dass die Hauptzielgruppe der Seite (und die gibt es bei jeder Seite) möglichst schnell an ihr Ziel gelangt und nicht wieder zu einer Suchmaschine wechselt, um eine andere Seite zu suchen. Das bedeutet nicht, dass die Seite für andere Personen unzugänglich sein soll.

MfG

Edit:
Weitere Meinungen auch zum jetzt veränderten Code sind immer Willkommen!

 

[Lenchen]

Auf der Startseite kann ich alle Links anklicken, wenn ich auf Kontakt geklickt habe, gehen aber alle nicht mehr. (FF 3.04)

 

[Atlan]

Hi Lenchen,

das kann eigentlich nicht sein, da der Coder der Navigation dort identisch ist. Hast du evtl. vergessen Strg+F5 zu drücken? Sonst verwendet Firefox evtl. noch die alte css-Datei.

MfG

 

[Lenchen]

Stimmt, jetzt gehts, musste jede Unterseite noch einmal laden.

 

[Junny]

Da Du ja ständig nach weiteren Vorschlägen fragst, hier zwei Arbeitsanregungen:

1. Falls Ihr es nicht schon wisst/macht: Es gibt Techniken, um Sachen wie z.B. das Menü nicht auf jeder Seite einzeln einfügen zu müssen. Das Zauberwort lautet (zumindest bei Verwendung von PHP, es gibt andere) include.
2. Da das unschöne URLs zur Folge hat, sollte man sich als zweiten Schritt mit mod_rewrite vertraut machen und damit die URLs vereinfachen.

Die beiden genannten Sachen sind zwei mächtige Werkzeuge, die es meiner Meinung nach unbedingt zu erlernen lohnt, wenn man das Ganze auf höherem Niveau machen möchte und für den Code zuständig ist.

Gruß
Junny

 

[_Thor_]

Wo bitte gibt es denn unschöne URL's, wenn man includes benutzt? War bei mir noch nie der Fall.

 

[Atlan]

Über includes hatte ich auch schon nachgedacht. Ich meine sogar, ich hätte es versucht zu machen, aber bin am mod_rewrite gescheitert. Das muss ich mir wirklich nochmal genauer anschauen. Hat ja viele Vorteile, vor allem muss man beim Überarbeiten nicht in jeder Datei das gleiche ändern.

 

[Junny]

Wenn man include so benutzt, dass immer die gleiche Datei (z.B. index.php) aufgerufen und der entsprechende Inhalt eingefügt wird, sehen die URLs so aus: htt p://www.domain.de/index.php?seite=kontakt .
Das bezeichne ich als unschöne URL. Per mod_rewrite kann man das leicht ändern:

RewriteEngine On
RewriteBase /
RewriteRule ^([a-z]+).html$ index.php?seite=$1

Gruß
Junny

 

[_Thor_]

Deswegen kommt bei mir der Inhalt ja auch jeweils in eine eigene Datei in der ich dann nur die sich wiederholenden Elemente (header, menü, footer...) einbinde. Dann hast du auch nicht solche URL's.

 

[Atlan]

Hab Thors Variante gleich mal umgesetzt. Ist jetzt schon wesentlich übersichtlicher ;)

 

[Loon3y]

Wenn man include so benutzt, dass immer die gleiche Datei (z.B. index.php) aufgerufen und der entsprechende Inhalt eingefügt wird, sehen die URLs so aus: htt p://www.domain.de/index.php?seite=kontakt .Gruß
Junny

wieso nicht require statt include?

 

[Junny]

wieso nicht require statt include?

Berechtigter Hinweis, danke. Man sollte require verwenden.