Archiv der Kategorie: HTML CSS

HTML, CSS und Co.

Smooth Scroll mit Offset – Seiten übergreifend

Anklicken eines Ankerlinks, dann sanftes Scrollen zur Scrollposition, ggf. mit Offset. Im Idealfall sollte dies sowohl innerhalb einer Seite als auch über mehrere Seiten hinweg funktionieren.

Die css Anweisungen:

nutzen und gut ist. Oder?

Leider ist das nicht so einfach.

Eine Smooth-Scroll-Funktion zu einem Anker mit Offset, die sowohl seitenintern als auch seitenübergreifend funktioniert, ist nicht so einfach zu realisieren, wie es auf den ersten Blick scheinen mag, auch wenn manche Youtube-Tutorials dies suggerieren.

Einige Browser verhalten sich nicht in allen Situationen wie erwartet. Beispielsweise funktioniert der obige Code bei seitenübergreifenden Ankerlinks im Firefox derzeit nicht. Firefox ignoriert die Anweisung smooth.

Wird der Seitensprung selbst mit Javascript programmiert, treten weitere Probleme auf. Zum einen kann das Standardverhalten des Browsers, der den Ankerlink ausführt, bevor die eigenen Funktionen greifen, einen Strich durch die Rechnung machen. Zum anderen können Animationseffekte von Elementen auf der Zielseite die Berechnung der Ankerposition verfälschen.

Ein kurzes Googeln ergibt zwar unzählige Lösungen zur Implementierung von Smooth Scroll, die auf den ersten Blick auch funktionieren, aber bei den meisten habe ich im Laufe der Zeit immer wieder Probleme der oben genannten Art festgestellt.

Meine Scroll-Lösung sieht nun so aus. Einige Funktionen, wie z.B. die kurze Zeitverzögerung, erscheinen auf den ersten Blick unnötig, sind aber in der Praxis notwendig.

Smooth Scroll mit Offset – Seiten übergreifend weiterlesen

Domains weiterleiten, Keyword-Domains nutzen, Expired Domains auspressen

So mancher Websitebetreiber nennt mehrere Domains ( z.B. zusätzliche Zweitdomains, Drittdomains oder Keyword-Domains) sein eigen. Das muss nicht unbedingt Suchmaschinenoptimierungsgründe haben. Das kann schlicht und einfach den Grund haben, dass man unter mehreren Domains erreichbar sein möchte z.B. www.firma.tld und www.produkt.tld oder die Domains besitzen möchte, damit sie kein Wettbewerber erhält.

Was auch immer der Grund ist: SEO oder Erreichbarkeit, Möglichkeiten um Zweitdomains oder Keyword-Domains zu nutzen gibt es viele: Server seitige Weiterleitungen, Client seitige Weiterleitungen, Satellitenseiten erstellen…

Serverseitige Weiterleitung

301 Weiterleitung – permanente Weiterleitung

Die 301 Weiterleitung ist bei SEOs eine ziemlich beliebte Methode um Zweit- oder Keyword-Domains zu nutzen. Ein 301 Redirect stellt, im Gegensatz zu einem 302 Redirect, eine permanente Weiterleitung dar und ist eine sehr Suchmaschinen freundliche Möglichkeit ganze Domains oder einzelne URLs weiterzuleiten.

Vorteil: Bei dieser Art der Weiterleitung wir ein eventuell vorhandener PR (Page Rank) der Zweit- oder Keyworddomain zumindest teilweise auf die Hauptdomain übertragen. Außerdem wird diese Weiterleitung sogar von Google selbst empfohlen.

Tipp: Welcher HTTP Status-Code an den Google Spider zurückgegeben wird, lässt sich mit diversen Online-Tools z.B. dem Web-Sniffer testen.

301 mit mod_rewrite

Voraussetzung: Apache Server muss das mod_rewrite Modul installiert haben. Dann legt man im Hauptverzeichnis der Zweitdomain eine Datei Namens .htacces an und fügt folgenden Inhalt ein:

Domains weiterleiten, Keyword-Domains nutzen, Expired Domains auspressen weiterlesen

JQuery und jquery UI – die eigene Website mit innovativen Animationen und Effekten ausrüsten

JQuery ist nicht umsonst eines der beliebtesten Javascript-Frameworks. Mit wenigen Zeilen Code erstellt man tolle Animationen und Effekte, sodass die eigene Website ein ganzes Stück näher an eine Desktop Anwendung rückt. Das tolle von jQuery: man braucht sich nicht grundsätzlichen JavaScript Funktionen und mit Browser-Inkompatibilitäten rumschlagen, das übernimmt das Framework.

Als Ergänzung zu jQuery gibt es jQuery UI. Damit sind Widgets wie Akkordeon, Autoausfüll-Felder, Dialog Boxen, Schieberegler, Tabs bzw. Register, Datumpicker, Fortschrittsbalken, Effekte und sogar Interaktionen wie verschiebbare, selektierbare, vergrößerbare und sortierbare  Objekte in Null Komma Nix erstellt.

Hier ein kleines jQuery und jQuery Ui Anfänger Tutorial: jQuery Tutorial

Browsersize: wie große sollte meine Website sein?

Google Laps hat wieder mal ein interessantes Tool für Webmaster zu bieten: Browser Size zeigt an wie viel Prozent der Besucher einer Website Bereiche sehen können ohne dabei zu scrollen. Der versierte Webanalyst wird nun sagen: brauche ich nicht, ich nutze mein Statistik Tool z.B. Google Analytics. Ich schaue mir an welche Bildschirmauflösung meine Besucher haben. Mit dieser Analyse wird aber nicht berücksichtig, dass der sichtbare Bereich einer Webseite erheblich von der Bildschirmauflösung abweicht, denn je nach Browser und eingeblendet Toolbars bleibt ein entsprechend kleinerer sichtbarer Bereich für den Besucher übrig. Google Bowser Size soll diesem Umstand Rechnung tragen.

Screenshot Google Laps BrowserSize - die ideale größe einer Website ermitteln bzw. die ideale Position von wichtigen Elementen einer Website bestimmen
Screenshot Google Laps BrowserSize - die ideale größe einer Website ermitteln bzw. die ideale Position von wichtigen Elementen einer Website bestimmen

Also die Url browsersize.googlelabs.com aufrufen, die Internetadresse der eigenen Webseite eintippen, auf Go klicken und die Prozentzahlen begutachten. Schade, dass das Tool mit zentrierten Website nicht so gut zurecht kommt…

Suchmaschinenoptimierte tabellenlose CSS Layouts

Nach dem CSSFloat CrashKurs, der eine kurze Einführung im Umgang mit der Float-Technik darstellt, folgt nun darauf aufbauend ein CSS Kurs für suchmaschinenoptimierte tabellenlose CSS-Layouts:

Viel Spaß beim HTML- und CSS-coden…

Amazon Modul und Anleitung für tabellenlose Layouts mittels CSS und float

Vor einigen Tagen habe ich mich mit der Erstellung eines PHP-Moduls für das Content Management System Contenido beschäftigt. Für WordPress gibt es deren bereits viele im Internet zu finden, aber für Contenido ist die Auswahl recht beschaulich. Ich habe ein Modul für die einfache und schnelle Integration eines Amazon Artikels also einer Kauf-Empfehlung für Bücher, DVD, Software oder elektronischer Produkte erstellen wollen. Da ich die Amazon Webservices nicht einsetzten wollte (vielleicht schaue ich mir die in Zukunft mal an), habe ich mich auf die Widgets, welche Amazon in seinem PartnerNet anbietet beschränkt.

So richtig zufrieden war ich mit keinem der angebotenen Widgets, da ich unbedingt einen Einzelartikel (natürlich Südtirol Bücher 😉 ), mittels Amazon ASIN oder ISBN schnell und einfach, in das CMS integrieren wollte ohne im Amazon-PartnerNet Einstellungen vornehmen, ohne ein Artikelbild umständlich von Amazon downloaden und in meinen Webspeicher hochladen und ohne im CMS in der Code-Ansicht rumbasten zu müssen.

Das einzige Amazon Widget das dies ermöglicht ist das Snippet für einen Amazon Einzeltitel-Link, das – wenn mit Bild und Text gewünscht – als iframe Element angeboten wird. Grund genug für mich,  sich mit der nahtlosen Integration von iframes und HTML-Elementen im Allgemeinen mittels der CSS Eigenschaft float zu beschäftigen.

Daraus ist nun ein kleiner CSS Float Crash-Kurs entstanden, der ganz allgemein die CSS Float-Technik Schritt für Schritt beschreibt und auch auf Browserprobleme eingeht. 

Fragen zum CSS Workshop und zum Amazon Modul können hier gerne gestellt werden.