Was sind responsive Inhalte?

responsive Inhalte

3d rendering with multidevices with responsive we design website

Andreas Kirchner

Autor: Andreas Kirchner

Kontakt: Profil Xing

Datum: 24.06.2017, 18:02 Uhr

Bei responsive Inhalten handelt es sich um Inhalte, die gezielt ausgeblendet werden, um eine optimale Darstellung auf mobilen Endgeräten zu erreichen. Schließlich haben diese Endgeräte einen deutlich kleineren Bildschirm als der Desktop-PC, sodass weniger Platz für die Darstellung der Inhalte zur Verfügung steht. Doch die Ausblendung der Inhalte kann sich als negativ erweisen, denn der Nutzer eines mobilen Endgeräts kann eventuell wichtige Inhalte nicht mehr sehen.

Wenn Sie die Inhalte ausblenden lassen möchten, können Sie die folgenden responsiven Helferklassen verwenden:

  • hidden-xd
  • hidden-sm
  • hidden-md
  • hidden-1g

Sofern Sie möchten, dass die ausgeblendeten Inhalte dennoch heruntergeladen werden, können Sie mit dem folgenden Code arbeiten:

.bildgr. {

Display: none;

}

Sie sollten darauf achten, dass keine Bilder oder Dateien heruntergeladen werden, wenn dies nicht unbedingt notwendig ist. Hierdurch würden erhebliche Ressourcen verschwendet werden.

Inhalte für Smartphone-User nicht verfügbar

Es besteht die Möglichkeit display: none für kleine Elemente zu verwenden, sodass diese nicht mehr auf dem Smartphone dargestellt werden. Auf die Performance selbst wirkt sich dies unter Umständen auch nicht negativ aus. Inhalte, die aufgrund ihrer Wichtigkeit auf dem Desktop-PC dargestellt werden, sieht man auf dem Smartphone jedoch möglicherweise nicht mehr. Dies kann zu einem echten Problem werden.

Welche Alternative zu display: none gibt es?

Sollte der Platz für eine gute Darstellung definitiv nicht ausreichen, muss also im besten Fall eine Alternative zu display: none her.

Eine Möglichkeit wäre beispielsweise, dass die Inhalte generell nicht angezeigt werden. Wenn der User jedoch gezielt klickt, werden ihm die Inhalte zur Verfügung gestellt. Für den Fall, dass von Anfang an ausreichend Platz für die Anzeige vorhanden ist, können selbstverständlich sämtliche Inhalte dargestellt werden.

Mit diesem Script gelingt die Einbindung

Wenn Sie die eben genannte Methode verwenden möchten, nutzen Sie das folgende Script:

<script src=“../../libs/jquery/jquery.js“></script>
<script src=“../../libs/matchMedia/matchMedia.js“></script>
<script src=“../../libs/matchMedia/matchMedia.addListener.js“></script>
<script src=“../../src/ajaxInclude.js“></script>

Lösen Sie die Funktionalität über ajaxInclude() aus, indem Sie zudem das folgende Script einbauen:

<script>
$(„[data-after]“).ajaxInclude();
</script>

Das könnte Sie auch interessieren

Fotolia / 10 Tipps für Anzeigenerweiterungen in Google AdWords

10 Tipps für Anzeigenerweiterungen

Vom: 11. Juni, 2017 | Autor: Andreas Kirchner

Herkömmliche AdWords-Anzeigen waren gestern. Wenn Sie sich mit Ihrer Anzeige vom Angebot der Konkurrenz abheben ...

mehr erfahren
Keyword Research

Was sind Schlüsselwörter in einem Text aus SEO Sicht?

Vom: 31. März, 2017 | Autor: Andreas Kirchner

Die Schlüsselwörter spielen aus SEO Sicht eine entscheidende Rolle. Es handelt sich dabei um die ...

mehr erfahren
Automatische Umstellung Eigene Telefonnummer auf Weiterleitungsrufnummer

Automatische Umstellung der Anruferweiterung in Google AdWords

Vom: 7. März, 2016 | Autor: Andreas Kirchner

Am 09. März 2016 wird Google automatisch in allen AdWords-Konten alle Telefonnummer, die als "Eigene ...

mehr erfahren
zurück

Unsere Blogthemen

Rückruf anfordern und Vorteile nutzen

Nehmen Sie gerne mit uns Kontakt auf.
Wir werden uns schnellstens mit Ihnen in Verbindung setzen.

Das interessiert unsere Kunden

Automatische Umstellung Eigene Telefonnummer auf Weiterleitungsrufnummer
Am 09. März 2016 wird Google automatisch in allen AdWords-Konten alle Telefonnummer, die als "Eigene Telefonnummer", ...
mehr erfahren
E-Mail-Marketing mit Mailchimp
Bei Mailchimp handelt es sich um einen Newsletterdienst, der direkt online zur Verfügung steht. Ein Server ...
mehr erfahren
Kundenberertungen e-Commerce
Kundenbewertungen werden im E-Commerce immer wichtiger, da Sie für Unternehmen große Vorteile bringen können. Welche das ...
mehr erfahren
Tablett mit Grafiken
Google AdWords ermöglicht Ihnen, Werbeanzeigen bei Google zu platzieren, um hierdurch sichtbarer zu werden. Natürlich lässt Google ...
mehr erfahren

Copyright © 2019 Hanseranking GmbH

Hanseranking GmbH hat 4,79 von 5 Sternen | 387 Bewertungen auf ProvenExpert.com

Einfach und direkt anfragen:

Ob kostenlose Beratung oder unverbindlicher AdWords-Konto-Check.
Wir sind für Sie da!

Tel.: +49 40 570 10 75 50

Nehmen Sie gerne mit uns Kontakt auf.
Wir werden uns schnellstens mit Ihnen in Verbindung setzen.