[Website entsteht] Website wünscht sich Feedback und Hilfe

[ofhouse]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Bootstrap ist ein Framework.

Du kannst dir das wie eine Bibliothek vorstellen, die verschiedene Komponenten bietet.
Das ist ein häufiger Anwendungsfall im Softwarebereich, statt jedes bisschen selbst zu programmieren, greift man auf auf eine vorgefertigte Lösung (Bibliotheken) zurück, die aber meist mehr bieten, als man braucht.

Der Vorteil ist dabei das dein Code gestreamlined wird, also bestimmten Standards folgt, die von den Machern der Bibliothek vorgegeben werden.
So hat z.B. der HTML-Code für eine Navigation dann immer den gleichen Aufbau.

Bootstrap beschränkt sich aber nicht nur auf HTML, sondern bietet auch CSS (bzw. intern setzt es auf LESS) und gibt dadurch das Design für bestimmte Dinge wie Buttons, Formulare etc. erstmal vor.
Ist so ähnlich wie bei den Betriebssystemen, wo Buttons und Formulare ja auch immer ein bisschen anders aussehen, obwohl der Unterbau der gleiche ist.
Wichtig ist hierbei, dass Bootstrap mit einem variablen Grid-System (Also ein System, was deine Webseite in vertikale Abschnitte unterteilt) arbeitet, was ziemlich einfach ein responsive Design ermöglicht.

Bootstrap an sich ist ziemlich beliebt bei Programmieren, weil man ohne große Ahnung von Design Webseiten eine gute und übersichtliche Struktur verleihen kann.
Im Design-Bereich spielt es allerdings nur eine Nebenrolle, weil Bootstrap-Designs durch ihre gleiche Struktur schnell beliebig wirken können und bei stärkeren Anpassungen der Aufwand so groß ist, dass eine Custom-Lösung einfacher ist.

Ausprobieren würde ich es auf jeden Fall mal, allerdings würd ich das dann mit nem reinen Editor wie Brackets machen.
Ich persönlich finde die JS-Plugins sehr brauchbar, den HTML & CSS Teil setze ich nicht aktiv ein, allerdings kann man sich da ein paar gute Tricks abschauen für bestimmte Effekte.

 

[Speeedymauss]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

So, ich habe mal wieder etwas weiter gemacht:
Ich habe mal zwei Tagebuchtage angelegt, damit man da mal sieht wie es aussehen soll (ich bin da noch nicht ganz von überzeugt was ich da gebaut habe) und ich habe mal die Tutorial Seite angelegt und schonmal die grobe Strucktur vorbereitet.

Würd mich erstmal interessieren was ihr dazu sagt, bevor ich noch mehr davon mache

Website ist wieder aufm Webserver hochgeladen

 

[BenRo]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Das Headerbild wurde bestimmt schon angesprochen, ist ziemlich riesig (Dateigröße). Ich hab mit meiner DSL 50.000-Leitung kein Problem, aber wer langsames Internet hat wird sich drüber ärgern.
Wenn man über das Headerbild hovert wird ja per CSS die opacity geändert. Verstehe nicht, wozu (bzw. macht auf mich den Eindruck, hui ich kann jetzt klicken und Dinge passieren, dies ist aber nicht der Fall), bei den anderen Bildern dagegen macht es ja Sinn, da sie zu deinen einzelnen Projekten linken. Edit: Dein Logo sollte am Besten auf die Startseite linken.

Design, Schriftarten, Farben usw. gefallen mir sehr gut. Auch die beiden Menüebenen mit blau und orange finde ich sehr schön. Ist natürlich wie immer Geschmackssache.
Deine Fotos sind toll. Finde auch die abgerundeten Ecken gut.

Sowas: HIER => finde ich nicht so gut.
1. Gibt es wunderschöne Pfeile, die man nutzen könnte: →
2. Sollte man nie, nie, nie das Wort "HIER" verlinken:
Don't say "click here"; not everyone will be clicking - Quality Web Tips
Why Your Links Should Never Say "Click Here" | Smashing Magazine

Das "mehr verraten" hast du ja orange und unterstrichen gemacht. Orange ist kein Problem, aber die Unterstreichung würde ich weglassen. Die meisten Leute assoziieren im Internet mit "Unterstreichung" einen Link, auch wenn diese auf deiner Seite ja blau und nicht-unterstrichen sind. Siehe auch hier:
10 Usability Crimes You Really Shouldn't Commit

Ich persönlich mag in deutschen Texten auch deutsche Anführungszeichen: „also so“ und nicht "also so"

Das viele Links noch nicht gehen (die angesprochenen HIER => auf der Startseite z. B.) wirst du selber wissen. Es gibt noch ein paar Rechtschreibfehler (z. B. heißt es Coming soon und nicht Comming soon)

 

[Speeedymauss]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Das Headerbild wurde bestimmt schon angesprochen, ist ziemlich riesig (Dateigröße). Ich hab mit meiner DSL 50.000-Leitung kein Problem, aber wer langsames Internet hat wird sich drüber ärgern.
Wenn man über das Headerbild hovert wird ja per CSS die opacity geändert. Verstehe nicht, wozu (bzw. macht auf mich den Eindruck, hui ich kann jetzt klicken und Dinge passieren, dies ist aber nicht der Fall), bei den anderen Bildern dagegen macht es ja Sinn, da sie zu deinen einzelnen Projekten linken. Edit: Dein Logo sollte am Besten auf die Startseite linken.

Design, Schriftarten, Farben usw. gefallen mir sehr gut. Auch die beiden Menüebenen mit blau und orange finde ich sehr schön. Ist natürlich wie immer Geschmackssache.
Deine Fotos sind toll. Finde auch die abgerundeten Ecken gut.

Sowas: HIER => finde ich nicht so gut.
1. Gibt es wunderschöne Pfeile, die man nutzen könnte: →
2. Sollte man nie, nie, nie das Wort "HIER" verlinken:
Don't say "click here"; not everyone will be clicking - Quality Web Tips
Why Your Links Should Never Say "Click Here" | Smashing Magazine

Das "mehr verraten" hast du ja orange und unterstrichen gemacht. Orange ist kein Problem, aber die Unterstreichung würde ich weglassen. Die meisten Leute assoziieren im Internet mit "Unterstreichung" einen Link, auch wenn diese auf deiner Seite ja blau und nicht-unterstrichen sind. Siehe auch hier:
10 Usability Crimes You Really Shouldn't Commit

Ich persönlich mag in deutschen Texten auch deutsche Anführungszeichen: „also so“ und nicht "also so"

Das viele Links noch nicht gehen (die angesprochenen HIER => auf der Startseite z. B.) wirst du selber wissen. Es gibt noch ein paar Rechtschreibfehler (z. B. heißt es Coming soon und nicht Comming soon)

Danke fürs Feedback!

Ja Header wird noch überarbeitet, der hover effekt ist nicht beabsichtigt, das liegt wohl an ner fehlerhaften css regel, das wird noch behoben!

Die Pfeile werden noch ausgetaucht, genauso wie so manch anderer text oder buttons, da sind halt noch einige dabei, einfach nur dass ich sehe wie es dann später aussieht wenn die richtigen sachen da sind.

Die Links mit den Tipps werd ich mir auf jeden fall nachher mal angucken!

Gut an so kleinigkeiten kann ich immer noch was machen wie z.b. bei den Anführungszeichen, da werd ich dann noch was ändern

Ja rechtschreibung klar, bevor die Seite "richtig" online geht wird nochmal alles ganz genau überprüft, von daher ist das alles noch im Rahmen.
Das die meisten Links noch nicht gehen ist klar, da die meisten Seiten noch nicht angelegt sind oder ich noch nicht überall die neuen pfade angegeben habe, das mach ich später dann auch parallel zur Rechtschreibkorrektur, da überprüfe ich auch alle Links

 

[DarkMo]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

wegen dan anführungszeichen: ich hasse dieses ,,'' gelumbe (wie auch immer man das überhaupt mit ner tastatur schreibt xD). also auch hier eindeutig geschmackssache ^^

 

[BenRo]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

99 unten und 66 oben sind halt die korrekten deutschen Anführungszeichen. Den Doppelstrich oben nehmen wir doch nur, weil man auf Schreibmaschinen keine zwei Tasten für die Anführungszeichen verbaut hat.
Anführungszeichen

 

[hann96]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Ja Header wird noch überarbeitet, der hover effekt ist nicht beabsichtigt, das liegt wohl an ner fehlerhaften css regel, das wird noch behoben!

Der hover wird durch diese CSS-Regel verursacht:

img:hover {
opacity: 0.79;
transition: all 500ms;
}

 

[DarkMo]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

ben: in der schreibschrift (stift + papier) mach ich das auch, aber da siehts auch ordentlich aus ^^ alle versuche das "maschinell" nachzuahmen enden (mMn) aber eben in einem optischen desaster *duck* die "" wirken einfach geordnet und stellen eben auch einen einheitlichen stil dar. bei der "oben unten" variante ist meist der untere einleitende teil schräg und der obere abschließende eher gerade/senkrecht - das wirkt einfach albern xD

 

[BenRo]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Wenn die unten schräg sind, müssen die oben auch schräg sein. Dann siehst auch wieder hübsch aus. Wenn dem nicht so ist, ist die Schriftart defekt, oder es gibt einen anderen Fehler.

Hier mal ein paar Beispiele diverser Anführungszeichen unterschiedlicher Schönheit (geht nur um die Zeichen, der Inhalt der Seite ist für mein Beispiel irrelevant):
Das vermeintliche Anführungszeichenproblem

 

[DarkMo]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

was du alles kennst ^^ so sieht das jedenfalls auch schön aus, da haste recht ^^ fragt sich nur: wie bekomm ich das ohne entities hin? >< also als seiten ersteller mag das ggf noch gehen, aber in normalen dahingeschriebenen texten... ich bin ja scho zu faul für groß/kleinschreibung auch wenn ichs eigentlich kann. hab mir heut auf arbeit handschriftlich was notiert - und da das auch schon so gemacht oO mistige gewohnheit ><

 

[BenRo]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Um an beliebigen Stellen UTF-8 Zeichen einzugeben:
Unicode input - Wikipedia, the free encyclopedia

Falls das aus irgendwelchen Gründen nicht klappt kann man die Zeichen zur Not ja auch aus einer Zeichentabelle oder einem Textverarbeitungsprogramm kopieren.

Um in einem Textverarbeitungsprogramm (Office) Anführungszeichen einzugeben:
Sollte automatisch die richtigen nehmen, sonst hat es einen Fehler.

Wenn man keinen Bock drauf hat und sich sagt "Kann der Server nicht einfach meine bereits mit falschen Anführungszeichen getippten Texte korrigieren?"
php - replace english quotes to german quotes - Stack Overflow

Wenn man Entities benutzen muss oder möchte:
„ bzw. ”

Edit: Und wir werden mal wieder kolossal Off Topic. Ein Glück, dass noch niemand angefangen hat, über die Unterschiede zwischen Minus, Bindestrich, Halbgeviertstrich und Geviertstrich zu diskutieren...

 

[Ahab]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Das Blau der Links ist vielleicht etwas dunkel, ein etwas hellerer Ton würde die Lesbarkeit stark verbessern! Das gleiche gilt für die hovers in der Nav-Bar. Dunkelgrau auf Dunkelblau liest sich nicht so toll.

 

[DOcean]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

gerade durch Zufall gesehen...

 

[hann96]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Für die Mobile Ansicht gibt es auch noch Verbesserungsbedarf

Wenn der Viewport zu klein wird, dann wird der article Container mit der Klasse "haupttextartikel" sozusagen eingequetscht.
Grund ist diese CSS-Regel:

article.haupttextartikel {
   margin-left: 10%;
   margin-right: 10%;
}

Ich habe schon einmal Media Query's erwähnt.
Wenn man noch einen Abstand, nach Links und Rechts, haben will, aber ab einem Viewport ab z. B. 720px ihn entfernen will, dann schreibt man:

@media (max-width: 720px) {

   article.haupttextartikel { margin-left: 0px;margin-right: 0px; }
      
}

Kleiner Tipp noch am Rande, du benutzt sehr oft den HTML TAG:

<article></article>

Den sollte man (meines Wissens nach) nur einmal verwenden. Packe einfach diesen Tag an den Anfang hin, wo der eigentliche Inhalt der Website erst anfängt.

Der Zweck dieses TAG's ist den Inhalt, von dem Rest der Website, z. B. der Navigation, zu trennen.

 

[BenRo]

Was du zu article sagst ist völlig falsch. Ich nehme an du verwechselst den Tag mit <main>?

 

[hann96]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Ok, sorry habe ich verwechselt...

 

[Speeedymauss]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Das Blau der Links ist vielleicht etwas dunkel, ein etwas hellerer Ton würde die Lesbarkeit stark verbessern! Das gleiche gilt für die hovers in der Nav-Bar. Dunkelgrau auf Dunkelblau liest sich nicht so toll.

ok ich werd mal gucken was sich da machen lässt

gerade durch Zufall gesehen...

ja das liegt halt daran, dass ich mometan erstmal auf 1080p optimiere, die kleineren auflösungen gehe ich aber auch noch durch...erstmal wollt ich den groben aufbau schaffen...

Für die Mobile Ansicht gibt es auch noch Verbesserungsbedarf

Wenn der Viewport zu klein wird, dann wird der article Container mit der Klasse "haupttextartikel" sozusagen eingequetscht.
Grund ist diese CSS-Regel:

article.haupttextartikel {
   margin-left: 10%;
   margin-right: 10%;
}

Ich habe schon einmal Media Query's erwähnt.
Wenn man noch einen Abstand, nach Links und Rechts, haben will, aber ab einem Viewport ab z. B. 720px ihn entfernen will, dann schreibt man:

@media (max-width: 720px) {

   article.haupttextartikel { margin-left: 0px;margin-right: 0px; }
      
}

Kleiner Tipp noch am Rande, du benutzt sehr oft den HTML TAG:

<article></article>

Den sollte man (meines Wissens nach) nur einmal verwenden. Packe einfach diesen Tag an den Anfang hin, wo der eigentliche Inhalt der Website erst anfängt.

Der Zweck dieses TAG's ist den Inhalt, von dem Rest der Website, z. B. der Navigation, zu trennen.

Jop, das ist richtig, ich werds wohl auch so umsetzen wie dus vorgeschlagen hast.

mit dem <article> liegst du aber falsch, aber das hast du ja selber schon gemerkt




Danke aber an alle fürs drüber gucken!!! Find ich super dass ihr mich da so unterstützt

 

[DeSquirrel]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Was mich abschreckt an der Seite ist das ich einfach von so viel Text erschlagen werde das ich so schnell wie möglich ALT+F4 drücken möchte.

Zudem find ich den Banner total überladen mit Schrift. Und das Bild find ich jetzt auch nicht optimal ausgewählt.
Was mich desweiteren stört sind die ganzen Farben. Versuchs ein wenig einheitlicher. Wichtiges kannste ja dick markieren oder in einer gesonderten Farbe!

 

[Speeedymauss]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Wie soll ich mich da groß kurz halten. Sollte wer auf die Seite kommen, wer keine Ahnung davon hat der wird dann keinen Plan haben worums geht...

Banner = Header? Sind da 3 Worte zu viel?
Das Bild ist nach wie vor Plazuhalter, habe ich hier aber glaube ich auch schon tausend mal erzählt...

Ich verwende vier farben: 3 Grautöne und nen Blau (vereinzelt vlt noch mal nen orange...) - soll ich auf schwarz-weiß gehen oder wie? ich finde es schon schwierig mit den 4 Farben zu arbeiten...

 

[rtf]

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Was mich abschreckt an der Seite ist das ich einfach von so viel Text erschlagen werde das ich so schnell wie möglich ALT+F4 drücken möchte.

Ich schätze da bist du einer von wenigen. Der Text ist gut gewählt und auch sehr leserlich gestaltet und nicht in eins runtergerattert. Der Textabstand ist ordentlich ausgewählt.

Zudem find ich den Banner total überladen mit Schrift. Und das Bild find ich jetzt auch nicht optimal ausgewählt.

Das einzige suboptimale am Banner(=Header) ist, das er soviel Platz verschwendet. der könnte ruhig ein bisschen kleiner sein. Der nimmt bei mir (Full-HD) die halbe Seite ein, das sollte du vielleicht einmal ändern speedy
Andere haben im Header noch zusätzlich eine Sufu drin, hier ist es nur eine Überchrift, damit man weiß wo man sich überhaupt befindet und ein Bild das einem schon leicht mitteilt, worum es sich bei der Seite handelt.

Was mich desweiteren stört sind die ganzen Farben. Versuchs ein wenig einheitlicher. Wichtiges kannste ja dick markieren oder in einer gesonderten Farbe!

Das und soviel anderes ist Gott sei Dank alles Geschmacksache, Speedy hat aber Gestaltungstechnisch viel richtig gemacht.

Noch ein kleiner Tipp: setz auf deiner Seite nicht zu große Bilder mit einer Auflösung > Full-HD. selbst das ist eigentlich schon zu groß und Leute mit schlechten Leitungen werden es dir danken, ich z.B.