Responsive Web Oberhalb der Falzlinie

Der Titel dieses Beitrags ist nicht nur ein schwacher Versuch, SEO zu optimieren, sondern auch ein blinder Scherenschlag in ein Bienenschwarm-Konvent! Wenige Themen in der Webproduktion können das Blut eines Nerds so schnell zum Überkochen bringen wie "Die Falzlinie" und "Responsive Web Design", daher ist es höchste Zeit, dass wir die beiden kombinieren und diesen Server unter dem reinen Gewicht von Trollen, die teilen, wie sie wirklich über mich als Person denken, zur Strecke bringen.

Bevor die Webby's den Preis für die "Beste Nutzung von Naivität" erfinden müssen, möchte ich darauf hinweisen, dass ich jahrelang im Lager "Die Falzlinie ist tot" war. Nichts erfreute mich mehr, als eine Website mit der Quelle der Scroll-Metapher zu vergleichen; Papyrusrollen (Bonuspunkte, wenn ich einen Font-Witz einbauen konnte). "Sicher, und als Schreiber vermieden sie wahrscheinlich das Scrollen, indem sie Briefe auf Fortuna-Keks-Papier schrieben, *nicht wahr?!*" (Kunden lieben wahrscheinlich Sarkasmus). Kürzlich war ich jedoch gezwungen zuzugeben, dass ich vielleicht etwas entgegenkommender gegenüber den Befürwortern der Falzlinie sein sollte, anstatt sie einfach mit meinem Sack voller gebrauchter Mausrad-Räder zu verhauen.

Kürzlich hat Google (zufällig ein Unternehmen, dessen saubere Website "oberhalb der Falzlinie" nur ein Tor zu vielen scrollenden Suchergebnissen ist) eine neue Funktion zu seiner Google Analytics-Suite hinzugefügt, mit der Sie sehen können, mit welcher Browsergröße Benutzer Ihre Website besuchen. Dies ermöglichte es mir, so zu tun, als ob die Daten der Monitorauflösung des Benutzers tatsächlich etwas Relevantes bedeuten würden, und mehr über die Art und Weise zu lernen, wie Benutzer meine Website surfen.

Google Analytics ist ein nützliches Werkzeug und kann mehr tun, als nur Ihren Glauben an die Fähigkeit der Menschheit, ihren Webbrowser aufzurüsten, zu erschüttern. Dieses Werkzeug kann Ihnen buchstäblich sagen, wie Ihre Website genutzt wird. Sie können leicht sehen, wer scrollt und auf diese großen, glänzenden Buttons klickt, die Sie sorgfältig gestaltet haben, selbst nachdem sie von mehreren Instanzen der *"Ask Jeeves"-Toolbar* gut aus dem Blickfeld gedrängt wurden. Es zeigt Ihnen buchstäblich einen Prozentsatz davon an, wer scrollt und auf einzelne Links klickt!

Dieses neue Analysewerkzeug hat mich dazu gebracht, die Falzlinie neu zu überdenken. Früher dachte ich an die Falzlinie als eine Schwäche oder ein Handicap von Luddite-Benutzern, aber zum ersten Mal sah ich, dass die Falzlinie einen riesigen Einfluss darauf hat, wie auch ich (ein versierter *Webmaster*) im Web surfe. Ich musste mir eingestehen, dass ich *viel* abpralle (Google Analytics hat mich wahrscheinlich mit der Aufmerksamkeitsspanne eines Goldfisches eingestuft). Oft entscheide ich mich, eine Website innerhalb einer Sekunde nach der Ankunft zu verlassen, wenn ich nicht sofort sehe, wonach ich gesucht habe, oder wenn ich denke, dass die Website aussieht, als wäre sie von Nagetieren gebaut worden. Bücher und Websites nach dem Cover zu beurteilen, schadet normalerweise nicht, bis mich ein Mangel an Ergebnissen dazu bringt, auf dieselbe Seite zurückzukehren, um genauer hinzusehen, nur um festzustellen, dass der fragliche Inhalt geradezu frech unter der Falzlinie sitzt.

Erste Schritte

Die neue Funktion für Browsergrößenanalysen ist nun schon lange genug verfügbar, dass Sie echte Daten darüber sehen können, wie Ihr aktuelles Website-Design bei ungeduldigen Leuten wie mir abschneidet! Sie werden feststellen, dass viele Benutzer ihre Browser nicht im Vollbildmodus verwenden. Während dies bei Mac-Benutzern schon immer der Fall war (die meisten sagen bitterlich, dass sie ihre Fenster lieber kleiner mögen, nachdem sie nicht herausfinden konnten, was dieser UI-"+" Button tut), stellt sich heraus, dass viele PC-Benutzer dies wahrscheinlich auch nicht tun (wahrscheinlich versuchen sie, vor den genannten Mac-Leuten cool auszusehen).

Ich vermute, die Ergebnisse der Berichte werden Sie zu einer von zwei Dingen motivieren: persönlich jeden Benutzer wegen seiner fragwürdigen Computerhabits an dunklen, abgelegenen Orten zur Rede stellen oder Ihr Design feinabstimmen wollen. Letzteres ist dort, wo ein praktisches vertikales Responsive Web Design ins Spiel kommt (für Ersteres empfehle ich einen Sack voller gebrauchter Mausrad-Räder).

Vertikales Responsive Web Design

In den letzten Jahren haben wir alle unsere Monitorbreiten wie ausgelassene Akkordeonisten verändert, um RWD besser zu verstehen. Die Magie dahinter sind die inzwischen üblichen Media Queries

@media screen and (min-width: 768px) {  
  marquee { font-size: 43em; }
}

Um mit vertikalem RWD zu beginnen, ist es eine einfache Sache, sich um Höhen zu kümmern. Kinderleicht.

@media screen and (min-height: 768px) {  
  blink { color: pink; }
}

Ich wollte ein paar praktische vertikal responsive Demos erstellen, um zu verführen und zu erfreuen!

Beispiel #1: Eine kuscheligere, schmiegsamere Falzlinie

Die offensichtlichste Anwendung von vertikalem RWD wäre, Ihre wichtigsten Handlungsaufforderungen über der Falzlinie zu halten. Um dieses Beispiel besonders spaßig zu gestalten, habe ich mich entschieden, dies auf einem bestehenden horizontal responsiven Layout zu tun, freundlicherweise von Twitter Bootstrap. Auf zwei Achsen responsiv zu sein, macht viel Spaß und ist eine großartige Gelegenheit, etwas unordentlichen Code zu erstellen, wenn Sie so etwas mögen.

Wenn Sie diese Demo-Seite auf dem Desktop vertikal verkleinern, möchte ich, dass alle vier Buttons so weit wie möglich sichtbar bleiben (hoffentlich hat die durchschnittliche Website nur eine Haupt-CTA). Für mobile Größen muss nur der blaue CTA-Button sichtbar bleiben. Für diese Demo habe ich beschlossen, mich nicht um Bildschirme kürzer als 320px zu kümmern. Realistisch gesehen sollten dies sowohl die extrem kleinen Desktop-Benutzer als auch die mobilen Benutzer abdecken. Wir sollten bequem darüber sprechen können, die Benutzer mit *kleineren Ansichtsfenstern* in dem Ton anzusprechen, den wir normalerweise für IE6-Benutzer reservieren.

Bei diesem Twitter Bootstrap-Layout gibt es vier horizontale Haltepunkte – alle bis auf den letzten (wenn die unteren 3 Spalten gestapelt werden) kann ich meine Buttons im Blick behalten. Dies geschieht alles durch ein paar Media Queries, die Sie in einem <style>-Block am Ende des Quelldokuments finden können.

Alles in allem war es ziemlich einfach, dieses Layout so anzupassen, dass es auf diese Weise funktioniert (sagte er zuversichtlich, obwohl er sich absichtlich für ein Layout ohne Medien oberhalb der Falzlinie entschieden hatte), insbesondere durch das Anhängen an bestehende horizontale Haltepunkte.

Natürlich müssen wir auch den hässlichen Elefanten ansprechen, der praktisch wie ein immer unwillkommener Hausbesetzer in diesem Raum lebt: Was tun wir mit den alten Versionen von Internet Explorer? Es gibt eine nette kleine JavaScript-Bibliothek namens CSS3MediaQueries.js, die den Trick ziemlich gut macht. Ich habe sie in dieser Demo in bedingten IE-Tags aufgenommen. Obwohl sie nicht so flüssig wie ein moderner Browser skaliert, sieht der Benutzer beim Laden der Seite die responsive Version des Layouts. Schön.

Twitter Bootstrap Demo

Demo ansehen

Beispiel #2: WordPress Dashboard Navigation Tweak

Dieses Beispiel ist viel einfacher: eine winzige Media-Query mit einem einfachen CSS-Code, der die normalerweise relativ positionierte linke Navigation, an die alle WordPress-Administratoren gewöhnt sind, komplett verändert.

@media screen and (min-height: 500px) {  
  #adminmenuwrap { position: fixed; } 
}

Jetzt bleibt die Navigation, unabhängig davon, ob sie eingeklappt oder im N00b-Modus ist (ich scherze), sichtbar, wenn Sie durch längere Seiten scrollen – vorausgesetzt, Ihre vertikale Auflösung ist höher als 500px. Wenn Ihr Browser kürzer ist, wird sie wieder zu einem relativ positionierten Element, das mit dem Rest der Website scrollt. Ich habe 500px gewählt, was für das Standardmenü sowie für einige zusätzliche Menüpunkte von Plugins oder Themes ausreicht.

Diese vertikal ausgerichtete RWD-Positionierung kann sehr gut für Navigationen, Widgets, Katzenbilder, Seitenwerkzeuge und sogar die schönen Anzeigen funktionieren, wie die von den charmanten Sponsoren dieser Website!

Für diesen Proof of Concept habe ich eine lokalisierte HTML-Version des WordPress-Dashboards erstellt (alle Links sind kaputt, es ist nur eine Demonstration des Scrolling-Effekts)

WordPress Dashboard Demo (nur Media Query)

Demo ansehen

Die in meinem Beispiel verwendeten 500px funktionieren nur, wenn Sie die maximale benötigte Höhe für das Element kennen. Wenn die Höhe dieses Objekts jedoch unbekannt ist oder sich ändert (z.B. eine Akkordeon-Navigation mit mehreren Ebenen), möchten Sie vielleicht ein bisschen jQuery in Betracht ziehen, das die Höhe des Objekts mit der Höhe Ihres Fensters vergleicht.

Das habe ich in der folgenden Variante unserer Demo getan, indem ich jQuery aufgerufen und dieses Skript verwendet habe.

var setResponsive = function () {

  // Is the window taller than the #adminmenuwrap by 50px or more?
  if ($(window).height() > $("#adminmenuwrap").height() + 50) {

     // ...if so, make the #adminmenuwrap fixed
     $('#adminmenuwrap').css('position', 'fixed'); 
    
  } else {
       
     //...otherwise, leave it relative        
     $('#adminmenuwrap').css('position', 'relative'); 

  }

}

$(window).resize(setResponsive);
setResponsive();

WordPress Dashboard Demo (mit jQuery)

Demo ansehen

Eine hohe Anforderung

So, das haben Sie.

Eine kleine Einschränkung: Im gesamten Beitrag habe ich den Begriff "vertikales Responsive Web Design" verwendet – bitte verstehen Sie, dass ich nur die Ausrichtung der Responsivität angebe und keinen neuen Begriff präge. Ob die Antwort vertikal oder horizontal ist, der Begriff "Responsive Web Design" erfasst alles.

Ich denke, wir können mit vertikalem Responsive Web Design in Bezug auf unsere Best Practices, unsere Inhalte und unsere Benutzer noch viel mehr tun. Das Aufkommen dieses flotten neuen Google Analytics-Tools macht dies zu einer großartigen Zeit, um damit zu beginnen. Früher mochten diese gewitzten Benutzer mit kurzen Browsern unvorhersehbar und frustrierend genug gewesen sein, um Berners-Lee dazu zu bringen, ein Kätzchen zu treten, aber jetzt können wir aus ihrem Verhalten lernen und die üblichen Wege vorhersagen, wie sie wichtige Inhalte ansehen werden.

Gute Nachrichten, meine Freunde, die Falzlinie ist jetzt *un*tot.