English 
Deutsch Die Lösung “Adaptive Images” wurde von Matt Wilcox entwickelt, um die Dateigröße von Bildern in responsive Webdesigns zu verringern. Mit Hilfe der PHP- und Javascript-Lösung kannst du erreichen, dass von allen Bilder auf deiner Webseite automatisch verschiedene kleinere Bildformate erstellt werden. Diese, in Format und Dateigröße reduzierten Bilder, werden dann genutzt, wenn ein Besucher deiner Webseite z.B. auf einem Smartphone aufruft. Da die Bildschirmgröße eines Smartphone-Displays ja viel geringer ist, müssen so nicht die standardmäßig geladenen, viel zu großen Bilder genutzt werden. Das spart jede Menge Datenmenge und somit Ladezeiten, was besonders auf mobilen Geräten mit langsamen Verbindungen ein großer Vorteil ist. Weiterlesen
Artikel der Kategorie ‘Coding’
Video-Tipp: HTML- und CSS-Elemente schnell im Browser kontrollieren
Im folgenden kleinen Video-Tutorial möchte ich dir kurz zeigen, wie du mit Hilfe des Google Chrome Developer Tools oder der Firefox- und Safari-Erweiterung Firebug HTML und CSS-Elemente einer Webseite direkt im Browser kontrollieren kannst. So kannst du z.B. schnell die CSS-Klasse und die verwendeten CSS-Eigenschaften eines HTML-Elements heraus finden und diese dann gegebenenfalls anpassen oder, wenn du an einem WordPress Child-Theme arbeitest, in deinem eigenen Stylesheet neu definieren. Weiterlesen
Ein Glossar in HTML und CSS erstellen – so funktioniert’s
Um ein Glossar, z.B. auf deinem WordPress-Blog zu erstellen, benötigst du eigentlich kein extra Plugin. Mit ein paar Zeilen HTML und einigen extra CSS-Styles kannst du in wenigen Schritten dein eigenes Glossar einrichten. Ich habe den benötigten HTML und CSS Code bereits vorbereitet, so dass du diesen nur noch in deine eigene Webseite einfügen und deine Glossar-Beschreibungen eintragen musst. Weiterlesen
CSS-Tipp: Eingebettete Videos für responsive Webdesigns optimieren
Schon seit einer Weile habe ich nach einer praktischen Lösung gesucht, um über iframe eingebettete YouTube- oder Vimeo-Videos für responsive Layouts zu optimieren. Die Video-Player lassen sich zwar auch standardmäßig mit Hilfe der CSS-Eigenschaft max-width:100%; skalieren, aber leider entsteht so immer ein unschöner schwarzer Balken, wenn man das Video auf einem kleinen Bildschirm oder auf einem Smartphone anschaut.
Daher war ich besonders froh über den Artikel “CSS: Elastic Videos”, den Nick La neulich bei Web Designer Wall zu diesem Problem veröffentlicht hat. Inzwischen habe ich die Lösung für elastische Videos selbst getestet und eine kleine Zusammenfassung hier vorbereitet. Weiterlesen
Diskussionsanregung: Sollte man HTML5 und CSS3 heute schon in Webseiten-Projekten einsetzen?
Mit diesem Artikel möchte ich eine kleine Diskussionsanregung geben und dich nach deiner Meinung fragen, inwieweit du HTML5 und CSS3 heute schon in deinen Webseiten-Projekten einsetzt.
Aus meinen eigenen Erfahrungen ist eine der Problematiken bei der Verwendung CSS3 beispielsweise, dass die CSS3-Eigenschaften in der CSS-Validierung von W3C immer noch als Fehlermeldungen ausgegeben werden.
Außerdem ist es meiner Ansicht nach oftmals schwierig für Webdesigner und Entwickler dem eigenen Kunden zu vermitteln, warum eine Webseite nicht in jedem Browser exakt gleich aussehen muss. Denn gerade aus dem Print-Bereich ist man es natürlich gewohnt, mit millimetergenaue Maßen zu arbeiten. Da ist es für Webdesigner oftmals schwierig zu vermitteln, warum das Design im Internet Explorer 7 auf einmal keine abgerundeten Ecken mehr haben sollte. Weiterlesen
CSS-Tipp: Inputfelder mit CSS box-shadow und Leuchteffekt
Bei Eingabefeldern (z.B. in Formularen oder bei der Suche) ist es sinnvoll, einen optischen Effekt zu erzeugen, sobald der Nutzer das Input-feld anklickt. Mit Hilfe von CSS box-shadows kann man diesen Effekt sehr schön erreichen und sogar einen richtigen Leuchteffekt erzeugen. Im Artikel erkläre ich noch einmal kurz, wie die CSS box-shadow Eigenschaft funktioniert. Außerdem habe ein Beispiel (mit CSS Angaben und Demo) erstellt, um den Effekt noch einmal zu verdeutlichen. Weiterlesen
Die Photoswipe Bildergalerie (mit Touchscreen Swipe-Effekt) nutzen
Photoswipe ist eine moderne JavaScript-Bildergalerie, die besonders für mobile Geräte mit Touchscreens optimiert ist. Denn auf Touchscreen-Geräten wie Tablet PCs und Smartphones können die Bilder mit dem beliebten Swipe-Effekt nacheinander “weitergeblättert” werden. Alternativ (und auch auf Desktop-Monitoren nutzbar) gibt es eine Diashow-Funktion und einen Vor- und Zurück-Button. Auch die Navigation über die Pfeiltasten der Tastatur ist möglich. Ich habe Photoswipe selbst ausprobiert und zeige im folgenden Artikel, wie du die praktische Bildergalerie auf deiner Webseite einbinden kannst. Weiterlesen
WordPress-Tipp: Kommentare von Pingbacks und Trackbacks trennen
Da ich bereits des öfteren gefragt wurde, wie man Kommentare eines WordPress-Artikels von Pingbacks und Trackbacks trennen kann, habe ich hier eine kleine Anleitung vorbereitet. Für diese Anpassung in einem WordPress-Theme muss die comments.php Datei bearbeitet werden.
Am besten du speicherst dir als erstes eine Kopie deiner comments.php ab. So kannst du immer wieder auf die originale Datei zurückgreifen, falls du mit dem Code durcheinander kommen solltest. Weiterlesen