kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

HTML


Responsive Images mit ‹figure› oder ‹picture›-Tag: jQuery Picture

Im Responsive Design ist es zwar möglich identische Inhalte unterschiedlich darzustellen, es ist jedoch nicht ohne weiteres möglich Inhalte auszutauschen. Daher werden auf kleinen Bildschirmen meist viel zu große Bilder geladen die lediglich über CSS auf die Abmessung des Displays skaliert sind.
Im Moment gibt es für dieses Problem keine standardisierte Lösung, nur diverse Scripte die den Bildaustausch übernehmen. jQuery Picture ist ein solches Script. Es lässt sich einfach in die Website integrieren, ist gerade einmal 2KB groß und nutzt entweder das valide <figure>- oder das experimentelle <picture>-Element.

Beitrag zu Ende lesen

Komfortable Form-Validierung ohne Änderungen am HTML-Code: jQuery Walidate

jQuery Walidation Logo / Icon

Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.

Beitrag zu Ende lesen

Turn.js – Page-Flip-Effekt mit jQuery und HTML5 (und ohne Flash)

Vor einigen Jahren war der sog. Page-Flip-Effekt sehr populär um mit Hilfe von Flash digitale und realistisch anmutende Bücher zu erstellen. Der Trend flaute in den letzten Jahren zunächst ein wenig ab um dann mit der zunehmenden Verbreitung von Tablets und eBooks wieder an Beliebtheit zu gewinnen.
Und ganz in Sinne moderner Webentwicklung lässt sich der Effekt heute mit jQuery, CSS3 und HTML5 umsetzen.

Beitrag zu Ende lesen

Stylesheets aus HTML-Markup generieren: Bear CSS

Die meisten Webdesigner werden beim Coding einer Seite ähnlich vorgehen. Sofern nicht direkt ein Template (z.B. Boilerplate) zum Einsatz kommt, schreibt man zunächst das HTML-Markup. Wenn die HTML-Struktur steht, wird die CSS-Datei angelegt und alles über das Stylesheet gestaltet.
Wenn auch ihr Websites nach diesem Muster umsetzt, kann Bear CSS euren Workflow spürbar beschleunigen.

Beitrag zu Ende lesen

Welche HTML5-Features kann ich heute schon nutzen? HTML5 please!

HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

Beitrag zu Ende lesen