Webseitengestaltung mit HTML, CSS und JavaScript

In der Themensammlung Webseitengestaltung mit HTML, CSS und JavaScript veröffentliche ich in loser Folge Artikel, die sich mit speziellen Aspekten der Erstellung und Gestaltung von Webseiten beschäftigen.

Boostrap-Framework

Boostrap-Framework

Das Boostrap-Framework wird auf vielen Webseiten eingesetzt. Allerdings wirkt die Oberfläche einer mit den Bootstrap-Standardmitteln gestalteten Website etwas trocken und einförmig. Hier möchte einige Anregungen geben, wie man dies ändern kann.

mehr …

Witzige Bildschirmanimationen mit Clippy

Witzige Bildschirmanimationen mit Clippy

Clippy.js ist eine kleine JavaScript-Bibliothek, mit deren Hilfe man Bilder von Merlin, Rocky und Co. betriebssystemunabhängig im Browser animieren kann.

mehr …

Slidy - eine HTML-Slideshow

Slidy - eine HTML-Slideshow

Slidy - eine HTML-Slideshow, außerdem weitere Quellen und Beispiele zu HTML-Slideshows

mehr …

Hintergrundbilder für Webseiten

Hintergrundbilder für Webseiten

Hintergrundbilder sind ein beliebtes Element bei der Gestaltung von Webseiten. Grundsätzlich kann man dabei zwei unterschiedliche Motivtypen unterscheiden.

mehr …

jQuery Mobile

jQuery Mobile

Das jQuery-Plugin jquery mobile erleichtert die Gestaltung von Webseiten für mobile Geräte und Tablett-PC mit ihren spezifischen Naviagtionsmechanismen enorm.

mehr …

Webseiten Layout Generatoren

Im Internet gibt es mehrere Layout Generatoren für die Erstellung des Grundgerüstes einer Webseite. In diesem Themenbereich stelle ich einige diese Generatoren vor

mehr …

Three.js - JavaScript-Bibliothek für 3D-Animationen

Anders als bei zweidimensionalen Animationen im HTML5-Canvas-Element ist die Erstellung von 3D-Animationen für Browser nicht ganz trivial. Gut, dass es Frameworks gibt, die dem Ersteller solcher Animationen einen Teil der Basisarbeit abnehmen

mehr …

Tabellen in responsiven Webseiten

In diesem Abschnitt widme ich mich der Darstellung von Tabellen in responsiven Webseiten. Es geht dabei nicht darum, HTML-Tabellen wieder als Grundlage des allgemeinen Design zu reanimieren. Diese Herangehensweise ist nun wirklich lange passe. Vielmehr geht es darum, Datentabellen (ggf. bereits vorhandene) so darzustellen, dass sie sich gut in eine responsive Webseite einfügen.

jQuery-Plugin Responive Tables

Bei Zurb (den Machern des Frameworks Foundation) findet man das jQuery-Plugin Responsive Tables. Diese Plugin macht einen Teil der Tabelle scrollbar. Beispiel zum jQuery-Plugin Responive Tables

Obwohl alle Beispiele auf der Website von Zurb mit dem Framework Foundation erstellt wurden, kann man dieses jQuery Plugin mit allen responsiven Webseiten verwenden. Ein wesentlicher Vorteil dieser Variante ist, dass der HTML-Code der eigentlichen Tabelle nicht verändert werden muss.

Anmerkungen

Diese Variante funktioniert mit meinen Testgeräten nicht immer. Grundsätzlich wird die horizontale Scrollleiste nicht angezeigt, das horizontale Scrollen erfolgt mit Hilfe der Wischgeste. Mit dem Standardbrowser eines Samsung Galaxy S 9000 mit Android 2.3.6. (echtes Gerät) klappt dies jedoch nicht.

jQuery-Plugin FooTable

Dieses Plugin ist eines der vielen Plugins von FooPlugins.

jQuery-Plugin TableSaw

Hier handelt es sich um ein ganzes Bündle von jQury-Plugins. Mehr siehe https://github.com/filamentgroup/tablesaw

Reine CSS-Lösung von Chris Coyier auf css-tricks.com

Diese Lösung hat den Vorteil, dass wirklich nur der CSS-Code ergänzt werden muss.

Beispiel ansehen

Anmerkungen

  1. Mit dem Standardbrowser eines Samsung Galaxy S2 mit Android 4.1.1. (Genymotion virtuelle Maschine) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding werden die Inhalte nicht zentriert dargestellt, rechts bleibt ein breiter Rand. Hier besteht noch Optimierungspotential.
  2. Mit Firefox auf einem Samsung Galaxy S2 mit Android 4.1.1. (Genymotion virtuelle Maschine) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding bleibt ein breiter Rand links und rechts. Hier besteht noch Optimierungspotential.
  3. Mit dem Standardbrowser eines Samsung Galaxy S 9000 mit Android 2.3.6. (echtes Gerät) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding werden die Inhalte (analog zu Pkt. 1) nicht zentriert dargestellt, rechts bleibt ein breiter Rand. Hier besteht noch Optimierungspotential.
  4. Mit Firefox auf einem Samsung Galaxy S 9000 mit Android 2.3.6. (echtes Gerät) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding bleibt (analog zu Pkt.2) ein breiter Rand links und rechts. Hier besteht noch Optimierungspotential.

Diese Methode setzte ich auch in der Praxis ein. Zurzeit ist die Darstellung bei allen Tests allerdings noch sehr mangelhaft.

mehr …

jQuery Plugin ColorBox

Colorbox ist eine jQuery-Plugin zur Darstellung nahezu beliebiger Inhalte in einem über den allgemeinen Inhalt der Website gelegten Bereich.

mehr …