Pirate Design/Archiv/Wettbewerb Piratenwebsite 2011/Design/Korbinian

Dieser Artikel ist veraltet. Es wird geprüft, ob er gelöscht oder aber aktualisiert wird. Du kannst den Artikel aber auch auf den neuesten Stand bringen oder archivieren.

Dieser Artikel ist seit 3264 Tagen ohne Bearbeitung.archivieren

Design von Korbinian

Einreicher: korbinian

Mein Designvorschlag hat als Hauptziele ein flexibles Layout für alle gängigen Displaygrößen, bessere Übersicht durch stärkere Informationshierarchisierung und eine emotionalisierendere Darstellung der Piraten durch große Fotos einzelner Mitglieder.

Grundidee

Dieser Designvorschlag ist das Ergebnis einer ausführlichen Analyse der aktuellen Seite und Konkurrenzauftritten anderer Parteien. Eine ausführliche Zusammenstellung der Ergebnisse kann man hier finden: http://wiki.piratenpartei.de/Benutzer_Diskussion:Korbinian

Kurz zusammengefasst sind die Hauptprobleme des aktuellen Piratenauftritts:

• unübersichtliche Navigation und schlechte Informationshierarchisierung
• zuwenig Augenmerk auf aktuelle Kampagne und Aktionen
• zuviel Augenmerk auf Pressemitteilungen
• sachliche, aber extrem langweilige Präsentation der Inhalte (Textwüsten)
• fast ungebrandetes Standard-Drupal-Layout ohne Rücksicht auf das Piraten-CI
• keine Darstellung, warum es cool ist Pirat zu sein oder uns zu unterstützen

Andere Parteien machen es besser - http://www.gruene.de/ und http://piratenpartei.ch/ seien hier beispielhaft genannt. Von dem Design des Auftritts der schweizerischen Piraten bin ich dann auch ausgegangen, habe mich aber aus folgenden Gründen inzwischen recht weit davon entfernt:

• das Layout ist für eine bestimmt Informationsmenge optimiert (z. B. würde es nicht mehr funktionieren, wenn die Hauptmenüs mehr als 5 Unterpunkte haben)
• das Layout skaliert nicht bei verschiedenen Displayauflösungen
• Die Farbgebung ist zu aggressiv und lässt sich daher schlecht mit Bildmaterial im Contentbereich in harmonischen Einklang bringen
• persönlich waren mir die Icons auch zu kitschig, in Stylediskussionen mit vielen Piraten hab ich rausgehört, dass die Meinungen dazu extrem weit auseinandergehen.

Screens

Startseite

Integraler Bestandteil meines Designkonzepts ist die flexible Darstellung auf verschiedenen Displaygrößen und Geräteklassen. Internet auf mobilen Geräten wird immer relevanter, gleichzeitig steigen die durchnittlichen Auflösungen von Desktop- und Laptopdisplays. Der Ansatz: "One Size fits all" funktioniert meiner Meinung nach heute und vor allem in Zukunft nicht mehr wirklich gut. Deswegen habe ich für die 4 gängigen Displayklassen getrennte Layouts erstellt. Dazu werden CSS3 Media Queries benutzt, die alle modernen Browser unterstützen. Default und als Fallback ist das Layout für 768px optimiert. Ältere Browser und Geräte dieser Displayklasse bekommen diese Ansicht präsentiert. zusätzlich gibt es noch ein Layout für moderne Smartphones, ein stark vereinfachtes für ältere Handys und eins für Desktop/Laptopdisplays.

Ansicht: 1440px|laptops, desktops, & hdtvs mit mehr als 1280px:

Ansicht: 768px|Tablets mit 768px, netbooks & alte browser (default):

Ansicht: 480px|Smartphones, schmale browserfenster, & querformat iPhones:

Ansicht: 320px|iPhones, iPod Touches & andere 320px smartphnes:

Beispiel Top-Level-Seite

kommt noch...

Beispiel Content-Seite

kommt noch...

Live-Umgebungen

Achtung! Das Design wurde bisher nur im Chrome getestet. Zur optimalen Darstellung diesen Browser verwenden. Firefox sollte soweit auch noch funktionieren. Selbstverständlich wird, falls der Vorschlag angenommen wird auch darauf geachtet werden dass das Design auch in älteren Browsern funktioniert.

Startseite

• Version 18
• Version 17
• Version 16
• Version 15
• Version 14
• Version 13
• Version 12
• Version 11
• Version 10
• Version 9
• Version 8
• Version 7
• Version 6
• Version 5
• Version 4
• Version 3
• Version 2
• Version 1

Top-Level Page

• kommt noch

Content Page

• [1]

Bewertung

Anregungen, Kritik, Feedback …

Ästhetik

• Sieht super aus Nati2010 13:47, 8. Dez. 2010 (CET)
• gefällt mir ausgezeichnet! etz 14:09, 8. Dez. 2010 (CET)
• Klasse :-) Ute 14:36, 8. Dez. 2010 (CET)
• Ich wünschte, ich könnte Seiten gestalten, die so gut aussehen. ;-) Sebastian Pochert 23:54, 8. Dez. 2010 (CET)
• schön clean - alios 23:58, 8. Dez. 2010 (CET)
• bin auf kleinen Bildschirmen zufrieden, aber auf meinem 1920x1200 habe ich in der Mitte der Seite ein RIESEN schwarzes Loch. Eine max. breite und links und rechts ein weißer Rand würden da gut aussehen, im Wiki als Screenshot wirkte die Seite auf meinem Bildschirm besser als hier in real. --Heiko Herberg 13:57, 9. Dez. 2010 (CET)
• Dadurch das es Linksbüdig ist sieht es bei hoher Auflösung furchtbar aus. kannst du vllcht. eine zentrierte Version zum Test erstellen? Mariusmueller
  • ich hatte es erst mittig zentriert. das sah mir zu statisch aus. aber deine kritik bezüglich auflösungen 1280px+ ist berechtigt. ich bin grade dabei ein layout zu machen dass sich der fensterbreite dynamisch anpasst. --korbinian
• Stark. Bitte schnell umsetzen :D Incredibul 18:30, 20. Dez. 2010 (CET)
• Kann mich im Großen und Ganzen nur anschließen. Das sogar ein medienabhängiges Design eingereicht wird, übertrifft alle Erwartungen. Einzig der dunkle Bereich wirkt ein bischen zu dunkel. Aber das ist vmtl. Geschmackssache. Sascha Körver
• Auch wenn ich es aus Designgründen verstehen kann, mir ist zuviel "Schwarz" 'drin.

Orange ist schon eine Signalfarbe, Daneben grosse schwarze Flächen zu stellen lenkt zu sehr vom Inhalt und dem Inhalt der schwarzen Flächen ab. Meine Favorit ist derzeit die Farbgestaltung der Variante 3, ansonsten 1+ Ritchie

• Ästhetisch verdammt gut gelungen, allerdings stört mich unten bei den internationalen Links etwas, dass durch die Linksbündigkeit erstmal eine Flaggenhorizontale wahrgenommen wird (was sich mit abnehmender Fensterbreite verschlimmert), die einen recht starken "Sog" erzeugt. Vielleicht wäre es besser, entweder die Flaggenlinks zu zentralisieren, oder aber, was sicher auch sehr schön aussähe, aber schwerer zu realisieren sein dürfte: Jeder Flaggenlink im eigenen Container mit fester, uniformer Breite, sodass Spalten entstehen. (BTW, zwei Typos: Grossbritannien -> Großbritannien, Österrich -> Österreich. ;) ) --Feal 13:01, 19. Jan. 2011 (CET) Nachtrag: Die Logos (ACTA, IGEL, etc.) sind durch ihre Farbgebung sehr präsent, m.E. sogar das primäre optische Element. Vielleicht könnte man die erstmal ausgrauen und nur beim Mouseover farbig präsentieren?

Übersichtlichkeit

• Übersichtlicher als das alte Design, somit sehr gut. Nati2010 13:47, 8. Dez. 2010 (CET)
• hervorragend etz 14:09, 8. Dez. 2010 (CET)
• einwandfrei :-) Ute 14:36, 8. Dez. 2010 (CET)
• Besser geht's wohl kaum. Well done! Sebastian Pochert 23:54, 8. Dez. 2010 (CET)
• Super. Wann wirds umgesetzt Incredibul 18:31, 20. Dez. 2010 (CET)

Navigation

• Man kann sich einfach zurecht finden Nati2010 13:47, 8. Dez. 2010 (CET)
• Habe nur wenige Anmerkungen zum »schwarzen Block« unten: Unter »Presse« stehen zu viele nicht zusammengehörende Punkte, vielleicht besser hier einen Kalender einbauen? etz 14:09, 8. Dez. 2010 (CET)
• gut :) Ute 14:36, 8. Dez. 2010 (CET)
• Super intuitiv Sebastian Pochert 23:54, 8. Dez. 2010 (CET)
• intuitiv und super kampagnenfäfig - alios 23:58, 8. Dez. 2010 (CET)
• Müssen diese Riesen DropDown Menus sein? Ich finde sie einfach nur unübersichtlich... 11 verschiedene ungeordnete (Navigations-) Punkte hintereinander. Na danke, und wer soll das lesen?! Mariusmueller
  • auf die inhalte habe ich als designer kaum einfluss. ich muss damit rechnen dass die seite wächst. momentan haben wir auf der aktuellen seite ca. 200(!) untermenüpunkte. die sinnvoll zu strukturieren und zugänglich zu machen ist eine der hauptaufgaben dieses designprozesses und des redaktionsteams. die dropdowns sind nur eine abkürzung. mit klick auf die hauptmenüpunkte erscheint eine übersichtsseite (wichtig zb für touchdevices die keinen :hover state kennen). eine andere sinnvolle und übersichtliche art der darstellung von mindestens 50 untermenüpunkten fällt mir momentan nicht ein. hast du alternativvorscläge dazu? korbinian

• • Ja, habe mir ein paar Gedanken darüber gemacht.
  • 1. CURRENT Die Unterteilung in Absätze finde ich super. Und enspricht auch mehr deinem ursprünglichem Enwurf. Eine Möglichkeit wäre es diesen Ansatz weiter zu verfolgen. Z.B: Sub H*s.
    • das ist ein bisschen geschmackssache. im endeffekt führt das aufklappen dazu dass man sich theoretische alle menüpunkte auf einem blick anzeigen lassen kann. allerdings wäre der ganze strukturbaum aufgeklappt elendig lang und unüberscihtlich. es gibt power-user die sich genau sowas wünschen - die seite muss aber auch für nicht so versierte besucher gut funktionieren und nicht nur für nerdpiraten. ausserdem geht aufklappen per hover wesentlich schneller als alle punkte anzuklicken und dient somit der zugänglichkeit und dem schnelle scannen von inhalten.
  • 2. Wenn du das Menu erst mit einem Klick öffnen lassen möchtest, dann vergesse bitte icht einen Link zum eingenlichen Menupunkt
    • jep, logo. links sind momentan noch nicht gesetzt aber das wird natürlich funktionieren.
  • 3. Vllcht könnte man auch was mit der orangen Leiste (Du bist in > Somalia) anfangen. Z.B: Dass die nach unten verlängert wird und dort das Submenu erscheint Mariusmueller
    • ja, das hab ich mir anfangs auch so überlegt, die schweizer haben im prinzip genau das (piratenpartei.ch), es gibt dabei aber zwei nachteile:
      1. das funktioniert nur gut wenn es eine überschaubare und relativ klar definierte anzahl von untermenüpunkten da sind. angenommen es gäbe 50 untermenüpunkte unter einem hauptpunkt wäre das nicht mehr sinnvoll darstellbar. soviele punkte solltens nicht sein, aber die gestaltung sollte sich immer nach den inhalten richten. es sollte genug platz für wildwusch sein. bei den schweizern gibts zb immer maximal 5 untermenüpunkte. hässliche weißflächen würden sich ausserdem ergeben wenn zwei unternmenüäaste gravierend unterschiedlich lang sind. was zwangsläufig der fall ist. zb mal presse mit mitmachen vergleichen...
      2. es beeinträchtigt extrem die führung der augen wenn auf klick der gesamte contentbereich verrutscht. die schweizer lösen das in dem das menü standardmäßig aufgeklappt ist. aber wie gesagt, die probleme unter 1. bleiben.
    • das orangene band sollte immer gleich hoch sein, menüs sich rein horizontal ausbreiten. für breadrumbs also optimal geeignet weil maximal ca.4 menüebenen angezeigt werden. wenn es tatsächlich mehr sein sollten würde aber das layout trotzdem nicht zerbrechen (mit ausnahme von displays <320 pixel, da ist es anders kaum machbar) --korbinian

• Ich mag keine Dropdowns, aber so wie sie jetzt sind, mit Gliederung usw., find ichs ok. Vielleicht kann man Überschriften überlegen und Icons entwickeln, um die Kategorien innerhalb der Dropdowns noch stärker hervorzuheben. Incredibul 18:34, 20. Dez. 2010 (CET)

• Aus dem Sitzungschat: der zwischengeschobene transparente hintergrund im Menu, home, Themen.. etc. ist nicht wirklich gut.. im 11er -> behinderte die schnelle navi .. und suche nach Menuepunkten; Bernd

Lesbarkeit

• Man kann alles seht gut lesen, aber evtl. eine Version für Personen mit einer Sehbeeinträchtigung Nati2010 13:47, 8. Dez. 2010 (CET)
• Natis Bemerkung wirft die Frage nach der Barrierefreiheit auf. Das wäre eine Frage nach dem Gesamtkonzept der Web-Präsentation. Ansonsten kann ich das gut lesen. etz 14:09, 8. Dez. 2010 (CET)
• Die Schriftgröße ist m. M. n. etwas zu klein, ansonsten schick. Tirsales 14:17, 8. Dez. 2010 (CET)
• Schriftgröße ist arg knapp, Screenshot (fast 2MB) bei meinen Einstellungen ist als Mail an Korbinian raus. Ute 14:36, 8. Dez. 2010 (CET)
• Die Schrift auf dem unteren Teil der Webseite könnte sicherlich etwas größer sein für Sehbeinträchtigte. Wer mehr Text auf dem Schirm haben möchte, kann ja etwas reinzoomen. Sebastian Pochert 23:54, 8. Dez. 2010 (CET)
• Durch die kurze Zeilenlänge ist die Lesbarkeit grausam. Die unruhigen Blöcke sollen verschwinden.
  • welche blöcke meinst du? ich vermute du meinst die 2-spaltige ansicht bei den news. momentan haben die eine zeichenlänge von 40-50 zeichen. optimale lesbarkeit wäre bei 60-80 zeichen gegeben. ich bin damit selbst nicht zufrieden. aber valide kritik. werd ich in meinem nächsten vorschlag beherzigen. linksbündigige textblöcke sind durch die konsistenten wortabstände grundsätzlich immer besser lesbar als justified textblöcke, daran werde ich nichts ändern. --korbinian

• • Muss zustimmen. Schrift ist schlecht lesbar. Lade gleich Lösungsvorschlag hoch Mariusmueller

• • • ok, danke für den lösungsvorschlag. so könnte es funktionieren. ich denke ich werde das so mal ausprobieren. --korbinian
• Seite zu dunkel und wenig kontrastreich, daher schlecht erkenn- und lesbar. Denkt bitte auch an die, die nicht so gut sehen können! Django 07:51, 13. Jan. 2011 (CET)
  • welchen bereich meinst du denn? korbinian
    • den grauen Hintergrund rechts und unten auf dem dann in verschiedenen Grautönen Text dargestellt wird, den man zum Teil kaum lesen kann, da der Kontrast der Schriftfarbe zum Hintergrund nicht groß genug ist. Warum nur grau in grau? Django 18:36, 13. Jan. 2011 (CET)
      • die tagcloud soll sublim wirken und is eher als deko gedacht, leichte kontraständerung wären ok, aber die wörter sollen ganz bewusst nur im hintergrund stehen und eben nicht teil des inhalts sein, evtl könnte man auch andere symbole verwenden. korbinian
        • nicht nur die Schlagwortwolken. Nimm als Beispiel den Schriftzug Diese Website ist unter einer Creative Commons Attribution-ShareAlike 2.0 Germany License lizenziert.! Oder kuck' Dir Deine Seite http://korbinian-polk.de/pp12/ an und scrolle nach unten, da gibt es drei verschiedene Grautöne als Hintergrund und ungefähr fünf verschiene Graustufen bei den Textene/überschriften. Mit Barrierefreiheit hat das leider nicht viel gemein, da solltest Du auf alle Fälle stark nachbessern. Sonst ist die Seite schick' gemacht, aber da hilft leider nicht viel, wenn der Rest nur sehr eingeschränkt dargestellt und damit erkenn- und lesbar ist. Provokant gesagt, könnte das als Aufforderung missverstanden werden, in dem Sinne: "weg mit dir, wir wollen Dich nicht als Leser". Django 11:44, 14. Jan. 2011 (CET)
          • bei der sidebar gebe ich dir absolut recht, da muss noch einiges in sachen lesbarkeit getan werden. ich bitte darum das design auch nicht als abgeschlossen zu bewerten. korbinian
            • Danke! ich möchte ja auch nur daraufhinweisen und bitten, mehr nicht! ;) Django 13:10, 14. Jan. 2011 (CET)

Weiteres

• Markenführung: Also erst mal finde ich das Design sehr gelungen! Ich würde nur empfehlen, das Logo/die Marke etwas prominenter (z. B. größer) einzusetzen. Es sind so viele starke Elemente im Design, dass der Absender sich etwas zu sehr verliert. Der Schriftzug "Piratenpartei Deutschland" ist so nah dran, dass man es fast schon zum Logo gehörig interpretieren könnte … hier wäre mehr Abstand gut (oder man verzichtet ganz darauf) -- Michel
• Die Bildmarke sollte etwas größer sein. Sebastian Pochert 23:54, 8. Dez. 2010 (CET)
• Obwohl mir das Look-and-Feel extrem gut gefällt, habe ich Bedenken hinsichtlich der Accessibility, da viele Overlays etc verwendet zu werden scheinen. Hast du das mal testen lassen? Mela
  • ich bin mir der problematiken bewusst. die megadropdowns funktionieren auch ohne js, da reines css. auf touchgeräten, die keinen :hover state kennen werden die in der finalen version nicht auftauchen sondern als normale links fungieren die auf eine übersichtsseite verweisen. funktioniert momentan nur noch nicht weil keine links gesetzt wurden. der dummy is als rein visuelles mockup zu verstehen. auch der js-imageslider wird für leute die noscript aktiv haben accessible werden. ich hab das alles so schnell wie möglich hingehackt, um mal ne diskussionsgrundlage zu haben. ich kenn mich mit accessibility gut aus, kannst dich also drauf verlassen dass ich in der umsetzung auf möglichst barrierearme zugänglichkeit wert lege. für mich als pirat der gesellschaftliche teilhabe fordert ist das selbstverständlich. - korbinian
    • Das ist beruhigend zu wissen. Eine Website sollte grundsätzlich erstmal ohne JS nutzbar sein. Klar kann man sie mit JS verbessern, aber bitte nicht zur Pflicht machen (Progressive Enhancement) - und WENN ihr JS einsetzt, dann bitte barrierefrei (WAI-ARIA, Live-Regions, JS-Benachrichtigungen für z.B. Screenreader). Die Nutzung von HTML5 finde ich mittlerweile (s.u.) auch gut - wenn es denn richtig gemacht wird. Eigentlich ist HTML5 (jetzt) aus Sicht der Barrierefreiheit sogar noch viel besser als der "alte" HTML-Standard - denn er hat sehr viel mehr semantische Elemente. Wenn man dann auch noch die anderen Standards nutzt, die vor oder zeitgleich mit HTML5 entwickelt werden (z.B. hCards) hat man auf einem Schlag viel für die Barrierefreiheit und auch SEO getan (ich schreibe gerade mit zwei Kommilitonen an einer Fallstudie mit dem Thema Barrierefreiheit in HTML5). Sascha Körver
      • du scheinst ja ein ziemlicher profi auf dem gebiet zu sein. ich bin was accessibility angeht oberflächlich gebildet, aber vielleicht wärs cool, wenn du bei der templateerstellung direkt mitmachen würdest. mein vorschlag hier ist nicht optimiert, da könntest du also einiges tun. wenn du lust hast schreib mir also einfach ne mail an korbinianpolk@googlemail.com :) korbinian
        • Profi würde ich jetzt nicht sagen, aber stark interessiert... Profi wäre für mich jemand wie Tomas Casper. Aber unabhängig davon: Ich kann dir gerne Optimierungsvorschläge machen, aber für die Realisierung fehlt mir schlichtweg die Zeit. Dragon hatte auch schon gefragt :) Sascha Körver
    • Hover-Elemente sind generell bedenklich, wenn auch manchmal nicht vermeidbar. In deinem Prototypen finde ich sie aber ok - wenn sie nicht weiter wachsen. Wenns viele Punkte werden wird es unübersichtlich, klar, aber wenn dann auch noch scrollen dazu kommt um einen Punkt zu erreichen hat man eine dicke Barriere drin. Wenigstens ist es kein JS-Kack. Funktionierts im IE6? Bevor ich wegen dem Spruch Dresche kriege: Ja, der ist alt, ja der soll sterben - aber nutzbar, wenn auch nicht schön, sollte die Seite trotzdem sein. Vielleicht mit ´nem Hinweis auf einen richtigen Browser. Sascha Körver
      • ich hab die dropdowns bisher nur in modernen browsern getestet. aber da hier nur stinknormales css2 benutzt wird sollte das mit anpassungen auch ohne probleme im ie6 laufen. natürlich dann ohne transparenzen, schatten, rounded borders usw. aber darauf kann und muss man verzichten. und selbst wenn die dropdowns nicht funktionieren würden ist die seite voll zugänglich. die dropdowns sind nur eine abkürzung. die reiter fungieren ja auch als links zu übersichtsseiten. das mit der dropdown"länge" müsste man nochmal mit echten inhalten testen. was auf jeden fall geht is ein anderes layout ohne dropdowns für kleinere displays zu erstellen. in meinem 320px layout gibt es zb keine dropdowns mehr. da sind die reiter einfache links zu den übersichtsseiten. korbinian
        • Es ging mir nicht darum, dass JS eine Barriere ist (auch JS kann man barrierefrei bauen) - sondern mehr darum, dass Dropdownfelder zur Barriere werden, wenn man gleichzeitig das Fenster scrollen muss (weil es z.B. zu viele Elemente im Dropdown-Feld gibt). Sascha Körver
• Super Design, sehr zielführend. Aber bitte auch sauber umsetzen: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkorbinian-polk.de%2Fpp9%2F http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fkorbinian-polk.de%2Fpp9%2Fcss%2Fstyle.css Mich wundert es auch, dass dort so viele Browser-Workarounds und JS-Files drinn sind für Sachen, die sich superleicht ohne spezielle CSS-Features umsetzen lassen. HTML5 braucht man für diese Seite nicht. Mit HTML5 wirst du auch einige Besucher ausschließen. Ziemlich wackeliges Konstrukt. Wird definitiv nicht auf allen Browsern funktionieren. reeaal
  • Bis vor wenigen Tagen hätte ich dem auch zugestimmt - JS wäre mit dieser Seite quasi Pflicht. Ende November wurde aber eine Möglichkeit publik, HTML5 im Schrottbrowser auch ohne JS nutzbar zu machen (siehe http://www.debeterevormgever.nl/html5-ie-without-javascript )(und wir werden das - als städtische Verwaltung(!) - auch tun). Sascha Körver
    • oh, wow. danke für den tip. schaut ein bissl hacky aus, aber interessante technik. ich denke es is aber eleganter einfach in html4 zu schreiben (mit ein paar browserübergreifenden html5 features, wie zb doctype) korbinian
      • Damit schmeißt du aber viele neue semantische Features weg, die sowohl der Barrierefreiheit, der Usability als auch der SEO zu Gute kommen. Wir sind mit der Fallstudie noch nicht durch; vielleicht finden wir einen Weg wie man sowohl elegant als auch ohne JS diese Probleme löst. Eigentlich ist es auch nur eine Frage des Templatings. Sascha Körver
  • ich bin mir der html5 problematik bei uralt browsern ohne aktiviertem js bewusst. ich habe für das design einfach mein standardframework genommen, das eben darauf aufbaut. das html in html4 umzuschreiben is kein besonders großes problem, und wird bei einer umsetzung selbstverständlich passieren. bedeutet ja nur dass man ein paar divs anstatt semantischer html elemente nimmt. korbinian
    • Wobei HTML4 auch ziemlich oldschool ist. Würde einfach zu XHTML 1.0 tendieren. XHTML ist derzeit Trend. Unser Wiki, das Forum und die Seite selbst werden auch in XHTML ausgegeben. Sollte man irgendwann auf die Idee kommen Elemente aus dem Wiki, Forum oder andere Anwendungen in die Webseite zu integrieren, hat man dann das leidige Problem nicht diese Anwendungen umzustellen. Id's für HTML-Elemente zu setzen ist aus diesem Grund auch nicht klug, Klassen dagegen kannst du setzen wie du Lust und Laune hast. (und wenn es unbedingt id's sein müssen, dann wenigstens mit einem Prefix) Die Sache mit dem Javascript ist ja auch nicht weiter tragisch. Vor 10 Jahren hätte man das vielleicht anders gesehen aber heutzutage hat so gut jeder Javascript aktiviert. Trotzdem braucht es rein für die Darstellung kein Javascript. Das bremst die Seite nur unnötig aus. Für mobile Geräte die diese Workarounds brauchen, kann man das ja nochmal separat machen. Hauptsache die Seite geht mit dem Trend, entspricht dem W3C-Standard und enthält keine unnötigen "Hacks". Btw.: Wieso braucht man für das Design ein "Framework"? Was ist eigentlich mit dem Slider, kommt der wieder? Sofern das Preloading unsichtbar für den User ist, find ich den toll. :)reeaal
      • ich muss dich leider enttäuschen - html scheint sich gegenüber xhtml durchzusetzen, aber ich schreib sowieso in xhtml syntax. also kein problem. über die sache mit den klassen muss ich nochmal nachdenken. ich frag mich gerade welchen sinn eigentlich IDs haben. die seite funktioniert auch ohne javascript - das wird momentan nur für die fontteinbindung und den deaktivierten slider benutzt. welche workarounds meinst du? der slider is zwangsläufig js, html5 elemente per js im ie anmelden sind 2 zeilen code, also vernachlässigbar, aber eben mit dem problem dass die seite dann im ie6 mit deaktiviertem js komplett zerbricht. ich könnte bei den meisten projekten damit leben, aber das is eine große seite und der fall kann durchaus auftreten. man braucht kein framework, normalerweise baut sich jeder webdesigner aber sein eigenes über die jahre auf um nicht immer und immer wieder die gleichen arbeiten zu machen. korbinian
        • Also ich will hier keinen Religionskrieg entfachen aber wenn du XHTML verwendest, dann ist es ja okay. :) ID's machen nicht wirklich Sinn. Wir hatten bei uns mal so eine schwachsinnige Konvention, dass die Designer Klassen verwenden und die Entwickler ID's. Nun verwenden wir grundsätzlich nur noch Klassen und die Entwickler kennzeichnen ihre mit dem Prefix "is_". Also, ich kenne keinen Anwendungsfall für ID's. :) Ich muss sagen, ich hab die Seite nicht genau analysiert aber wenn ich in den ersten Zeilen schon Conditional Comments sehe, dann sehe ich schwarz :) Pngfix für IE6 ist ja vollkommen okay aber fonts einbinden über js und dieser modernizr? Die Frage ist was man wirklich braucht. Wir haben bei uns im Geschäft schon mehrere Hochlastportale groß gezogen und bisher hat niemand vom Design, Frameworks oder Browserworkarounds benutzt (bis auf den pngfix). Allein bei mobilen Geräten gab es Probleme, aber darüber weiß ich nicht viel. :) Naja, deswegen hat mich das ein wenig verwundert. Solang man sich eben strikt an den Standard hält, hat man kaum etwas zu befürchten. reeaal
          • ich glaube du stellst dir untern nem framework mehr vor als es eigentlich is. kaum ein designer fängt mit leeren html dateien an, zumindest kenne ich keinen. einige dinge im html-code sind vermutlich überflüssig. aber bisher habe ich auch noch kein browsertesting gemacht um das zu beurteilen. die browserweiche ganz oben zb finde ich wesentlich eleganter als css-hacks oder alternativstylesheets. ohne individuelle browseranpassung gehts halt nunmal nicht, schon gar nicht wenn man html5 verwenden will, was man definitiv will. so einfach wie du dir das vorstellst, dass es schon ausreichen würde standardkonform zu entwicklen is es leider absolut nicht, solange es browser wie den ie6 oder obskure handybrowser gibt :( korbinian
            • Frameworks verwendet man grundsätzlich nur in der Programmierung. Ich halte diejenigen, die HTML und CSS verkomplizieren für Wichtigtuer. Du baust "Hacks" ein, nur um HTML-Elemente wie "header", "section", "article", u.s.w. zu verwenden. Seh ich das richtig? Mal anders gefragt. Was außer transparente PNG's und HTML5 funktioniert unter dem IE6 nicht? reeaal
              • sorry, du wirst mir nicht verbieten können mein framework zu benutzen. durch definierte ordnerstrukturen, css resets, standardklassen und standardtemplates spar ich mir bei jedem projekt massiv arbeit. so ein "framework" ist nicht mit einem framework wie cakephp oder zend zu vergleichen, ich find den begriff deswegen auch quatsch, mir fällt aber kein anderer ein. das mit dem html5-hack für ie6 siehst du richtig. man kann sich die frage stellen wie sinnvoll das ist, aber zb aus accesssibility-sicht bringen die neuen semantischen elemente viel. offensichtlich hast du von webdesign keine ahnung, ie6 ist die webstandardshölle... willst du wirklich wissen was der ie6 alles falsch macht? wenn ja, einfach selber mal googlen. viel spaß! ;) korbinian
                • Du hast den Begriff schon selbst erwähnt. Du nutzt ein Template und kein Framework. :) Ich habe dich kritisiert, weil du meinst man bräuchte ein Gerüst um den Standard zu umgehen, damit eine popelige Parteienseite unter dem IE6 funktioniert. Anscheinend kannst du mir auch keinen Fall nennen, wo dich der IE6 behindern würde. Zudem prophezeie ich dir, dass HTML5 effektiv keine Besucher einbringt sondern eher das Risiko besteht, dass einige User die Seite buggy auffinden. HTML5 ist nicht ausgereift, XHTML 1.0 dagegen schon. Es gibt Seiten, die funktionieren 1a unter dem IE6 und die haben keine besonderen "Hacks" drinn. Beispiele: http://www.magnus.de, http://www.gmx.de, http://www.heise.de und es gibt auch Seiten, wo überhaupt nichts funktioniert und der Browser sich aufhängt: http://img63.imageshack.us/img63/1741/ie6compatkoribinian.png Btw, IE8 ist auch nicht viel besser: http://img191.imageshack.us/img191/807/korbinianie8compat.png reeaal
                  • können wir die diskussion hier bitte beenden? ich halte die in der phase wo es um das visuelle design geht für absolut sinnlos. dass das layout nicht im ie funzt is klar, ich hab für den bisher auch nicht optimiert. warum auch, wenn noch gar nicht klar ist ob das design so überhaupt gewollt ist? ob xhtml1 oder (x)html5 is mir persönlich ziemlich schnuppe, das is dann eher für die leute die das design implementieren wichtig. ich freu mich auf deine hilfe bei der erstellung der fertigen templates. korbinian
                    • Können wir gerne tun, ich frag mich nur wie die Leute die Templates später erstellen sollen, wenn die Grundlage dafür nicht 100% gegeben ist. Da stimmt der Workflow irgendwo nicht. Aber okay lass abwarten, was der Vorstand dazu meint. Ab mitte Januar kann ich gerne mithelfen die Templates zu erstellen. reeaal
                      • der vorstand sagt dazu gar nix mehr, wir haben bereits die beauftragung. vom workflow her weiß ich leider nicht wie mans besser machen könnte. eine alternative wäre ich mach photoshopvorlagen, die dann jmd in templates umformuliert - aber ich halte wenig von statischen layouts. naja, wir werden sehen wie sich das alles ergibt. mitte januar klingt gut. mein zeitplan wär eher dass wir es bis ende februar schaffen die templates getestet fertig zu haben. korbinian

Zusammenfassung der Kritikpunte

mit einem + kennzeichne ich zustimmung, mit einem - ablehnung. ein 0 drückt gleichgültigkeit aus. wenn ihr wollt einfach auch miteintragen.

• bei großen auflösungen zuviel fläche rechts + +
• der hintergrund ist zu dunkel - 0
• die 3 orangenen felder sind zu groß - -
• kampagnenbereich nimmt zuviel platz ein - -
• social networking links sind zu groß + +
• in der kleinsten auflösung inhalt kürzen (zb die sitemap unten) um traffic zu sparen 0 +
• dropdowns sind zu unübersichtlich - -
• dropdowns haben zuviel inhalt - -
• schriftgröße ist zu klein 0 -
• kontrast der schrift in der sidebar ist zu schlecht + 0
• zeilenlänge im contentbereich ist zu kurz 0 +
• logo muss größer sein - -
• der header nimmt zuviel platz ein - +
• die hauptnavigationspunkte sind zu groß - -