charakterziffer.github.io/blogdesign-3.html at master · charakterziffer/charakterziffer.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
      Hallo Fremde:r,

      schön, dass du dich umschaust! Falls du Fragen hast oder wissen
      möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
      schreib doch einfach an postfach2b [ät] web.de oder sende einen
      Post an @charakterziffer@typo.social.

      Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>@cz+ grafisch überarbeitet // @cz+</title>

<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">

<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">

<meta name="description" content="Nach drei Jahren ist mir die Gestaltung meines Blog @cz+ zu eng geworden. Nun kommt es im großzügigeren Design daher.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="fediverse:creator" content="charakterziffer@typo.social" />
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">

<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">

<style> /* QR-Code mit URL für Ausdrucke, siehe https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/#print-qr-codes-for-easy-url-references */
@media print { header:after { content: ""; width: 110px; height: 110px;
background-image: url('https://quickchart.io/qr?text=https://charakterziffer.github.io/blogdesign-3.html'); background-size: 110px;
position: absolute; right: .7em; top: 1em;
z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>

<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>

<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<search><form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="search" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form></search>
<nav class="no-hyphens no-print"><ul>
	<li><a href="/archiv.html">Archiv</a></li>
	<li><a href="/extra/index.html">Extra</a></li>
	<li><a href="/rss.xml">RSS</a></li>
	<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>

<main>
<article>
<time datetime="2017-04-11">Di, 11. Apr. 2017</time>
<h1>@cz+ grafisch überarbeitet</h1>
<p>Gut drei Jahre ist es her, dass mein kleines Blog hier ein neues Gewand bekommen hat. Und so langsam hatte ich mich daran satt gesehen: Zu dominanter Hintergrund, zu gewöhnliche Schriftmischung, irgendwie zu beengt. Gründe genug für eine Überarbeitung. Im Gegensatz zur <a href="neues-blogdesign.html">letzten Umgestaltung</a> hat sich technisch nicht viel verändert. Diesmal habe ich den Schwerpunkt auf die optische Erscheinung gelegt.</p>

<p>Das vorige Design ist mir mit der Zeit zu eng geworden. Mir gefällt der grüne Hintergrund noch immer sehr gut, zumal größere, farbkräftige Flächen im Internet eher ungewöhnlich sind. Zunehmend hatte ich aber den Eindruck, die grüne Fläche ist so stark, dass sie den Inhalt nicht nur rahmt, sondern regelrecht einsperrt und klein hält.</p>

<p><img src="material/bis2020/blogdesign-2.jpg" alt="mein Blog bis März 2017" /></p>

<h2 id="raum-für-texte">Raum für Texte</h2>

<p>Ich wollte dem Text mehr Platz verschaffen. Deshalb habe ich als erstes die Schrift von 1<small> </small>em (16px/12pt) auf 1,1<small> </small>em (17,6px/13,2pt) vergrößert, so lässt es sich auch bequemer lesen. Folglich ergaben sich eine breitere Textspalte und ein größerer Zeilenabstand.</p>

<p>Ob ich die graue Randspalte erhalten soll, darüber war ich mir lange Zeit unschlüssig. Sie stört, wenn ich ein eher minimales Design haben möchte, das sich auf den eigentlichen Text fokussiert. Andererseits gefällt mir der einladende Kurztext und er dient auch der Navigation ins Archiv oder zum RSS-Feed. Also habe ich ihn als durchscheinenden Kasten auf die rechte Seite gesetzt. Wird das Browserfenster schmaler, verschwindet der Kasten nach unten und stattdessen erscheint rechts oben ein reduziertes Menü zu den wichtigsten Bereichen meines Blogs.</p>

<h2 id="eigenständiges-design">Eigenständiges Design</h2>

<p>Wenn man Gestaltungselemente reduziert oder abschwächt, besteht leicht die Gefahr, dass sich eine Website grafisch wenig von anderen unterscheidet und im Einheitsbrei untergeht. Ich wollte die charakteristischen Merkmale zwar zurückhaltend einsetzen, sie im Gegenzug aber möglichst einzigartig gestalten. Neben meinem Logo oben links lasse ich deshalb die Farbe Grün als Streifen am rechten Rand wieder auftauchen. Ja, ich weiß, <a href="https://duckduckgo.com/?q=triangle+pattern&amp;ia=images&amp;iax=1">Triangle Patterns</a> liegen jetzt schon seit über drei Jahren im Trend und werden ihren Zenit sicher bald überschritten haben. Trotzdem: Ich fand es einfach zu reizvoll, mir wie im vorigen Design ein kristallines Muster zu basteln. Die Besonderheit diesmal: Es besteht nicht aus einer Bilddatei, sondern wurde <a href="css-muster.html">per CSS aus vier Farbverläufen</a> zusammengesetzt.</p>

<p><img src="material/bis2020/blogdesign-2-zu-3.jpg" alt="Vergleich von Überschriften und Randspalte" /></p>

<p>Weitaus einmaliger ist die Schriftart, die ich nun für Überschriften und Links verwende. Ich wollte mich ja schon länger von der <em>Bitter</em> verabschieden, auch weil sie in Kombination mit meiner Textschrift <em>Source Sans Pro</em> dank eines <a href="https://wordpress.org/themes/twentythirteen/">populären WordPress-Themes</a> recht verbreitet ist. Um mich von anderen Websites abzugrenzen, verwende ich nun die <em>czSlab</em>, die ich selbst extra für dieses Blog gestaltet habe. Sie ist stark von Yanone’s genialer <a href="https://www.yanone.de/fonts/antithesis/">Antithesis</a> inspiriert, ist dabei aber etwas schmaler, fetter, angepasster und hat eine geringere x-Höhe.</p>

<p>Vom neuen Design erhoffe ich mir, dass es großzügiger, offener und leichter wirkt als sein Vorgänger. Wem die jetzige Schrift übrigens zu groß sein sollte, der kann die Zoom-Funktion seines Browsers nutzen und den Text mit der Tastenkombination <kbd>Strg</kbd> + <kbd>-</kbd> verkleinern (zurücksetzen dann mit <kbd>Strg</kbd> + <kbd>0</kbd>).</p>

<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i>&nbsp; <a href="archiv.html?ansporn">#ansporn</a>&nbsp; <a href="archiv.html?kritik">#kritik</a>&nbsp;</p>
</article>
<section id="kommentare">
	<h2>3 Kommentare</h2>

	<time datetime="2017-04-11 09:32">11.4.2017, 9:32 Uhr</time>
	<h3 id="k1"><a href="#k1" style="color:inherit;">#1</a>
	<a href="https://www.isoglosse.de/">Christopher Bergmann</a>
	</h3>
	<p>Sieht gut aus – aber die Ausrichtung am linken Rand widerspricht meinen Sehgewohnheiten auf eine Weise, die ich nicht allzu angenehm finde. (<a href="https://twitter.com/isoglosse/status/851699498493636608">via Twitter</a>)<br> &amp;<br> Ja, auf dem Handy macht es natürlich keinen Unterschied. Auf dem Desktop empfinde ich es spontan eher als Lesehindernis. (<a href="https://twitter.com/isoglosse/status/851701145282244608">via Twitter</a>)</p>
	<hr>
	<time datetime="2017-04-11 09:38">11.4.2017, 9:38 Uhr</time>
	<h3 id="k2"><span class="hinterlegt"><a href="#k2" style="color:inherit;">#2</a>
	<a href="https://charakterziffer.github.io">Gerhard Großmann</a>
	</span></h3>
	<p>Danke! Ja, die Ausrichtung ist ungewohnt – vor allem für Vollbildsurfer. Bin mir selbst noch unschlüssig, wie ich das finde :-) (<a href="https://twitter.com/charakterziffer/status/851700789638815745">via Twitter</a>)<br> &amp;<br> Möchte der Linksbündigkeit Zeit geben (einst sehr üblich), denke noch darüber nach. Evtl. interessant: <a href="https://praegnanz.de/weblog/2017/beyond-1280">praegnanz.de/weblog/beyond-1280</a> (<a href="https://twitter.com/charakterziffer/status/851703620223598592">via Twitter</a>)</p>
	<hr>
	<time datetime="2018-03-11 13:29">11.3.2018, 13:29 Uhr</time>
	<h3 id="k3"><span class="hinterlegt"><a href="#k3" style="color:inherit;">#3</a>
	<a href="https://charakterziffer.github.io">Gerhard Großmann</a>
	</span></h3>
	<p>Nach fast einem Jahr dazu ein kleines Update: Mein Blog ist zwar immer noch linksbündig ausgerichtet, allerdings verschiebe ich auf sehr breiten Bildschirmen die Textspalte nun um 20 Prozent nach rechts. Dadurch sind die Ränder links und rechts ein bisschen ausgewogener.</p>
	<hr></section>

<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>

<form name="kommentarformular" id="kommentarformular" method="post"  action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/blogdesign-3">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="4">

<div>
	<label for="name">Name</label>
	<div><input name="&#10;name" id="name" type="text" size="25" spellcheck="false">
	&nbsp;<i>(Pseudonym möglich)</i></div>
	<!-- &#10; fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
	<label for="mail">E-Mail</label>
	<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
	&nbsp;<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
	<label for="link">Website</label>
	<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
	<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
	<label for="comment">Kommentar</label><br>
	<textarea name="comment" id="comment" required spellcheck="true"></textarea>
</div>
<input type="hidden" name="&#10;---&#10;Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>

<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small>&nbsp;</small>B. &lt;em&gt;<em>betont</em>&lt;/em&gt;, &lt;strong&gt;<strong>hervor&shy;gehoben</strong>&lt;/strong&gt; oder &lt;code&gt;<code>Quelltext</code>&lt;/code&gt;. Außerdem Verlinkungen (&lt;a href="http://verlinkte-website.de"&gt;Linktext&lt;/a&gt;) und Bilder (&lt;img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung"&gt;).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="textbleibe.html">← Wo Texte eine Bleibe finden</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="fuchs-7.html">Vorgaben hinter sich lassen →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>

<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen&shy;fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres&shy;sum/Daten&shy;schutz</a>)</span>. Über Fragen, Kritik und Anmer&shy;kungen freue ich mich sehr – z.<small>&nbsp;</small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto&shy;don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt&shy;lich über neue Artikel. Alle bis&shy;herigen Ein&shy;träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea&shy;tive-Commons-Lizenz 4.0 (Deutsch&shy;land)</a> mit Namens&shy;nennung und Weiter&shy;gabe unter gleichen Bedin&shy;gungen.</p>
</aside>

<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>