«
»

Photoshop / CSS : Minimale aber elegante “Under Construction” Seite (Tutorial)

03 Jun 2010

Ärgerlich ist es, wenn man an einer Website arbeitet, die Domain schon bekannt ist und die Besucher noch nichts zu sehen bekommen. Wenigstens eine kurze Information zur entstehenden Site und eventuell eine email-Adresse sollte man bereitstellen.

In diesem Tutorial will ich eine einfache, aber nützliche Baustellenseite mithilfe von Photoshop bauen und diese am Ende in XHTML & CSS konvertieren. Das Resultat am Ende schaut dann so aus:


Falls man schon genau weiß wann der Launch der neuen Site ist, kann man als besonderes Schmankerl einen Countdown einbauen. Für dieses Tutorial nutze ich hierfür ein kleines jQuery Script.

Bauen der Seite in Photoshop

Zunächst einmal beginne ich mit dem Erstellen des Layouts in Photoshop. Ich habe erstmal ein neues Dokument erstellt mit den Dimensionen 1200×800px. Für den Hintergrund habe ich weiß gewählt und für die wenigen Inhalte ein nett anzuschauendes Stück Papier, welches ich mir hier heruntergeladen habe. Diesen Hintergrund habe ich in die Mitte des Screens gepackt.

Um den Effekt eines Notizzettels zu verstärken habe ich nach einer geeigneten Handschrift für den Titel gesucht. Dabei bin ich auf sehr schöne Sammlungen gestoßen. Instantshift.com hat einen umfangreichen Beitrag mit 50 frei herunterladbaren Schriften oder auch WebDesignLedger.com hat einiges an schönen Handschriften zusammengestellt.

Hier bin ich dann auch fündig geworden. Mia’s Scribblings fand ich ganz passend. Heruntergeladen, installiert und zack … benutzt. Für die Schriftgröße habe ich 46px gewählt und den Zeilenabstand auf 50px eingestellt.

Den Schriftzug habe ich dann nochmal ein wenig gedreht, um den Notizzettel-Effekt zu unterstreichen. Anschließend habe ich einen Pfeil mit dem Pinselwerkzeug vom handschriftlichen Titel bis zur Mitte des Zettels gezogen. Da muß man mal ein wenig mit den verschiedenen Pinseln rumprobieren.

Jetzt fehlt noch der eigentliche Info-Text und die Kontaktinformationen. Hier gibt es eigentlich nichts aufregendes zu berichten. Schriftart Helvetica, Schriftgröße 18px, Zeilenabstand 25px. Links die Bezeichner in Fettschrift. Man hätte an dieser Stelle ebenfalls die nette Handschrift verwenden können, aber ich wollte, dass dieser Teil später in reiner HTML-Schrift auf der Webseite steht.

Wie oben bereits erwähnt ist es natürlich eine schöne Idee eine Art Countdown einzubauen, der die Tage, Stunden und Minuten bis zum Launch der eigentlichen Website herunterzählt. Das sollte man natürlich wirklich nur dann machen, wenn ein genauer Termin steht und wenn sichergestellt ist, dass dieser auch 100% eingehalten wird. Sowas ist ja in vielen Fällen nicht immer ganz so vorhersehbar … soll es geben. Ansonsten einfach ein paar Tage drauf geben und zwischendurch nach unten (oder oben) korrigieren.

Auch für dieses Gimmick die selbige Schriftart, nur die Bezeichnung für Tage, Stunde etc. etwas unauffälliger.

Somit ist der Photoshop-Teil schon abgeschlossen. Kurz und schmerzlos. Jetzt muß das ganze noch in XHTML / CSS (& jQuery) konvertiert werden.

Bauen der Seite mit XHTML & CSS

Zunächst einmal das XHTML Grundgerüst:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Under Construction Template</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
	<div id="content">
		<div id="main">
		</div> <!-- END OF main -->
	</div> <!-- END OF content -->
</body>
</html>

Das CSS Grundgerüst wil ich jetzt hier nicht komplett einstellen. Da ich standardmäßig immer einen Reset eingebaut habe, der alles wichtige und unwichtige zurücksetzt. Eine nette Auswahl an CSS-Resets gibt es z.B. hier.

Zunächst einmal die globalen Styles für den body der Seite. Weißer Hintergrund, schwarze Schrift und die Helvetica Schriftfamilie sowie einige Einstellungen zur Schrift.

body {
	background: #fff;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-style: normal;
	line-height: 22px;
}

Jetzt nutze ich das content-Div für den eigentlichen Notizzettel. Ich schneide mir den leeren Zettel in Photoshop aus (Dimensionen: 669px x 653px) und verwende diesen als Hintergrund für das content-Div.

#content {
	width: 669px;
	height: 653px;
	background: transparent url(images/paper_bg.jpg) no-repeat;
}

Als nächstes muß ich natürlich den Notizzettel horizontal und vertikal zentrieren. Dazu lege ich die Positionierung als absolut fest und positioniere den Zettel horizontal auf 50% der gesamten Fensterbreite. Da der Zettel aber nunmal 669px breit ist, muß ich nun um genau die Hälfte dieser Breite zurück gehen.

position: absolute;
left: 50%;
margin-left: -334px;

Ja ... fast die Hälfte, aber einen halben Pixel in die falsche Richtung sieht keiner ... versprochen.

Das gleiche geschieht nun auch vertikal. Um 50% nach unten und um die Hälfte der Höhe des Notizzettel zurück.

top: 50%;
margin-top: -326px;

Somit sieht meine Seite schonmal so aus:

Ganz schön aufregend, oder ? Der nächste Schritt wäre dann das Ausschneiden der handschriftlichen Überschrift inklusive des Pfeils. Das ganze habe ich dann als PNG mit transparentem Hintergrund abgelegt, damit ich alle Freiheiten beim
Positionieren dieses Bildes habe. Das Bild wird nun in das XHTML Dokument eingefügt, da es sich ja nunmal um einen aussagekräftigen Teil des Inhalts handelt. 

<div id="main">
	<img src="images/in_progress.png"
		 alt="Hier wird noch gearbeitet"
		 title="Website ist noch in Arbeit" />
</div> <!-- END OF main -->

Und auch dieses Element werde ich mithilfe der absoluten Positionierung an seinen vorgesehenen Platz setzen. Allerdings wird das Bild relativ zum content-Bereich positioniert und nicht zum body der Seite.

#content #main {
	position: relative;
}
#content #main img {
	position: absolute;
	top: 60px;
	left: 190px;
}

Zack und schon liegt die Überschrift da, wo sie auch liegen soll.

Jetzt fehlen eigentlich nur noch die wichtigen Inhalte: Eine kurze Info zu der zukünftigen Site und eine Kontaktmöglichkeit. Da die Darstellung dieser Inhalte der einer Tabelle entspricht, werde ich auch genau diese hierfür verwenden. Logischerweise gehört auch die in den main-Bereich.

<table>
	<tr>
		<td><strong>Info:<strong></td>
		<td>Hier entsteht gerade der Web-Auftritt der
			WebDesign-Agentur bwiechering.com
			Bitte haben Sie noch ein wenig Geduld.
		</td>
	</tr>
	<tr>
		<td><strong>Kontakt:</strong></td>
		<td><ul>
				<li>info@bwiechering.com</li>
				<li>(04731) 24 70 27</li>
			</ul>
		</td>
	</tr>
</table>

Um die Tabelle an ihre gewünschte Position zu bringen bietet sich ebenfalls eine absolute Positionierung an. Dank des CSS-Resets sind die Tabellen-Rahmen schonmal verschwunden. Bleibt nur noch ein Padding in die Zellen einzubauen und fertig ist die Tabelle.

#content #main table {
	position: absolute;
	top: 300px;
	left: 110px;
	width: 470px;
}
#content #main table td {
	padding: 10px;
}

Somit haben wir eine schöne, elegante und minmale "Under Construction" Seite. Das Ausbügeln von Darstellungsfehler in veralteteten Browsern (transparente PNGs im IE <= Version 6) spare ich mir an dieser Stelle. Würde ich aber beim Einsatz dieser Seite einbauen. Eine Technik, die sich bei mir hierfür bewährt hat ist diese hier. Alles in allem sollte die Seite nun so aussehen:

Ein kleines Extra: Der jQuery Countdown

Das Script für den Countdown ist nicht von mir. Ich habe vor ein paar Tagen, während der Recherche zu diesem Artikel zufällig die Seiten von Keith Wood aus Australien entdeckt. Er hat schon eine Menge jQuery Sachen geschrieben und unter anderem auch diesen Countdown. Dieses Plugin habe ich mir herunter geladen und meine XHTML Datei entsprechend angepasst. Zunächst einmal benötigen wir die jQuery Bibliothek und die Dateien für den Countdown, die ich ins Hauptverzeichnis der Seite abgelegt habe. Glücklicherweise gibt es auch ein Sprach-Addon in deutsch. Auch diese Datei habe ich ins Hauptverzeichnis gelegt. Somit muß ich den Kopfbereich der XHTML Datei wie folgt ergänzen:

<script type="text/javascript"
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<style type="text/css">@import "jquery.countdown.css";
</style>
<script type="text/javascript" src="jquery.countdown.js">
</script>

Diese Zeilen habe ich quasi so von der Website des Countdowns übernommen. Zunächst wird die jQuery-Bibliothek geladen, dann die CSS-Datei für den Countdown und zum Schluss noch die JavaScript Datei des eigentlichen Countdowns.

Als nächstes muss ich mir überlegen, wo der Countdown auf der Seite erscheinen soll. Da brauche ich nicht lange nachzudenken, da ich das ja alles in meinem Photoshop Entwurf geplant hatte. Somit füge ich in die Tabelle mit den Informationen eine weitere Zeile ein und setze dort ein span-Element mit der id="countdown". An dieser Stelle soll später der Countdown erscheinen. 

<tr>
	<td> </td>
	<td>noch <span id="countdown"> </span>
	</td>
</tr>

Der wichtigste Schritt ist nun die countdown-Funktion zu initialisieren. Das geschieht wieder im Kopfbereich der XHTML Datei:

$(function () {
	$('#countdown').countdown({until: new Date(2012, 7-1, 15)});
});
</script>
<script type="text/javascript" src="jquery.countdown-de.js"></script>

Innerhalb der Funktion gebe ich auch das Element ein, wo der Countdown später erscheinen soll. Desweiteren muß ich hier die Endzeit angeben. Also der Zeitpunkt auf den der Countdown hin herunter zählt. Ich habe hier den 15.7.2012 gewählt.
Damit wäre der Countdown einsatzbereit. Am Ende habe noch das deutsche Addon eingefügt.

Innerhalb der CSS-Datei des Countdowns kann ich noch das Aussehen der Zahlen und der Beschriftung ändern. Das habe ich so gemacht, wie es im Photoshop Layout geplant war. Desweiteren habe ich auch den Countdown per absoluter Positionierung an seine Stelle gerückt. Somit komme ich zu folgendem Endresultat:

HIER kann man das ganze nochmal im Demo-Einsatz sehen. Und HIER GIBT ES DEN DOWNLOAD der gesamten Seite inklusive PSD-Datei.

Dieser Eintrag wurde am Donnerstag, 03. Juni 2010 um 18:47 erstellt und ist abgelegt unter CSS, Photoshop, Tutorial, WebDesign, XHTML, jQuery. Mit dem RSS 2.0 Feed kannst du den Antworten zu diesem Artikel folgen. Du kannst eine Antwort hinterlassen, oder einen Trackback von deiner eigenen Seite senden.

4 Antworten zu “Photoshop / CSS : Minimale aber elegante “Under Construction” Seite (Tutorial)”

  1. JWD sagt:
    18. Juni 2010 um 09:27

    Prima Idee und sehr schön umgesetzt!!

  2. Mephistophel sagt:
    25. Juli 2010 um 02:02

    it was very interesting to read.
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  3. Karsten sagt:
    10. November 2010 um 07:38

    Hallo,

    darf man (ich) diese Under Construction Seite auf meinen Domains einfach nutzen?

    Danke und Gruß
    Karsten

  4. admin sagt:
    10. November 2010 um 07:44

    Hallo Karsten,

    ja, gerne. Kannst Du uneingeschränkt benutzen :)

Hinterlasse eine Antwort

Content