Wie man mit 165 Media Queries oder weniger atemberaubende Effekte erzielt!

Responsive Web Design ist derzeit das große Buzzword der Branche, und das aus gutem Grund; Ihre Website für verschiedene Geräte und Kontexte visuell zu optimieren, ist eine brillante Idee. Ihre Website existiert, um gesehen zu werden, warum also jemanden ausschließen?

Seltsamer RWD-Nebeneffekt

Ein bizarrer Trend, der in dieser neuen RWD-Ära aufkommt, ist, dass Desktop-Webdesigner ihre Browser verkleinern, um zu sehen, wie sich die Darstellung an den Breakpoints ändert. Der durchschnittliche Benutzer sitzt nie an seinem Schreibtisch und schrumpft und erweitert wiederholt das Browserfenster wie ein verrückter Wissenschaftler. Ja, wir sind alle seltsam. Die persönliche Website von jemandem wie Ihnen und mir hat wahrscheinlich diesen seltsamen Benutzer, der das Browserfenster verkleinert, als Zielgruppe und häufigsten Besucher, also warum nicht darauf spielen?

Responsive Texte sind ein relativ neues Unterthema, das gerade erst erforscht wird (Frankie Roberto hat kürzlich diesen Beitrag über responsive Texte veröffentlicht). Heute möchte ich darüber sprechen, wie man eine Überschrift ändert, um mit Media Queries einen eindrucksvollen Effekt zu erzielen. Dieser Effekt wird erzielt, indem viele Media Queries in kurzer Folge ausgelöst werden. Mit diesem Ansatz gibt es keine Grenzen für die atemberaubenden visuellen Effekte, die Ihre Website erzeugen kann.

Es beginnt mit einem persönlichen Projekt

Ich habe kürzlich meine persönliche Website ArleyM.com aufgefrischt. Es gibt einige „Old-School“-Responsive-Effekte auf meiner Startseite (lose basierend auf diesem Responsive Framework, das Chris Coyier vor ein paar Monaten getwittert hat), bei denen das Bild von mir unter meinem Vornamen, aber über meinem Nachnamen gleitet. Dies geschieht durch eine prozentuale Positionierung des Bildes. Ich dachte, ich wäre nachlässig, wenn ich keine weiteren auffälligen Responsive-Features auf der Website hätte, also grub ich mich zurück in meine Experimente. Ein persönliches Projekt ist der perfekte Ort, um etwas Verrücktes zu tun, wozu man sonst nie die Gelegenheit bekommt, bei Kundenprojekten. Ich beschloss, „Responsive Adjektive“ hinzuzufügen, die unten auf diesem Bild gezeigt werden.

Ich nenne die Verwendung unzähliger Media Queries „Lark Queries“ (Das Wort ‚Lark‘ bezieht sich oft auf etwas, das zum Spaß oder spielerisch getan wird, aber ich denke auch gerne daran, ein einfaches Konzept auf ein extremes Niveau zu heben). Ganz einfach, der Benutzer sieht je nach Breite seines Browsers unterschiedliche Wörter. Viele Benutzer werden nie merken, dass etwas Ungewöhnliches vor sich geht – aber wenn jemand prüft, ob die Website responsive ist, könnten sie von diesem ungewöhnlichen Effekt überrascht sein.

Erstellung des Effekts

Es gibt ein paar Möglichkeiten, dies zu erreichen. Ich habe mich entschieden, alles mit CSS zu machen. Ich habe einen Media Query Breakpoint alle 10 Pixel von 300 Pixel bis 1920 Pixel erstellt und dann ein
paar zusätzliche Breakpoints darüber für Benutzer mit zwei Monitoren und 27-Zoll-Cinema-Displays. Dann habe ich das CSS Content-Attribut verwendet, um den Text in die h2 einzufügen. Das content-Attribut wird von IE7 nicht unterstützt, aber für meine Website machen alle Versionen von IE weniger als 4% des gesamten Traffics aus.

Das HTML

Hier haben wir eine einfache h2 mit einem übergeordneten div, um den Selektor eindeutig zu machen (das ist nichts, was ich auf jeder h2 auf meiner Website haben möchte!).

Das leere span ist vorhanden, damit die CSS den Inhalt danach rendern kann. Wenn ich mit älteren IE-Versionen umgehen müsste, würde ich tatsächlich ein statisches Standardwort in das Span einfügen und es nur bei Bedarf mit bedingten Wrapper-Elementen anzeigen (wie in How to Create an IE only stylesheet).

Das CSS

@media (max-width: 980px) {
  .row h2 span:after { content: 'Unusual.' }
}

Hier ist nur eine Zeile der vielen Media Queries, die ich erstellt habe (insgesamt 165!). Alles, was sich ändert, ist der Wert für max-width und der Wert für content. Die Media Queries waren der einfache Teil, sich ein anderes Wort auszudenken und es nach Länge zu sortieren, war wirklich zeitaufwendig (Danke thesaurus.com)!

Das Ergebnis ist beeindruckend – der Text ändert sich schnell mit dem Schrumpfen des Browsers. Spaß! Das Content-Element fügt nach dem Span mit jedem Media Query Breakpoint automatisch das neue Wort hinzu. Es fühlt sich einfach gut an, dieses praktische Content-Attribut einmal für etwas anderes als ul-Aufzählungspunkte zu verwenden!

Demo ansehen   Dateien herunterladen

Es war interessant, die Unterschiede zu sehen, die diese selten verwendete Eigenschaft in jedem Browser hat! Zum Beispiel erlaubt nur Opera, den Inhaltstext auszuwählen oder zu kopieren/einzufügen.

Semantik verstehen

Man sagt, es sei eine bewährte Methode, den Inhalt in HTML, die Stile in CSS und das Verhalten in JavaScript zu halten. Breche ich also einige Regeln, indem ich buchstäblich eine content-Eigenschaft verwende? Ich glaube nicht.

Man könnte alle Inhaltswerte in HTML einfügen und die Media Queries verwenden, um display:none/inline umzuschalten, aber wenn ein Screenreader oder Google die Chance bekäme, all das zu lesen, wäre das Ergebnis vielleicht nicht das, was Sie sich wünschen! JavaScript könnte diese Aufgabe gut erledigen (und mit weniger Code, wenn Sie alle Inhaltswerte in ein Array einfügen), aber meine CSS-Demo funktioniert auch, wenn JS deaktiviert ist. Ich persönlich finde die Content-Eigenschaft auch charmant, weiß aber nicht warum.

Ich würde auch argumentieren, dass dieser Effekt eher in die Kategorie Stil als in die echte Inhalte fällt. Es ist ein bisschen ein Gimmick, daher mache ich mir für mein eigenes Projekt keine allzu großen Sorgen um die Semantik.

Und was nun?

Offensichtlich würde ein kleiner Teil von mir innerlich sterben, jedes Mal, wenn dieser Code mit dem exakten Text wortwörtlich verwendet würde, also wie sonst könnte diese massive Media-Query-Technik eingesetzt werden? Da sind Sie gefragt! Ich würde gerne einige Ideen in den Kommentaren hören. Lassen Sie sich nicht von der überwältigenden Erkenntnis, wie viel Zeit diese für die Umsetzung brauchen würde, von Ihrer Vorstellungskraft abhalten.

Hier sind ein paar weitere Ideen, die mir eingefallen sind:

• Farben ändern: Die Media Queries könnten Farbe/Hintergrundfarbe ändern, um durch das Farbspektrum, die Sättigungsskala zu gehen oder durch die Tönungen/Nuancen einer Farbe zu wechseln (0to255.com ist ein guter Ort, um Hex-Werte dafür zu bekommen). Dies könnte für ein kleines Element wie die Farbe eines Titels geschehen oder extremer: wie eine vollständige Änderung des Website-Farbschemas.
• Eine Bild-Faux-Animation:* Wenn Sie eine hochwertige DSLR verwenden könnten, die schnell Aufnahmen machen kann, könnten Sie einen atemberaubenden Faux-Animations-Effekt erzeugen (Bild-Preloading wäre entscheidend, dieser RWD-Effekt hat hohe Bandbreitenkosten). Hier steckt so viel Potenzial drin!
• Fokus ändern: Es wäre erstaunlich, wenn das Ändern der Browsergröße den Tiefenschärfefokus der Bilder auf der Seite verschieben würde!
• Verrückt werden: Mit etwas JavaScript sollte es einfach sein zu erkennen, dass ein Browser verkleinert wird und nicht mehr die Größe hat, die er beim Laden hatte. Sie können diese lästigen Browser-verkleinernden Designer verärgern, indem Sie die Website beim Verkleinern verrückt spielen lassen! Ich denke an Katamari Ball-Wahnsinn.
• Benutzerhinweise: Dies könnte tatsächlich praktisch genutzt werden, um Benutzern Hinweise zu geben, dass sie ihr Telefon in den Querformat drehen sollen. Aber „praktisch“ klingt im Vergleich zu den anderen Ideen irgendwie langweilig.

Während ich zu einem Schluss komme und über diese Liste von Dingen nachdenke, die man tun kann, ohne sich vor Media Queries zu scheuen, kann ich nicht anders, als das Gefühl zu haben, dass wir nur die Spitze eines Eisbergs sehen. Ein verrückter, schrumpfender Eisberg.

Ich werde jetzt schon mal das Verkleinern meines Browsers üben!

Update

Sass-Loop-Implementierung von Kitty.