Benutzer:MScharwies/Konzept für neue Templates

Hinweis:

neues Konzept für unsere Templates, die evtl. wieder fertige Layouts heißen sollen. --Matthias Scharwies (Diskussion) 13:57, 12. Aug. 2016 (CEST)

Die CSS/Templates im Wiki sind nicht optimal.

Die 10 "Gewinner" des Designen-Lassen-Wettbewerbs haben …

• zwar optisch bunte Startseiten, aber keine inhaltlich gute Seitenaufteilung
• mangelhafte Unterseiten
• viele Bilder (die sowieso nicht übernommen werden können)

Neues Konzept

Die bisherigen fertigen Layouts werden überarbeitet

• viele vendor-prefixes entfernt, da nicht mehr nötig
• kein <li class="active"> sondern <a aria-current="page">
• keine Hintergrundbilder
• html5-shiv entfernt
• skiplinks einfügen
• evtl auch mit flex und grid

Erweiterung durch 3-4 eigene Vorlagen, die mit Buchstaben gekennzeichnet werden und vor den bisherigen Layouts platziert werden.

Selfhtml-Zen Garden

EIN Template A mit gleichen Unterseiten:

• Startseite (evtl. mit Pseudoelement mit content="Skin-name")
• Inhaltsseite (siehe evtl. Beispiel) mit Text + Bildern (Bilder nur als dummy-1.png, dummy-2.png, etc)
• Tabelle für Termine
• Impressum + Kontakt

CSS

NEUN Skins für das Template

• im Wiki mit JS-styleswitcher, (als Zip ohne JS ?)
• mobile-first-Ansatz, der auch als Fallback für ältere Browser verwendet werden kann
• inklusive Print-Layout mit @media print {}
• verschiedene Layout-Modelle:
  • liquid layout
  • flex
  • grid
• verschiedene Grafik-Stile:
  • flat-Design
  • Material-Design
  • Hero-Images
  • duotone (mit CSS-filter machbar)
    • Hand-drawn
  • Links als Ghost-Buttons
  • Links als SVG-Icons

Webvisitenkarte

Vorschläge erbeten

SPA

Vorschläge erbeten

Umsetzung

ZIP-Ordner und Beispielseiten werden nicht mehr auf jsr-hersbruck.de sondern src.selfhtml.org gehostet, damit die Verlinkungen von Bildern, Unterseiten und CSS-dateien nicht mehr an die Wiki-internen URL angepasst werden müssen.

Beispiele

• t3n: Webdesign-Trends 2016: Was uns im neuen Jahr im Netz erwartet
• tutsplus: Weekly Inspiration: Full-on Full Screen Home Pages

1. https://w3layouts.com/optometry-medical-category-flat-bootstrap-responsive-web-template/
2. Material Design
   • Google Material Design Ripple Effect with SVG
3. Geometrische Grundformen
   • tutsplus: Creative Examples of Geometric Web Design Styles
4. css-tricks: Influencing Web Layouts with Print Layouts

Bsp für Inhaltsseite