Den einzelnen Nutzer einfach aufzurufen weniger zu surfen, zu streamen oder zu chatten scheint hier wenig erfolgversprechend. Die IT- & Kommunikations-Branche muss sich ihrer Verantwortung ebenso bewusst werden und Ursachen erkennen und bekämpfen. Beispielsweise mit durchdachter Konzeption, nachhaltigem Design und smarter Entwicklung von energieeffizienten Webseiten.
Typografie
Standardstile für Überschriften, Absätze, semantischen Text, Blockquote und Listenelemente.
... Überschriften ...
H1 Überschrift
H2 Überschrift
H3 Überschrift
H4 Überschrift
H5 Überschrift
H6 Überschrift
<h1>H1 Überschrift</h1>
<h2>H2 Überschrift</h2>
<h3>H3 Überschrift</h3>
<h4>H4 Überschrift</h4>
<h5>H5 Überschrift</h5>
<h6>H6 Überschrift</h6>H1 Überschrift / Hauptfarbe dunkel
H2 Überschrift / Hauptfarbe dunkel
H3 Überschrift / Hauptfarbe dunkel
H4 Überschrift / Hauptfarbe dunkel
H5 Überschrift / Hauptfarbe dunkel
H6 Überschrift / Hauptfarbe dunkel
<h1 class="primary-color-dark">H1 Überschrift</h1>
<h2 class="primary-color-dark">H2 Überschrift</h2>
<h3 class="primary-color-dark">H3 Überschrift</h3>
<h4 class="primary-color-dark">H4 Überschrift</h4>
<h5 class="primary-color-dark">H5 Überschrift</h5>
<h6 class="primary-color-dark">H6 Überschrift</h6>H1 Überschrift / Hauptfarbe hell
H2 Überschrift / Hauptfarbe hell
H3 Überschrift / Hauptfarbe hell
H4 Überschrift / Hauptfarbe hell
H5 Überschrift / Hauptfarbe hell
H6 Überschrift / Hauptfarbe hell
<h1 class="primary-color-light">H1 Überschrift</h1>
<h2 class="primary-color-light">H2 Überschrift</h2>
<h3 class="primary-color-light">H3 Überschrift</h3>
<h4 class="primary-color-light">H4 Überschrift</h4>
<h5 class="primary-color-light">H5 Überschrift</h5>
<h6 class="primary-color-light">H6 Überschrift</h6>... H1 Überschrift / mit Punkten ...
... H2 Überschrift / mit Punkten ...
... H3 Überschrift / mit Punkten ...
... H4 Überschrift / mit Punkten ...
... H5 Überschrift / mit Punkten ...
<h1 class="headline-dotted">H1 Überschrift / mit Punkten</h1>
<h2 class="headline-dotted">H2 Überschrift / mit Punkten</h2>
<h3 class="headline-dotted">H3 Überschrift / mit Punkten</h3>
<h4 class="headline-dotted">H4 Überschrift / mit Punkten</h4>
<h5 class="headline-dotted">H5 Überschrift / mit Punkten</h5>
<h6 class="headline-dotted">H6 Überschrift / mit Punkten</h6>H2 Überschrift/ Schriftgröße 35px
H3 Überschrift/ Schriftgröße 35px
<h2 class="headline-35">H2 Überschrift / Schriftgröße 35px</h2>
<h3 class="headline-35">H3 Überschrift / Schriftgröße 35px</h3>... H2 Überschrift / mit Punkten und zentriert ...
H2 Überschrift / zentriert
H2 Überschrift / zentriert / Hauptfarbe dunkel
H2 Überschrift / zentriert / Hauptfarbe hell
H2 Überschrift / zentriert / Hauptfarbe dunkel / 35px
<h2 class="text-center headline-dotted">H2 ÜBERSCHRIFT / MIT PUNKTEN UND ZENTRIERT</h2>
<h2 class="text-center">H2 ÜBERSCHRIFT / ZENTRIERT</h2>
<h2 class="text-center primary-color-dark">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL</h2>
<h2 class="text-center primary-color-light">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE HELL</h2>
<h2 class="text-center primary-color-dark headline-35">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL / 35PX</h2>... Links/Buttons ...
Button Button (Primary) Button (Link) Button (Success) Button (Error)<a href="" class="btn">Button</a>
<a href="" class="btn btn-primary">Button (Primary)</a>
<a href="" class="btn btn-link">Button (Link)</a>
<a href="" class="btn btn-success">Button (Success)</a>
<a href="" class="btn btn-error">Button (Error)</a><a href="" class="btn btn-sm">Button (klein)</a>
<a href="" class="btn btn-sm btn-primary">Button (primary / klein)</a>
<a href="" class="btn btn-lg">Button (groß)</a>
<a href="" class="btn btn-lg btn-primary">Button (primary / groß)</a><a href="" class="btn btn-block">Button (fullwidth)</a>
<a href="" class="btn btn-block btn-primary btn-lg">Button (fullwidth / primary / groß)</a>Green Hosting sorgt nur für Schadensbegrenzung
Mit Green Hosting ist gemeint, dass der Hoster einer Website mit Ökostrom arbeitet, auf effiziente Klimatisierung setzt und ein eigenes Rechenzentrum betreibt. In Deutschland ist dies mittlerweile auch bei einer Vielzahl an Hostern möglich. Das allein reicht zwar sicher nicht aus, um das online entstandene CO₂ zu kompensieren, aber es sorgt zumindest für Schadensbegrenzung.
Ursachenbekämpfung
Um nicht nur die Symptome, sondern die Wurzel des wachsenden Energieproblems zu verstehen und zu bekämpfen ist es sinnvoll, sich mit der Ursache der immer größer werdenden Datenflut auseinanderzusetzen - den einzelnen Nutzer einfach aufzurufen weniger zu surfen, zu streamen oder zu chatten scheint hier jedoch wenig erfolgversprechend.
<!-->
Wenn Bildschirmbreite größer als 600px ist wird es zweispaltig dargestellt, ansonsten einspaltig.
-->
<div class="columns">
<div class="column col-6 col-sm-12">
...
</div>
<div class="column col-6 col-sm-12">
...
</div>
</div>Green Hosting sorgt nur für Schadensbegrenzung
Mit Green Hosting ist gemeint, dass der Hoster einer Website mit Ökostrom arbeitet, auf effiziente Klimatisierung setzt und ein eigenes Rechenzentrum betreibt. In Deutschland ist dies mittlerweile auch bei einer Vielzahl an Hostern möglich. Das allein reicht zwar sicher nicht aus, um das online entstandene CO₂ zu kompensieren, aber es sorgt zumindest für Schadensbegrenzung.
Ursachenbekämpfung
Um nicht nur die Symptome, sondern die Wurzel des wachsenden Energieproblems zu verstehen und zu bekämpfen ist es sinnvoll, sich mit der Ursache der immer größer werdenden Datenflut auseinanderzusetzen - den einzelnen Nutzer einfach aufzurufen weniger zu surfen, zu streamen oder zu chatten scheint hier jedoch wenig erfolgversprechend.
Wie können wir im digitalen Raum nachhaltig handeln?
<!-->
Wenn Bildschirmbreite größer als 600px ist wird es dreispaltig dargestellt, ansonsten einspaltig.
-->
<div class="columns">
<div class="column col-4 col-sm-12">
...
</div>
<div class="column col-4 col-sm-12">
...
</div>
<div class="column col-4 col-sm-12">
...
</div>
</div>Green Hosting sorgt nur für Schadensbegrenzung
Mit Green Hosting ist gemeint, dass der Hoster einer Website mit Ökostrom arbeitet, auf effiziente Klimatisierung setzt und ein eigenes Rechenzentrum betreibt. In Deutschland ist dies mittlerweile auch bei einer Vielzahl an Hostern möglich. Das allein reicht zwar sicher nicht aus, um das online entstandene CO₂ zu kompensieren, aber es sorgt zumindest für Schadensbegrenzung.
Ursachenbekämpfung
Um nicht nur die Symptome, sondern die Wurzel des wachsenden Energieproblems zu verstehen und zu bekämpfen ist es sinnvoll, sich mit der Ursache der immer größer werdenden Datenflut auseinanderzusetzen - den einzelnen Nutzer einfach aufzurufen weniger zu surfen, zu streamen oder zu chatten scheint hier jedoch wenig erfolgversprechend.
Wie können wir im digitalen Raum nachhaltig handeln?
Energieeffizientes Webdesign ist mehr als nur umweltfreundlich
<!-->
Wenn Bildschirmbreite größer als 960px ist wird es vierspaltig dargestellt, unter 600px einspaltig, ansonsten zweispaltig.
-->
<div class="columns">
<div class="column col-3 col-sm-12 col-lg-6">
...
</div>
<div class="column col-3 col-sm-12 col-lg-6">
...
</div>
<div class="column col-3 col-sm-12 col-lg-6">
...
</div>
<div class="column col-3 col-sm-12 col-lg-6">
...
</div>
</div>Green Hosting sorgt nur für Schadensbegrenzung
Mit Green Hosting ist gemeint, dass der Hoster einer Website mit Ökostrom arbeitet, auf effiziente Klimatisierung setzt und ein eigenes Rechenzentrum betreibt. In Deutschland ist dies mittlerweile auch bei einer Vielzahl an Hostern möglich. Das allein reicht zwar sicher nicht aus, um das online entstandene CO₂ zu kompensieren, aber es sorgt zumindest für Schadensbegrenzung.
<!-->
Mittig ausgerichteter Textblock.
-->
<div class="column col-mx-auto">
...
</div>Tabellen
Tabellen enthalten Standardstile für Tabellen und Datensätze.
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
<!-- Wählen Sie den Elementtyp "Tabelle" und das Template "ce_table_zeroone" aus. -->
<table class="table">
...
</table>Gestreifte Tabellen
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
<!-- Wählen Sie den Elementtyp "Tabelle" und das Template "ce_table_zeroone" aus. Fügen Sie die Klasse "table-striped" hinzu,
um einen Zebra-Streifen-Stil hinzuzufügen. Fügen Sie die Klasse "table-hover" für einen Hover-Stil hinzu. -->
<table class="table table-striped table-hover">
...
</table>Scrollbare Tabellen
| Name | Rating | Duration | Genre | Release date | Director |
|---|---|---|---|---|---|
| The Shawshank Redemption | R | 2h 22min | Crime, Drama | 14 October 1994 | Frank Darabont |
| The Godfather | R | 2h 55min | Crime, Drama | 24 March 1972 | Francis Ford Coppola |
| Schindler's List | R | 3h 15min | Biography, Drama, History | 4 February 1994 | Steven Spielberg |
| Se7en | R | 2h 7min | Crime, Drama, Mystery | 22 September 1995 | David Fincher |
<!-- Wählen Sie den Elementtyp "Tabelle" und das Template "ce_table_zeroone" aus. Fügen Sie die Klasse "table-scroll" hinzu,
um eine horizontal scrollbare Tabelle zu erhalten.. -->
<table class="table table-scroll">
...
</table>Weitere Textelemente
Übersicht von weiteren Textelementen, wie Listen und Textblöcke.
... Texte ...
Dieser Text wird nur in Großbuchstaben ausgegeben.
<div class="text-uppercase">
Dieser Text wird in Großbuchstaben ausgegeben.
</div>Dieser Text wird nur in Kleinbuchstaben ausgegeben.
<div class="text-lowercase">
Dieser Text wird in Kleinbuchstaben ausgegeben.
</div>Jeder Anfangsbuchstabe wird großgeschrieben.
<div class="text-capitalize">
Jeder Anfangsbuchstabe wird großgeschrieben.
</div>... Listen ...
Nummerierte Liste
- Informationen reduzieren
- Code mehrfach verwenden
- Vorhandene Materialien nutzen
Unnummerierte Liste
- Informationen reduzieren
- Code mehrfach verwenden
- Vorhandene Materialien nutzen
Media-Elemente
Übersicht von Bildern, Galerien, Downloads und Videos.
Mit der Klasse "css-filter" werden Bilder mit einem Farbfilter (entsprechend der Theme-Farbe) angepasst.
Zweispaltige Galerie (ohne CSS-Filter)
Zweispaltige Galerie (mit CSS-Filter)
Dreispaltige Galerie
Vierspaltige Galerie
Fünfspaltige Galerie
Sechsspaltige Galerie
YouTube Video
Einzelner Download
Theme-Elemente
... Teaserboxen ...
... Tabs ...
Vermeidung von Datenmüll durch Informationsreduktion
Die auf einer Webseite dargestellten Informationen auf das Wesentliche zu reduzieren birgt enorme Vorteile: Weniger Inhalte bedeuten weniger Code und schnellere Ladezeit. Neben der Performance steigt auch gleichzeitig die Usability, denn Nutzer finden schnell das was sie suchen. Hierzu gehört auch effizientes Copywriting, welches Informationen klar und verständlich präsentiert. Zudem sollte der Einsatz von ressourcenintensiven Inhalts-Formaten, wie Videos und Bildern kritisch hinterfragt werden: Bringt das Medium wirklich einen Mehrwert für den Nutzer?
Somit wird die Nutzung des Webs einfacher und effizienter für alle: der Nutzer spart Zeit, der Anbieter Datenmüll und der Planet profitiert von der eingesparten Energie.
JS & co. machen Webseiten schöner & interaktiver - aber auch verschwenderischer
Einerseits erhöht die Verwendung von Javascript die Dateigröße der Webseite und andererseits erfordert dessen Verarbeitung mehr Ressourcen auf dem Endgerät des Benutzers. Dies erhöht die CPU-Auslastung, was wiederum den Energieverbrauch des Geräts erhöht. Deshalb macht es Sinn sich zu fragen, ob die gewünschte Interaktion, Funktionalität oder Animation vielleicht auch mit effizienteren Technologien, wie CSS, realisierbar wäre.
Ähnlich verhält es sich mit Webfonts, denn diese wirken sich ebenfalls oft negativ auf die Dateigröße der Webseite aus. Wer Daten, Ladezeiten und Energie sparen will, sollte Systemschriften in Betracht ziehen. Wir meinen jedoch nicht Arial oder Times New Roman - die Rede ist von Schriften, die Hausherren ihrer Betriebssysteme sind und für moderne, hochauflösende Bildschirme konzipiert wurden: Apple, Google & Microsoft haben mit ihren Systemschriften San Francisco, Roboto & Segoe performante, schöne und wirkungsvolle Fonts geliefert, welche auf Webseiten (wie dieser hier) einen guten Job machen.
Neue & alte Techniken - WebP & Dark Mode
Die technische Optimierung von Bilddateien verbessert die Ladezeit und somit auch die Benutzerfreundlichkeit einer Webseite und senkt zudem deren Energieverbrauch. Es gibt viele gute Online-Tools, um Bilddateien ohne sichtbaren Qualitätsverlust zu komprimieren und in ein effizientes Dateiformat, z.B. WebP, zu konvertieren. Außerdem helfen responsive Image Elemente wie picture und srcset um für jedes Endgerät die passende Bildgröße auszuliefern.
Dunkle Webseiten waren eine der ersten Techniken, die vor vielen Jahren zum online Energiesparen populär wurden. Sie verschwanden jedoch mit dem Aufkommen von LCD-Bildschirmen. Mit neuen OLED-Bildschirmen, die wieder jedes Pixel einzeln beleuchten, ist dies jedoch wieder eine praktikable Technik, um den Energieverbrauch auf Endgeräten zu reduzieren. Heute zieht der Dark Mode in immer mehr Apps und Geräte als Standard Feature zum Energiesparen (wie auch in dieser Website) ein.
Voltaren Schmerzgel
| 60g | 9,10 € |
| 120g | 16.- € |
| 180g | 22,20 € |
Voltaren Schmerzgel Forte
| 100g | 19,60€ |
| 150g | 25,90€ |
Angocin Anti Infekt N
| Filmtabletten | |
| 50 St. | 10,50 € |
| 100 St. | 18,10 € |
| 200 St. | 32,90€ |
Vitamin B-Komplex-ratiopharm
| 60 St. | 19,20 € |
Tebonin intens 120mg
| 30 St. | 29,20€ |
Bronchipret©
| Tropfen | |
| 50ml | 10,90 € |
FAKTU lind
| Posterisan akut | |
| 25g | 13,30 € |
| Posterisan protect | |
| 25g | 11,99 € |
Euphrasia Augentropfen
| 5x0,5ml | 5,50 € |
| 10x0,5ml | 9,40 € |
| 30x0,5ml | 19,70 € |
Floradix mit Eisen
| 5x0,5ml | 5,50 € |
| 10x0,5ml | 9,40 € |
| 30x0,5ml | 19,70 € |
