Neues Desgin unter die Lupe nehmen

Hallo zusammen,

ich hab mal wieder ein neues Design gemacht.
Es soll das alte ersetzen KY-Programming

Dieser Thread führt diesen Thread fort.

Es wurde alles komplett von Hand gemacht.

Bitte einmal prüfen auf:

  • Syntax (sind rechte viele Divs, zu viele?)
  • Optik
  • Usability
  • korrekte Anzeige

Hier der Link http://ky-programming.de/3.0/index.html

Vorschläge/Kritik am Design werden auch noch gern gehört.

Vielen Dank,
Gruß KY

Grüßli KY.

fangen wir einmal an…vom Design her spricht mich die Seite nicht so an. Viel zu rund alles und dunkel dunkel…da kann man nicht gut lesen.

Zu dem was mir aufgefallen ist:

  • wenn ich den Zoom erhöhe schiebt sich die mittlere Box vor die Rechten.
  • wenn ich die Schriftgröße erhöhe, wandert der Text aus den Boxen
<img src="images/icon-arschloch.png" alt="Arschloch"/>
  • fehlende width und height. :slight_smile:
<form class="barelement" method="post" action="login.php">
				<h2 class="elementhead">KY-CMS Login</h2>
				<div class="elementbody">

					<p>
						<label for="username">Username:</label>
						<input name="4bffe4a97b4a0[username]" id="username" type="text">
					</p>
					<p>
						<label for="password">Password:</label>
						<input name="4bffe4a97b4a0[password]" id="password" type="password">
					</p>

					<p>
						<input value="Login" type="submit">
					</p>
				</div>
				<div class="elementfoot"></div>
			</form>

nicht eher…

<form class="barelement" method="post" action="login.php">
	<fieldset class="elementbody">
		<legend>KY-CMS Login</legend>
			<label for="username">Username:</label>
			<input name="4bffe4a97b4a0[username]" id="username" type="text">

			<label for="password">Password:</label>
			<input name="4bffe4a97b4a0[password]" id="password" type="password">

			<input value="Login" type="submit">
	</fieldset>
</form>
<html>

Du gibst deine HTML-Dokumentinhalte ohne einen Sprachkürzel (ISO) aus (wichtig für Vorlesebrowser, damit diese wissen wie sie Texte vorlesen sollen).

Am Ball bleiben! :slight_smile:

Gruß
Loon3y

mhh ich scließe mich Loon3y an. du kannst wenn du willst auch den kostenlosen validator vom w3c benutzen: → The W3C Markup Validation Service
allgemein wie gesagt viel zu dunkel. :wink:

Der Validator ist an sich für Anfänger vllt hilfreich, aber letzenendes absolut überflüssig. Die meisten Standards kann der aktuelle Validator nichtmal abarbeiten, da sie nicht implementiert sind. Kennt er nicht → Fehler.

Das Design spricht mich auch nicht an.
Es sollte viel Freundlicher wirken. Du möchtest doch bestimmt keine Website besuchen beider du jeden Moment von einem Vampir angefallen wirst oder? :smiley:

Was mir bei einem schnellen Blick aufgefallen ist:[FONT=monospace][/FONT][FONT=monospace]

[html]

[/html]

Div ist ein Blockelement und somit nicht zustäandig dafür :wink:

Mir allerdings gefällt gut, dass du das Design sehr Flexibel machst. Du kannst locker mal schnell einen anderen Hintergrund zaubern und sofort wirkt es viel Freundlicher.

[/FONT]

Hey!

Da du ja deinen Besuchern etwas anbieten möchtest, würde ich die Seite wie bereits erwähnt etwas freundlicher gestalten. Das heißt: Helle Farben, wie weiß oder ein leichtes blau/grün, würden schon einen anderen Eindruck vermitteln.
Anstatt auf der rechten Seite die drei Boxen zu benutzen, würde ich eine etwas größere nehmen und Trennlinien benutzen. Mit Überschriften könntest du dann die Bereiche noch zusätzlich abgrenzen.
Viele Grüße,
Dennis

Wieso? Das

-Element, ist ein Tag, welches mehre andere html-Tags gruppiert. Das Wort „blockelement“ existiert so nicht in HTML, denn das ist CSS und man könnte auch per display: x; dem
-Tag eine andere Eigenschaft zuweisen.

Gruß
Loon3y

Welches Element kann ich den sonst nehmen?
An sich brauche ich ein Element dem ich ein Bild verpassen kann.
Ein wäre falsch da es sich bei dem elemntfoot um den schließenden Teil des Hintergrunds handelt.

Gruß KY

das

-Tag ist an dieser stelle schon i.O. Du hast ein Bild ohne Inhalt, welches als Background über CSS eingebunden wird. Das
hat keine semantische Bedeutung und in diesem Falle kann man es nehmen…aber es bläht eben den Quelltext enorm auf.

Gruß
Loon3y

Da hast du natürlich recht, und mir wäre es auch lieber wenn es ohne gehen würde, aber ich hab keinen weg gefunden eine Rahmen aus Bildern zu gestalten ohne x divs zu benutzen.

Gruß KY

Eine Möglichkeit gibt es schon: Border-image: using images for your border - CSS3 . Info Allerdings ist dies CSS 3 und nur in modernen Browsern gängig.

Gruß
Loon3y

Ja das hab ich auch schon gesehen.
Jetzt müssen nur noch alle Browser aussterben die kein CSS 3 unterstützen und schon kann ich los legen.
Ich komm darauf in 10 Jahren zurück :wink:

Gruß KY

Wieso? Browserweichen rocken… :wink: Ok, das ist durchaus etwas Mehrarbeit.

Was mich an Browser Weichen massiv stört ist, dass ich dann so oder so die „frikel“ Lösung bauen muss.
Dann kann ich gleich nur die „frikel“ Lösung bauen.
Das ist wie mit den Java-Script Alternativen, wenn ich eine Alternative gebaut hab, warum soll ich dann überhaupt noch die JS-Lösung einsetzten?

Gruß KY

Weil die andere mehr Komfort bietet. Also die mit JS. Zumindest ist das bei meinen JavaScript-Lösungen so.

Stimme Körnerbrötchen zu. Für AJAX-Anwendungen muss z.B. eine Lösung ohne JS her, aber mit JS macht das für den Nutzer doch viel mehr Spaß :wink:

Interessant für runde Ecken im IE:
CSS3 PIE: CSS3 decorations for IE
Simuliert einige CSS3-Eigenschaften in den IE-Versionen 6-8, darunter auch border-radius.

Nein es muss keine her, es muss auf einer Lösung ohne Ajax aufgebaut werden.

Content schreiben → HTML → CSS → JavaScript

Gruß
Loon3y

Ist doch jedem selbst überlassen von welcher Seite er das Problem anschaut, wenn am Ende das gleiche herauskommt. rolleyes

Was haltet ihr davon wenn ich zwei verschiedene Designs mache. Einmal für moderne Browser mit CSS3 Unterstützung und eine Version für den Rest, mit festen Größen d.h. vorgegebene Höhen und Breiten?

Dann hätte ich „eine“ saubere Lösung für jeden das was er kann.

Gruß KY