Kategorien
Webdesign

Was ist eine Landing Page?

Die Idee leuchtet ein, sie wird jedoch nicht immer und nicht immer korrekt umgesetzt. Wer Online Werbung schaltet, in Newslettern inseriert, Beiträge tauscht oder Suchmaschinen-Optimierung betreibt, braucht eine speziell darauf zugeschnittene Seite, die den Besucher empfängt.

Diese so genannte „Landing Page“ wird exakt auf das ausgerichtet, was eine Anzeige in Aussicht stellt. Das betrifft sowohl den Inhalt, als auch die Gestaltung. Alles, was damit nicht unmittelbar zu tun hat, wird weggelassen. Man konzentriert sich ausschließlich auf das Angebot und spricht den Besucher direkt an, schließlich weiß man genau, woher er kam.

Die Landing Page ist daher niemals die Startseite. Wer darauf verzichtet, beeinträchtigt seine „Conversion Rate“. Das heißt die „Landing Page“ hat zwar keine Auswirkungen drauf, wie oft sie aufgerufen wird, gut gemacht, wird sie jedoch zu einem erhöhten Bestellaufkommen führen.

Selbst wer allgemein für seine Website, seine Firma, seine Produkte wirbt, sollte darauf nicht verzichten und seine Besucher als Gäste von … so individuell wie möglich empfangen.

Kategorien
Design HTML/CSS

Doppelt hält besser

Hyperlinks sind entweder unterstrichen oder sie sind es nicht. Warum nicht einmal die doppelte Unterstreichung probieren? Das fällt mehr auf, und technisch ist das ganz einfach.

 A:link {
    color: black;
    text-decoration : underline;
    border-bottom : 1px solid black; }

Das genügt auch schon. Die zusätzliche Unterstreichung mit border-bottom sorgt für das ungewöhnliche Doppel.

Screenshot

Doppelte Unterstreichung

Wer mag, kann natürlich auch zwei verschiedene Farben einsetzen.

      A:link {
    color: black;
    text-decoration : underline;
    border-bottom : 1px solid green; }

Screenshot

Doppelte Unterstreichung zweifarbig

Ein Hover-Effekt, bei dem die Unterstreichung verschwindet, ist trotzdem möglich:

      A:hover {
    color: #cc3333;
    text-decoration : none;
    border-bottom : 0px solid black; }

Alte Browser zeigen den Effekt nicht, sie bleiben bei der herkömmlichen Darstellungsweise.

Dieser Effekt wird inzwischen eingesetzt, um damit Werbelinks in Fließtexten unterzubringen. So unterschiedet man Werbelinks von normalen Hyperlinks. Mehr darüber im Artikel: Die Farbe des Geldes: Werbung im Fließtext.

+
Werbung als Hyperlink mit doppelter Unterstreichung

Kategorien
Design HTML/CSS

Formular-Idee

Formulare waren schon immer sehr viel wandlungsfähiger, als man auf den ersten Blick vermuten könnte. In diesem Fall ist ein Teil der Botschaft bereits vorgegeben.

Anstatt über ein Auswahlmenü, schreibt der Benutzer seine Daten in ein Eingabefeld und nimmt auf diese Weise eine Auswahl vor.

Mittels CSS lässt sich das typische Inputfeld quasi ausradieren. Viele Varianten sind möglich.

Hier Anzahl eintragen

Hier Anzahl eintragen

Hier Anzahl eintragen

Quellcode

 <form>

 <p><b>Hier
Anzahl eintragen</b><p>

 <input type="text" name="textfield"
value="(1)...............(2)..............(3).............." size="30"></p>
      <p><b>Hier
Anzahl eintragen</b><p>

 <input style="border : 1px solid
silver;background-color : whitesmoke" type="text" name="textfield"
value="(1)...............(2)..............(3).............." size="30">
      <p><b>Hier
Anzahl eintragen</b></p>

 <input style="border : 0px solid
silver;background-color : yellow" type="text" name="textfield"
value="(1)...............(2)..............(3).............." size="30">

</form>

Kategorien
Webdesign

Schrifttipps

Lust auf neue Pixelfonts? Cal Henderson hat noch ein paar übrig… Darunter „Hellovetica“ und die pixelige Schreibschrift „Handy“.

Fun with Fonts macht wirklich Spaß. Es werden einige interessante Bespiele in Sachen Typographie gezeigt. Unter „Info“ findet sich jeweils eine fachliche Erläuterung.

Screenshot

Je kleiner die Schrift, desto cooler die Website. Scheint so, stimmt aber nicht. Doch Menüelemente und Buttons brauchen kleine Schriften. Mit gängigen Fonts kommt man da meist nicht weit, denn die Ergebnisse überzeugen nicht. Auch Flashkünstler stehen auf Miniaturen.

Einen wirklich umfassenden Schriftvergleich hat sich Owen Briggs geleistet. Es geht darum, welche Schrift unter welchen Bedingungen mit welchem Browser wie ausschaut. Denn bekanntermaßen gibt es hie und da beträchtliche Unterschiede. Gut, das einmal im Überblick zu haben.

Einen neuen Fonttester hat Xiap im Angebot. Verschiedene Größen und Schnitte tauchen direkt untereinander. Vorhanden sind gängige Schriften für das Web.

Screenshot

Kategorien
Design HTML/CSS

Font-Tags ausradieren

Wer seine Webseiten in Helvetica oder Verdana formatieren will oder muss, kommt um unzählige Font Tags nicht herum. Die aber machen den Quellcode unübersichtlich und verdoppeln unter Umständen die Ladezeit eines Dokuments. Externe Style-Sheets sind eine Alternative. Doch gilt es einige Klippen zu umschiffen.

Vor allem der inzwischen recht veraltete Netscape 4.x macht die Reinigungsaktion zu einem wackeligen Unterfangen – sofern man auf ihn Rücksicht nehmen will. Es geht aber doch. Definieren Sie für Absätze <P> sowie Tabellenspalten und -Zeilen jeweils dieselbe Formatierung.

 P { font-family :
Arial,Helvetia,sans-serif; font-size : 10pt;} 

 TD { font-family : Arial,Helvetia,sans-serif;
font-size : 10pt;} 

 TR { font-family : Arial,Helvetia,sans-serif; font-size
: 10pt;} 

Das veranlasst sowohl Internet Explorer als auch Netscape sämtlichen Text in einer serifenlosen Schriftart anzuzeigen. Und zwar in der hier definierten Größe von 10 Punkt. Sie können auch alles in eine Zeile schreiben:

      p,td,tr { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}

Zu Problemen kommt es, wenn Sie verschiedene Schriftgrößen einsetzen möchten. Denn die Formatierung size=“1″ funktioniert jetzt nur noch im Microsoft Browser. Netscape erzwingt überall 10 Punkt, egal was sonst noch im Quellcode steht. Dies läßt sich umgehen, indem Sie jedem anders zu formatieren Bereich eine eigene Styleanweisung (class) definieren.

      .klein { font-size
: 8pt; } 

Im HTML Code sieht das dann so aus.

      <p
class="klein">Kleiner Text</p> 

Das gilt auch, wenn Sie zum Beispiel Blocksatz erzwingen wollen. Denn was für Fließtext sinnvoll ist, ist es bei Überschriften nicht unbedingt. Auch hier muss mit einer zusätzlichen Definition gearbeitet werden, um einen Textbereich linksbündig oder mittig auszurichten.

Das Gute daran. Alles was in ein externes Style Sheet ausgelagert wurde, lässt sich flink ändern. Sie können mit einem Handgriff den Blocksatz für die gesamte Web-Site aufheben, die Schriftfarbe, den Zeilenabstand oder die Größe ganzer Passagen oder Teile davon ändern.

Ganz auszuschließen sind Probleme allerdings nicht. Der IE3 ist in Sachen CSS recht unterbelichtet, glücklicherweise ist er nur noch selten anzutreffen. Vom Communicator gibt es inzwischen so viele Versionen, dass Testen keinen Sinn mehr macht. Manchmal klappt es nicht, wenn mehrere Anweisungen hintereinander stehen, dann hilft nur noch probieren. Eine praktikable Lösung läßt sich aber meist finden.

Kategorien
Webdesign

Drehcursor

Javascript ist für die seltsamsten Dinge gut. Sogar der Mauszeiger lässt sich manipulieren. Der Trick ist eigentlich simpel, die verschiedenen Cursor-Varianten wie nw-resize,w-resize und so weiter wechseln sich ständig ab, so dass der Eindruck eines sich bewegenden Objekts entsteht.

Hier das Live Beispiel

Und der Quellcode für eine komplette Seite:

 <html>

<head><title>Drehcursor</title>
 <script language="Javascript">

var count=1;
 function maus()
 {
 if(count==8)
 {
 document.all.cursor.style.cursor
= 'nw-resize';
 count=1;
 }
 if(count==7)
 {
 document.all.cursor.style.cursor
= 'w-resize';
 count++;
 }
 if(count==6)
 {
 document.all.cursor.style.cursor
= 'sw-resize';
 count++;
 }
 if(count==5)
 {
 document.all.cursor.style.cursor
= 's-resize';
 count++;
 }
 if(count==4)
 {
 document.all.cursor.style.cursor
= 'se-resize';
 count++;
 }
 if(count==3)
 {
 document.all.cursor.style.cursor
= 'e-resize';
 count++;
 }
 if(count==2)
 {
 document.all.cursor.style.cursor
= 'ne-resize';
 count++;
 }
 if(count==1)
 {
 document.all.cursor.style.cursor
= 'n-resize';
 count++;
 }
      }
 window.setInterval("maus()",100);
      </script>

</head>
 <body id="cursor">
 </body>
 </html>

Kategorien
Webdesign

Graufilter rückwärts

Jeder kennt ihn, den Microsoft Filter gray(): Er wird nämlich bei Dr. Web benutzt, um die Grafiken bei Mausberührung ergrauen zu lassen. Das Ganze geht aber auch rückwärts, so dass die Bilder erst bei Berührung in vollem Glanz erstrahlen.

In der Theorie ja, in der Praxis aber nur selten. Grund: von den derzeitigen Browsern beherrscht nur Mozilla/Netscape das „hovern“ korrekt. Alle anderen sollten mit den kommenden Versionen nachziehen.

Live-Demo

Zuerst erstellen wir die beiden Style Sheet Klassen .active und .inactive:

 .active
{filter: chroma();}
 .inactive {filter: gray();}

Die Klasse .active wird später mit JavaScript bei Mausberührung zugewiesen. Der Microsoft-Filter chroma() sorgt eigentlich dafür, dass eine Farbe des Bildes transparent wird. Hier wird er ohne Parameter aufgerufen und hebt nur den Filter gray() auf.

In der Klasse .inactive wird über den Grau-Filter angegeben, dass alle Bilder oder Seitenelemente dieser Klasse grau sind und nicht in den eigentlichen Farben angezeigt werden.

Mit Javascript werden ebenfalls die Funktionen aktiv() und inaktiv() erstellt. Sie weisen dem Element die entsprechende Style Sheet Klasse – .active oder .inactive – zu:

      <script language="javascript">

function aktiv() { event.srcElement.className='active'; }
 function inaktiv()
{ event.srcElement.className='inactive'; }
 </script>

Und hier das Bild, das per onmouseover und onmouseout die JavaScript-Funktionen aufruft. Es wird per default der Klasse „inactive“ zugewiesen, die JavaScript-Funktion aktiv() kehrt das Ganze ins Gegenteil um.

      <A HREF="#"><IMG
CLASS="inactive" SRC="bild1.gif" BORDER="0" onmouseover="aktiv()"
onmouseout="inaktiv()"></A>

Kategorien
Webdesign

Sofortdruck

Wenn Formulare, Verträge oder wichtige Dokumente bereitgestellt werden, muss der Besucher diese noch ausdrucken. Mit ein wenig Javascript kommt man ihm entgegen.

Gleich nach dem Laden der Seite öffnet sich eine Dialogbox, die den Besucher zum Ausdrucken der Seite auffordert. Ein schnöder Hinweis ist uns allerdings nicht genug: Nach Klick auf OK wird der Druck-Dialog geöffnet.

Screenshot
Damit niemand das Drucken vergisst

Zehn Zeilen Javascript genügen. Der Text kann individuell angepasst werden. „Schrägstrich n“ sorgt für einen Zeilenumbruch.

 <SCRIPT LANGUAGE="JavaScript">

<!-- Begin
 function printPage() {
 if (window.print) {
 agree = confirm('Ein
Klick auf OK genügt \nund die Seite wird ausgedruckt. \n\nBereit?');

if (agree) window.print();
 }
 }
 // End -->
 </script>

Eine kleine Ergänzung für den <Body>-Tag ist nötig, damit das Script gleich beim Laden der Seite automatisch ausgeführt wird.

      <body
OnLoad="printPage()"> 

Live Demo

Kategorien
Webdesign

Trickkiste – Aufruf in fremden Frameset verhindern

Mit diesem Script können Sie sich aus einem Framesets befreien.

Fügen Sie die Funktion immer dann ein, wenn es zum Beispiel erforderlich ist ein neues Frameset aufzubauen oder wenn Sie nicht möchten, dass bestimmte Seiten in fremden Framesets aufgerufen werden.

Kopieren Sie folgende Zeilen und fügen Sie diese zwischen <head> und </head> Ihrer HTML-Datei ein. Der hier fett dargestellte Teil kann, je nach Anwendung – auf die Framesetdatei (index.html) oder die jeweilige Einzelseite verweisen.

 <script
language="JavaScript">
 if (self.parent.frames.length != 0)

self.parent.location="ihrlink.html";
 </script>

Kategorien
Webdesign

Trickkiste – Email Adresse schützen

Eine codierte Adresse bietet Schutz vor automatischen Email-Sammlern. Das sind Software Programme, die den Spidern von Suchmaschinen gleich, das Web durchstreifen und sich alle Adressen einverleiben derer sie habhaft werden.

Ihren Namen und die passende Domain müssen Sie innerhalb der fett gedruckten Passagen verändern. Platzieren können Sie den Code überall dort, wo Sie ihn benötigen. Im Browser wird eine ganz gewöhnliche Email-Adresse dargestellt, die jedoch für die Spider unsichtbar ist. Das reduziert langfristig das Aufkommen unerwünschter Post.

 <script language="JavaScript"><!--

var name = "protected";
 var domain = "domain.de";

document.write('<a href=\"mailto:' + name + '@' + domain + '\">');

document.write(name + '@' + domain + '</a>');
 // --></script>

Kategorien
Webdesign

Im gleichen oder im neuen Fenster?

Die Geister scheiden sich daran, wie denn nun ein Link am besten geöffnet werden soll. Die einen schätzen ein neues Fenster, um die alte Ansicht nicht zu verlieren. Andere hassen das vielseitige Fenstergewirr. Wenn das so ist, dann lassen Sie Ihre Besucher doch selbst die Wahl treffen.

Eine Checkbox wird gut sichtbar platziert. Wird sie aktiviert, öffnen sich fortan alle Links einer Website in einem neuen Fenster. Einfach aktivieren und hier einmal ausprobieren.

Externe Links in neuem Fenster öffnen?

Ein kleines Javascript entscheidet je nach getroffener Wahl, ob sich ein neues Fenster öffnet oder nicht. Somit eignet sich der Code sehr gut für große Portalseiten und Linklisten.

Der Code für die Checkbox:

 <form>

<input type="checkbox" onclick="linkopener(this.checked)"
id="linksnewwin">
 Externe Links in neuem Fenster öffnen?

</form>

Und das Javascript. Hier muss in der vorletzten Zeile statt drweb.de Ihre Domain stehen, damit interne Links erkannt werden:

       <script language="javascript">
 function linkopener(a)
{
 var b=a?"_blank":"_self";
 var c=document.links;

for(var i=0;i<c.length;i++) {if(c[i].href.search("drweb.de")==-1)
c[i].target=b};
 }
 </script> 

Kategorien
Webdesign

Trickkiste – MSIE Crawler draußenhalten

Der Internet Explorer bietet an, Seiten für den Offline Gebrauch verfügbar zu machen. Das kann praktisch sein, ärgert aber auch so manchen Webmaster.

Denn der Browser crawlt sich auch schon mal durch hunderte von Seiten. „MSIECrawler“ ist nicht selten der häufigste Eintrag in den Logfiles. Glücklicherweise hält er sich an die Robots-Spezifikation. Ein Eintrag in die Datei robots.txt genügt deshalb, um den neugierigen Explorer von seinem gierigen Tun abzuhalten.

 User-Agent:MSIECrawler
Disallow: /

Wer eine solche Datei nicht hat, sollte sich darum kümmern. Suchmaschinen mögen das.

Seiten Offline verfügbar zu machen, funktioniert am besten über die Favoritenliste. Ein Rechtsklick öffnet einen Assistenten. Dieser erlaubt ein Abgleichen von Websites bis zu drei Ebenen tief. Wer will kann sich dafür sogar einen Zeitplan erstellen lassen. Bei nicht bestehender Verbindung kann der Browser diese sogar selbsttätig herstellen.

Kategorien
Design HTML/CSS

Ausdrucken verhindern

Erste Möglichkeit: Nichts mehr im Web veröffentlichen. Zweite Möglichkeit: Die Seiten so häßlich und uninteressant machen, dass niemand sie ausdrucken will.

Das Web ist ein offenes Prinzip. Die Web-Seiten sind doch für den Besucher da. Der Eine druckt gern, der Nächste speichert und wieder andere kopieren die Inhalte. Verbieten kann man das nicht.

Nun, eine Möglichkeit gibt es. Sie funktioniert allerdings nur mit neuen Browsern. Legen Sie ein externes Stylesheet an und schreiben Sie diese Zeile hinein:

 BODY { display
: none;}

Anschließend verbinden Sie die neue Datei druck.css auf diese Weise mit Ihren Seiten:

      <link rel="stylesheet"
media="print" href="druck.css">

Wir empfehlen, das Gegenteil zu tun.

Kategorien
Design HTML/CSS

Villa Kunterbunt

Farbmonitore wurden erfunden, damit man bunte Seiten ansehen kann. Wer will, kann auch Hyperlinks in allen Farben erglühen lassen. Das Interessante: Jeder Link „hovert“ in seinen eigenen Farben. Das nennt man dann nicht einfach bunt, sondern kunterbunt.

Dazu werden Style-Befehle benötigt, die Farben und Links miteinander verbinden. Die lassen sich in den Dateikopf schreiben oder als externes Stylesheet einbinden.

 <style>

A.blue:link { color: blue ; text-decoration:underline; }
 A.blue:visited {
color:blue; text-decoration:underline; }
 A.blue:active { color: red; text-decoration:underline;
}
 A.blue:hover { color: magenta; text-decoration:underline; }
      A.green:link
{ color: green ; text-decoration:underline; }
 A.green:visited { color:green;
text-decoration:underline; }
 A.green:active { color: red; text-decoration:underline;
}
 A.green:hover { color: red; text-decoration:underline; }
 </style>

Nach dieser Definition werden in die Links entsprechende Klassen eingefügt:

      <a
class="blue" href="#">Navigation</a><br>

<a class="green" href="#">Hyperlink</a><br>

Die Online Demo zeigt, was dabei herauskommt. Der eigenen Kreativität sind hier keine Grenzen gesetzt. Denkbar ist beispielsweise, allen Links, die zu einer Gruppe gehören, gleiche Farben – und unterschiedlichen Gruppen jeweils andere Farben zuzuweisen.

Kategorien
Design HTML/CSS

Unsichtbare Links

Eine nicht eben sinnvolle Anwendung, denn für gewöhnlich wünscht man sich, dass Hyperlinks angeklickt werden. Wer es gern einmal andersherum probieren möchte oder geheime Zugänge anbieten will, könnte es mit diesem Trick versuchen.

Links verraten sich auf mehrere Weise. Durch die Farbe, die Unterstreichung, den Mauszeiger und durch einen Hinweis in der Statuszeile des Browsers. All das lässt sich abschalten, bzw. verbergen.

 <a
href="link.html" style="cursor:text; 
text-decoration : none;

color : black;" onMouseOver="status=''; return true;">
Link</a>

cursor : text zeigt einen Cursor wie normaler Text, color : black passt den Link der Textfarbe an (in diesem Falle schwarz), text-decoration : none schaltet die Unterstreichung ab und onMouseOver= unterbindet die verräterische Zielanzeige in der Statuszeile.

Versuchen Sie es einmal auf dieser Demoseite. Was man damit in der Praxis anfangen kann, steht auf einem anderen Blatt. Alte Browser zeigen einen Standardlink.

Kategorien
Design HTML/CSS

Mehr Orientierung in Datentabellen

Je größer sie ausfallen, desto schwerer fällt es dem Auge die Zeile zu halten. Da hilft nur noch der Zeigefinger. Oder ein spezielles Tabellendesign.

Berührt die Maus eine Zelle, verändert sich der Rahmen, er wird rot. Das klappt, weil wir nicht die Zelle mit einem Rahmen umgeben haben, sondern den Tabelleninhalt. Dazu bedarf es eines vergrößerten Randabstandes (cellpadding=“8″).

Screenshot
Die Maus berührt eine Tabellenzelle

Der Tabelleninhalt wird verlinkt und via CSS mit einem simplen Hover-Effekt versehen. Den Mauszeiger stellen wir auf seinen Standard-Optik zurück (cursor : default), denn der Scheinlink selbst soll dem Besucher verborgen bleiben.

 <a href="#">Tabelleninhalt</a>

Eine solche Datentabelle bedeutet mehr Aufwand, aber der könnte sich ja lohnen. Schließlich sieht’s schicker aus und der Zeigefinger darf ruhig bleiben. Nie mehr verschmierte Monitore. Hier geht’s zur Live Demo.

Der CSS Quellcode für den Dateikopf

      A:link {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      
A:visited {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      A:hover
{
 color: black;
 text-decoration: none;
 background-color : transparent;

border : 1px solid red; 
 padding : 4px;
 cursor : default} 

Die Methode funktioniert mit allen modernen Browsern. Ältere zeigen nur den Effekt nicht an.