zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden mariofans.de - Design 6

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 09.12.2010, 16:46
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Bruck an der Mur - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.786
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Als Fan von Mario hau ich mal drauf - mir gfallts net.
Ich weiß, Mario wie Nintendo im allgemeinen (wir haben den Wii mit den üblichen Spielen) ist quietschebunt und schreiend. Japsisch halt.
Bei der alten wie beim neuen Design überzeugt mich das Kästchen an Kästchen nicht.
Der neue Entwurf wirkt wie eine Seifenwerbung, was aber nicht am Header liegt.
Comic sans ist für das Thema im Hauptmenü in Ordnung, ansonsten lass es weg.
Die Navipunkte links alle mit demselben Bildchen und farblich gleich zu zieren ist auch nichts - sollte jeder Punkt sein eigenes haben - um Mario rum gibt es ja genug Sprites und Physiognomien.

Sorry, ich klinge hart, aber mMn sollte das so nicht online, da ist die alte Seite optisch besser gemacht.

Gruß,
Thomas

Edit: Du hast da eine Seite verlinkt - http://www.zeldaeurope.de/ - das sieht gut aus.

Geändert von paracelsus (09.12.2010 um 17:48 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 12.12.2010, 21:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Hi ich habe mir mal dein Design angeschaut. Was mir nicht gefällt ist die lange Ladedauer des Hauptbildes und die Pixels am Rand von Mario. Ich habe mal schnell über das Bild gemalt und neu komprimiert damit dürfte es ein wenig besser aussehen. Auch die Farbverläufe von den einzelnen Boxen sehen nicht schön aus. Weniger ist manch ein mal mehr.
MfG. gabischatz
Angehängte Grafiken
Dateityp: jpg headerb.jpg (104,5 KB, 17x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 13.12.2010, 00:47
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

Hier kann ich das Werkzeug

GTmetrix | Website Speed and Performance Optimization

weiterempfehlen. Die Seite prüft mit YSlow und PageSpeed deine Seite auf "Optimierungsfähigkeit". Beispielsweise, was am CSS überflüssig ist oder welche Bilder komprimiert werden sollten, wann CSS Spritemaps einzusetzen sind etc.

Grüßel,
Christoph
Mit Zitat antworten
  #14 (permalink)  
Alt 15.05.2011, 12:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2010
Beiträge: 7
-DerLux- befindet sich auf einem aufstrebenden Ast
Standard

*Push*

Ok, ich hab mich einfach mal selbst an dem Design versucht und würde gerne wieder eure Meinung hören.

Mariofans.de // Die inoffizielle Mario-Seite

Edit: Link ausgetauscht, damit keine Werbung mehr erscheint .

Geändert von -DerLux- (15.05.2011 um 12:40 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 15.05.2011, 12:28
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von -DerLux- Beitrag anzeigen
*Push*

Ok, ich hab mich einfach mal selbst an dem Design versucht und würde gerne wieder eure Meinung hören.

Mariofans.de // Die inoffizielle Mario-Seite
Na dann:
  • #header ist unnötig, da leer. Stattdessen lieber eine h1 und per Image-replacement die Grafik.
  • #navi - #navi4 und #spielnes, #spielsnes, usw. wären gerne Listen. Die Bilder per Image-Replacement, Text als Linkinhalt
  • Warum postion:absolute für #navimenu?
  • Die <a> / <br> Konstruktion in #navimenu wäre auch gerne eine Liste
  • In #content_mitte sind 2 divs mit ganz vielen inline-Styles, die du auslagern solltest. Die divs sind unnötig.
  • Das font-Element solltest du ganz schnell wieder vergessen. Designangaben gehören ins CSS!
  • In #content_mitte ist ein div mit align="center". Das gehört ebenfalls ins CSS, das div ist unnötig.
  • Da du kein HTML5 verwendest, ist <b> ungültig.
  • Viele Designelemente bindest du per <img> ein, sie gehören aber ins CSS
  • #content_ende ist unnötig, weil leer
  • Die Navigationsbilder (die unnötigerweise per Javascript bei mouseover ausgetauscht werden) solltest du vorladen.

Insgesamt als Fazit: Informiere dich zu Semantischem HTML!

gruß,
take

EDIT: Du möchtest gerne ein PopUp öffnen, Chrome blockiert das brav. Lass es sein.

Geändert von take_a_7 (15.05.2011 um 12:31 Uhr)
Mit Zitat antworten
  #16 (permalink)  
Alt 15.05.2011, 12:49
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.997
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von take_a_7 Beitrag anzeigen
Da du kein HTML5 verwendest, ist <b> ungültig.
Hier muss ich dir widersprechen. Das Element <b> ist zwar nicht empfohlen, aber nicht veraltet oder gar ungültig. Es validiert unter xhtml 1.0. Der einzige Unterscheid zwischen <b> und <strong> ist, dass <strong> bei Screen Readern eine spezielle Betonung an den Tag legt. Aber Diskussionen dieser Art gibt es hier genug.
Zitat:
Zitat von take_a_7 Beitrag anzeigen
EDIT: Du möchtest gerne ein PopUp öffnen, Chrome blockiert das brav. Lass es sein.
War er nicht, sondern der Anbieter der Freehosting-Plattform.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #17 (permalink)  
Alt 15.05.2011, 13:17
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
Hier muss ich dir widersprechen. Das Element <b> ist zwar nicht empfohlen, aber nicht veraltet oder gar ungültig. Es validiert unter xhtml 1.0.
Nur bei Transitional, das ausdrücklich für veraltete Dokumente gedacht ist. Für neue Seiten wird Strict empfohlen, wo es <b> und <i> nicht mehr gibt.
Zitat:
Zitat von Praktikant Beitrag anzeigen
Der einzige Unterscheid zwischen <b> und <strong> ist, dass <strong> bei Screen Readern eine spezielle Betonung an den Tag legt. Aber Diskussionen dieser Art gibt es hier genug.
Nein. Der Unterschied besteht darin, das <b> etwas über das Aussehen des Elements aussagt, <strong> etwas über seine Bedeutung. Nur für letzteres ist HTML gedacht.
Zitat:
Zitat von Praktikant Beitrag anzeigen
War er nicht, sondern der Anbieter der Freehosting-Plattform.
Er hat den falschen FreeHoster :P

gruß,
take
Mit Zitat antworten
  #18 (permalink)  
Alt 16.05.2011, 21:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2010
Beiträge: 7
-DerLux- befindet sich auf einem aufstrebenden Ast
Standard

Hab versucht die Punkte abzuarbeiten, jedoch bleiben viele Fragen für mich offen
Hier: http://mariofans.hostingsociety.com/...-%20Kopie.html die neue Version
Zitat:
Zitat von take_a_7 Beitrag anzeigen
  • #header ist unnötig, da leer. Stattdessen lieber eine h1 und per Image-replacement die Grafik.
Hab da jetzt das gefunden:
HTML-Code:
h1#logo {
   width: 200px; // width of image
   height: 100px; // height of image
   background: url(../path/to/image.jpg);
   text-indent: -9999px;
}
jedoch weiß ich nicht, wie ich es anwenden soll.
Zitat:
Zitat von take_a_7 Beitrag anzeigen
  • #navi - #navi4 und #spielnes, #spielsnes, usw. wären gerne Listen. Die Bilder per Image-Replacement, Text als Linkinhalt
  • Die <a> / <br> Konstruktion in #navimenu wäre auch gerne eine Liste
Ok hab mir deinen Link durchgelesen, konnte mir aber nicht weiterhelfen. Ich bräuchte mal ein Muster bei meiner Seite, damit ich das Prinzip verstehe. Schließlich ist das ja nicht einfach ne Aufzählung mMn.
Zitat:
Zitat von take_a_7 Beitrag anzeigen
  • Viele Designelemente bindest du per <img> ein, sie gehören aber ins CSS
Weiß nicht was du meinst
Zitat:
Zitat von take_a_7 Beitrag anzeigen
  • #content_ende ist unnötig, weil leer
Dort ist doch der footer drin, oder soll ich es wieder mit image-replacement machen. Wenn ja, bräuchte ich eine Erklärung
Zitat:
Zitat von take_a_7 Beitrag anzeigen
[*]Die Navigationsbilder (die unnötigerweise per Javascript bei mouseover ausgetauscht werden) solltest du vorladen.[/LIST]
Code-Schnipsel pls. Ich hatte "#hidepics" im CSS
*EDIT*
Dies hat sich erledigt

Danke für Hilfe

Geändert von -DerLux- (16.05.2011 um 22:55 Uhr)
Mit Zitat antworten
  #19 (permalink)  
Alt 16.05.2011, 21:32
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von -DerLux- Beitrag anzeigen
Hab versucht die Punkte abzuarbeiten, jedoch bleiben viele Fragen für mich offen
Hier: Mariofans.de // Die inoffizielle Mario-Seite die neue Version

Hab da jetzt das gefunden:
HTML-Code:
h1#logo {
   width: 200px; // width of image
   height: 100px; // height of image
   background: url(../path/to/image.jpg);
   text-indent: -9999px;
}
jedoch weiß ich nicht, wie ich es anwenden soll.
Vergiss erstmal alles was mit aussehen zu tun hat. Dann schreibst du deine Inhalte mit HTML. Ohne an das Aussehen zu denken. Dann erst machst du das Design, ohne die HTML-Struktur zu verändern (außer natürlich Klassen und IDs). Dabei wirst du, falls du alles richtig gemacht hast, feststellen, dass du z.B eine Überschrift hast, die Text enthält (z.B. den Seitennamen), die aber auf der fertigen Seite durch ein Bild mit dem Seitennamen darin ersetzt werden soll. Das geht aber jetzt komplett über CSS (image-replacement).
Zitat:
Zitat von -DerLux- Beitrag anzeigen
Ok hab mir deinen Link durchgelesen, konnte mir aber nicht weiterhelfen. Ich bräuchte mal ein Muster bei meiner Seite, damit ich das Prinzip verstehe. Schließlich ist das ja nicht einfach ne Aufzählung mMn.
Doch. Eine Navigation ist eine Liste von Links. Schau dich auf populären Webseiten um, da ist es immer so.
Zitat:
Zitat von -DerLux- Beitrag anzeigen
Weiß nicht was du meinst
Wie schon gesagt: Eine Linie die zur Zierde da ist (Umrandung,etc.) hat im HTML nichts verloren, weil sie das Aussehen der Seite bestimmt. Dieses regelt man aber über CSS.
Zitat:
Zitat von -DerLux- Beitrag anzeigen
Dort ist doch der footer drin, oder soll ich es wieder mit image-replacement machen. Wenn ja, bräuchte ich eine Erklärung
Es gibt die Pseudoelemente :after / :before. Damit vermeidet man unnötiges HTML für Designelemente.
Ansonsten führe doch einfach den Menücontainer (#navimenu) weiter bis nach unten, ebenso den #content_mitte.

gruß,
take

EDIT:
Zitat:
Code-Schnipsel pls. Ich hatte "#hidepics" im CSS
ist bei deinem Post etwas verunglückt. Google ist dein Freund: JavaScript bilder vorladen oder besser css sprites.

Geändert von take_a_7 (16.05.2011 um 21:34 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
design automatisch verlängern elias1993 CSS 4 06.05.2011 19:47
Design Darstellung dessauer CSS 22 03.05.2010 15:46
Design Scrollbalken in IE FF und O (mit Bildern) MarkusStar CSS 1 08.03.2009 14:27
Was haltet ihr von Design? tobik999 Offtopic 10 28.11.2008 23:03
Sitecheck: Barrierearm - Design - Ajax Schmidt Site- und Layoutcheck 16 21.08.2008 20:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:46 Uhr.