Mit dem <dialog>-Element von HTML steht eine native Methode zur Verfügung um ein Dialogfenster bzw. einen Modal Screen zu erzeugen. Im Gegensatz zu selbstgebauten Lösungen wie einer Lightbox, ist die semantische Qualität der von <dialog> deutlich besser. In Kombination mit JavaScript kann das Fenster geöffnet oder geschlossen werden. In diesem Beitrag geben wir euch eine kurze Übersicht über die Eigenschaften des Elements.
Beitrag zu Ende lesen
Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.
Beitrag zu Ende lesen
Laut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the fold« (ohne Scrollen sichtbar) vorhanden sein.
Code, der nicht inline im Dokument eingebunden sondern in eine eigene Datei ausgelagert ist, blockiert das Rendering. Daher empfiehlt es sich JavaScript am Ende der Seite vor dem schließenden <body>-Tag anzubringen. Für CSS-Dateien muss jedoch eine andere Methode angewandt werden, wenn der HTML-Code valide nach den Richtlinien des W3C-Konsortiums sein soll. Eine Möglichkeit hierfür ist das asynchrone Laden. Wie das umgesetzt wird beschreibt Scott Jehl ausführlich.
Direkter Link zum Artikel
Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.
Beitrag zu Ende lesen
Das Hamburger-Icon hat sich als Kennzeichnung für Menüs und Navigationselemente durchgesetzt. Auch wenn das Icon kritisiert wird und nicht in allen Anwendungsfällen gut funktioniert ist es doch in den meisten responsiven Websites anzutreffen. Besonders beliebt sind animierte Hamburger-Icons die per Klick in ein Schließen-Icon überführt werden. In diesem Beitrag archivieren wir ein Code-Snippet das dieses Verhalten herstellt.
Beitrag zu Ende lesen
Umfangreiche Navigationen stellen insbesondere auf großen Touchscreens eine Herausforderung dar. Da Mouse-Over-Effekte nicht funktionieren, werden tiefer liegende Navigationsebenen häufig durch einen Klick auf das unverlinkte Elternelement geöffnet. Wenn ein anderes Elternelement angeklickt wird, soll das zuvor geöffnete Untermenü geschlossen und das neue Menü geöffnet werden. In diesem Beitrag archivieren wir ein Snippet, dass diese Aufgabe erledigt.
Beitrag zu Ende lesen
Doppelte Inhalte (Duplicate Content) auf einer Website kann sich negativ auf das Suchmaschinen-Ranking auswirken. Der Grund dafür ist, dass Suchmaschinen wie Google identischen Inhalt auf mehreren Seiten als Betrugsversuch bewerten können und die betreffende Seite abstrafen. Der Einsatz des sog. Canonical Tag im <head>-Element eurer Website kann das Downranking verhindern. Was es in diesem Zusammenhang zu beachten gibt, zeigen wir euch in diesem Beitrag. Beitrag zu Ende lesen