Druckbare Version
Hallo, ich wollt einmal Verbesserungsvorschläge (egal ob Gestaltung, Aufbau, oder Css,..) für meine Seite: Pirapixel.com haben.
Die Seite ist reine Freizeitarbeit, also bitte erwartet keine "Webdesignerfähigkeiten" von mir. :D
(Ist noch im Aufbau, daher fehlen noch viele Dinge)
Besonders würde mich interessieren, ob das Layout zu hell/dunkel oder eintönig ist.
Was würdet ihr noch in die Seiten/Header/footer packen, um es schöner zu gestalten?
Danke für alle Ratschläge und Kritiken.
Kurz die Seite angeschaut, und gleich wieder weg, da das Anschauen so anstrengend ist, sodass ich schon leichte Kopfschmerzen bekomme. Viel zu dunkel bzw. zu starker Kontrast
Ich würde die Hintergrundbilder entfernen. Und zentrierte Absätze lese ich erst gar nicht, zu anstrengend, ich bin es gewohnt beim Lesen von Links immer an der gleichen Position zu beginnen.
Zudem fehlen bei allen Bildern, die ich gecheckt habe, Alternativtexte. Ist das gewollt? Der Google Bot fängt damit dann jedenfalls nichts an. Ein Blinder auch eher wenig. Teilweise sind ja sogar Texte (z.B. Impressum) Bilder ohne Alternativtext.
Hallo Pira,
wenn Du Dich vielleicht doch erstmal ein bisschen in das Thema Webdesign einlesen möchtest findest Du bei WebmasterPro http://www.webmasterpro.de/portal/ar...en-sollte.html einen knackigen Überblick mit den wichtigsten Grundlagen.
Grüßle
Claudia
Ersteinmal danke für die Mühe.
Hätte nicht gedacht so derb durchzufallen bei euch. D:
Ich werd versuchen es umzusetzen,
- helleres Design, Blocksatz, Alternativtexte, Barrierefreiheit.
An letzeres habe ich beim erstellen gar nicht gedacht, da es mir vorwiegend darum ging es schön zu machen.
Hab mich ein wenig in die "goldenen Regeln" eingelesen und werde es sogut es geht umsetzen.
Allerdings würde ich gern meine Hintergrundbilder behalten da diese mein Layout darstellen sollen.
edit:
Habe die Hintergrundbilder eine Ebene höher gesetzt, so das der Hintergrund beim lesen einfarbig ist, der Kontrast sollte auch besser sein dadurch.
Hab Alternativtexte bei den Bildern eingefügt. (außer bei den Links, da die noch geändert werden)
Normale weiße Schrift im Blocksatz bzw. auch linksbündig jetzt.
Blocksatz würde ich, insbesondere bei schmalen Spalten, ebenfalls vermeiden.
Wobei ich denke, ich habe hier irgendwo mal eine Erweiterung gesehen, die Silbentrennung mittels Javascript möglich macht. Damit ginge es zumindest mal etwas besser mit dem Blocksatz.
Silbentrennung geht auch per CSS
Bezüglich dem Thread....sieht leider aus wie die erste "Homepage"...sorry :-(. Selbst für mich als alten Gamer, der sich im Pixellook zurechtfindet :-). Aber Übung macht ja bekanntlich den Meister.HTML-Code:-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
VG
Im Prinzip ja, aber ...
http://caniuse.com/css-hyphens
Man kann allerdings sagen, auch wenn ein Browser es nicht unterstützt, wird es dadurch auch nicht schlimmer als ohne Silbentrennung ;)
Von Javascript Hypenator rate ich ab. Du findest dann überall in deinem Quelltext ein "& shy;" an Stellen, die trennbar sind. Meistens bleiben die auch erhalten, wenn du Text dann aus der Seite rauskopierst.
So sieht dein Text-Inhaltselement auf der Startseite aus
und ungefähr so sollte es aussehenHTML-Code:<div id="Hauptseite_text" class="ce_text block">
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Willkommen auf Pirapixel.com,</span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;"> diese Seite bietet einen Überblick über:<br></span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Gimp, Pixelbilder, Bildbearbeitung und sogar </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">das Einbinden von Grafiken in verschiedenen </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Programmiersprachen. </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Außerdem kleine Tutorials zu den verschiedensten Dingen,<br></span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">die es sonst im Netz nur schwer, </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">oder sogar überhaupt nicht zu finden gibt.<br></span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;"> </span>
</p>
<p style="text-align: justify;"><span style="font-size: 14px; color: #ffff99;"><span style="font-size: 16px; color: #ffffff;">Viel Spaß beim Ausprobieren! :D</span>
<br>
</span>
</p>
</div>
Einige Erklärungen dazu:HTML-Code:<div class="ce_text block hauptseite_text">
<h1>Willkommen auf Pirapixel.com</h1>
<p>
Diese Seite bietet einen Überblick über Gimp, Pixelbilder, Bildbearbeitung und sogar das Einbinden von Grafiken in verschiedenen Programmiersprachen. Außerdem kleine Tutorials zu den verschiedensten Dingen, die es sonst im Netz nur schwer, oder sogar überhaupt nicht zu finden gibt.
</p>
<p>Viel Spaß beim Ausprobieren!</p>
</div>
- Deine Seite hat keine Überschrift (Struktur mit FF-Addon WebDeveloper prüfen - "Informationen - Dokumentkontur anzeigen"). Mit Insert-Tags kannst du dir auf jede Seite automatisch eine Überschrift aus dem Seitentitel generieren.
- Sparsam umgehen mit CSS-IDs. Auf einer Seite darf nämlich nicht zweimal die gleiche ID vorhanden sein. Besser CSS-Klassen benutzen.
- Kein Inline-Style benutzen (style="..."). Besser die Elemente über eine CSS-Datei formatieren. Evtl. einem Element eine CSS-Klasse geben, ist aber meistens nicht nötig (CSS-Selektoren zum Ansprechen der Elemente lernen).
- Keine unnötigen SPANs einbauen.
- Keine leeren Absätze zur Abstandskontrolle benutzen. Allgemein z.B. p {margin-bottom: 1.5em;} formatieren.
- Elementen keine Breite geben (nur in Ausnahmen), Block-Elemente erstrecken sich dann automatisch auf die zur Verfügung stehende Breite. Bei der Breite darauf achten, dass Textzeilen nicht zu lang werden (momentan in Ordnung mit den 724px).
Am besten den TinyMCE-Editor (RTE) so anpassen, dass du erst gar nicht in Versuchung kommst im RTE Schriftarten, Größen, Farben, Abstände usw. einzugeben (kann ich dir geben, schreib mir ne E-Mail keine PN).
Versuche bei der Eingabe der Inhalte nicht ans Design zu denken, sondern an semantisch gut strukturierten Inhalt. Mit CSS kannst du nachher alles zurecht biegen. Als Beispiel kannst du dir mal diese Seite ansehen http://www.mezzoblue.com/zengarden/alldesigns/ dort siehst du ca 216 Designs, welche alle das gleiche HTML im Quellcode haben. Dieses Projekt gehört zu http://www.csszengarden.com/.
Für den grauen Hintergrund hinter dem Text kannst du auch eine halbtransparente Farbe wählen z.B. rgba(31, 31, 31, 0.9) anstatt #f1f1f1, falls dir sowas gefällt. Ausprobieren kannst du das mit dem FF Addon Firebug bevor du die Werte einträgst.
Du siehst, es gibt noch vieles zu entdecken ;);
ps Dunkel muss nicht schlecht sein, nur die Kontraste müssten halt stimmen, so dass man die Inhalte entspannt aufnehmen kann, es sei denn du willst bewusst ein hohes Stresslevel erzeugen.
Hallo,
mich stört der Hintergrund. Ich komme nicht zum lesen, da ich immer denke ich bin in einem alten Nintendo Game "Briggs" oder wie das hieß? und warte auf die Klötze die evtl. fallen.
Nimm doch einfach einen schlichten Hintergrund! Ich weiß auch ehrlich gesagt nicht so richtig um was es da geht? oder mal gehen soll?
Wenn man so will ist es auch meine erste "Homepage". Ich hatte vor einigen Jahren mal bei einem Praktikum mit Contao angefangen und mich dort eingearbeitet.
Aber davon ist nicht mehr viel übrig geblieben.
Das der Pixellook nicht so gut ankommt hab ich jetzt schon mehr als deutlich zu verstehen gegeben, allerdings möchte ich diesen dennoch beibehalten.
Ich habe momentan auch nicht das Ziel gleich eine perfekte Seite zu schaffen, sondern eine die mir gefällt und einen technischen Rahmen entspricht der nicht aus der Steinzeit kommt.
(z.B. der HTML Aufbau)
Ich werde mir aber alle Kritiken annehmen und diese umsetzen.
Das Text-Inhaltselement hat diese Formatierungen selbst vorgenommen und ich wusste nicht wie ich diese ändern konnte, daher hab ich jetzt einfach diese als HTML Element eingebunden.
(Da der Text sich normalerweise nicht ändern wird)
Gibt sicherlich deutlich bessere Möglichkeiten, diese sind mir aber momentan Fremd.
Das add-on Web developer kannte ich noch nicht, daher jetzt hinzugefügt. :D
Danke für alle Anregungen und Kritiken, ich hoffe das wird noch was mit mir.
Der Hintergrund ist daher so, weil ich gerne alles ein wenig Pixelig haben möchte, sicher fällt das vielen schwer zu lesen, daher suche ich auch bei euch Anregungen.
Es ist auch vieles noch nicht vorhanden, an den Seiten werden z.B. noch Banner oder ähnliches kommen.
Es soll am ende Aussehen wie eine Art Wand mit Holzschild und speziellen Dingen die daran verknüpft sind.
Entweder hast du Text von einer Seite aus dem Browser kopiert und in den RTE eingefügt, dann nimmt er den ganzen Müll mit. Oder du hast im RTE die Möglichkeiten genutzt Schriftfarbe, Schriftart und Ausrichtung einzustellen. Ich vermute mal Letzteres.Zitat:
Zitat von Pira
Kopiere dir den Text mal aus einem Editor wie PSpad oder Notepad++ heraus und füge ihn dann in den RTE ein. Aber Achtung, dabei einsteht oft <br><br> anstatt <p></p>. Das kannst du leicht korrigieren, indem du im RTE den Cursor ans Ende eines Absatzes stellst, Entfernen drückst (evtl. zweimal) bis der nächste Absatz am vorhergehenden klebt und dann einmal Enter drückst.
Bei der normalen Texteingabe im RTE erzeugt ein einfaches Enter einen <p></p>. In besonderen Situationen, z.B. der Adresse, benötigt man schon mal einen einfachen Zeilenumbruch <br>, den kann man mit Shift-Enter erzeugen. Nicht vergessen, dass Pagagraphs <p> allgemein mit CSS einen Abstand nach unten benötigen. Wenn dein CSS-Reset das nicht auf 0 setzt, bringt ein Browser diesen Abstand automatisch mit.
Kontrollieren kannst du den Quellcode direkt im RTE. Du solltest, gerade als Anfänger, nicht mit eigenem HTML-Code arbeiten, sonst sind Fehler vorprogrammiert.
Ok ich habe jetzt bemerkt, warum das Design so arg stressig ist, ich habe bisher nur auf einem Laptop gearbeitet bei dem fast kein #top zu sehen war und es somit nicht störte.
Auf einem großen Bildschirm gibt das sowas von Augenkrebs dabei. Daher hab ich jetzt den Hintergrund deutlich verdunkelt, damit das weniger aufdringlich ist. (auf Hauptseite sind mal Bilder von hell und dunkel, als Bildlink)
Hier meine Frage: Reicht das, oder lieber noch weiter abdunkeln, bzw. die Holzplanken lieber auch noch etwas verdunkeln, oder gehen die so?
Ich habe vom Text wirklich mal die Farbe angepasst, und es dann nicht mehr wegbekommen.
Stimmt! an die Möglichkeit direkt den Quellcode im Editor zu bearbeiten habe ich absolut nicht mehr gedacht.
Schande über mich. :o
Danke, für die fleissige Hilfe.
Es ist schon besser ;)Zitat:
Zitat von Pira
Aber bitte mache noch folgendes: komplett weißer Text ist sehr anstrengend zu lesen. Bitte nehme nicht weiß (#fff), sondern ein helles grau. Dadurch ist es für das menschliche Auge angenehmer.
Außerdem: Bitte nutze als Überschriften bzw. Verlinkungen nicht diese großen Pixel-Text-Bilder.
Viele Grüße
Fabi
Gib deinem Hauptcontainer allgemein einen inneren Abstand mit padding, damit du nicht jedem einzelnen Element einen Abstand verpassen musst.
edit: #eee für die Schriftfarbe anstatt #b0b0b0 hätte auch schon gereicht, dann sieht es noch weiß aus, ist aber angenehmer fürs Auge.
Hui, da gibt's noch einiges zu tun :) Ich find den Pixel-Charme recht nett, aber eine ganze Webseite in dem Stil ist too much. Schau mal z.B. http://www.templatemonster.com/de/ durch. Da bekommst du in den Themes einen sehr guten Überblick, wie man Design heutzutage angeht. Du kannst ja trotzdem bei Farbgebung und einzelnen Teasern die Pixel beibehalten.
Ganz wichtig bei den Grafiken: Hast du die Nutzungsrechte daran erworben oder sie einfach gegoogelt?
Danke, ich werde mir die Vorlagen mal anschauen.
Die Bilder sind von mir selbst erstellt, daher gibts da keine Probleme. Das z.B. die Steine ähnlichkeit mit vielen anderen der Art haben ist normal, glaube ich.^^
Hui, sieht ja aus wie eine Website aus den 90ern :) *** nostalgie-bonus *** dass ist sowas nochmal sehen darf. Das Bild "piraten.PNG" auf der Startseite müsste aber noch ein animiertes GIF sein ;)
Ich würde ruhig die eigene Gestaltungs-Linie weiterverfolgen. Es wird viele Leute geben, die das mögen. Und bei so Privat-Projekten kann man sich in punkto individuelle Vorstellungen mal richtig schön austoben. Ich find's jedenfalls erfrischend, mal was anderes zu sehen als die üblichen Schema-F-Websites.
Kritik:
Der Augenkrebsfaktor ist hier definitiv gegeben. Hintergrundbilder und Kontraste sollte man nochmal dran feilen, sonst wird der Besuch der Seite schnell zu anstregend.
In Sachen Schriftart könnte man mal schauen, ob man einen schönen Webfont findet (z.B. fontsquirrel.com), der zum 8-bit-Ambiente passt. Eventuell kann man dann auch die Überschriften ( auf der Seite http://pirapixel.com/Grundlagen_cpp.html : "Header Datei" usw.) als echten Text realisieren statt als Grafik. Wenn man so ein C64-Kacheloptik-Hintergrundbild machen möchte, könnte man mal ausprobieren, auf eine nicht-mitscrollende Variante zu gehen, denn das nervt beim Rauf- und Runterscrollen doch schon ein bisschen.
Ich mag ja Websites mit individuellem Charme. In diesem Fall müsste noch ein wenig an der Aushaltbarkeit des Designs gearbeitet werden :cool: Vom grundsätzlichen Gedankenansatz her bekommt die Seite von mir einen Daumen nach oben.
viele Grüße,
Frank
Was die Seite auf jeden Fall hat, ist ein Wiedererkennungswert! :D
Meine ersten Versuche sahen schlimmer aus. Da gabs aber auch noch keine CMS
Mutig von dir in diesem Forum um Feedback zu bitten. ;)
Wenn ich die Seite sehe, denke ich an den Commodore C64, hat auf jeden Fall was ;-)
Nostalgiewert ja, Lust zum länger verweilen: nein
Finde die Tipps die dir Frank gegeben hat, solltes du unbedingt umsetzten.
Na ja, man kann es auch anders sagen. Die Seite http://pirapixel.com/ sieht einfach beschissen aus, so als wäre sie mit MS Frontpage aus dem Jahre 1996 gestrickt. Sorry Pira.
pumukel
Danke! Endlich jemand der sich’s sagen traut! ^^
Ehrlich gesagt habe ich dieses Thema schon länger für einen drittklassigen Trollversuch gehalten …
Das kann vielleicht sein, aber vielleicht versucht auch tatsächlich ein Einsteiger Tipps für die Gestaltung seiner Seite zu bekommen, und den dann mit "Sieht scheiße aus" abzukanzeln, finde ich so geht so.
Wir werden ja nach einer Weile sehen, ob Pira die hier gegebenen Tipps auch tatsächlich umsetzt....
Oder du meldest dich vielleciht auch mal wieder zu Wort Pira?
Ich vermute er hat das Thema Webdesign inzwischen wieder an den Nagel gehängt ;)Zitat:
Zitat von Kimja