fertige Layouts: Design 03

[Matthias Scharwies]

Servus!

Ich sitze grad über Design03 (Disclaimer: Dieses Beispiel ist veraltet und soll überarbeitet werden!)

Als Layout möchte ich hier grid verwenden, da die Seitenelemente in der Desktopansicht flexibel über Spalten und Reihen gehen.

Eine Erklärung gibt's schon:

• Test-Wiki: CSS/fertige_Layouts/Template3

  • Kapitel Responsivität

Für den header brauche ich Ideen und Anregungen:

• Das Banner mit Ribbon möchte ich lassen. Passt das Schwarz mit dem Blau zusammen oder soll man das zusammenfassen?
• Soll die Rastergrafik bleiben?
• Die Rastergrafik unter der Navigation ist sinnlos, kann also weg, oder?

Bitte meldet euch!

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

Passt das Schwarz mit dem Blau zusammen oder soll man das zusammenfassen?

Ich finde das schwarz passt mit dem blau zusammen. Aber das gelb ist ein wenig überraschend!

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hallo,

Passt das Schwarz mit dem Blau zusammen oder soll man das zusammenfassen?

Ich finde das schwarz passt mit dem blau zusammen. Aber das gelb ist ein wenig überraschend!

Ja da muss ich sowieso noch ran.

Ich überlege grad, schwarz und blau zu tauschen. Mal schau'n.

Sagt mal, was ist eure max-width? Mir erscheinen 60em, bzw. früher 960px, auf meinem Tablet als ziemlich schmal. Gerade bei 3 Spalten könnte man da wohl auf 70-75em gehen, oder?

Gruß
Kalk

Herzliche Grüße

Matthias Scharwies

[Henry]

Hallo Matthias,

Für den header brauche ich Ideen und Anregungen:

nicht böse sein... aber meine Anregung wäre komplett ein moderneres Design. Wenn man zb. hier schaut wirken die Designs(alle) hier bei Selfhtml doch eher altbacken.

Nicht falsch verstehen. Ich finde jetzt nicht, nur weil es überall im Netz schon unfassbar viele, schöne, kostenlose Designs gibt, sollte man die Rubrik bei Selfhtml gleich ganz einstampfen. Nein, im Gegenteil. Gerade wenn umfangreiche Tutorials dabei entstehen würden, wäre das super. Nur eben, bitte etwas moderner. 😉

Btw. Einige Downloadlinks funktionieren nicht in der Rubrik.

Gruss
Henry

[Matthias Scharwies]

Servus!

Hallo Matthias,

Für den header brauche ich Ideen und Anregungen:

nicht böse sein... aber meine Anregung wäre komplett ein moderneres Design. Wenn man zb. hier schaut wirken die Designs(alle) hier bei Selfhtml doch eher altbacken.

Solche Single-Page-Websites wirken natürlich schön- und dann mit video im Hintergrund - geil! Trotzdem in dieser Form wohl eher nicht für Anfänger geeignet.

Im Markup dann das:

		<!-- Highlights -->
			<section class="wrapper">
				<div class="inner">
					<header class="special">
						<h2>Sem turpis amet semper</h2>
						<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. ....</p>
					</header>
					<div class="highlights">
						<section>
							<div class="content">

Das sollen unsere Tutorials und auch gerade die Layoutbeispiele zeigen, dass man ohne eine Vielzahl von präsentationsbezogenen divs layouten kann.

Nicht falsch verstehen. Ich finde jetzt nicht, nur weil es überall im Netz schon unfassbar viele, schöne, kostenlose Designs gibt, sollte man die Rubrik bei Selfhtml gleich ganz einstampfen. Nein, im Gegenteil. Gerade wenn umfangreiche Tutorials dabei entstehen würden, wäre das super. Nur eben, bitte etwas moderner. 😉

Ja, Stand ist aber, dass es diesen Wettbewerb gab, der optische Designs vorgab, deren HTML und CSS man jetzt nach 5 Jahren bereits wieder optimieren muss. Entweder einstampfen oder modernisieren. Ich persönlich bin für modernisieren.

Ich sitze grad über Design03 (Disclaimer: Dieses Beispiel ist veraltet und soll überarbeitet werden!)

Btw. Einige Downloadlinks funktionieren nicht in der Rubrik.

Du warst im Test-Wiki unterwegs, in dem wir - na ja - testen.

Im „richtigen“ Wiki gibt es seit einem halben Jahr die Disclaimer, die aber auch nur bewirkt haben, dass wir jeden Tag 3-5 Mails kriegen, mit der Bitte uns dieses oder jenes Design zu schicken. Das ist fast noch schlimmer, dass wir alte Ware nicht nur auf irgendeiner Seite stehen haben, sondern auch noch aktiv versenden. :-(

Fazit: Selfhtml braucht moderne frische Inhalte. Wenn Du so eine Single-Page-Webseite mit SmoothScrolling vorstellen möchtest gerne! Das können wir brauchen!

Ich frische die „alten“ Sachen auf, damit sie zu unseren eigentlich aktuellen Inhalten im Wiki passen.

Das Design03 hatte mehrere Schwächen, die mir (als Anfänger) damals bei der Überarbeitung nicht aufgefallen sind:

• Überschriften blau, dafür Links grau und nicht unterstrichen - von der Zugänglichkeit, bzw Usability ein Albtraum.
• Ähnlich wie im oben zitierten Markup auch zu viele mains, articles und sections, die eigentlich gar nicht nötig waren.
• feste Pixelgrößen bei Layout und auch media queries
• floats und clearfix ohne Ende. Auch wenn MrMurphy1 sagt, dass sie schon bei der Erstellung veraltet waren: 2013 gab es noch IE6-8, sodass Flexbox (richtige Unterstützung erst ab Edge) und SVG noch nicht auf allen Browsern gingen. Jetzt müssen eben ein paar Beispiele mit Flexbox und Grid her - und dann muss auch gezeigt werden, wie ein Fallback für den IE9-11 aussehen könnte.

Ich hoffe, das Beispiel sieht jetzt besser aus. Was mich immer wieder erstaunt, ist, wie wenig CSS man für das grid Layout (hier auch im Kontaktformular) braucht.

Herzliche Grüße

Matthias Scharwies