Итън Маркот за това как се появи отзивчивият уеб дизайн

Итън Маркот е основен лектор в

Генерирайте Ню Йорк



, което ще се проведе на 20 юни 2014 г. Въведете кода



генериране100

вълк, стоящ на задните крака рисунка

в



касата

тази седмица, за да получите 100 долара от билета си!

Ако има един човек в уеб индустрията, който вероятно не се нуждае от представяне, това е така Итън Маркот . Но докато той седи в офиса си с бели стени и отпива сутрешното си кафе, изглежда най-логичното място да започне.



„Аз съм независим дизайнер, базиран в Бостън“, казва той, отпуснат, отпива и се усмихва. „Току-що живея и работя в североизточната част на Съединените щати през последните около 15 години. По време на кариерата си имах щастието да работя като списание New York Magazine, филмовия фестивал Sundance, The Boston Globe и списание People. Но наскоро съм известен с това, че въведох термина „отзивчив уеб дизайн“ още през 2010 г. “

Кариера, а не по дизайн

Въпреки че е един от най-известните дизайнери в мрежата, интернет кариерата на Маркот започва съвсем случайно. „Бях специалност по литература в университета“, казва ни той. „По някое време по време на четиригодишното ми обучение получих копие на Photoshop и току-що започнах да се забърквам с уеб дизайна. Първо беше за мен, а след това и някои странични проекти. Оттам направих някои проекти на свободна практика за студентски организации. '

След четири години обучение Маркот се нуждае от почивка от академичните среди. „През 1999 г. всички говореха за това нещо в интернет“, спомня си той. „Помислих си,„ знам няколко неща за това нещо в интернет “, може би бих могъл да си намеря работа там? Получих първата си работа в студио една година след училище и точно там мрежата ме заби.

По това време Маркот работи с редица уеб професионалисти: фотографи, изящни художници и бивши архитекти. Те са хора, казва той, които току-що са попаднали в тази нова среда. „Това донесе - припомня Маркот - истински мултидисциплинарен подход към проектите ... които просто останаха при мен. Вероятно звучи малко коварно, но аз се влюбих в тази индустрия заради хората. Като обобщение, Маркот казва: „И така, предполагам, че съм на 15 или 16 години, за да взема няколко години почивка преди завършване на училище“.

Интервю на Итън Маркот

Въпреки че е един от най-известните дизайнери в мрежата, интернет кариерата на Маркот започва съвсем случайно

Генезис на отзивчивия

Трябва да задам очевидния въпрос: как се появи адаптивният дизайн? Идеята - че трябва да спрем да се опитваме да укротим дивата природа на мрежата и да се търкаляме с нея - вече ли е покълнала в различни краища на индустрията? Или е имал класически момент на еврика? Името, казва ни той, наистина се появи внезапно и неочаквано.

Философията зад отзивчивостта, напротив, кристализира по-бавно. Още през 2000 г. Маркот прочете „Джон Олсоп“ Дао на уеб дизайн '. „Попаднах на статията на Джон“, спомня си Маркот. „По това време уеб дизайнът беше нещо, което ми харесваше, но го виждах предимно като работа: нещо, в което се появявах, от осем до шест всеки ден. Статията на Джон ми показа, че мрежата може да бъде място за, не знам, майсторство? Че това може да е място, където хората могат да правят наистина брилянтни неща.

В този вододел, Allsopp каза на дизайнерите, че е време мрежата да премине отвъд контролирания си пикселен перфектен печат. Силата на мрежата, пише Allsopp, е нейната гъвкавост и тя трябва да бъде възприета. Дизайнерите не трябва да се стремят да укротят мрежата и да я накарат да работи като печат.

Статията на Джон ми показа, че мрежата може да бъде място, където хората могат да правят наистина брилянтни неща

„Джон говори за проектиране„ за приливите и отливите “и това ми оказа голямо влияние. Наистина се развълнувах, че се отдалечих от това понятие за интерфейси с фиксирана ширина “, казва ни Маркот. „С други думи, трябва да вземем мрежата при нейните условия и да спрем да я определяме чрез физическите граници на отпечатаната страница. Индустрията продължаваше да дискутира кога е „безопасно“ да подобрим ширината на нашите проекти. [Статията на Джон] ни призова да помислим за изработване на дизайни, които да следват формата на браузъра, за да оставим предпочитанията на потребителя да се утвърдят. “

Но Маркот осъзна, че гъвкавите оформления сами по себе си не са достатъчни. „Дълго време оформленията на течности бяха приятна теория, а не нещо, което бих се чувствал удобно да използвам в клиентски проекти. Като дизайнер няма нищо по-лошо от това да максимизирате прозорец на огромен монитор и да видите неудобно дълги редове текст. Така че едва когато медийните заявки започнаха да придобиват известна популярност, започнах да осъзнавам, че можете да имате плавност и да запазите малко контрол над това.

Имате нужда, предполага Маркот, средно положение между абсолютната плавност и стриктурите на печата. И идеята на Маркот все още се нуждаеше от име и това, припомня той, е мястото, където случайността изигра своята роля. „Бях в книжарница и взех книга, наречена„ Интерактивна архитектура “.

'Джон говори за проектиране' за приливите и отливите 'и това ми оказа голямо влияние', коментира Маркот

Късмет, труд и любов

Авторите, казва той, се борят с напрежението между неподвижността на сградата и непрекъснато променящите се нужди на обитателите. „В архитектурата вземате решенията си в камък и бетон, решения, които ще продължат десетилетия, може би векове. Но през последните години съществуваше тази мисловна школа - тези отзивчиви архитекти - които се опитваха да преосмислят тази трайност.

„Те проектираха пространства, които биха могли да се адаптират към нуждите на хората, които ги обитават: стени, които биха могли да станат вдлъбнати, интелигентно стъкло, което би могло да стане непрозрачно, когато една стая стигне до определена заетост и да осигури известна поверителност. Те говориха за тази по-„отзивчива“ версия на архитектурата като разговор между човека и пространството. Това щракна с мен. Хареса ми този образ: тази идея за разговор между човека, който разглежда дизайна, и самия дизайн. '

Стопилката на идеите - Allsopp, медийни запитвания и архитектурно мислене - всичко се събра в есето на Маркот ' Отзивчив уеб дизайн ', която беше публикувана на 25 май 2010 г. И с това хартията за докосване беше запалена.

Отзивчива реакция

И така, какво е усещането му за въвеждането на концепцията в уеб индустрията? „Когато съм на сцената, съм ужасен“, смее се той. - Но знаете ли, в края на деня току-що написах статия. Написах тази статия и все още съм изумен и ужасен от това колко развълнувани са хората от това. Всичко, което направих, беше уцелена от тази идея, че мисленето за настолни компютри и мобилни устройства като отделни неща няма да се мащабира. Таблетите все още не бяха блясък в очите на никого, но колко отделни версии на нашите сайтове щяхме да направим? Ако не бях измислил идеята, някой друг би го направил.

как да направя раскадровка в Photoshop

Целта ми е да направя мрежата възможно най-достъпна и красива за хората, които се опитват да имат достъп до нея

Маркот обаче не е решен да откликне на „Червената книга“ на уеб индустрията. Точно обратното, той предупреждава срещу абсолютизма. „Винаги съм подозрителен към хората, които предполагат, че има един истински начин на работа. И за мен това се разпростира върху отзивчивия дизайн. Ако има нужда от по-специфично изживяване за вашата аудитория, ако проучването е налице, ако търсенето е налице, оттам започвате работата си. Не е нужно да се опитвате да направите всичко отзивчиво.

„Това, което трябва да помним, е, че според някои оценки 60 процента от населението на света е в мрежи, по-бавни от 3G, и хората използват устройства с няколко години след най-новите и най-добрите. Целта ми е, независимо от техниката, да направя мрежата възможно най-достъпна и възможно най-красива за хората, които се опитват да имат достъп до нея. “

Уеб дизайнерът и разработчик Маркот смята, че трябва да се стремим да предлагаме повече на по-бавни мрежи и по-малко способни телефони

Уеб дизайнерът и разработчик Маркот смята, че трябва да се стремим да предлагаме повече на по-бавни мрежи и по-малко способни телефони

Определяне на красотата

И така, как Маркот определя красотата в мрежата? „Знаете ли, може да има красота на числата, на връзките и на съотношенията“, казва той. „Толкова много от това, за което мислим в изкуството, пропорциите, музиката и метъра се движат от математиката. Но ежедневно виждам отзивчиви сайтове, които са зашеметяващи и естетически красиви. Хората изпращат връзки [към @RWD Twitter акаунт ], които са извън това, което бих могъл да си представя, когато писах статията си. Хората са възприели тази наистина проста формула от флуидни мрежи, гъвкави изображения и медийни заявки и я използват като рамка, за да проектират по-гъвкаво за мрежата.

„Красотата е предизвикателна дума на много нива, защото е толкова уловена с нашето понятие за естетика. Но има и това по-голямо предизвикателство с нашата работа. Определението за „мрежата“ варира значително в зависимост от това къде се намирате по света. Африка на юг от Сахара например има огромен мобилен пазар, далеч по-голям от този, който имаме в държавите и Европа. В други страни, където инфраструктурата може да се е разпаднала, все още е лесно да получите достъп до мрежата, но тяхната версия е различна от нашата.

Красотата е предизвикателна дума, защото е толкова уловена с нашето понятие за естетика

„Как да предложим нещо красиво на някого в по-бавна мрежа, на по-неспособен телефон?“ той пита. „Чудя се дали трябва да преосмислим дискусията си относно отзивчивия дизайн: трябва да проектираме отзивчиво и отговорно. Има много критики към сайтове с размер от два, три или четири мегабайта - малко по-малки от PDF. Това може да се фокусира върху естетиката, но критично е, че опитът ще се влоши, ако не седите в стабилна мрежа. Така че мисля, че трябва да водим дискусия за устойчивостта в нашата работа. '

Обсъждаме инструментите, с които разполагаме, за да отговорим на това предизвикателство. По-конкретно, говорим за CSS функции, които Маркот се надява скоро да бъдат ратифицирани. „Наистина съм развълнуван от модулите Flexbox и Grid Layout, които ще ни позволят малко повече независимост от оформлението. Те се опитват да комбинират много от силните страни на плувките и абсолютното позициониране, за да ни дадат много повече контрол върху позицията на елементите на страницата.

Маркот

Избраният набор от работни инструменти на Маркот

„Но има по-широки съображения за инструментариума. Нуждаем се от повече инструменти за проектиране в „родна мрежа“. Неща като Photoshop или Illustrator са чудесни инструменти, но те са свързани с запълване на определено пространство с дизайн; липсва им гъвкаво платно. Нямам търпение да използвам по-гъвкаво приложение за дизайн. ' В момента, обяснява той, той стига дизайна си до точката, в която е „достатъчно добър“ и след това преминава към HTML и CSS. Понякога обаче ще трябва да се върне обратно към Photoshop.

„Това е като придържането между тези два свята. Няма чудесен начин да го направите под един покрив. Може би това е добре, но с интересната работа от Macaw и Adobe Reflow се чудя какви инструменти може да се предлагат скоро. '

Това води до друг въпрос: как можете да съобщите реагиращ дизайн на клиент? „Не мисля, че все още някой е постигнал идеалното решение. Когато работех по The Boston Globe, взехме комповете и ги преместихме в HTML и CSS, [тогава] изградихме прототип и го направихме реагиращ. За прегледите на дизайна на [клиент] от този момент не проектирахме фиксирани изображения на стената. Щяхме да донесем куп устройства на срещите на заинтересованите страни, да ги раздадем и хората да покажат сайта върху тях. “

Какво следва?

Докато Маркот допива кафето си, ние обсъждаме бъдещето. „В допълнение към някои страхотни клиентски проекти мисля да напиша и друга книга. С Карън Макгрейн си сътрудничим в семинар за отзивчив дизайн и говоря на редица конференции тази година, като Generate NY, така че работя върху нова беседа за по-модулен подход към отзивчивия дизайн и оформление. '

как да скриете снимката на корицата от публиката във времевата линия на Facebook

Въведете кода генериране100 в касата тази седмица, за да вземете $ 100 от билета си до Генерирайте Ню Йорк !