RE-Design – Enrico Reinsdorf

Heute möchte ich etwas über das verwendete Design schreiben. Da das Projekt Schulungszwecken dient, habe ich mich für ein recht einfaches Design entschieden. Auch muss ich zugeben bin ich nicht der wirkliche Kreative in diesem Bereich.

Screen-Design

Das Design besitzt den klassischen Aufbau eines 2spaltigen Layouts mit einem Kopfbereich und einer Fußzeile. So können alle wichtigen Informationen übersichtlich untergebracht werden.

+------------------------------------+
| Website-Titel                      |
| Slogan                             |
+---------------+--------------------+
| Seitentitel   | Sidebar            |
| Einführung    | +----------------+ |
| +-----------+ | | Navigation     | |
| | Box-Titel | | +----------------+ |
| | Box-Text  | | +----------------+ |
| +-----------+ | | Administration | |
|               | +----------------+ |
+---------------+--------------------+
| Copyright                          |
+------------------------------------+

Reset-Datei

Um die unterschiedlichen CSS-Werte der verschiedenen Browser besser in den Griff zu bekommen, wird als erstes eine Reset-Datei geladen die alle wichtigen Style-Angaben für mich vordefiniert.

1. body, div, dl, dt, dl, ul, ol, li, h1, h2, h3, h4, h5, h6,
2. pre, form, fieldset, input, p, blockoute, th, td {
3. margin:0;
4. padding:0;
5. }
7. h1, h2, h3, h4, h5, h6 {
8. font-size:100%;
9. }
10. ol, ul {
11. list-style:none;
12. }
13. adress, caption, cite, code, dfn, em, strong, th, var {
14. font-style:normal;
15. font-weight:normal;
16. }
17. table {
18. border-collapse:collapse;
19. border-spacing:0;
20. font-size:100%;
21. }
22. fieldset, img {
23. border:0;
24. }
25. caption, th, td {
26. text-align:left;
27. vertical-align: top;
28. }
29. q:before, q:after {
30. content:”;
31. }

Bei umfangreicheren Designs im Webbereich hat sich weiterhin eingebürgert, dass man das Layout der Site vom Design getrennt behandelt. Auch ich habe zwei separate Datei („layout.css“ und „design.css“) dazu erstellt.

Layout-Datei

Als Erstes möchte ich das Layout erklären. Um die Website zu zentrieren, habe ich um den gesamten Inhaltsbereich eine „div“-Container erstellt. Somit kann ich alles gut mittig mit einer Breite von 720 Pixeln platzieren.

1. body {
2. margin: 0;
3. padding: 0;
4. text-align: center;
5. }
6. #page {
7. width: 720px;
8. margin: 0 auto;
9. text-align: left;
10. }

Die Überschriften innerhalb meines Kopfbereichen sind jetzt sehr nah am Rand weswegen ich ihnen etwas Abstand gegeben habe.

1. #branbing {
2. padding: 5px;
3. }

Im Prinzip werde ich jedem „div“-Container diesen Abstand geben. Ich habe ihn bewusst in die Layout-Datei und nicht in die Design-Datei geschrieben, weil er die Breiten der „div“-Container beeinflusst.

Um die zwei Spalten zu platzieren, habe ich beide per „float“-Befehl angeordnet, ihnen Breiten und Abstände gegeben.

1. #content {
2. float: left;
3. width: 500px;
4. margin-right: 10px;
5. padding: 5px;
6. }
7. #sidebar {
8. float: left;
9. width: 190px;
10. padding: 5px;
11. }

Damit der Fußbereich dann auch wieder unterhalb dieses Bereiches weiterläuft, habe ich auch ihn in der Layout-Datei ein paar Werte gegeben.

1. #copyright {
2. clear: both;
3. padding: 5px;
4. }

Zum Schluss habe ich noch den Inhalt der Administrationsbox layoutet. Dabei rücke ich den Code per Tab weiterein je tiefer die Verschachtelung ist.

1. #content .adminBox {
2. font-size: 0.8em;
3. }
4. #content .adminBox p {
5. margin: 0;
6. }
7. #content .adminBox li {
8. display: inline;
9. }
10. #content .adminBox li a {
11. float: left;
12. display: block;
13. }

Design-Datei

Zur Zeit habe ich nur wenige design-technische Änderungen vorgenommen. Als erstes habe ich allgemeinen Definitionen erstellt.

1. body {
2. color: #FFF;
3. background-color: #CCC;
4. font: 14px/1.4em “Trebuchet MS”, Arial, Helvetica, sans-serif;
5. }
7. input:focus, textarea:focus, select:focus {
8. color: #000;
9. background: #fff;
10. border: 1px solid red;
11. }

Div-Page

Der „page“-Container bekommt zusätzlich noch eine kleine Überarbeitung.

1. #page {
2. color: #000;
3. background-color: #FFF;
4. }

Div-Branding

Da in meinem Fall der Kopfbereich nur Angaben über das Projekt enthalten soll besteht dieser nur aus zwei Überschriften.

1. <div id="branding">

2. 	<h1>RE-Design</h1>

3. 	<h2>REDcms Advents</h2>

4. </div>

In der CSS-Datei wird dann folgende Formatierung darauf angewendet:

1. #branding {
2. background-color: #333;
3. color: #FFF;
4. font-family: Georgia,”Time New Roman”, Times, serif;
5. font-style: italic;
6. }
7. #branding h1 {
8. font-size: 3em;
9. line-height: 1em;
10. }
11. #branding h2 {
12. font-size: 1.5em;
13. line-height: 1em;
14. color: #3C0;
15. }

Div-Content

Als nächstes werden alle wichtigen Tags im „content“-Container definiert.

1. #content h2, #content h3, #content h4, #content h5, #content h6 {
2. font-family: Georgia,”Time New Roman”, Times, serif;
3. font-style: italic;
4. line-height: 1em;
5. margin-bottom:0.5em;
6. }
7. #content h2 {
8. font-size: 2em;
9. }
10. #content h3 {
11. font-size: 1.4em;
12. }
13. #content h4 {
14. font-size: 1.2em;
15. }
16. #content h5 {
17. font-size: 1.1em;
18. }
19. #content h6 {
20. font-size: 1em;
21. }
22. #content p {
23. margin-bottom: 1em;
24. text-align: justify;
25. }

Zusätzlich werden noch die Listen der Metaangaben gestylt.

1. #content ul.meta {
2. font-size: 0.8em;
3. }
4. #content ul.meta li {
5. margin-bottom: 0.5em;
6. }

Auch die angezeigten Formulare sind nicht von der Überarbeitung durch das Design-CSS verschont geblieben.

1. #content .add fieldset {
2. border: 1px solid #333;
3. padding: 5px;
4. margin-bottom: 1em;
5. }
6. #content .add legend {
7. border: 1px solid #333;
8. background-color: #CCC;
9. padding: 0 1em;
10. }
11. #content .add label {
12. font-size: 0.8em;
13. }
14. #content .add label.before {
15. display: block;
16. }
17. #content .add input,
18. #content .add textarea {
19. width: 470px;
20. font-family: sans-serif;
21. font-size: 1em;
22. padding: 5px;
23. }
24. #content .add option:hover {
25. background-color: #CCC;
26. }

Div-Sidebar

Da in der Sidebar mehrere Boxen existieren können, habe ich als erstes grundlegende Einstellungen vorgenommen.

1. #sidebar .box {
2. border:1px solid;
3. margin-bottom: 1em;
4. }
5. #sidebar .box h4 {
6. background-color:#333;
7. color: #FFF;
8. text-align: center;
9. margin-bottom: 0.2em;
10. }

Für die Navigation gab es dann noch separate Einstellungen.

1. #sidebar #navigation {
2. }
3. #sidebar #navigation ul {
4. margin: 5px 5px 1em 5px;
5. }
6. #sidebar #navigation ul ul {
7. margin: 0 0 0 1.5em;
8. }

Ebenso für den Login bzw. das Logout und die Box „über mich“.

1. #sidebar #login {
2. }
3. #sidebar #login p {
4. font-size: 0.8em;
5. margin: 5px;
6. }
7. #sidebar #login legend {
8. font-style: italic;
9. margin: 0;
10. padding: 0;
11. text-transform: uppercase;
12. }
13. #sidebar #login strong {
14. font-weight: bold;
15. text-transform: uppercase;
16. }
17. #sidebar #login ul {
18. margin: 5px;
19. }
20. #sidebar #login a {
21. padding-left: 20px;
22. }
23. #sidebar #login .page {
24. background: transparent url(“/REDcms/templates/images/icons/page.png”) no-repeat;
25. }
26. #sidebar #login .box {
27. background: transparent url(“/REDcms/templates/images/icons/box.png”) no-repeat;
28. border: none;
29. }
30. #sidebar #login .menu {
31. background: transparent url(“/REDcms/templates/images/icons/menu.png”) no-repeat;
32. }
33. #sidebar #about_us {
34. }
35. #sidebar #about_us p {
36. font-size: 0.8em;
37. margin: 5px;
38. }

Div-Footer

Was noch fehlt, ist der Fußbereich. Hier sind nur die Farben geändert worden.

1. #copyright {
2. background-color: #333;
3. color: #FFF;
4. }
5. #copyright a {
6. color: #FFF;
7. }

Div-Debug

Eine kleine Besonderheit habe ich meinen Debugging gegeben. Jedes mal wenn die allgemeine Funktion „code()“ aufrufe, erzeuge ich eine „div“-Container mit der Klasse „debug“.

1. function code($msg, $code=HTML_CODE)
2. {
3. $msg = print_r($msg, true);
5. if($code == HTML_CODE)
6. {
7. $msg = htmlentities($msg);
8. }
10. echo ‘<div class=”debug”><pre>’.$msg.‘</pre></div>’;
11. }

Zusätzlich designe ich per CSS das dieser Container über allem anderen angezeigt werden soll. Somit sehen ich ihn immer.

1. .debug {
2. position:absolute;
3. width: 300px;
4. height: 400px;
5. overflow: auto;
6. text-align: left;
7. padding: 5px;
8. color: #FFF;
9. background-color: #300;
10. border: 1px solid #000;
11. }

Print-Design

Eigentlich wollte ich eine spezielle Druckversion per CSS für die Ausgabe erstellen – doch leider fehlte mir dafür die Zeit. Da sie aber auch schon auf meiner ToDo-Liste steht, wird sie bestimmt im nächsten Release vorhanden sein.

Ich hoffe ihr habt Verständnis dafür.

Downloads

• REDcms_16.zip
• Layout.txt

Ich wollte heute eigentlich einen Artikel über die Möglichkeiten von CSS 3 schreiben. Aber leider sind die interessanten Thema nicht mit den Windows Browsern behandelbar. Egal ob ich nun Firefox 2.0.0.11, Internet Explorer 7.0.6000, Opera 9.23, Flock 1.0.3 oder Safari 3.0.4 benutze. Fast alle zeigen nichts an. Einzig der Safari hat mir multiple Hintergründe angezeigt.

Was ich hier vorstellen wollte, waren neben die Hintergründen das Spaltensystem und die Zusätzlichen Möglichkeiten von Rahmen. All diese Dinge funktionierten überhaupt noch nicht. Eigentlich sehr schade, denn dadurch wären viel Umstände im Designen von Websites Geschichte.

Immer wieder werden ähnlich bzw. gleiche Layouts beim Webdesign gebraucht. Ich habe einmal versucht eine relative einfaches Framework zur schnellen Erzeugung von verschiedenen Layouts zu erstellen.

Um die Verwaltung des Framework einfach zu halten, habe ich mich dazu entschlossen die CSS-Dateien aufzuteilen. In der HTML-Datei existieren zwar nur 3 relative Verlinkungen zu den jeweiligen Ausgabedesigns, aber für jedes Design sind dann weitere 3 Dateien zuständig. Um die Designs flexibel administrieren zu können, benutze ich eine Layout-Datei für die Positionierung der Boxen, eine Color-Datei für die Farbgebung und eine Typographie-Datei für die Texteinstellung.

Diesen Beitrag weiterlesen »

Websites sollten sich immer dem Benutzer anpassen, so zumindest steht es in vielen Dokumentationen über Benutzerfreundlichkeiten. Aber was ist damit eigentlich gemeint? Welche Anpassung braucht der Benutzer bzw. will er überhaupt haben? Welche ist die Richtige?

Die einfachste Lösung ein Layout für die Website zu erstellen ist mit festen Größenangaben zu arbeiten. Sie ist aber auch am Unflexibelsten, denn das Layout kann sich dann nicht den Bedürfnissen des Betrachters anpassen. Viele heutige Design haben als Maßeinheit für ihr Layout Pixel. Der große Vorteil liegt in der genauen Platzierung von Elementen, wie z.B. Spalten oder aber auch Designelemente wie Hintergrundbilder. Der große Nachteil liegt aber auch gerade in diesen festen Größenangaben. Und hier setzen die flexiblen Design an.

Diesen Beitrag weiterlesen »

Fast jeder kennt wohl das Problem nichts mehr zu finden wenn es nicht richtig beschriftet wurde. Auch ich suche immer wieder nach den verschiedensten Dinge und das nicht nur im Web oder auf meinen Schreibtisch, sondern auch im gesamten Büro. Aber darum soll es in diesem Artikel nicht gehen. Viel mehr möchte ich mal kurz meine Gedanken über die sinnvolle Benennung von Containern beim Layouten los werden.

Eine sinnvolle und immer wiederkehrende Beschriftung von Container man natürlich nicht nur beim Arbeiten in einem Team, sondern bringt auch für einen selbst mehr Sicherheit. Dabei sollte immer darauf geachtet werden den HTML-Code nicht unnötig aufzublähen. Gerade im mobilen Web sind kline Datenmengen Gold wert.

Diesen Beitrag weiterlesen »

Letzte Woche hatte ich ein Seminar zum Thema CSS und eins über Dreamweaver gehalten. Es waren Teilnehmer sowohl von Roche Diagnostics als auch von Landessport Bund dabei, die mittels CMS die Inhalte ihrer Website betreuen. In diesen Seminaren kam die Frage nach einen flexiblen System zum Erzeugen eines CSS gesteuerten Layouts auf.

Nach ein paar Überlegungen kamen wir dann auf die Teilung des CSS-Designs in 4 Dateien:

• basic.css
• 2column.css
• 3column.css
• content.css

Diesen Beitrag weiterlesen »