• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Neues Desgin unter die Lupe nehmen

ky_fr34k

ky_fr34k

Mitglied
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
 
Zuletzt bearbeitet:
Werbung:
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

Code: 
<img src="images/icon-arschloch.png" alt="Arschloch"/>
- fehlende width und height. :-)

Code: 
<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..

Code: 
<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>

- Allgemein:
-> sehr fixes Layout
-> fehlenden alt-Texte bei <img>
-> fehlende title-Texte bei <a>
-> nachdem du das <html>-Tag schließt steht noch Text (Duration All: 133)
-> styling-HTML-Elemente ala <u>, <center>, <b> -> css?

Code: 
<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! :-)

Gruß
Loon3y
 
Werbung:
HTMLPro schrieb:
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. ;)
Zum Vergrößern anklicken....

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? :D

Was mir bei einem schnellen Blick aufgefallen ist:

HTML: 
<div class="elementfoot"></div>

Div ist ein Blockelement und somit nicht zustäandig dafür ;)

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.

 
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
 
Werbung:
Witschi262 schrieb:
HTML: 
<div class="elementfoot"></div>

Div ist ein Blockelement und somit nicht zustäandig dafür ;)
Zum Vergrößern anklicken....

Wieso? Das <div>-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 <div>-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 <img> wäre falsch da es sich bei dem elemntfoot um den schließenden Teil des Hintergrunds handelt.

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

Gruß KY
Zum Vergrößern anklicken....


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


Gruß
Loon3y
 
Werbung:
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
 
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 ;)

Gruß KY
 
Werbung:
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
 
Werbung:
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ß ;)

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.
 
Werbung:
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben