UsualRedAnt: Brauch mal nen Blick von aussen

Ola!

Ich hab in den letzten Monaten eine Menge an der Seite gebastelt - tabellenfreies Layout, Barrierefreiheit, CSS für mobile Geräte, Listennavigation mit kleiner Hoverspielerei, statische Adressen "vorgaukeln" per Mod-Rewrite, Meta-Tags aufräumen...

Bin leider mehr oder weniger im Alleinflug unterwegs und brauch deshalb mal ein Feedback von weniger Betriebsblinden. Also stelle ich mich dem hoffentlich nicht vernichtenden Urteil der SelfHTML- Altvorderen :)

Was mich besonders interessiert:

  • Benutzerführung; Findet man Informationen intuitiv? Machen die Seiten Lust auf mehr Infos?
  • fehlende Features; Was vermisst ihr? Oder ist was zu versteckt?
  • Techniktipps; Div-Suppe (Wollt ich schon lange mal schreiben)? Browserkladeradatsch?

Gute Nacht!
Steffen

  1. Hallo!

    Die Seite sieht ganz ok. Allerdings ist der Quelltext zwar valide aber unleserlich. Das ist ein einziges Chaos. Wie findest du dich da zurecht?

    Außerdem erschlägt mich schon alleine die Startseite. Sie ist zu voll mit Text und unübersichtlich. Von der Seite, auf die man weitergeleitet wird, kann ich das gleiche sagen.

    Ich würde die Seite irgendwie "leichter" aufbauen. Weniger Text und mehr Übersicht :-)

    ciao, ww

    --
    sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
    1. Hallo!

      Die Seite sieht ganz ok. Allerdings ist der Quelltext zwar valide aber unleserlich. Das ist ein einziges Chaos. Wie findest du dich da zurecht?

      So. Zumindest das konnte ich sehr schnell reparieren. Lag daran, dass ich viele Seitenteile über PHP einbinde und die Einrückungen zwar für die Einzeldokumente stimmten, aber nicht für die Gesamtausgabe. Jetzt sollte es aber "übersichtlich" sein.

      Ich würde die Seite irgendwie "leichter" aufbauen. Weniger Text und mehr Übersicht :-)

      Schwer, bei ner Seite, die von ihrem Textangebot lebt. Die Darstellung des Textes hinsichtlich der Lesbarkeit zu optimieren ist sicherlich eine wichtige Aufgabe für "demnächst".

      Steffen

  2. Moin

    • fehlende Features; Was vermisst ihr? Oder ist was zu versteckt?

    inhaltsbezogene Tags fehlen (Überschriften-Tags wie h1, h2, ... zB)

    Der Disclaimer ist Quatsch, im besagten legendären Hamburger-Landgerichts-Urteil steht so ziemlich das Gegenteil drin von dem von dir implizierten.

    Gruß
    rfb

    --
    Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
    (Galileo Galilei)
  3. Liebe UsualRedAnt,

    tabellenfreies Layout, Barrierefreiheit, CSS für mobile Geräte, Listennavigation mit kleiner Hoverspielerei, statische Adressen "vorgaukeln" per Mod-Rewrite, Meta-Tags aufräumen...

    und was soll das hier?

    <br />  
       <h1 align="center">
    

    Deine Bemühungen in Ehren, aber Dein Code könnte noch konsequenter auf CSS ausgerichtet und noch semantischer sein.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
  4. Hallo Steffen,

    in den Code habe ich nicht geguckt, aber was mir bei der ansonsten schönen Seite negativ auffällt:

    • Die Startseite (m.E. überflüssig, unübersichtlich und der Suchdialog dominiert alles)
    • Auf allen anderen Seite würde ich die Inhalte nicht so in die Breite jagen und links/recht mehr Rand lassen

    Daniel

      • Die Startseite (m.E. überflüssig, unübersichtlich und der Suchdialog dominiert alles)

      Ich finde die Startseite sinnvoll. Zum Beispiel bieten viele Webkataloge eine kleine Ansicht der Seite. Da macht sich eine wiedererkennbare Startseite besser, als ein Textmonster. Ich glaube, dass, wenn die Nutzer die Startseite wiedererkennen, sich so der Das-habe-ich-doch-schon-gesehen-Effekt einstellt. Wenn du so willst, ist das eine Form von Website-Branding (tolles Neudenglish, oder?).

      • Auf allen anderen Seite würde ich die Inhalte nicht so in die Breite jagen und links/recht mehr Rand lassen

      Ich hab mal den Seitenrand des eigentlichen Inhalts ein bisschen vergrößert. Gefällt mir auch besser. Danke!

      Steffen

  5. Hallo UsualRedAnt,

    Was mich besonders interessiert:

    • Benutzerführung; Findet man Informationen intuitiv? Machen die Seiten Lust auf mehr Infos?

    ich find's verwirrend. Wo stehen wichtige Inhalte? Was sagen mir die Farben? Grelles Grün (zu grell für mich) - besonders wichtig?

    Z.B. der Sprung von erster Navigation zu Protestmailer und dann weiter zu "mehr lesen" - drei verschiedene Seitentypen, das Auge springt von links nach rechts und weiß nicht, wo es anfangen soll.

    Rote Schrift auf grün... Du schließt eine Menge Männer von diesem Farbgenuß aus ,-) und baust ihnen womöglich Barrieren.

    (Zu) breit laufende Textblöcke mit zu wenig Luft dazwischen. Serifenschrift (ich mag sie eigentlich) - hier sieht's typographisch nicht richtig gekonnt aus. Vielleicht die Überschriften stärker voneinander abheben, um die Struktur besser hervorzuheben. Zentrierte Überschriften: Geschmacksache, ein Schriftsetzer sagte mir mal: wenn einem nix einfällt macht man Mittelachse ,-)

    Positiv: endlich mal eine Seite mit Inhalt :-) aber den könnte man weit angenehmer präsentieren.

    Gruß aus Köln-Ehrenfeld,

    Elya

    --
  6. Hallo,

    Mal ne Frage: Wie hast du eigentlich deine Suche mit PHP realisiert?
    Suche schon lange nach so einer Möglichkeit.

    gruß aus Hosena

    1. Hallo,

      Mal ne Frage: Wie hast du eigentlich deine Suche mit PHP realisiert?
      Suche schon lange nach so einer Möglichkeit.

      gruß aus Hosena

      So richtig glücklich bin ich damit nicht. Ich lese nämlich einfach alle Dateiein des Typs PHP ein (Title und Seitenbeschreibung) und suche dann nach den Stichworten. Ausserdem sortiere ich ein paar Dateien aus, die ich nicht in den Trefferlisten haben möchte.

      Das Verfahren macht aber relativ viel Traffic, weshalb eine Überarbeitung der Suche demnächst sicherlich nötig wird.

  7. Schonmal vielen Dank für die Tipps und Anmerkungen.
    Mal sehen, was ich umsetzten kann.

    Als nächstes sollte ich mir den Protestmailer vornehmen und ihm ein dem Hauptteil der Seite ähnlicheres Kleid geben.
    Auch an die unvollständige CSS-Nutzung (<h1 align="center">) werd ich mich machen. Ich befürchte nur, dass ich noch mehr Klassen produziere und das CSS unnötig an Größe gewinnt.

    Wie man den vielen Text sinnvoller strukturiert, scheint mir ne Wissenschaft zu sein. Insbesondere der "Themenbereich" macht mir da auch Sorgen.
    Gibt es ne Möglichkeit, Text wie in ner Zeitung in mehreren Spalten anzuordnen. Die müssten sich natürlich an die Bildschirmgröße des Nutzers anpassen... Knifflig.

    Danke
    UsualRedAnt

    1. Hallo Steffen,

      Auch an die unvollständige CSS-Nutzung (<h1 align="center">) werd ich mich machen. Ich befürchte nur, dass ich noch mehr Klassen produziere ...

      Wie viele h1 hast du pro Seite?
      Welche voneinander unterschiedlichen Eigenschaften oder Attribute haben sie?
      In welchen Elementen (mit welchen Klassen oder IDs) stehen sie, wenn sie abweichend formatiert werden sollen?

      Wenn du diese Überlegungen anstellst (und nicht nur für h1) werden durch intelligente Nutzung des Nachfahrenselektors nicht so sehr viele Klassen benötigt.

      und das CSS unnötig an Größe gewinnt.

      Das CSS wird in der Regel nur einmal vom Browser angefordert, ein paar Byte mehr oder weniger spielen da keine große Rolle. Das HTML wird bei jeder einzelnen Seite neu übertragen. Also solltest du nicht versuchen ein paar Byte im CSS dadurch zu sparen, jede einzelne HTML-Seite etwas größer zu machen.

      html, body, #starttext, #startlogos, ..., .left, .right { font-family:Georgia, Veranda, serif; }  
      
      

      Kann es sein, dass dies eine Auflistung so ziemlich aller Elemente, IDs und Klassen der Seite ist?
      Warum dann so aufwändig?
      Das musst du doch nicht für jedes Element, jede ID und jede Klasse einzeln angeben. Wenn du die Schriftart nur für body angibst dürften sie alle diese   Schriftart erben.
      Wenn du ganz sicher gehen willst, kannst du auch den Universalselektor (*) verwenden.

      Auch { font-family:Georgia, Veranda, serif; } macht mich etwas stutzig.
      Der Browser soll die Serifenschrift Georgia verwenden - wenn das nicht möglich ist, dann die serifenlose Schrift Veranda - wenn auch das nicht möglich ist, irgendeine Serifenschrift. Kling für mich ein wenig unlogisch.

      Wenn du das HTML nicht unnötig aufblähen willst, vermeide HTML-Attribute und verwende nur so viele Klassen und IDs, wie wirklich nötig und sinnvoll sind.

      Willst du das CSS nicht unnötig aufblähen, dann gib nicht jedem einzelnen Element alle Eigenschaften sondern nur gezielt denen, die von deinem Standard abweichen.

      Ein paar Beispiele:
      a, a:hover, a:active, a:visited, a:focus {...}
      a {...} selektiert auch die restlichen, die dürften unnötig sein.

      a:hover, ul.navi a:hover, ul#navigation a:hover {...}
      Auch hier dürfte a:hover {...} reichen.

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. Hallo Steffen,

        Auch an die unvollständige CSS-Nutzung (<h1 align="center">) werd ich mich machen. Ich befürchte nur, dass ich noch mehr Klassen produziere ...

        Wie viele h1 hast du pro Seite?

        Natürlich nur eine ;) Ich bezog mich aber auch eher auf das align="center". Und dass gibt es in Kombination mit mehreren Elementen.

        Wenn du diese Überlegungen anstellst (und nicht nur für h1) werden durch intelligente Nutzung des Nachfahrenselektors nicht so sehr viele Klassen benötigt.

        Wow - Danke. Der Artikel eröffnet mir neue Möglichkeiten bzw. Potentiale. Eigene Selektoren hielt ich bis jetzt immer für nicht Valide.

        html, body, #starttext, #startlogos, ..., .left, .right { font-family:Georgia, Veranda, serif; }

        
        > Kann es sein, dass dies eine Auflistung so ziemlich aller Elemente, IDs und Klassen der Seite ist?  
        > Warum dann so aufwändig?  
        > Das musst du doch nicht für jedes Element, jede ID und jede Klasse einzeln angeben. Wenn du die Schriftart nur für body angibst dürften sie alle diese   Schriftart erben.  
        > Wenn du ganz sicher gehen willst, kannst du auch den Universalselektor (\*) verwenden.  
          
        Dammit hatte ich auch schon experimentiert, habe dann aber Probleme gekriegt. Nochmal probieren...  
          
        
        > Auch `{ font-family:Georgia, Veranda, serif; }`{:.language-css} macht mich etwas stutzig.  
        > Der Browser soll die Serifenschrift Georgia verwenden - wenn das nicht möglich ist, dann die serifenlose Schrift Veranda - wenn auch das nicht möglich ist, irgendeine Serifenschrift. Kling für mich ein wenig unlogisch.  
          
        Da habe ich mir ehrlich gesagt, noch keinen Kopf gemacht. Die Schriften standen schon fest, als ich die Seite übernommen habe. Nun ja. Muss ich wohl auch ein wenig über Schrifttypen lernen.  
          
        
        > Auf Wiederlesen  
        > Detlef  
          
        Vielen Dank für die Hinweise!  
        Steffen