Servicegruppen/Webseite/Relaunch2014/Anforderungen

Aus Piratenwiki
Wechseln zu: Navigation, Suche


Servicegruppe Webseite - Startseite | Kontakt | Workflows | Dokumentation | Protokolle | Links | Mitglieder




Anforderungen an das neue Webdesign für die zentrale Website der Piratenpartei

(Zunächst allgemeine Sammlung, später wird dies besser gegliedert und gewertet)

Index; 1. Allgemeine Wünsche 2. Funktionalitäten des Designs 3. Technische Anforderungen an das Design 4. Organisatorische Anforderungen 5. Beispiele 6. Statistiken 7. Fundraising 8. Vorgehen

1. Allgemeine Wünsche

  • Übersichtliches "leichtes" Design, nicht mehr so viel Ablenkung, Hintergrund und Gestaltung auf Lesbarkeit ausgerichtet, nicht Orange als Hauptfarbe (gut: weiß) +1
  • Nutzbar auch für andere mit wenig Modifikationen über Optionen im Theme
  • Nice to have: Nutzbar auch für Kampagnensites, bei der man in Kooperation mit anderen Parteien was macht und deswegen nicht das eigene Logo im Vordergrund stehen darf
  • Option, Artikel mit "Inhalten" (statische Seiten über unsere politischen Positionen) zu verknüpfen. A la "Unsere Position hierzu".. Ähnlich wie bei zeit.de oder NYTimes.
  • Eigener Bereich für Pressemeldungen, keine zu starke Vermischung mit den redaktionellen Inhalten der SG Webredaktion und Webseite (klar abgegrenzt) - Ggf. Farbcodes/Balken für Kategorien?
  • Ich hätte gern eine coole 404-Seite :)
  • Anzeige aktueller Themenbilder aus Tumbler in geeigneter Größe
  • Content von anderen akkredietierten Quellen (z.b. Fraktionenblogs)
  • Wg. "Mobile First" Bilder erst "klein" ausliefern und dann abhängig von Media Query groß nachliefern, wenn noch nötig. Bei letzterem dann großzügige Formate.
  • Kalender? Bzw. Terminhinweise als Artikel?
  • Bei Bildern, wo dies aufgrund der Lizenz notwendig (CC-BY) ist, die Lizenzinfo anzeigen
  • Klare Formulierung wieviele Inhalte von was auf der Startseite (Ich werf mal in den Raum ein großer Aufmacherartikel, die drei letzten aktuellen Artikel (oder 2+eine "Leseempfehlung des Tages"), die letzten 4-6 Pressemeldungen, 2-3 Audiovisuelle Inhalte als Ausgangsbasis -> mit Dirk besprechen)
  • Weniger Kategorien als jetzt, diese dafür aber besser usable nutzen als navigationsmethodik oder um Artikel zu gruppuieren
  • Bei Usability auch an Editoren/Redakteure denken
  • CSS-Files auch als SASS?
  • Kategorien = Themen, nicht mehr starr festgelegt auf Politikfelder.
  • Pro Theme sollte nur ein Artikel auf der Startseite sein. D.h. ein neuer Artikel verdrängt den ältesten auf der Startseite befindlichen, es sei denn es gibt einen Artikel zum selben Thema. Dann verdrängt er diesen. Ja, dadurch wird - auf der Startseite - der lineare Artikelfluss untersrochen. Aber nur dort. Zusätzlich muss diese Art Verdrängung implizit eine Themenseite bilden, die im Menü links auftaucht und automatisch unter allen Artikeln verlinkt wird.
    • Nach Rücksprache mit Dirk in anderen Worten: Indexseite (z.B. Template), Angezeigt werden alle Kategorien, die in den letzten X Tagen Beiträge hatten. Von jeder Kategorie 1 Artikel als Teaserkachel und darunter ggf. 5 über Titel verlinkte weitere Artikel derselben Kategorie. Wenn eine Kategorie in X Tagen keine Beiträge hatte, wie sie nicht angezeift auf der Seite. Die Reihenfolge der Kategorien auf der Seite müsste noch übrlegt werden. ggf. Sortierung nach Alphabet, Nach Aktualität oder nach manueller Vorgabe einer Kategorienreihenfolge. 
    • Dies wird im GitHub als neuer Issue aufgenommen: https://github.com/xwolfde/Piratenkleider/issues/72 
  • Artikelfluss bei Kategorien mit hoher Taktfrequenz zu Artikeln mit geringerer Taktfrequenz ausgleichen.
  • Keine Maritimen Designelemente ;)
    • Nicht mal ne Planke oder Haifische? Och menno,,, ,)


Was war/ist gut und sollte behalten werden?

  • Responsive Design

Was ist schlecht?

  • Tagcloud raus, verstärkt sich selbst :)
  • Parteieigene Banner sehen aus wie Bannerwerbung, das nicht abschauen von Newsseiten :)
  • CC-BY Lizenz ist incompatibel zur Wordpress Theme Directory :(  Dies hat die schwerwiegende Folge, dass das Theme nicht, einmal installiert, nicht automatisiert über Wordpress aktualisiert werden kann. Das behindert die Verbreitung von Neuen Funktionen oder Bugfixes deutlich. Wenn wir eine möglichst schnelle Verbreitung wollen, auch bei Updates oder neuen Designelementen, müssen wir daher die Lizenz ändern. Dies betrifft ebenfalls im Theme enthaltene grafische Elemente. (Piratenkleider 3 wird daher auf GPL umgestellt. Das bisher verwendete Framework YAML muss wegen Lizenzincompatibilität zu GPL entfernt werden. Bilder, die nicht entsprechend frei sind, ebenfalls.)


Was können wir sofort und jetzt schon umsetzen (wenn wir wollen und es entscheiden)

  • Tagclouds raus, 
  • Kategorieliste raus +1
  • Archiv rein +1
  • n Hauptartikel die über gesamte Breite gehen +1 (n=1)
  • m Nebenartikel auf halbe Breite
  • Belibiger Widget unter Artikelliste auf Indexseiten

Zwischenlösungen mit jetzigem Design bei Funktionalitäten?

  • Kategorieabhängige Indexsweite (Z30): ggf. in Piratenkleider 3 ab Februar denkbar


2. Funktionalitäten des Designs

Mobile First Das Design muss alle gängigen kleinen Browserauflösungen durch ein adäquates Design unterstützen. Die Standard-Smartphonefamilien IPhone und Android sind dabei Grundlage. Browserweichen sind zu vermeiden, statdessen wird mit Media-Queries gearbeitet. (Hintergrund: Ab April 2014 sollen laut Statistiken die Mehrzahl aller Bürger Websites primär über Smartphones abrufen. Daher ist dies dementsprechen zu berücksichtigen. vgl. auch http://t3n.de/news/webdesign-trends-2014-518425/ )

Startseite Die Startseite soll einen News/Zeitungs-Charakter haben, bzw. es unterstützen, dass viele Artikel, Leseempfehlungen, Hinweisbanner und andere Hinweissymbole gleichzeitig dargestellt werden. Die Gestaltung muss daher in der Lage sein, eine große Zahl an unstrukturierten und unterschiedlichen Artikeln anzuzeigen, ohne das aktuelle Informationen aus dem Sichtfocus verschwinden.

Folgende Dinge werden aktuell auf der Startseite angezeigt:

  • Kopfteil mit Logo
    • Verlinkung von definierten Portalseiten aus einem Menü <- Würde ich in den Footer machen?
    • Bis zu 3 Sticker (Grafische oder textuelle Links)
    • optional: Social Media Verlinkungen (mehrere optional einstellbar)
  • Hauptmenu mit allen statischen Seiten
  • Slider (optional, mit Beiträgen aus einer Kategorie) Statt/Kombiniert mit Slider großer Aufmacherartikel?
  • Bis zu 3 Sliderlinks (optional)
  • Contentbereich
    • n1 hervorgehobene Beiträge mit optionalen Symbolbild/Video, Datum, Teasertext
    • n2 nicht hervorgehobene Beiträge mit optionalen Symbolbild/Video, Datum, Teasertext
    • n3 Leseempfehlungen (Titel, Untertitel, teasertext, Symbolbild)
  • Kategorieliste
  • Tagcloud
  • Archiv oder "Ältere Artikel"
  • Suche
  • Sidebar
    • Submenu bei Unterseiten 
    • Bis zu 4 Logos für aktuell laufende Aktionen
    • div. Wordpress-Widgets
  • Footer
    • derzeit mit Linkliste zu int. Piraten, bei Gliederungen mit Bezirken/Kvs optional steuerbar
    • optional weitere Widgets


3. Technische Anforderungen an das Design


Es wird ein Theme auf Basis des CMS Wordpress erstellt.

Nutzung des Frameworks Piratenkleider3 Als Framework kann Piratenkleider3 https://github.com/xwolfde/Piratenkleider  oder ein GitHub-Clone verwendet werden. Bei Nutzung von Piratenkleider3 können alle darin enthaltenden funktionalen Elemente (Slider, Linktipps, Kommentarverwaltung, Kategoriesteuerung, Anpassbarkeit der Darstellung von Social Media Icons, uvm.) weiter genutzt werden; Für ein Designwechsel bedarf es dann lediglich die Erstellung eigener CSS-Dateien, JavaScripts und zusätzlicher optionaler Bilder.  Sollte ein anders oder ein neues Theme verwendet werden, sollten die in Piratenkleider enthaltenen Grundfunktionen hingegen weitestgehend nachprogrammiert werden, da diese oft in Verwendung sind und in der Vergangenheit erst nach Anfordeurng nachprogrammiert wurden. Die Webredaktion gibt den Bedarf der Funktionen vor. Diese müssen auch dauerhaft gepflegt werden!

Grundfunktionen wären:

  • Auswahl von Default-Bildern für Seiten, Artikel, Kategorien, Tags, Error, ...
  • Verwaltung der optionalen Social Media Links (Delicious Facebook Google Plus Twitter YouTube RSS Flickr  Flattr iTunes Skype Identica Xing  Tumblr GitHub App.Net Diaspora)
  • Verwaltung des optionalen Sliders im Kopfteil
  • Verwaltung des optionalen Sliders in der Sidebar
  • Gestaltung der Artikelansicht (1spalter, 2 Spalter, Anzahl, Art der Strukturierung, Datumsboxanzeige) auf der Indexseite, Kategorieseiten, Tagsseiten
  • Optionen für Kommentarverwaltung und Anonymisierung
  • Eingabemöglichkeit für Kontaktdaten der Betreiber für die automatisierte Impressums- und DSB-Seiten
  • Aktivierung der Linktipps
  • Verwaltung der YouTube-Video-Embeddings
  • Verwaltung von eigenen, zusätzlichen CSS-Dateien, sowie Schaltung von Schriftfamilien für Überschriften,  Content und Menu
  • Verwaltung eigener Sliderbilder (u.a. für Wahlen)
  • Bei Bildern die Lizenzinfo anzeigen
  • besondere Artikelfunktionen: Setzen von Disclaimer (vor und nach dem Text), Setzen von Steckbrief-Bildern für Meinungsartikel, Setzen von Zusatztextboxen.


Standard Farben und Logos der Piratenpartei müssen berücksichtigt werden.

Das Design soll anpassbar sein für Gliederungen, ohne dass hierzu Eingriff eines Designs notwendig ist. Bspw: Bei Nutzung des Designs für eine Homepage eines Piraten sollte dieser nicht wie bei Scapegoat gezwungen sein, erst eine Anfrage bei der SG Gestaltung stellen zu müssen um ein passendes Logo zu erhalten; Stattdessen sollte dies durch Nutzung von CSS3 in geeigneter Weise automatisiert erfolgen können. Man muss nur die Logo.png ersetzen :)     Es geht darum, daß man keinen Designer braucht, der ein eigenes neues Logo erst baut!


Das Theme, bzw. das Design muss alle Forderungen der WCAG2, bzw. BITV2 erfüllen.  Dies muss durch ein Test nachweisbar sein. (Gilt nicht für Forderungen die sich aus Bedienung durch Redakteure ergeben). Brauchen wir einen oder mehrere Tester. Kliehm?


Alle Optionen des Designs, die variable sind, müssen im Backend konfigurierbar sein; Ein Eingriff ins CSS soll dazu nicht notwendig sein.

Das CSS muss auch ein geeignetes Print-CSS enthalten, welches bei der Ausgabe von Seiten oder Beiträgen eine Ausgabe erstellt, die ähnlich dem gängigen Print-Layout ist. 


Umzusetzende Contenttypen:

  • Artikel mit Bildern: Links, rechts, mittig, mit Caption und ohne.
  • Artikel mit Tabellen
  • Artikel mit Zitate: In Fließtext und als Blockquote
  • Artikel mit Video (Thumb oder groß)
  • Artikel in Voll und kleiner Auflösung
  • Hinweisboxen (vgl http://wiki.piratenpartei.de/Servicegruppen/Webseite/Dokumentation/Hinweisboxen)
  • Symbole für Linktypen (extern, Mediatypen, bekannte Websites)
  • Disclaimer-Hinweise (vor und nacht Content)
  • Überschriftenhierarchien
  • Metainfos zu Artikeln: Datum, Kategorieliste, Tags, Autor, Kommentare
  • Kommentardarstellung
    • mit und ohne Einrückung (Antwort auf Kommentare)
  • Inhaltsbezogener Index/Menu (->Sprungmarken)
  • Sidebar: 
    • Standardwidgets: Text, Feed, Kalender, Submenu, Letzte Kommentare, Letzte Artikel
    • Linklisten (Gliederungs- und weitere Parteienlinks), optional mit Landesicons oder eigenen Logis
    • Linkbanner (fest dimensionierte Größen)
    • Sucheingabe
  • Index/Metaseiten (Kategorieseiten)
    • Teasertext, Teasertitel, Teaserdatum, Thumb oder Video oder Ersatzbild, "Continue Link
    • Tagcloud
    • Kategorieliste
    • Archiv
    • "Sticked" Artikel
    • Leseempfehlungen/Linktipps (Titel, Subtitel, Text und oder Bild, optional URL)
  • Unterstützung gängiger Pluginausgaben mit geeigneten CSS:
    • ICS Kalender
    • Contact Form 7
    • Related Article

Hinweis zur Gestaltung bei Artikeln und Artikelanreissern auf Indexseiten:   Es kann nicht davon ausgegangen werden, daß Artikel einen Titel mit einer  maximalen Länge haben :( Titel haben sich in der Vergangenheit leider  auch als auch lang erwiesen. Erschwerend kommt hinzu, daß auch Sonderzeichen (Umlaute, SZ und nord/osteuropäische Zeichen) enthalten waren. Die Gestaltung muss daher berücksichtigen, daß es Artikel mit  megalangen Titeln gleichzeitig zu Artikel mit kurzen Titel gibt... Und  welche mit und ohne Artikelbilder... (Entsprechende Belehrungen der Autoren, nur kurze Titel zu verwenden, wurden nach einiger Zeit oft wieder vergessen. Also am Besten darauf garnicht erst vertrauen und auch den Worst Case berücksichtigen)


------------------------------------------------------- 4. Organisatorische Anforderungen -------------------------------------------------------

Das Design und alle darin enthaltenen Bestandteile müssen unter einer GPL-Lizenz oder einer damit kompatiblen Lizenz verfügbar gemacht werden. Dies ist zwingend notwendig, damit das Theme in die Wordpress Theme Directory aufgenommen werden kann. Eine CC-Lizenz wird von der WP-Theme Directory derzeit nicht akzeptiert. 

Verwendete Fonts müssen im Theme enthalten sein und dazu nachweisbar eine offene Lizenz haben. Bei allen im Theme enthaltenen größeren Grafiken, die als Symbolbilder (z.B. bei Slidern oder Seiten im Kopfteil) verwendet werden, müssen Copyright-Informationen in den EXIF-Attributen gesetzt sein, welche die Lizenz angeben.

Gestalterische (u.a. Fonts) oder interaktive Elemente dürfen keinesfalls von fremden Websites abgerufen werden, sondern müssen im Theme enthalten sein. Dies gilt insbesondere für Fonts, JavaScripten und Symbolgrafiken. 

Längerfristiger Support und Mitarbeit des Designers (ABSOLUTES MUSS) Erfahrungsgemäß gibt es auch nach einem Relaunch  viele Dinge, wo auch später noch ein Design ergänzt werden muss oder wo Anpassungen gemacht werden müssen. Daher ist es notwendig, daß der/die Designer/in hierfür auch "da" ist und länger bleibt.


------------------- 5. Beispiele -------------------

Geeignete Muster/Vorlagen/Orientierung

http://www.smashingmagazine.com/  http://www.golem.de/ http://www.student-law.de/index.php http://www.nytimes.com/pages/science/index.html Themenseite http://www.nytimes.com/2014/01/02/opinion/edward-snowden-whistle-blower.html?_r=0 Opionion Page  http://www.zeit.de/index  http://www.townandcountrymag.com/ (Mehr Magazin, weniger Zeitung) http://www.silktricky.com/#/home http://magazine1.suitupordie.com/ (Also, würd ich nicht so machen, auch nicht responsive, aber schön wie hier die Inhalte präsentiert werden) http://www.defringe.com/ http://spacecollective.org/ http://futurezone.at/

-------------------------------------------------------- 6. Statistiken  (2.7.2013 bis 2.1.2014) --------------------------------------------------------

Top Referrer 142166 http://google.de   48105 http://google.co.uk  (Interessant..)   30607 http://facebook.com     22248 http://piratenpartei.de    19169 http://t.co    (=> Twitter)   14100 http://movie2k.to    11943 http://m.facebook.com    9642  http://google.com      9276  http://movie2k.com    3126  http://piratenpartei-goettingen.de    2952  http://plus.url.google.com     2719  http://wiki.piratenpartei.de


Top Inhalte  358692  / 26815  /politik/wahl-und-grundsatzprogramme/wahlprogramm-btw13/ 24182  /impressum/  19022  /2013/12/13/redtube-ueber-piraten-geleakte-dokumente-erlauben-tiefen-einblick-in-praxis-der-abmahner 16769   /politik/ 16316   /2013/09/24/fast-eine-million-stimmen-fuer-die-piraten-jetzt-erst-recht/ 15228   /partei/ 14183   /mitmachen/   13638   /category/pm/    13471    /mitmachen/mitglied-werden/ 11711    /2013/12/17/redtube-weitere-leaks-beziffern-einnahmen-aus-illegalen-abmahnungen 11263    /2013/12/13/porno-engel-bei-den-pi..


ZUR Erklärung; das sind absolute Zahlen für den Zugrif auf die jeweiligen Seiten ohne Cache! Eine Zusammenrechnung ist anhand dieser Zahlen nicht möglich! Die Zahl bei / steht nicht fpr die gesamtzahl aller Zugriffe!

-------------------------------------------------------- 7. Fundraising (wird gerade vorbereite mit Infrastruktur, sollte mit berücksichtigt werden) --------------------------------------------------------

- Allgemein:

- Platz für Ask Strings & Banners schon mit einplanen - Expander Banner / dropdown Banner - 

- Möglichkeit der Erfassung wie oft ein Banner geklickt wurde  (anonym) Wie viele Besucher haben geklickt? Wie viele Besucher waren insgesamt da?

- Ein Zufallsgenerator für die Auswahl eines Banners, bei jedem X-ten Besucher (Banner Rotator Script) ("alle 1000 Besucher ein anderes Banner")

------------------ 8. Vorgehen ------------------

Vorschlag:

1. ca. Ende Januar:   Ausschreibung/Wettbewerb nach Designer/Entwickler (ohne konkreten Entwurf) 2. ca. Ende Januar:   Einstellen einer Online-Umfrage (LImeSurvey? Wer hat da zugang und kann das machen?). Keine Mail an alle Mitglieder, sondern lediglich Verlinkung über Website Inder Umfrage sollen Wünsche, Anforderungen, Vorschläge und Feedback zum jetzigen angegeben werden können. 3. ca. Anfang-Mitte Februar: Auswahl Designer / Entwickler 4. Doing / Fristen festlegen

Offene Fragen: Wer hat den organisatorischen Hut auf? Eine Person oder ein Lenkungsausschuss?

Abgerufen von „https://wiki.piratenpartei.de/wiki/index.php?title=Servicegruppen/Webseite/Relaunch2014/Anforderungen&oldid=2288930“