Webtechnik: 5 Tipps vom Profi
Verschiedene Browser: Nur eine Zeile CSS-Syntax verbessert die Anzeige.
Tipp 1: Scrollbar-Platzhalter forcieren
Dieser Tipp zeigt ihn, wie Sie permanente Scrollbars erzwingen. Weitaus eleganter sind jedoch erzwungene Platzhalter für Scrollbars, falls eine Webseite auch mal komplett in das Browser-Fenster passt. So bleibt das Layout konsistent.
Scrollbars sind notwendig, je nach Länge des Inhalts einer Website. Es kann also sein, dass insbesondere bei großen Monitoren und einem weit aufgezogenem Browser-Fenster, sinnvollerweise keine Scrollbars sichtbar sind. Wird nun eine weitere Seite innerhalb der selben Homepage aufgerufen, bei der die Scrollbars aus Platzgründen wieder sichtbar sein müssen, hüpft gleichsam das gesamte Layout genau um die Breite der Scrollbar nach links oder wird etwas zusammen geschoben.
Der Internet Explorer oberhalb der Version 8 verfolgt von Haus aus die Strategie, solche Layout-Verschiebungen zu vermeiden: Er blendet für so einen Fall immer automatisch einen dezenten Platzhalter für die Scrollbar ein - Firefox und der IE 8 aber nicht. Mit einer einfachen einzeiligen CSS-Anweisung schaffen Sie Abhilfe.
Die elegante Methode nutzt die Syntax html { overflow-y: scroll; }, weniger empfehlenswert ist die Methode: html { height: 101%; }. Denn die schlechtere Methode setzt die Höhe der Website auf über 100 Prozent. Dadurch ist immer ein Scrollbalken sichtbar, auch wenn er, wie im Bildbeispiel des Internet Explorers, gar keinen Sinn macht.
Der kleine Unterschied: Die Scrollbar lässt sich mit der Syntax overflow: hidden; verbergen.
Tipp 2: Scrollbar ausblenden
Manche Weblayouts benötigen bewusst keine Scrollbars. Die meisten Web-Entwickler empfinden den Internet Explorer typischen Scrollbar-Platzhalter als unschön, weil er das Layout stört. Dieser Tipp zeigt, wie Sie den Scrollbar-Platzhalter beseitigen.
Der fehlende Scrollbar-Platzhalter des Firefox war beim vorherigen Tipp eben noch ein Manko. Nun stört er aber beim Internet Explorer. Manche Weblayouts begnügen sich mit wohldosierten Text- und Bildmengen und sind, anders als bei Blogs, dann horizontal und in der Vertikalen mittig platziert.
Scrollbars sind hier grundsätzlich bewusst nicht eingeplant. Die Scrollbar-Platzhalter des Internet Explorer sind somit auch völlig überflüssig. Unter anderem verzichten in der Regel auch Browser-Fenster füllende Flashanwendungen auf den Einsatz der Scrollbar des Browsers.
Wieder ist mit einer einfachen einzeiligen CSS-Anweisung alles schnell erledigt: html { overflow-y: hidden; }. Sie können mit html { overflow-x: hidden; } auch separat den gelegentlich auftretenden horizontalen Scrollbalken am unteren Browser-Fensterrand eliminieren. Pauschal für die horizontale und vertikale Scrollbar wäre html { overflow: hidden; } zu schreiben. Es ist eben meist dieses Feintuning am Rande einer Webseiten, welches beim Betrachter oft unbewusst einen homogeneren und schlüssigeren Eindruck hinterlässt.
Webtechnik: 5 Tipps vom
Tipp 3: Andere Schriften
Die Auswahl sicherer Schriften für das Internet ist begrenzt: Times, Arial, Verdana, Trebuchet, Comic, Courier, Georgia. Um Schriften darzustellen, müssen sie auf dem Rechner des Anwenders installiert sein. Diese technische Beschränkung sehen Sie mit diesem Tipp zukünftig gelassener.
Eine Übersicht über die am häufigsten installierten und verwendeten Fonts finden Sie unter www.visibone.com/font/FontResults.html . Mehr Fontauswahl bedeutet nicht immer gleich bessere Gestaltung. Fingerspitzengefühl ist gefragt. Ein weiteres Problem bei Web-Schriften ist die Lizenz. Nicht standardmäßig installierte Schriften kosten bei kommerzieller Anwendung in der Regel etwas. Zwar nutzen Sie Google Webfonts (https://code.google.com/webfonts ) kostenfrei, die Sie darüber hinaus einfach in die eigene Homepage integrieren.
Die gewünschte Schrift wird von Googles Server für die Dauer der Internetsitzung quasi geliehen. Es werden keine Schriften lokal installiert. Unter https://code.google.com/webfonts/preview finden Sie sogar einen Font previewer. Mit diesem Werkzeug prüfen Sie vorab die Darstellungsqualität des gewünschten Fonts. Den parallel eingeblendeten Code kopieren Sie einfach und setzen die Kopie an entsprechender Stelle der eigenen Homepage ein. Ein Blick auf den übersichtlichen Code-Schnipsel erklärt schon die Funktionsweise.
Das Beispiel fordert den Font Allan bei Google als externes Stylesheet an. Dieses rufen Sie einfach mit den üblichen CSS-Anweisungen wieder auf und konfigurieren es nach Belieben:
<link href="//fonts.googleapis.com/css?family=Allan:bold"
rel="stylesheet" type="text/css" >
<style>
body { font-family: "%80%9AAllan"%80%98, serif;
font-size: 22px; font-style: normal;font-weight: 400;
line-height: 1.2; }
</style>
Sogar der IE6 spielt mit: keine Scrollbar-Platzhalter und Scrollbars erst, wenn man sie wirklich braucht.
Tipp 4: Vertikal zentrierte Homepage
Der Profi kennt einfache technische Lösungen, um seine Weblayouts freier zu gestalten. Zeitraubende Tüfteleien und Frustrationen halten sich dann bei der Umsetzung in HTML in Grenzen. So reizt auch ein vertikal zentriertes Layout, welches Sie an Hand des Beispiels künftig mit in Betracht ziehen können.
Bei den Überlegungen für ein vertikal zentriertes Layout müssen Sie jedoch vorher genau abschätzen, ob der Platz ausreicht, um alle gewünschten Informationen darzustellen. Das gilt besonders dann, wenn Scrollbars nicht erwünscht sind. Auf Googles Seite Browser Size (https://browsersize.googlelabs.com ) verschaffen Sie sich einen guten Eindruck darüber, für wieviel Prozent der Besucher Sie potenziell Ihre Homepage navigierbar halten möchten.
Das folgende Script erweitert den Besucherkreis. Falls das Browser-Fenster des Anwenders doch mal sehr klein ausfällt oder durch Installationen aller erdenklichen Plug-ins zusätzlich an weiteren Platz verliert, kann er dennoch den gesamten Inhalt Ihrer Webseite lesen. Denn Sie sorgen dafür, dass sich die Scrollbar automatisch einblendet. Dazu übernehmen Sie einfach die folgende CSS-Anweisung:
* { margin:0; padding:0; }
html, body {
height: 100%; overflow-y: auto;
}
#distance {
width: 1px; height: 50%;
margin-bottom: -100px; /* minus halbe Containerhöhe */
float:left;
}
#container { margin: 0 auto;
position: relative; text-align: left;
height: 200px; width: 400px; clear: left;
background-color: #ddd; }
Der Trick hierbei ist, den eigentlichen Container (#container), der Ihre Webseite enthält, in Abhängigkeit zu einem anderen unsichtbaren bzw. leeren (#distance) zu bringen. Beachten Sie für Ihre persönliche Konfiguration lediglich die Angabe des halben negativen Margin-Bottom Wertes des CSS Selektors #distance, zur Gesamthöhe des CSS Selektors #container. Die CSS-Anweisung rufen Sie in HTML dann so auf:
<div id="distance"></div>
<div id="container">Mein horizontal und vertikal zen
triertes Layout</div>
Außerdem: Die in den ersten beiden Tipps dargestellte Thematik der Scrollbar und des Scrollbar-Platzhalters des Internet Explorers (größer als Version 8) führt die CSS-Anweisung overflow-y: auto; gewissermaßen zusammen. Die Scrollbar wird jetzt erst sichtbar, wenn es im Browser-Fenster wirklich eng wird. Der Scrollbar-Platzhalter des Internet Explorers ist solange grundsätzlich unsichtbar. Sie halten auf diese Weise Ihre Homepage unabhängiger von der Bildschirmauflösung - sozusagen abwärtskompatibel.
Klare Absage: Der IE6-Nutzer soll seinen Browser updaten, denn Sie entwickeln Ihre Site für modernere Internettechnologien.
Tipp 5: Internet Explorer 6 begraben
Der IE 6 ist weit verbreitet, weil Unternehmen ihn häufig verwenden. Diese tun das, obwohl der Direktor für Informationssicherheit Microsoft Deutschland 2010 öffentlich davor gewarnt hat und zum Upgrade rät. Doch der Profientwickler konzentriert sich auf moderne Webtechnologien wie HTML5 und CSS 3 und sendet den ewig Gestrigen eine Botschaft.
Auf der Seite www.ie6nomore.com/code-samples.html entnehmen Sie einfach einen vorbereiteten Sourcecode und platzieren ihn an oberster Stelle innerhalb des Body-Tags.
<body>
<!--[if lt IE 7]>
<div> weiterer HTML-Code für das vorformatierte Banner
</div>
<![endif]-->
...
</body>
Die Umklammerung von <!--[if lt IE 7]> und <![endif]--> spricht nur Internet Explorer der Version kleiner als 7 an. Der Code zeigt ein fertig formatiertes Banner mit freundlicher Empfehlung für ein Upgrade an. Den Text ändern Sie nach Bedarf. Die Icons werden automatisch von einem externen Server geladen.