Ethan Marcotte über die Entstehung von Responsive Web Design
Ethan Marcotte ist Hauptredner bei
, die am 20. Juni 2014 stattfinden wird. Geben Sie den Code ein
generiere100
beim
diese Woche, um $ 100 von Ihrem Ticket zu bekommen!
Wenn es einen Mann in der Webbranche gibt, der wahrscheinlich keine Einführung braucht, dann ist es das Ethan Marcotte . Aber als er in seinem Büro mit den weißen Wänden sitzt und seinen Morgenkaffee trinkt, scheint es der logischste Ort zu sein, um anzufangen.
'Ich bin ein unabhängiger Designer mit Sitz in Boston', sagt er, lehnt sich zurück, nippt und lächelt. „Ich lebe und arbeite seit ungefähr 15 Jahren im Nordosten der USA. Während meiner Karriere hatte ich das Glück, unter anderem für das New York Magazine, das Sundance Film Festival, das Boston Globe und das People Magazine zu arbeiten. Aber ich bin zuletzt dafür bekannt, dass ich 2010 den Begriff 'Responsive Web Design' geprägt habe. '
Eine Karriere, nicht beabsichtigt
Obwohl Marcotte einer der bekanntesten Designer im Internet ist, begann seine Internetkarriere ganz zufällig. 'Ich war ein Literaturstudent an der Universität', erzählt er uns. „Irgendwann während meines vierjährigen Studiums bekam ich eine Kopie von Photoshop und fing gerade an, mit Webdesign herumzuspielen. Zuerst war es für mich und dann einige Nebenprojekte. Von dort aus habe ich einige freiberufliche Projekte für Studentenorganisationen durchgeführt. '
Nach vier Jahren des Studiums brauchte Marcotte eine Pause von der akademischen Welt. '1999 sprachen alle über diese Internet-Sache', erinnert er sich. 'Ich dachte,' Ich weiß ein paar Dinge über diese Internet-Sache ', vielleicht könnte ich dort einen Job bekommen? Ein Jahr nach der Schule bekam ich meinen ersten Studiojob, und dort hat das Web seine Haken in mich bekommen. '
Während dieser Zeit arbeitete Marcotte mit einer Reihe von Webprofis zusammen: Fotografen, bildende Künstler und ehemalige Architekten. Es waren Menschen, erzählt er uns, die gerade in dieses neue Medium gestolpert waren. 'Es brachte', erinnert sich Marcotte, 'einen echten multidisziplinären Ansatz für Projekte ... der mir einfach geblieben ist.' Es klingt wahrscheinlich ein bisschen abgedroschen, aber ich habe mich wegen der Leute in diese Branche verliebt. ' Zusammenfassend sagt Marcotte: 'Ich schätze, ich bin 15 oder 16 Jahre alt, um ein paar Jahre vor der Schule frei zu haben.'
Die Entstehung von Responsive
Ich muss die offensichtliche Frage stellen: Wie kam es zu Responsive Design? Keimte die Idee - dass wir aufhören sollten, die Wildheit des Netzes zu zähmen und damit zu rollen - bereits in verschiedenen Ecken der Branche? Oder hatte er einen klassischen Eureka-Moment? Der Name, sagt er uns, kam tatsächlich plötzlich und unerwartet zustande.
Die Philosophie hinter dem Reagieren kristallisierte sich dagegen langsamer heraus. Bereits im Jahr 2000 las Marcotte John Allsopps ' Ein Dao des Webdesigns '. 'Ich bin über Johns Artikel gestolpert', erinnert sich Marcotte. „Zu dieser Zeit hat mir Webdesign Spaß gemacht, aber ich habe es in erster Linie als Job gesehen: etwas, das ich jeden Tag von acht bis sechs gezeigt habe. Johns Artikel zeigte mir, dass das Web ein Ort für Handwerkskunst sein könnte, ich weiß nicht? Dass dies ein Ort sein könnte, an dem Menschen wirklich brillante Dinge tun können. '
In diesem Wendepunkt sagte Allsopp den Designern, es sei Zeit für das Web, über seine kontrollierten, pixelgenauen Druckursprünge hinauszugehen. Die Stärke des Webs, schrieb Allsopp, ist seine Flexibilität und es sollte angenommen werden. Designer sollten sich nicht bemühen, das Web zu zähmen und es wie Druck funktionieren zu lassen.
Johns Artikel hat mir gezeigt, dass das Web ein Ort sein kann, an dem Menschen wirklich brillante Dinge tun können
'John sprach davon,' für das Auf und Ab der Dinge 'zu entwerfen, und das hat mich sehr beeindruckt. Ich war sehr aufgeregt, mich von diesem Begriff der Schnittstellen mit fester Breite zu entfernen “, erzählt Marcotte. Mit anderen Worten, wir sollten das Web zu seinen eigenen Bedingungen nehmen und aufhören, es durch die physischen Grenzen der gedruckten Seite zu definieren. Die Industrie diskutierte immer wieder darüber, wann es „sicher“ sei, die Breite unserer Designs zu verbessern. [Johns Artikel] forderte uns auf, darüber nachzudenken, Designs zu erstellen, die der Form des Browsers folgen, damit die Vorlieben des Benutzers berücksichtigt werden. '
Marcotte erkannte jedoch, dass flexible Layouts allein nicht ausreichten. „Fluid-Layouts waren lange Zeit eine gut klingende Theorie und nicht etwas, das ich gerne für Kundenprojekte verwenden würde. Als Designer gibt es nichts Schlimmeres, als ein Fenster auf einem riesigen Monitor zu maximieren und unangenehm lange Textzeilen zu sehen. Erst als die Medienanfragen an Bedeutung gewannen, wurde mir klar, dass Sie die Fließfähigkeit haben und auch ein wenig Kontrolle darüber behalten können. '
Sie brauchen, schlägt Marcotte vor, einen Mittelweg zwischen absoluter Fließfähigkeit und den strengen Auflagen des Drucks. Und Marcottes Idee brauchte noch einen Namen, und daran erinnert er sich, dass der Zufall seine Hand spielte. 'Ich war im Buchladen und habe ein Buch namens Interactive Architecture in die Hand genommen.'
Glück, Arbeit und Liebe
Die Autoren, erzählt er, haben sich mit der Spannung zwischen der Fixierung eines Gebäudes und den sich ständig ändernden Bedürfnissen seiner Bewohner auseinandergesetzt. „In der Architektur werfen Sie Ihre Entscheidungen in Stein und Beton, Entscheidungen, die Jahrzehnte, vielleicht Jahrhunderte dauern werden. Aber in den letzten Jahren gab es diese Denkschule - diese reaktionsschnellen Architekten -, die versuchten, diese Beständigkeit zu überdenken.
„Sie entwarfen Räume, die sich an die Bedürfnisse der Menschen anpassen konnten, die sie besetzen: Wände, die konkav werden könnten, intelligentes Glas, das undurchsichtig werden könnte, wenn ein Raum eine bestimmte Belegung erreicht und etwas Privatsphäre bietet. Sie sprachen über diese 'reaktionsschnellere' Version der Architektur als ein Gespräch zwischen der Person und dem Raum. Das hat bei mir geklickt. Ich habe dieses Bild geliebt: diese Idee eines Gesprächs zwischen der Person, die das Design durchsucht, und dem Design selbst. '
Der Schmelztiegel der Ideen - Allsopp, Medienfragen und architektonisches Denken - kam in Marcottes Aufsatz zusammen. Sich anpassendes Webdesign ', die am 25. Mai 2010 veröffentlicht wurde. Und damit wurde das Touch Paper beleuchtet.
Reaktionsschnelle Reaktion
Wie steht er dazu, das Konzept in die Webbranche einzuführen? 'Wenn ich auf der Bühne bin, habe ich Angst', lacht er. »Aber am Ende des Tages habe ich gerade einen Artikel geschrieben. Ich habe diesen Artikel geschrieben und bin immer noch erstaunt und verängstigt darüber, wie aufgeregt die Leute darüber sind. Alles, was ich getan habe, war die Idee, dass Desktop und Mobile als separate Dinge nicht skalierbar sind. Tablets waren noch kein Funkeln in den Augen von irgendjemandem, aber wie viele separate Versionen unserer Websites sollten wir erstellen? Wenn ich nicht auf die Idee gekommen wäre, hätte es jemand anderes getan. '
Mein Ziel ist es, das Web für die Menschen, die versuchen, darauf zuzugreifen, so zugänglich und schön wie möglich zu machen
Marcotte ist jedoch nicht entschlossen, auf das 'Little Red Book' der Webbranche zu reagieren. Im Gegenteil, er warnt vor dem Absolutismus. „Ich bin immer misstrauisch gegenüber Leuten, die behaupten, dass es eine echte Arbeitsweise gibt. Und für mich erstreckt sich das auch auf Responsive Design. Wenn Sie eine gerätespezifischere Erfahrung für Ihr Publikum benötigen, wenn die Forschung da ist, wenn die Nachfrage da ist, beginnen Sie hier mit Ihrer Arbeit. Sie müssen nicht versuchen, alles ansprechbar zu machen.
„Wir müssen uns daran erinnern, dass Schätzungen zufolge 60 Prozent der Weltbevölkerung in Netzwerken langsamer als 3G sind und die Menschen Geräte verwenden, die einige Jahre hinter den neuesten und größten zurückbleiben. Mein Ziel ist es, unabhängig von der Technik, das Web für die Menschen, die versuchen, darauf zuzugreifen, so zugänglich wie möglich und so schön wie möglich zu machen. '
Schönheit definieren
Wie definiert Marcotte Schönheit im Web? 'Sie wissen, Zahlen, Beziehungen und Verhältnisse können eine Schönheit sein', sagt er. „So viel von dem, woran wir in der Kunst denken, von Proportionen, von Musik und Metrik, stammt aus der Mathematik. Aber ich sehe täglich reaktionsschnelle Websites, die atemberaubend und ästhetisch schön sind. Leute senden Links [zum @RWD Twitter-Konto ], die über das hinausgehen, was ich mir beim Schreiben meines Artikels hätte vorstellen können. Die Leute haben diese wirklich einfache Formel aus flüssigen Gittern, flexiblen Bildern und Medienabfragen verwendet und verwenden sie als Rahmen, um flexibler für das Web zu gestalten.
„Schönheit ist auf vielen Ebenen ein herausforderndes Wort, weil es so sehr mit unserer Vorstellung von Ästhetik übereinstimmt. Aber es gibt diese größere Herausforderung bei unserer Arbeit. Die Definition von 'Web' variiert stark, je nachdem, wo Sie sich auf der Welt befinden. Afrika südlich der Sahara hat zum Beispiel einen massiven Mobilfunkmarkt, der weitaus größer ist als der in den USA und in Europa. In anderen Ländern, in denen die Infrastrukturen möglicherweise auseinandergefallen sind, ist es immer noch einfach, auf das Internet zuzugreifen, aber ihre Version unterscheidet sich von unserer.
Schönheit ist ein herausforderndes Wort, weil es so sehr mit unserer Vorstellung von Ästhetik übereinstimmt
'Wie bieten wir jemandem in einem langsameren Netzwerk, auf einem weniger leistungsfähigen Telefon, etwas Schönes an?' er fragt. „Ich frage mich, ob wir unsere Diskussion über Responsive Design neu gestalten müssen: Wir müssen Responsive und Responsible entwerfen. Websites mit einer Größe von zwei, drei oder vier Megabyte - nur kleiner als ein PDF - wurden vielfach kritisiert. Das mag sich auf die Ästhetik konzentrieren, aber kritisch wird sich diese Erfahrung verschlechtern, wenn Sie nicht in einem robusten Netzwerk sitzen. Ich denke, wir müssen in unserer Arbeit über Nachhaltigkeit diskutieren. '
Wir diskutieren die Werkzeuge, die uns zur Verfügung stehen, um diese Herausforderung zu meistern. Insbesondere sprechen wir über CSS-Funktionen, von denen Marcotte hofft, dass sie bald ratifiziert werden. 'Ich freue mich sehr über die Module Flexbox und Grid Layout, die uns ein bisschen mehr Layoutunabhängigkeit ermöglichen. Sie versuchen, viele der Stärken von Floats und der absoluten Positionierung zu kombinieren, um uns viel mehr Kontrolle über die Position von Elementen auf einer Seite zu geben.
'Aber es gibt umfassendere Überlegungen zu Werkzeugen. Wir brauchen mehr 'web native' Designtools. Dinge wie Photoshop oder Illustrator sind wunderbare Werkzeuge, aber es geht darum, einen definierten Raum mit Design zu füllen. Ihnen fehlt eine flexible Leinwand. Ich kann es kaum erwarten, eine flexiblere Designanwendung zu verwenden. ' Im Moment, erklärt er, bringt er sein Design an einen Punkt, an dem es 'gut genug' ist, und wechselt dann zu HTML und CSS. Manchmal muss er jedoch zu Photoshop zurückkehren.
„Es ist, als würde man zwischen diesen beiden Welten pogo bleiben. Es gibt keine gute Möglichkeit, dies unter einem Dach zu tun. Vielleicht ist das in Ordnung, aber angesichts der interessanten Arbeit von Macaw und Adobe Reflow frage ich mich, welche Tools bald verfügbar sein könnten. '
Dies führt zu einer weiteren Frage: Wie können Sie einem Kunden ein responsives Design vermitteln? „Ich glaube, noch hat niemand die perfekte Lösung gefunden. Als ich an The Boston Globe arbeitete, haben wir die Kompositionen in HTML und CSS verschoben. [Dann] haben wir einen Prototyp erstellt und ihn reaktionsfähig gemacht. Für die [Client] -Design-Überprüfungen von diesem Punkt an haben wir keine festen Bilder an die Wand projiziert. Wir würden eine Reihe von Geräten zu den Stakeholder-Meetings mitbringen, sie verteilen und die Website von Personen aufrufen lassen. '
Was kommt als nächstes?
Als Marcotte seinen Kaffee beendet hat, besprechen wir die Zukunft. 'Zusätzlich zu einigen großartigen Kundenprojekten denke ich darüber nach, ein weiteres Buch zu schreiben. Karen McGrane und ich arbeiten an einem Workshop über Responsive Design zusammen. Ich spreche dieses Jahr auf einer Reihe von Konferenzen, z. B. Generate NY, und arbeite an einem neuen Vortrag über einen modulgesteuerten Ansatz für Responsive Design und Layout. '
Gib den code ein generiere100 beim die Kasse diese Woche, um $ 100 von Ihrem Ticket zu bekommen New York generieren !
