Одним из моих любимых «плюсов» работы в IMPACT является то, что мне выпала честь каждый день работать вместе с умнейшими людьми, которые являются настоящими экспертами в своем деле.
Но как часто я изо всех сил стараюсь узнать больше о том, что делают другие?Не очень часто.
Вот почему я поставил перед собой задачу узнать больше о самой чуждой мне области знаний под крышей IMPACT -веб-разработка Для достижения этой цели, я собираюсь раз в месяц встречаться со старшим фронтенд-разработчиком IMPACT Тимом Остхаймером, чтобы поговорить с ним о том, что он делает и почему, и чему мы, маркетологи, можем научиться из его опыта и знаний.
Потому что для двух групп людей, которым нужно много работать вместе - маркетологов и разработчиков - я думаю, мы могли бы гораздо лучше справиться с проблемой преодоления разрыва между нами.
Наслаждайтесь!
Можете ли вы рассказать мне о своем опыте и о том, как вы пришли к карьере веб-разработчика?
Tim: У меня есть степень бакалавра в области интерактивного цифрового дизайна в Quinnipiac - так они это называли - это в основном цифровой графический дизайн с использованием Photoshop, Illustrator, InDesign - в значительной степени все инструменты Adobe. Мы изучали типографику. Мы сделали анимацию и 3D-моделирование. Мы занимались полиграфическим дизайном и веб-разработкой.
Мне нравились все занятия, которые я посещал в Quinnipiac, но в течение первых нескольких семестров быстро стало ясно, что не существует конкретного средства или направления, на котором сосредоточилась бы специальность. Вместо этого для студентов это была скорее возможность поэкспериментировать и прийти к собственному выводу о том, что они хотят от этого получить.
Это была идеальная среда для моего обучения.
Я начал экспериментировать с редактированием изображений и HTML, когда был молод, но только примерно в 9-м классе я начал бросать вызов себе, чтобы узнать больше и серьезно отнестись к этому хобби. Я потратил много времени на создание веб-сайтов о видеоиграх, которыми я был одержим, и не прекращал работу над ними, пока не был удовлетворен тем, как они выглядят и функционируют, даже если единственным человеком, который когда-либо их использовал, был я сам.
В старшей школе у нас было несколько факультативных занятий, поэтому я посещал все предметы, которые имели хоть какое-то отношение к информатике, фотографии, графическому дизайну и веб-дизайну. Это были вводные занятия, но это был период в моей жизни, когда я начал думать о колледже и дальнейшем образовании, и это помогло мне убедить меня, что мне подойдет какая-то карьера, ориентированная на цифровые технологии.
В то время я был слишком неопытен, чтобы знать, какие варианты существуют. Я знал, что мне нравится работать с веб-сайтами и кодом, но меня также очень интересовало все, что связано с дизайном, и я не хотел выбирать специальность, которая слишком сильно фокусировалась бы на чем-то одном.
При поиске колледжей и специальностей мне было очень трудно найти тот, в котором я был уверен. В итоге я специально исключил художественные школы, потому что мне все еще нужно было время, чтобы изучить варианты, и я хотел получить более всесторонний опыт. Программа Квиннипиака мне понравилась, потому что в ней было всего понемногу.
Я начал с того, что, как мне казалось, мне хотелось. Я выбрал Quinnipiac и начал свой первый семестр с заранее заявленного дополнительного курса по информатике. К сожалению, я толком не понимал, во что ввязываюсь. В курсе основное внимание уделялось объектно-ориентированному программированию, которое отличалось от всего, с чем я был знаком, и мне приходилось с трудом справляться с каждым заданием и изучать материал. Итак, я решил бросить минор после окончания второго курса учебной программы.
Вместо того, чтобы выбирать нового второстепенного, я решил, что буду подходить к своему образованию так же, как это привело меня к этому моменту.
Я полностью наполнил свои факультативные курсы занятиями по смежным предметам, которые я мог бы использовать для поддержки своей специализации. Таким образом, я бы лучше понимал процессов и смогу применить эти знания независимо от отрасли, в которой я оказался.
Я ходил на занятия со студентами-кинематографистами и узнал много нового о том, о чем ничего не знал. Помимо съемок, каждый из курсов был посвящен монтажу видео, анимационной графике, спецэффектам и/или звуковому дизайну, и все это было для меня интересно и увлекательно.
Итак, я не остановился на достигнутом. Я посещал курсы по дизайну и разработке игр, узнал о механике и всех различных ролях, которые задействованы в индустрии - от аспекта построения мира в повествовании до конкретного кода, написанного для интерфейса, чтобы обеспечить захватывающий опыт..
Иногда целая компания занимается только одним изделием, и это осознание помогло мне понять, что не иметь таланта во всех областях процесса проектирования - это нормально.
Каждый из этих курсов дал мне новый взгляд на визуальный дизайн и позволил мне применить то, что я узнал, во всем, что я создал с этого момента.
На третьем курсе колледжа, когда я посещал курсы игрового дизайна и анимации, я снова обратился к объектно-ориентированному программированию. Я решил, что хочу создавать функционирующая игра как объединенный окончательный проект для этих двух классов, но я не мог сделать это, не изучив новый код. Я провел бесчисленное количество часов вне занятий и по выходным, чтобы узнать то, с чем мне было труднее всего.
Но на этот раз это не показалось мне подавляющим. Вместо этого наступил момент, когда внезапно все обрело смысл, и я увлекся этим так же, как и всем остальным, чему я научился.
Теперь у кода появилась цель, и это побудило меня потратить время на изучение того, что я не смог понять с первого раза. В итоге я потратил более 50 часов на одно это задание и объединил все знания, полученные на занятиях по разным специальностям.
Я написал тщательно продуманную историю, на которой была основана моя игра, нарисовал каждый кадр анимации каждого персонажа и мира вокруг них, разработал интерфейс, который поддерживал мою тему, и закодировал все функции, необходимые для ее создания. все работает.
Результатом стала любительская игра и мое любимое портфолио из колледжа, которым я всегда буду гордиться. Я до сих пор время от времени просматриваю свою папку с творческими работами каждые несколько месяцев. поиграть в нее несколько минут, чтобы оценить и напомнить себе, как многому я научился из нее.
Если вам интересно, вот как это выглядело:
Поскольку мне было так весело создавать эту игру, в том же году я принял участие в соревновании под названием Global Game Jam. Задача заключалась в том, чтобы в течение двух дней спроектировать и создать игру на любом носителе на тему «биение сердца».
До Quinnipiac я не осознавал, что в дизайне есть сторона развития. Я не особо задумывался о том факте, что большинство людей специализируются на одной части процесса и дизайнер чего-то вроде веб-сайта или игры обычно отличается от его разработчика.
Что меня больше всего интересовало, так это то, как каждая из этих ролей пересекается и способствует объединению их работы в единый опыт. Вместо того, чтобы беспокоиться о том, что я, возможно, не иду по той же карьерной лестнице, что и другие студенты, я поставил перед собой задачу изучить все специальности, которые имеют какое-либо отношение к дизайну и различным формам цифровых медиа - и это было лучшее решение, которое я когда-либо принимал.
В конце концов я решил, что веб-разработка - самая подходящая для меня профессия, и этот выбор привел меня к работе в IMPACT, создавая отличный опыт для наших клиентов и пользователей их веб-сайтов, но я могу с уверенностью сказать что работа со студентами с совершенно разными карьерными целями привела к тому, что я преподал одни из самых полезных уроков, которые я когда-либо усвоил.
Есть ли проблемы с людьми, которые не понимают, чем вы занимаетесь как веб-разработчик, или ваши процессы - как они устроены или почему они структурированы определенным образом?
Tim: Да, мы видим много путаницы в отношении концепций разработки или конкретных функций только потому, что это очень технический вопрос.
Благодаря дизайну маркетолог, не являющийся опытным дизайнером, все равно может говорить о конкретных элементах дизайна и понимать их цель. Могут быть вещи, о которых они могут не знать, например, о некоторых принципах типографики или доступности для пользователей. Но в большинстве случаев они могут посмотреть на что-то вроде макета Photoshop и представить это как страницу.
Когда дело доходит до сложных частей функциональности, определения того, насколько сложно что-то создать, потенциальных недостатков корректировки дизайна или технической стороны создания веб-сайта, это вещи, которые у маркетологов много проблем с разговорами.
Это очень важно при определении проекта редизайна веб-сайта для клиента, потому что трудно попытаться оценить что-то вроде сроков или усилий, затраченных на конкретную задачу, не зная полного контекста. Не имея проекта, на котором мы могли бы сослаться на конкретный пример, нам трудно оценить, сколько времени может занять что-то, потому что обычно все сводится к пониманию всех отдельных частей, которые объединяются для его создания.
Если я посмотрю на проект, я смогу сказать вам, сколько времени мне понадобится, чтобы его создать. Но мне действительно сложно дать общие рекомендации, которые всегда применимы к определению объема, потому что даже незначительное изменение в проекте может радикально изменить способ его создания.
Перемещение чего-либо на пару пикселей иногда может потребовать совершенно другой структуры кода, а добавление одной небольшой функции может означать, что остальную часть страницы придется построить так, чтобы она ей не мешала. Иногда небольшой запрос может оказаться трудоемким, и его может быть сложно идентифицировать, даже если вы разработчик.
Что бы вы назвали наиболее распространенными задачами или элементами веб-сайта, которые кому-то вроде меня могут показаться требующими небольшого количества времени, но на самом деле это занимает много времени?
Tim:В определенных ситуациях можночто-то менять на мобильном устройстве.
Разработчики не определяют, какой контент написан на странице, поэтому нам приходится балансировать между гибкостью и структурой. В зависимости от того, как страница должна адаптироваться к экранам разных размеров,может быть очень сложно обеспечить неразрушимость макета, не ущемляя при этом свободу маркетолога
Обычно для адаптивного сайта необходимо настроить макет для экранов разных размеров, чтобы страница всегда выглядела великолепно.
Если это очень важная страница, например домашняя страница или страница с ценами, стоит потратить столько времени, сколько вам нужно на мобильных устройствах, потому что это очень важно для пользователя. Даже если это означает, что шаблон не может быть интуитивно структурирован, потому что маркетолог, управляющий контентом, будет использовать страницу меньше, чем конечные пользователи.
Но что касается других страниц, полное изменение чего-либо на мобильных устройствах ради незначительной корректировки может в конечном итоге занять много времени, если структура контента не такая же, как на настольных компьютерах.
Иногда это может ухудшить работу маркетолога, если шаблон невозможно структурировать интуитивно понятным образом. Имейте в виду, что разработчики создают шаблоны как для пользователей, просматривающих страницу, так и для маркетологов, управляющих контентом.
Я бы сказал, что есть еще ползунки и вещи, которые двигаются
Пример слайдера, созданного Тимом.
Редко когда какие-либо два одинаковы. У нас есть несколько стандартизированных пар, и мы будем использовать их в ситуациях, когда специальный вариант не требуется, потому что мы можем внести некоторые коррективы в их дизайн.
Но зачастую для достижения желаемого макета или функциональности необходим собственный слайдер. Организация контента может быть другой, или элементы управления ползунком могут находиться в другом месте, или они могут быть на всю ширину, а не внутри сетки. Возможно, количество слайдов в активном состоянии меняется при разных размерах экрана.
Может быть, на рабочем столе это вообще не слайдер.
Может быть, у вас есть три столбца, но на мобильных устройствах это становится слайдером, где есть три слайда, по которым нужно листать. На самом деле это требует много работы, потому что мы стараемся избегать использования ненужного кода, когда это возможно, даже если готовый код или плагин имеют необходимые нам параметры.
Другим примером могут быть слайдеры, которые выглядят так, как будто они находятся в бесконечном цикле, и кажется, что вы можете просто перелистывать бесконечно. Даже если кажется, что слайдов всего три, обычноnot всего три слайда.
Для такого дизайна обычно нужно дублировать первые два и два последних слайда, а затем поместить их на концы слайдера. Затем, когда пользователь доходит до точки, где слайдер зацикливается, мы фактически просто перемещаем его обратно к клону последнего слайда, а затем переходим вперед. Все это происходит в одном кадре.
Итак, конкретно происходит следующее: мы временно отключаем анимацию, перемещаем ползунок к клону последнего слайда, включаем анимацию, а затем перемещаем вас вперед к первому слайду в группе. В результате создается впечатление, что переход произошел плавно, а ползунок никогда не заканчивается.
Поскольку мы хотим, чтобы слайдеры были идеальными, создание слайдеров может занять много времени просто потому, что в них так много движущихся частей, и нам часто придется программировать их вручную
Если бы вы могли дать маркетологам и бизнес-лидерам один совет, который изменил бы любой их разговор с веб-разработчиком в будущем, сделав их более продуктивными и позитивными, что бы это было и почему?
Tim:Это не простой ответ, но ответ:изучение основ HTML и CSS.
Вы должны понимать, что такое веб-сайт и как он работает. Если вы можете просто щелкнуть правой кнопкой мыши на своей странице и нажать «проверить элемент», и понять, в основном, что то, что вы смотрите или, по крайней мере, можете определить, чего вы не понимаете, может очень помочь в любых разговорах с разработчиком. Это также поможет вам заложить основу для дальнейшего изучения, даже если вы ничего не создаете сами.
Появится понимание того, как структурированы страницы и как эта структура определяется дизайном. Если вы хотя бы понимаете эту часть, вы можете начать прогнозировать, что может быть связано с изменением страницы для соответствия определенному типу контента или обеспечения более гибкого макета.
Ну, даже если кто-то вроде меня не тратит время на глубокое изучение HTML, он просто смотрит на его сложность и понимает, что что-то, что на первый взгляд кажется очень простым, состоит из тысяч движущихся частей и частей. код, который вы никогда раньше не видели
Похоже, что это, по крайней мере, первый шаг к преодолению разрыва и способности признать – как маркетолог – «Я не знаю того, чего я не знаю, а мой веб-разработчик не Я не пытаюсь разрушить мою жизнь, когда он говорит мне, что что-то займет больше времени, чем я изначально предполагал."
Tim: Да, абсолютно, и еще одним преимуществом этого является то, что вы также начинаете понимать техническую SEO-часть вашего сайта.
Потому что, по большей части, техническую реализацию SEO на самом деле выполняет не разработчик - скорее всего, это будет маркетолог. Есть определенные рекомендации, которые разработчик использует обязательно нужно придерживаться. Но когда дело доходит до маркетинговой стороны SEO - метаописаний, заголовков, заголовков, правильного форматирования и т. д. - разработчик может гарантировать, что все будет сделано правильно, только если он сам не вводит контент.
Если вы немного разбираетесь в HTML, это очень поможет, когда вы пытаетесь устранить неполадки или заполнить эту информацию, и что вы не нарушите работу своего сайта - или, по крайней мере, вы будете знать, что искать. на случай, если что-то пойдет не так или покажется неправильным.
Просто знание основ HTML очень поможет, даже если вам никогда не придется писать его самостоятельно. Это поможет вам лучше понять, что делает ваша веб-страница. Вы начнете понимать поведение ваших шаблонов, что видят роботы поисковых систем, что такое техническое SEO и как использовать весь потенциал страницы.