Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

„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.

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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Stephan
    schrieb am 07.12.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?

    Antworten
  2. Marc Haunschild
    schrieb am 18.09.2012 um 08: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?!?

    Antworten
    • Jonas Hellwig
      schrieb am 18.09.2012 um 08: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.

      Antworten
      • Marc Haunschild
        schrieb am 29.09.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.

  3. Mirko
    schrieb am 15.01.2012 um 02: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.

    Antworten
  4. .faileN
    schrieb am 14.01.2012 um 01: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.

    Antworten
  5. Mirko
    schrieb am 11.01.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? ;)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →