Makeover für Design02 – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Makeover für Design02 Sat, 18 Sep 21 12:37:17 Z https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791707?srt=yes#m1791707 https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791707?srt=yes#m1791707 <p>Servus!</p> <p>die <strong>fertigen Layouts</strong> wurden ursprünglich ja 2013 <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> im Rahmen eines Wettbewerbs von designen-lassen.de erstellt und sind <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> immer wieder überarbeitet worden:</p> <ul> <li>2014 wurden sie mit den damals „neuen“ HTML5-Elementen versehen.</li> <li>2018 wurden die verbliebenen <em>floats</em> auf Grid Layout umgestellt</li> <li><strong>2021</strong> erhielt Design 01 eine <a href="https://blog.selfhtml.org/2021/apr/30/dark-mode-die-dunkle-seite" rel="noopener noreferrer"><strong>„dunkle Seite …“</strong></a></li> </ul> <h3>Design 02 "Man with Hat"</h3><p>In der <a href="https://src.selfhtml.org/designs/design02/" rel="nofollow noopener noreferrer"><strong>2014er</strong> Version</a> gibt es einen Style-Switcher für 6 verschiedene Farben, deren Kontraste teilweise nicht ausreichen. Icons sind teiltransparente Rastergrafiken, bei den die Akzentfarben durchscheinen.</p> <p>Im <a href="http://svg.bplaced.net/design02/" rel="nofollow noopener noreferrer"><strong>2021er Entwurf</strong></a></p> <ul> <li>ermöglichen <em>custom properties</em> mit mehreren Akzentfarben die Einhaltung der WCAG-Richtlinien. <ul> <li>orange, gelb und green sollen Dark Mode werden, die anderen heller.</li> </ul> </li> <li>sind die Icons Inline-SVGs, die ebenfalls gestylt werden können.</li> <li>sind die LoremIpsum-Texte durch Inhalt ersetzt worden.</li> </ul> <h3>Fragen</h3><p>Der <strong>Header</strong> besteht aus mehreren Hintergründen, wobei im Original (oben) nur wenig Kontrast zwischen Mann und Hintergrund ist.</p> <p><a href="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Die Mitte finde ich besser - ihr auch?</p> <p>Unten finde ich zu bunt, wollte ich nur mal ausprobieren. Der wiederholende Verlauf ist von 2014 - im violetten und <a href="http://svg.bplaced.net/design02/index.html" rel="nofollow noopener noreferrer">roten Theme</a> habe ich einen „normalen“ Verlauf verwendet.</p> <p>Habt ihr Vorschläge für den Header?</p> <hr> <p>Die Icons sind nun Inline-SVGs und aus einem Guß.</p> <p><a href="/images/6919d0ea-183e-11ec-a80c-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/6919d0ea-183e-11ec-a80c-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Das gelbe Theme gefällt mir, da das Dark mode-Icon mit der blauen Akzentfarbe übereinstimmt.</p> <p>Rot geht auch</p> <p>Im Violet-Theme beißt sich imho das blau mit dem dunkelviolet (<code>#9357b9</code>). Deshalb würde ich das Dark Mode-Icon aber entweder mit einem sehr hellen violet (iih!) oder dunkel-violettem Hintergrund darstellen.</p> <p><a href="/images/c2ee8e1a-1845-11ec-8772-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/c2ee8e1a-1845-11ec-8772-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Habt ihr Vorschläge?</p> <hr> <p>Zum Vergleich: der erste Entwurf 2013: <a href="http://selfhtml.apsel-mv.de/vorschau/vorschau-21/" rel="nofollow noopener noreferrer">http://selfhtml.apsel-mv.de/vorschau/vorschau-21/</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>SELF-Blog: <a href="https://blog.selfhtml.org/2013/feb/22/unterstuetzung-von-designenlassen-de" rel="noopener noreferrer">Neue Layout-Templates für unsere Nutzer</a> vom 22.02.2013 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>SELF-Blog: <a href="https://blog.selfhtml.org/2013/dec/22/1-weihnachtsbrief-2013" rel="noopener noreferrer">Weihnachtsbrief 2013</a> vom 22.12.2013 <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Makeover für Design02 Sat, 18 Sep 21 12:50:15 Z https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791708?srt=yes#m1791708 https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791708?srt=yes#m1791708 <p><code>printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);</code></p> <blockquote> <p>Der <strong>Header</strong> besteht aus mehreren Hintergründen, wobei im Original (oben) nur wenig Kontrast zwischen Mann und Hintergrund ist.</p> <p><a href="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Die Mitte finde ich besser - ihr auch?</p> </blockquote> <p>Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. Vielleicht spiele ich später™ mal ein wenig damit herum. Die Wahrscheinlichkeit, daß ich es schlichtweg vergesse, liegt zur Zeit allerdings sehr sehr hoch.</p> <p>Der blau-graue Text im violetten Beispiel ist schlicht unlesbar; der kleine Weiße ist schon schwierig</p> <p>/K</p> <div class="signature">-- <br> Klingonen sind doof. Sie rufen ständig nach einem Kaplan und wollen nach dem Tod in Styropor® sein. </div> Makeover für Design02 Sat, 18 Sep 21 13:56:27 Z https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791709?srt=yes#m1791709 https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791709?srt=yes#m1791709 <p>@@Matthias Scharwies</p> <p>Ich hab in deinem Posting das Markdown für die Fußnoten korrigiert.</p> <p>Die Anzeige der <a href="https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791707/versions" rel="noopener noreferrer">Versions-Historie</a> ist buggy:</p> <ul> <li>Meine Änderungen sind die mit „bearbeitet von Matthias Scharwies 2021-09-18 14:37“ betitelten.</li> <li>„bearbeitet von Gunnar Bittersmann 2021-09-18 14:58“ war ich nicht.</li> </ul> <p><a href="https://github.com/ckruse/cforum_ex/issues/480" rel="noopener noreferrer">Ticket</a> angelegt.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> Makeover für Design02 Sat, 18 Sep 21 14:44:04 Z https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791710?srt=yes#m1791710 https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791710?srt=yes#m1791710 <p>@@Matthias Scharwies</p> <blockquote> <p>Der <strong>Header</strong> besteht aus mehreren Hintergründen, wobei im Original (oben) nur wenig Kontrast zwischen Mann und Hintergrund ist.</p> </blockquote> <p>Das kann ja durchaus seinen Charme haben – je nach Kontext. Worauf kommt es an: auf die Umrisse der Person oder die Umrisse des Gesichts?</p> <blockquote> <p><a href="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Die Mitte finde ich besser - ihr auch?</p> </blockquote> <p>Nein. Der Unteschied zwischen hellgrau und dunkelgrau ist zu groß. Zu unruhig, um Schrift draufzutun.</p> <blockquote> <p>Unten finde ich zu bunt</p> </blockquote> <p>Augenkrebs.</p> <p>Warum sollen es überhaupt Streifen sein? <em>„Schrägstreifen wirken kränklich.“</em> —<a href="https://www.youtube.com/watch?v=MvCNSLzldgY" rel="nofollow noopener noreferrer">Otto</a></p> <p>Der Gradient bei „violett“ hat doch was Schönes. Warum den nicht überall?</p> <p>Bei violett wurde die Hintergrundfarbe für die Ansicht auf schmalen Viewports vergessen? (Fast hätte ich „Mobilansicht“ gesagt. )</p> <p><a href="/images/98a83ba8-188e-11ec-bf3e-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/98a83ba8-188e-11ec-bf3e-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Dass der Farbkontrast für schwarze Schrift nicht ausreicht, ist auch bei „blau“ der Fall.</p> <p>Links ist Platz, rechts kleben die Boxen am Rand? Oben darf es auch ein bisschen mehr sein.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> Makeover für Design02 Mon, 20 Sep 21 03:46:25 Z https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791742?srt=yes#m1791742 https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791742?srt=yes#m1791742 <p>Servus!</p> <blockquote> <blockquote> <p>Der <strong>Header</strong> besteht aus mehreren Hintergründen, wobei im Original (oben) nur wenig Kontrast zwischen Mann und Hintergrund ist.</p> <p><a href="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Die Mitte finde ich besser - ihr auch?</p> </blockquote> <p>Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. ...</p> <p>Der blau-graue Text im violetten Beispiel ist schlicht unlesbar; der kleine Weiße ist schon schwierig</p> </blockquote> <p>Du meinst <code>nav ul a</code>? Ich würde gerne erst einmal den Hintergund festlegen.</p> <p>Im <a href="http://svg.bplaced.net/design02/" rel="nofollow noopener noreferrer">blauen, und roten Theme</a> habe ich jetzt einen einfachen Verlauf - ist das so ok?</p> <p>Im violetten Theme gibt es einen Verlauf von dunkel und hellviolett; <a href="https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791743#m1791743" rel="noopener noreferrer">auf Vorschlag von Gunnar</a>.</p> <p>In den Dark Mode-Themes gelb, grün, und ornage weiß ich noch nicht, wie ich's machen soll - im Grünen habe ich den Verlauf nicht nur im Header - gut so?</p> <p>Gelb ohne Verlauf ist mir zu dunkel.</p> <p>Orange hat eben noch den repeating-linear-gradient() - einmal lassen oder es lieber einheitlich darstellen?</p> <h3>Navigation</h3><blockquote> <p>Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. ...</p> </blockquote> <p>Im blauen Theme habe ich die Navigation jetzt mit hintergund versehen:</p> <pre><code class="block language-css"><span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--accentColor1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--backgroundColor2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a:hover, nav a:focus</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--backgroundColor2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--accentColor1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Wie sieht das aus? Soll ich das in allen <em>light Themes</em> blau, rot und violett, evtl auch orange so machen?</p> <p>Gelb und grün haben genug Kontrast, da könnte man es so lassen?</p> <h3>Linkfarbe(n)</h3><p>Im blauen und violetten Theme sind Links in Akzentfarbe, das passt vom kontrast, gelb auf Lila hat sallerdings nur 2.34:1 - zu wenig - habt ihr Ideen?</p> <p>In Rot geht's grad noch, aber skyblue auf rot ist auch schon zu wenig.</p> <p>Grün auf grau und blau auf Orange haben beide viel zu wenig - Vorschläge anyone?</p> <hr> <p>Das Beispiel soll die verschiedenen Akzentfarben vorstellen, aber eben auch, wie man sie erfolgreich einsetzt!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> Makeover für Design02 Mon, 20 Sep 21 04:00:28 Z https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791744?srt=yes#m1791744 https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791744?srt=yes#m1791744 <p>Servus!</p> <blockquote> <p>@@Matthias Scharwies</p> <p>Ich hab in deinem Posting das Markdown für die Fußnoten korrigiert.</p> </blockquote> <p>danke, aber was hast du gemacht? Hatte erfolglos runmprobiert.</p> <blockquote> <p>Die Anzeige der <a href="https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791707/versions" rel="noopener noreferrer">Versions-Historie</a> ist buggy:</p> <ul> <li>Meine Änderungen sind die mit „bearbeitet von Matthias Scharwies 2021-09-18 14:37“ betitelten.</li> <li>„bearbeitet von Gunnar Bittersmann 2021-09-18 14:58“ war ich nicht.</li> </ul> <p><a href="https://github.com/ckruse/cforum_ex/issues/480" rel="noopener noreferrer">Ticket</a> angelegt.</p> </blockquote> <p>danke!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> Makeover für Design02 Mon, 20 Sep 21 03:57:26 Z https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791743?srt=yes#m1791743 https://forum.selfhtml.org/self/2021/sep/18/makeover-fur-design02/1791743?srt=yes#m1791743 <p>Servus!</p> <blockquote> <p>@@Matthias Scharwies</p> <blockquote> <p>Der <strong>Header</strong> besteht aus mehreren Hintergründen, wobei im Original (oben) nur wenig Kontrast zwischen Mann und Hintergrund ist.</p> </blockquote> <p>Das kann ja durchaus seinen Charme haben – je nach Kontext. Worauf kommt es an: auf die Umrisse der Person oder die Umrisse des Gesichts?</p> </blockquote> <p>Gute Frage, so habe ich es noch gar nicht geshen!</p> <blockquote> <blockquote> <p>Unten finde ich zu bunt</p> </blockquote> <p>Augenkrebs.</p> <p>Warum sollen es überhaupt Streifen sein? <em>„Schrägstreifen wirken kränklich.“</em> —<a href="https://www.youtube.com/watch?v=MvCNSLzldgY" rel="nofollow noopener noreferrer">Otto</a></p> </blockquote> <p>keine Ahnung. Im Original waren keine Streifen, wsl. haben Matthias Apsel und ich / oder nur ich) die reingetan, weil's eben geht; bzw. um drei Hintergründe zu demonstrieren.</p> <blockquote> <p>Der Gradient bei „violett“ hat doch was Schönes. Warum den nicht überall?</p> </blockquote> <p>Weil ich bis eben nur je einen Farbton hatte. Auch eine accentColor2 hatte ich, entgegen des Original-Entwurfs, „vergessen“.</p> <p>Schaut mal nur den header-<strong>Hintergrund</strong> an - sieht das gut aus? Die Textfarbe würde ich dann später anpassen</p> <blockquote> <p>Bei violett wurde die Hintergrundfarbe für die Ansicht auf schmalen Viewports vergessen? (Fast hätte ich „Mobilansicht“ gesagt. )</p> </blockquote> <p>Ja, da muss <strong>alles</strong> überprüft werden!</p> <blockquote> <p><a href="/images/98a83ba8-188e-11ec-bf3e-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/98a83ba8-188e-11ec-bf3e-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Dass der Farbkontrast für schwarze Schrift nicht ausreicht, ist auch bei „blau“ der Fall.</p> </blockquote> <p>Ja, ich will aber erst mal die Hintergu+´ünde, bzw. evtl einen zweiten Farbton ausgehend von der Akzentfarbe finden, dann reparier ich die Textfarben.</p> <blockquote> <p>Links ist Platz, rechts kleben die Boxen am Rand? Oben darf es auch ein bisschen mehr sein.</p> </blockquote> <p>95% + %5 margin = 105% ? <strong>Gefixt!</strong></p> <blockquote> <p> LLAP</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div>