Anspricht Webdesign


Original: http://alistapart.com/article/responsive-web-design

Translated with the permission of A List Apart and the author[s].

Die Steuerung, die Designer wissen, in das Druckmedium, und häufig wünschen in Web-Medium, ist einfach eine Funktion der Begrenzung der gedruckten Seite. Wir sollten umfassen die Tatsache, dass die Bahn nicht die gleichen Einschränkungen und Gestaltung für diese Flexibilität. Aber zuerst müssen wir akzeptieren, die Ebbe und Flut der Dinge. “

John Allsopp, “A Dao von Webdesign”

Der englische Architekt Christopher Wren witzelte einmal, dass seine gewählten Bereich “soll für die Ewigkeit”, und es gibt etwas ansprechender zu dieser Formel: Im Gegensatz zur Bahn, die fühlt sich oft wie mit dem Ziel für die nächste Woche, Architektur eine Disziplin sehr viel durch seine Dauerhaftigkeit definiert ist.

Ein Gebäude das Fundament legt seine Präsenz , die ihren Rahmen, der die Fassade prägt definiert . Jede Phase der architektonischen Prozess ist unveränderlich, mehr unveränderlich als die letzte. Kreative Entscheidungen buchstäblich formen einen physischen Raum , definiert die Art und Weise , in der Menschen bewegen sich durch seine Grenzen für Jahrzehnte oder gar Jahrhunderte.

Arbeiten über das Internet, ist jedoch eine ganz andere Sache . Unsere Arbeit zeichnet sich durch seine Vergänglichkeit , oft verfeinert oder ersetzt innerhalb eines Jahres oder zwei definiert. Uneinheitliche Fensterbreiten , Bildschirmauflösungen , Benutzereinstellungen und unserer Benutzer installierten Schriften sind nur ein paar der immateriellen verhandeln wir , wenn wir unsere Arbeit zu veröffentlichen , und über die Jahre haben wir uns zu unglaublich geschickt darin tun.

Aber die Landschaft verschiebt , vielleicht schneller als wir vielleicht gefallen. Mobiler Internetzugriff wird erwartet, dass Desktop-basierten Zugang innerhalb von drei bis funf Jahren übertreffen . Zwei der drei dominierenden Videospiel-Konsolen haben Web- Browser (und einer von ihnen ist ganz ausgezeichnet ) . Wir für Mäuse und Tastaturen Gestaltung , für die T9- Tastaturen, für Handheld- Game-Controller für Touch-Interfaces . Kurz gesagt , wir sind mit einer größeren Anzahl von Geräten , Eingabe-Modi , und Browsern als je zuvor konfrontiert .

In den letzten Jahren habe ich mit mehr Unternehmen, die ” ein iPhone Website ” fordern als Teil ihres Projekts treffen . Es ist ein interessanter Satz: Auf den ersten Blick natürlich spricht es um mobile WebKit Qualität als Browser , sowie eine leistungsstarke Business Case für das Denken über den Desktop hinaus . Aber als Designer , ich denke, wir oft Trost in solchen expliziten Anforderungen , wie sie uns um die Probleme vor uns compartmentalize ermöglichen . Wir können Quarantäne das mobile Erlebnis auf separaten Subdomains, ist unterschiedliche und separate Räume aus dem ” Nicht- iPhone -Website. ” Aber was kommt als nächstes ? Ein iPad Website? Ein N90 Website? Können wir wirklich weiterhin auf die Unterstützung jedes neue User-Agent mit seiner eigenen Erfahrung maßgeschneiderte begehen? An einem gewissen Punkt , beginnt diese wie ein Nullsummenspiel fühlen. Aber wie können wir unsere Entwürfe – und – anpassen?

Ein flexibles Fundament

Betrachten wir ein Beispiel -Design. Ich habe eine einfache Seite für eine hypothetische Magazin gebaut , es ist ein einfaches Zwei- Spalten-Layout auf einem Fluid Grid gebaut, mit nicht wenigen flexible Bildern gespickt ganz. Als langjähriger Verfechter der nicht festen Layouts , habe ich lange hielten sie mehr “zukunftssicher ” , nur weil sie das Layout Agnostiker waren . Und bis zu einem gewissen Grad , das ist wahr: flexible Designs machen keine Annahmen über ein Browser-Fenster die Breite und passen wunderbar zu Geräten, die Hoch-und Querformat haben .

Riesige Bilder sind riesig. Unser Layout , flexible , obwohl es heißt, nicht gut auf Veränderungen reagieren in Auflösung oder Viewportgröße .

Aber kein Design, feste oder flüssige , Waagen nahtlos über den Rahmen für die sie ursprünglich gedacht war. Die Beispiel- Design perfekt Skalen sowie die Browser- Fenstergröße anpassen , aber Stress Punkte schnell erscheinen bei niedrigeren Auflösungen . Wenn am Viewport kleiner als 800 × 600 angesehen , die Darstellung hinter dem Logo wird schnell abgeschnitten , Navigation Text kann eine ungebührliche Weise wickeln , und die Bilder an der Unterseite werden zu kompakt , um lesbar zu erscheinen . Und es ist nicht nur das untere Ende des Spektrums , die Auflösung ist betroffen: beim Betrachten der Entwurf auf einem Widescreen-Display , die Bilder schnell zu wachsen, um sperrige Größen Verdrängung der umgebenden Kontext .

Kurz gesagt, arbeitet unser flexibles Design gut genug in der Desktop -centric Kontext für die es konzipiert wurde , ist aber nicht so optimiert, dass weit darüber hinaus zu verlängern.

Werden reagiert

Vor kurzem hat eine emergente Disziplin namens “responsive Architektur” begonnen zu fragen, wie physische Räume können auf die Anwesenheit von Menschen, die durch sie zu reagieren . Durch eine Kombination von Robotik und eingebettete Zug Materialien , sind Architekten mit Kunstinstallationen und Wandkonstruktionen , dass bend , flex und als Massen ihnen zu nähern erweitern experimentieren . Bewegungsmelder können mit Klimaanlagen gekoppelt werden, um einen Raum der Temperatur und Umgebungslicht anpassen, wie es mit Menschen füllt . Die Unternehmen haben bereits “smart glass technology ” , die automatisch zu können undurchsichtig , wenn ein Raum -Insassen eine bestimmte Dichte Schwelle zu erreichen , indem sie ihnen eine zusätzliche Schicht der Privatsphäre produziert.

In ihrem Buch Interaktive Architektur, beschrieben Michael Fox und Miles Kemp dieses mehr adaptive Ansatz als ” multiple- Loop-System , in dem man tritt in ein Gespräch ; . Ein kontinuierlicher und konstruktiver Informationsaustausch ” Hervorhebung von mir , wie ich denke, das ist eine feine, aber mächtige Unterschied : anstatt die Schaffung unveränderlich , unveränderlich Räume, die eine besondere Erfahrung definieren , schlagen sie Einwohner und Struktur – und sollte – gegenseitig beeinflussen .

Das ist unser Weg in die Zukunft . Anstatt Schneiderei getrennt Designs zur jeweils aus einer ständig wachsenden Zahl von Web-Geräte , können wir sie als Facetten ein und derselben Erfahrung behandeln. Wir können für ein optimales Seherlebnis zu entwerfen , sondern einzubetten Standards basierende Technologien in unsere Entwürfe , um sie nicht nur flexibler, sondern mehr adaptive zu den Medien , die sie macht . Kurz gesagt , müssen wir reagieren Webdesign üben. Aber wie ?

Treffen Sie die Medien Abfrage

Seit den Tagen von CSS 2.1 , haben unsere Stylesheets ein gewisses Maß an Bewusstsein Gerät durch Medien genossen . Wenn Sie jemals ein Druck-Stylesheet geschrieben habe , sind Sie bereits vertraut mit dem Konzept :

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

In der Hoffnung, dass wir werden entwerfen würde mehr als ordentlich formatiert Seite Ausdrucke lieferte die CSS-Spezifikation uns mit einer Schar von akzeptablen Medientypen, die jeweils für eine bestimmte Klasse von Web-fähige Zielgerät . Aber die meisten Browser und Geräte nie wirklich den Geist der Spezifikation angenommen , so dass viele Medientypen unvollkommen umgesetzt oder gänzlich ignoriert.

Zum Glück der W3C Media Queries als Teil des CSS3 -Spezifikation erstellt , die Verbesserung auf dem Versprechen von Medientypen. Ein Media- Abfrage ermöglicht es uns, nicht nur bestimmte Geräteklassen zielen , sondern tatsächlich Einsicht in die physikalischen Eigenschaften des Gerätes Rendering unserer Arbeit. Zum Beispiel , nach dem jüngsten Anstieg der mobilen WebKit , Medien-Anfragen wurde ein beliebtes Client- Technik für die Bereitstellung einer maßgeschneiderten Stylesheet auf das iPhone , Android-Handys , und ihresgleichen . Um dies zu tun , könnten wir eine Abfrage in einer verknüpften Stylesheet Medien Attribut zu übernehmen:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

Die Abfrage enthält zwei Komponenten:

ein Medientyp ( Bildschirm ) und
die eigentliche Abfrage in Klammern , die ein bestimmtes Merkmal Medien ( max -device -width ) zu inspizieren , um den Zielwert ( 480px ) gefolgt .

Im Klartext , wir bitten Sie das Gerät , wenn die horizontale Auflösung ( max -device -width ) gleich oder kleiner als 480px . Wenn der Test erfolgreich , mit anderen Worten, wenn wir betrachten unsere Arbeit sind auf einem kleinen Bildschirm- Gerät wie das iPhone , dann wird das Gerät laden shetland.css . Andernfalls wird die Verbindung einfach ignoriert .

Die Designer haben mit Auflösung -aware Layouts in der Vergangenheit experimentiert , meist unter Berufung auf JS -driven Lösungen wie ausgezeichnete Skript Cameron Adams ‘ . Aber die Medien Abfragespezifikation bietet eine Vielzahl von Media-Funktionen , die weit über Bildschirmauflösung erstreckt , erheblich zur Erweiterung des Anwendungsbereichs von dem, was wir für unseren Abfragen testen. Was mehr ist, können Sie mehrere Werte im Eigentum einer einzigen Abfrage zu testen durch Verkettung sie zusammen mit dem und Stichwort:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

Außerdem sind wir nicht auf die Einbindung in unsere Medien-Anfragen Links beschränkt. Wir können sie in unserem CSS entweder als Teil einer @ media Regel umfassen :

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Oder als Teil einer @ import -Richtlinie:

@import url("shetland.css") screen and (max-device-width: 480px);

Adapt, zu reagieren und zu überwinden

Wenden wir unsere Aufmerksamkeit auf die Bilder an der Basis unserer Seite. In ihrer Standard-Layout, die relevanten CSS derzeit wie folgt aussieht:

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

Ich habe eine Reihe von typografischen Eigenschaften weggelassen, um auf die Gestaltung konzentrieren:. Jede Figur Element ist so bemessen, bei etwa einem Drittel der enthaltenden Spalte mit dem rechten Rand für die beiden Bilder am Ende jeder Zeile (li Null # f-mycroft, li # f-Winter). Und das funktioniert ziemlich gut, bis das Ansichtsfenster ist entweder deutlich kleiner oder größer als unsere ursprünglichen Entwurf. Mit Media Queries können wir anwenden Auflösung spezifische spotfixes, Anpassung unserer Design besser auf Änderungen in der Anzeige reagieren.

Zunächst einmal wollen wir linearisieren unsere Seite einmal das Ansichtsfenster unter einen bestimmten Schwellenwert-Auflösung sagen, 600px. Also an der Unterseite unserer Stylesheet, erstellen wir eine neue @ media-Block, etwa so:

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

Wenn Sie unsere aktualisierte Seite in einem modernen Desktop-Browser und reduzieren Sie die Größe des Fensters unten 600px, wird der Medien-Abfrage die Schwimmer auf die Gestaltung der wichtigsten Elemente zu deaktivieren, Stapeln jeden Block oben auf einander in der Dokument-Flow. Also unsere miniaturisierten Design ist die Gestaltung bis schön, aber die Bilder immer noch nicht verkleinern, dass intelligent. Wenn wir andere Medien Abfrage einführen, können wir deren Anordnung entsprechend zu ändern:

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

Aber in jedem Fall ist der Effekt der gleiche : Wenn das Gerät den Test , die weiter von unserem Medien -Abfrage , die relevant ist für unsere CSS -Markup angewendet . Medien Abfragen sind , kurz gesagt, conditional comments für den Rest von uns. Anstatt gezielt eine bestimmte Version eines bestimmten Browser , können wir chirurgisch korrigieren Fragen in unserem Layout wie Schuppen über seine anfängliche , ideal Auflösung.

Unsere Zahlen können als Reaktion verändern ihre Anordnung besser an kleinere Displays.

Ich habe nichts dagegen, die unansehnlich Prozentsätze, wir sind einfach eine Neuberechnung der Breiten der Fluid Grid zur Berücksichtigung der neu linearisiert Layout. Kurz gesagt, wir sind von einem Drei-Spalten-Layout zu einem Zwei-Spalten-Layout zu bewegen, wenn des Viewports Breite unterschreitet 400px, so dass die Bilder mehr im Vordergrund.

Wir können tatsächlich den gleichen Ansatz für Widescreen-Displays, auch. Für größere Auflösungen, könnten wir nehmen eine sechs-über Behandlung für unsere Bilder, indem sie alle in der gleichen Reihe:

@ media screen und (min-width: 1300px) {

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

Jetzt sind unsere Bilder sind wunderschön arbeitet an beiden Enden des Spektrums Auflösung, die Optimierung deren Anordnung auf Veränderungen in Fenster Breiten und Auflösung des Geräts gleichermaßen.

Durch die Angabe eines breiteren min-width in einer neuen Medien-Abfrage, können wir unsere Bilder in einer einzigen Zeile Layout verschieben.

Aber dies ist nur der Anfang. Arbeiten aus den Medien-Anfragen in unserem CSS eingebettet haben, können wir verändern, viel mehr als die Vermittlung von ein paar Bilder: können wir neue, alternative Layouts abgestimmt auf jede Auflösung Bereich einzuführen, vielleicht macht die Navigation noch ausgeprägter in einem Widescreen-Ansicht oder Neupositionierung es über dem logo auf kleineren Displays.

Durch die Gestaltung ansprechend , können wir nicht nur unsere Inhalte linearisieren auf kleineren Geräten , sondern optimieren auch die Präsentation in einer ganzen Reihe von Displays.

Aber eine ansprechende Design ist nicht auf Änderungen am Layout begrenzt. Medien Abfragen ermöglichen es uns, einige unglaublich präzise Feinabstimmung üben auf unseren Seiten umzugestalten selbst : Wir können den Zielbereich auf die Links für kleinere Bildschirme zu erhöhen, eine bessere Einhaltung Fitts ‘ Gesetz über die Touch-Geräte ; selektiv ein-oder ausblenden Elemente, die eine Seite der Verbesserung könnte Navigation , und wir können sogar üben ansprechende Schriftsatz allmählich ändern sie die Größe und führenden unseres Textes , die Optimierung der Leseerfahrung für das Display bietet es.

Ein paar technische Hinweise

Es sollte angemerkt werden , dass Medien-Anfragen unglaublich robuste Unterstützung unter den modernen Browsern genießen werden. Desktop- Browsern wie Safari 3 +, Chrome , Firefox 3.5 +, Opera 7 + und alle nativ analysieren Medien-Anfragen , wie auch neueren mobilen Browsern wie Opera Mobile und Mobile WebKit . Natürlich müssen ältere Versionen dieser Desktop-Browsern nicht unterstützt Medien-Anfragen. Und während Microsoft hat Medienberichten Abfrage Unterstützung in IE9 verpflichtet, Internet Explorer derzeit nicht bieten eine native Implementierung .

Allerdings, wenn Sie bei der Umsetzung Vermächtnis Browser-Unterstützung für Medien-Anfragen interessiert sind, gibt es eine JavaScript – getönte Silberstreif :

  •     Ein jQuery-Plugin aus dem Jahr 2007 bietet etwas begrenzt Medien Abfrage Unterstützung, Umsetzung nur die min-width und max-width Medien Eigenschaften bei separaten Link Elemente angebracht.
  •     In jüngerer Zeit wurde CSS3 – mediaqueries.js veröffentlicht , eine Bibliothek, die verspricht “zu machen IE 5 + , Firefox 1 + und Safari 2 transparent analysieren , testen und anwenden CSS3 Media Queries ” , wenn sie über @ media -Blöcke enthalten. Während sehr viel ein Release 1.0 , habe ich persönlich fand es recht robust, und ich plane, ihre Entwicklung zu beobachten.

Aber wenn mit Hilfe von JavaScript nicht ansprechen , das ist durchaus verständlich . Allerdings stärkt , dass der Fall für den Aufbau Ihrer Anlage auf einem flexiblen Gitter , damit Ihr Design genießt ein gewisses Maß an Flexibilität bei der Abfrage Medien -blind Browsern und Geräten .

Der Weg nach vorn
Auch in Ausgabe № 306
Quick and Dirty Remote User Testing

Von Nate Bolt

Fluid Grids , flexible Bildern und Medien-Anfragen sind die drei technischen Zutaten für responsive web design , aber es erfordert auch eine andere Art des Denkens. Anstatt Quarantäne unsere Inhalte in unterschiedlichen , gerätespezifische Erfahrungen , können wir Medien-Anfragen zur schrittweisen Verbesserung unserer Arbeit in unterschiedlichen Betrachtungswinkeln Kontexten. Das ist nicht zu sagen, es gibt kein Business Case für separate Websites auf bestimmte Geräte ausgerichtet , zum Beispiel , wenn der Benutzer die Ziele für Ihre mobile Website sind weniger umfangreich als die Desktop- Äquivalent , dann mit unterschiedlicher Inhalte zu jeder könnte die beste sein Ansatz .

Aber diese Art von Design Thinking nicht brauchen, um unsere Verzug. Jetzt mehr denn je , wir Gestaltung der Arbeit soll entlang eines Gradienten von unterschiedlichen Erfahrungen betrachtet werden. Responsive Webdesign bietet uns einen Weg nach vorn , so dass wir schließlich “für die Ebbe und Flut der Dinge zu entwerfen. “