kulturbanause Blog

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

JavaScript-Events im Responsive Webdesign mit Breakpoints.js

"Responsive Webdesign" ist in aller Munde, doch für komplexe Seitenstrukturen und Usability-Konzepte reicht CSS alleine häufig nicht mehr aus.
Das Script Breakpoint.js erlaubt es JavaScript-Events an bestimmte Media Queries zu knüpfen. Wird ein bestimmter Viewport erreicht oder verlassen, löst das Script ein Event aus.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Der große Vorteil von Breakpoint.js ist, dass das Script nicht versucht ein spezielles Problem zu lösen sondern sehr allgemein funktioniert und dadurch universell einsetzbar ist. Mit den Möglichkeiten von JavaScript in Kombination mit CSS lassen sich auch aufwändige mobile Website benutzerfreundlich umsetzen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

7 Kommentare

  1. Mirko

    Verfasst am 11. Januar 2012 um 15:39 Uhr.

    Sehr schöner Tipp – damit lässt sich eine Menge anstellen :)
    Ich bin allerdings schon wieder vom Responsive Design abgekommen, weil insbesondere wenn man Webseiten mit Bannerwerbung monetarisieren möchte, noch keine ordentliche Lösung vorhanden ist. Technisch wäre es zwar (ob nun mit oder ohne der breakpoint.js) möglich, Werbebanner abhängig der Bildschirmbreite auszutauschen – jedoch verstößt dies oftmals gegen die Richtlinien der Advertiser. Meinen Frust habe ich mal auf meinem Blog darüber abgelassen (ich hoffe, ich darf den Link hier posten):
    http://www.mirkoschubert.de/416-responsive-design-problem-werbung.html

    Vielleicht fällt Dir dazu noch etwas ein? ;)

  2. .faileN

    Verfasst am 14. Januar 2012 um 1:28 Uhr.

    @Mirko:

    Ich finde die Aussage ein wenig zu krass. Von Responsive Webdesign abzurücken, nur weil Werbebanner aufgrund Ihrer Größe nicht funktionieren, finde ich schon krass. Wenn man Responsive Webdesign mal bewertet, dann ist es quasi die „moderne Barrierefreiheit“, auf die ja vor einigen Jahren ziemlich Wert gelegt wurde und die mittlerweile auf jeder Seite Standard sein sollte. Heute würde man auch nicht auf Barrierefreiheit verzichten, nur weil man es nicht hinkriegt, beispielsweise eine bestimmte CSS-Eigenschaft zu implementieren. Ich hoffe Du verstehst was ich sagen will: Der Gewinn von Response Webdesign ist – meiner Meinung nach – so zu gewichten, dass es auf jeden Fall mehr Wert ist als irgendwelche Werbebanner. Und man deshalb nicht drauf verzichten sollte.

    Dennoch eine Idee, die mir gerade kommt und Dein Problem zu lösen. Angenommen Du benutzt Google-Adwords. Dort hast Du ja die Möglichkeit Werbeblöcke in verschiedenen Größen anzulegen. Dann würde ich genau das machen, was Du bereits gesagt hast. Einen Banner Anzeigenblock anlegen und einen etwas kleineren. Sobald Du dann unter eine bestimmte Auflösung auf Deiner Seite kommst, wird dynamisch per JS der breite Banner, gegen die kleinere Werbeblock-Anzeige ausgetauscht. Das sollte eigentlich vollkommen rechtens sein. Ich weiß allerdings nicht wie es bei anderen Ad-Partner aussieht, also ob die auch die Möglichkeit der Größenwahl unterstützen.

  3. Mirko

    Verfasst am 15. Januar 2012 um 2:00 Uhr.

    @.faileN

    Ich bin grundsätzlich sehr aufgeschlossen gegenüber neuen Technologien und arbeite gern mit HTML5 und CSS3. Ich hab im Gründe auch nichts gegen die Idee des Responsive Designs und würde die liebend gern einsetzen. Aber hier von Barrierefreiheit zu sprechen, finde ich ebenso gewagt. Solange noch Browser im Einsatz sind, die HTML5 nur mit speziellen Weichen und Hacks unterstützen und noch genügend Handys gibt, die kein CSS3 unterstützen, ist die Technik meiner Meinung nach auch nicht barrierefrei.

    Und wenn man gerade an einem Re-Design eines Online-Magazins sitzt, das sich zum größten Teil durch Werbeeinblendungen finanziert, ist dieser Faktor durchaus zu Bedenken. Wie ich schon in meinem Artikel geschrieben habe, geht mein Appell auch eher an die Werbetreibenden, ein bisschen offener mit neuen Technologien wie dem Responsive Design umzugehen. Bis es dafür keine Lösung gibt, kann ich das eben nicht einsetzen, denn die Werbung bei einem Magazin zu streichen, wäre fatal.

    Du meinst sicher AdSense ;) Und gerade Google zeigt sich dort besonders weltfremd. Die Idee mit dem Austausch habe ich auch schon gehabt und nach eingehender Recherche sofort wieder verworfen: Ein asynchroner Austausch kommt ja einem „Verstecken“ gleich, auch wenn eine neue Anzeige erscheint. Und dies kann durchaus zur Löschung des Accounts führen. Einige Affiliate-Netzwerke haben ähnliche Richtlinien. Und meinen Account will ich nicht riskieren.

  4. Marc Haunschild

    Verfasst am 18. September 2012 um 8:16 Uhr.

    > „Responsive Webdesign“ ist in aller Munde, doch für komplexe
    > Seitenstrukturen und Usability-Konzepte reicht CSS alleine häufig nicht mehr
    > aus.

    Hast Du dafür Beispiele – bisher kam ich immer mit CSS aus (so lange es sich nicht um Anwendungen handelt, die programmiert werden müssen).

    Mir fehlt da gerade ein bisschen die Phanatsie?!?

    • Jonas Hellwig

      Verfasst am 18. September 2012 um 8:34 Uhr.

      Hallo Marc, spontan fällt mir diese Website ein: http://ucsd.edu/. Das Projekt ist zwar Full Responsive, allerdings ist die Navigation extrem unübersichtlich in der mobilen Variante. Hier könnte sicher mit JavaScript etwas verbessert werden.

      • Marc Haunschild

        Verfasst am 29. September 2012 um 14:42 Uhr.

        hmmm… liegt das denn wirklich da dran, dass es mit CSS nciht besser geht? Oder wurde das nur so umgesetzt, weil es irgendjemand so gut fand. Mir ist nicht so ganz klar, was JS hier verbessern könnte. Ich nehme an, das ist genauso wie die entscheidenden Leute es haben wollten.

  5. Stephan

    Verfasst am 7. Dezember 2013 um 15:00 Uhr.

    ich finde Responsive Webdesign ist sehr gut in CSS umzusetzen.
    Lediglich finde ich es problematisch, dass bei einer Handy Ansicht, trotzdem der Inhalt der Desktop Version geladen wird. Das spart keine Daten. Kann man über JS diese CSS Befehle je nach Bildschirm Auflösung vom laden ausklammern? Und wenn ja wie? Hat jemand ein Beispiel?

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.