Введение

Я работаю веб-дизайнером. Какое-то время назад я подрабатывала фрилансером, сейчас работаю в небольшой студии. У нас нет менеджера проектов, поэтому, зачастую, я сама выступаю этим самым менеджером, по совместительству. Опыт общения с самыми разными заказчиками у меня достаточно большой. Статья «Краткая инструкция по работе с web-дизайнером (для менеджера проекта)» вызвала у меня шквал эмоций и бурю негодования, потому что именно таких заказчиков я всегда старалась избегать. В этой статье я попробую описать, как в идеале должна проходить работа заказчика и дизайнера.

С удовольствием приму критику и выслушаю мнения «другой стороны».

Автор книги – Сьюзан Кейн, в течении многих лет изучавшая феномен интроверсии. Впервые про неё я узнал из блога моей коллеги, Ольги Романовой. Книга та оказалась столь полезной, что я теперь просто не могу ею не поделиться. А уж читать её или нет, решайте сами.

Вы хотите быть эффективным на работе и в жизни, но есть пара дурных привычек, от которых вы не можете избавиться? Расслабьтесь, избавиться от привычки невозможно.

Не хватает силы воли начать новую жизнь, и вы каждый раз терпите неудачу? Успокойтесь, вы проиграли, изменить жизнь усилием воли нельзя.

Однако мириться с этим немыслимо, с этим нужно что-то делать, и я хочу поговорить об этом.

Сегодняшний пост написан под влиянием полезной книги Чарльза Дахигга "Сила привычки".

На днях я наткнулся на замечательную карманную книгу для PHP разработчиков «PHP: The Right Way». Скорее, она будет более полезна новичкам. Чем именно? По интернету разбросано огромное количество материла по PHP, но многое уже устарело или не приводит к написанию качественного кода. В этой книге присутствуют основные актуальные сведения с ссылками на проверенные ресурсы. На самом деле, сначала я хотел перевести ее, форкнуть репозиторий, благо лицензия это позволяет. Но оказалось, что перевод уже есть. Нет только русской книги в форматах для электронных книг, но так как используется Markdown в русском форке, то это не составит труда.

Введение

«Нужно больше золота»
Непризнанный экономический гений

Всё началось с вот этого разговора в комментах. Если вкратце, содержание можно свести к следующему: заказчик хочет «красиво», дизайнер хочет сделать красиво (без кавычек); заказчик фонтанирует идеями, зачастую вредными для юзабилити и продаж, дизайнер знает, как действовать в рамках типовых решений по юзабилити и стилю.

И тут на сцене появляется рекламщик/продажник. У него тоже есть свое мнение. И мнение это такое: к лешему красоту истинную и крикливый кич, выбросите на помойку споры по поводу идей; сайт должен работать, приносить прибыль: инициировать продажи, служить для брендинга, привлекать звонки — то, что требуется заказчику. Нужно исследовать целевую аудиторию — и выяснить, какой дизайн поможет добиться от неё нужной реакции. И создать с нуля именно то, что требуется для достижения цели. Типовые решения не годятся — они не продуманы для конкретного сочетания заказчик/целевуха. Хуже того, они примелькались.

«Хорошо», — согласятся с ним. Даже здорово. Но как сделать оригинальное решение там, где оригинальности быть в принципе не может (приведу пример из той дискуссии — «интернет-магазин по продаже букетов для новобрачных»)? И как понять, что именно хочет аудитория?

Полный ответ на этот вопрос занял бы немало страниц. Автор попытается изложить определенные основы того, в каком направлении двигаться, опрашивая заказчика и изучая ЦА будущего сайта, и как потом использовать эти данные для создания такого дизайна, который сам по себе служил бы поставленной задаче — то есть, приносил бы прибыль тем или иным образом. При этом автор не планирует касаться конкретики и вдаваться в частности — они слишком многочисленны для короткой статьи.

Предупреждение. Под катом — длинный текст без картинок.
Предупреждение 2. Честно говоря, автор не подозревал, что это — не прописные истины. Поэтому не надейтесь найти что-то новое в тексте.

Вы более 9000 раз заказывали дизайн, и ни разу не разочаровались? Творческие люди понимают вас с полуслова, а результат их работы непременно радует ваш глаз и кошелек? Может быть, вы дизайнер-профессионал, отточивший мастерство общения с закачиком до мастерского уровня?

Тогда этот пост не для вас. Вы и так все знаете.

Но если письма от дизайнера, который занимается вашим проектом, начинаются заголовком «правки ver_3_b_часть II», а общаться с каждым днем все сложнее — попробуйте почитать. Может быть, здесь найдется полезный совет, который облегчит вам жизнь и сэкономит деньги.
Я предлагаю вашему вниманию несколько заметок-соображений, которые накопились за время моей работы в этой области.

Пост является личной подборкой полезных и нужных онлайн сервисов, которые позволяют бесплатно (или условно бесплатно) создавать действительно крутые вещи и разворачивать их в Сети. Не претендую на новизну или на полноту, но буду счастлив, если кому пригодится.

Всем нам иногда хочется попробовать новую идею, запилить какой-нибудь сайтик про манулов, но чтоб обязательно на node.js, хайлоад реди, с мемкешем, монго, фейловером и с претензией на мировое господство. У меня для Вас хорошие новости: благодаря щедрости проклятых западных капиталистов всё это можно получить совершенно бесплатно.

Не так давно я писал статью про проектирование больших сайтов на примере социальной сети со схожим названием: «Серьезное проектирование серьезных сайтов». Сегодня я хочу поговорить про одну из основных сфер нашей деятельности – электронную коммерции, а именно про проектирование интернет-магазинов.

Это цикл статей больше специалистов, значительно более углубленно, чем все мои прошлые статье в этой области. В статье я расскажу про крупнейшие интернет-магазины США, Китая, России и Украины, расскажу как маркетинг влияет на проектирование, покажу подробный Mind Map гипермаркета, опишу 57 основных модулей интернет-магазинов для внешней (покупательской) части и более 50 модулей для внутренней части (административной), покажу интерфейсы магазинов и еще много полезного.

Интернет-магазинами и технологиями продаж в Интернете лично я занимаюсь с далекого 2005 года. За годы работы мое мнение по этому вопросу сильно эволюционировало. Когда-то я думал, что интернет-магазин – это довольно простой сайт с точки зрения разработчика или маркетолога, мне казалось, что все магазины похожи друг на друга и достаточно один раз получить пул знаний, который потом можно будет использовать многие годы без особых изменений, ведь интернете-магазин – это только тип сайта для продажи товаров и на первый взгляд нет ничего сложного в том, чтобы разработать очередной магазин со схожим функционалом, но с другими товарами. На самом деле все значительно сложнее и чем больше я узнаю про интернет-магазины, тем больше понимаю, что в этом вопросе невозможно знать все, даже одна мелочь в интерфейсе может изменить прибыль магазина на тысячи долларов, а для больших игроков эта «мелочь» может стоить миллионы. Именно эта особенность электронной коммерции делает требования к сайтам и специалистам, которые их делают, безумно высокими. Чуть ниже я покажу много интересных цифр, которые докажут мое утверждение.

Ранее я уже писал статью про технологию проектирования больших сайтов, которая, кстати, имела очень большую популярность в русскоязычном и англоязычном сегменте Интернета: «Серьезное проектирование серьезных сайтов». Проектирование интернет-магазина хоть и имеет сходную последовательность действий, описанную мной в прошлой статье, но сама технология все таки сильно отличается, поэтому давайте рассмотрим это в мельчайших подробностях. По ходу статьи я буду ссылаться на свою прошлую, чтобы не повторяться, а в этой сделаю упор именно на различия.

Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

Семантический HTML выражает значение документа. Он больше о том, чем является текст, чем о том, как он выглядит. Хорошая семантическая разметка помогает и человеку и компьютеру лучше понять содержимое документа и его контекст.

Семантическая разметка намного легче поддается интерпретации. Она дружественна поисковой оптимизации. Отлично работает с современными браузерами, уменьшает количество кода, необходимого, чтобы выразить содержимое и повышает читаемость этого кода.

Ок, итак семантическая разметка — это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.

Дорогой иностранный гость с фамилией слишком известной, чтобы ее называть, гражданин PayPal только-только «сошел с корабля» на отечественный «причал», но уже успел стать своим на балу, где активно крутят танцы всех стилей и направлений электронные платежные системы российского сегмента. Мы не стали стоять в стороне и поспешили завести полезное знакомство со столь уважаемым товарищем, добавив, наконец, и его доброе имя в свой список друзей. С какой стороны подойти, о чем говорить и как привлечь его внимание читаем в небольшой истории под катом.

Краткая справка: в 1998 году Дерек Сиверс основал компанию CD Baby и превратил ее в крупнейшего онлайн-продавца независимой музыки. В 2008-ом вырученные от продажи компании $22 миллиона Дерек передал в благотворительный траст на нужды музыкального образования.
Речи Дерека на TED просмотрели более 5 миллионов раз, а его собственная книга занимала первую строку в чарте книг для предпринимателей на Amazon.
Сам себя Дерек считает «вечным учеником».

Я уже год использую этот метод обучения и могу сказать, что он – самый эффективный из тех, с которыми мне довелось столкнуться за 14 лет изучения программирования.

В марте 2012 года Гай Подъярны (Guy Podjarny) провел тест, в ходе которого сравнивалась продуктивность работы сотен новых адаптивных сайтов на устройствах с четырьмя различными разрешениями экранов. Получившиеся результаты были весьма разочаровывающими.

После двух лет подъема адаптивного дизайна, когда любой дизайнер и разработчик, которых только можно представить, запрыгнули в этот поезд, тест производительности на различных разрешениях потряс сами основы адаптивной теории.

Как увидел Vintage Mode в действии сразу захотелось научиться им владеть. Как раз к этому времени я прошел курс Соло + VerseQ для слепого печатания на английском. Связка с Vintage Mode, мне казалось, будет очень эффективной для верстки, и я не ошибся.

Для тех кто не знает Vintage Mode (Insert Mode в VIM) плагин для Sublime Text, который идет в комплекте с редактором. Взят он из редактора VIM, и многие думают, что пользу он может принести только бывшим пользователям Vim, но это ошибочное мнение. По умолчанию плагин деактивирован, как активировать объяснять не буду инструкция есть здесь. Скажу только что для входа в режим Vintage используется клавиша i, а для выхода ESC. По моему это крайне неудобно. Я воспользовался советом из оффициальной документации и теперь вхожу в Vintage Mode два раза нажав клавишу i. Подробности тут.

Вроде все отлично осталось только узнать список команд для каждой клавиши, немного понервничать, привыкнуть и готово. Но в официальной документации информации по клавишам нет, они обосновывают это тем, что клавиши те же что и в редакторе Vim. Но различия есть и их немало, документации на русском вообще нет ни по одному из редакторов (именно по Hotkeys Vintage Mode).

Предисловие

Я капризный. Я жалуюсь о многих вещах. Многое в мире технологий мне не нравится и это предсказуемо: программирование — шумная молодая дисциплина, и никто из нас не имеет ни малейшего представления, что он делает. Учитывая закон Старджона, у нас достаточно вещей для постижения на всю жизнь.

Тут другое дело. PHP не просто неудобен в использовании, плохо мне подходит, субоптимален или не соответствует моим религиозным убеждениям. Я могу рассказать вам много хороших вещей о языках, которых я стараюсь избегать, и много плохих вещей о языках, которые мне нравятся. Вперёд, спрашивайте! Получаются интересные обсуждения.

PHP — единственное исключение. Фактически каждая деталь PHP в какой-то мере поломана. Язык, структура, экосистема: всё плохо. И даже нельзя указать на одну убийственную вещь, настолько дефект систематичный. Каждый раз, когда я пытаюсь систематизировать недостатки PHP, я теряюсь в поиске в глубину обнаруживая всё больше и больше ужасных мелочей(отсюда фрактал).

PHP — препятствие, отрава моего ремесла. Я схожу с ума от того, насколько он сломан и насколько воспеваем каждым уполномоченным любителем нежелающим научиться чему-либо ещё. У него ничтожно мало оправдывающих положительных качеств и я бы хотел забыть, что он вообще существует.

Всем не профессионалам в какой-либо одной области IT-универсалам посвящается данный текст.
История такая: я работаю на довольно неплохой должности (руководитель IT-отдела) и даже имею в подчинении трех несколько человек. Сама фирма не IT направленности. Занимаемся мы розничными, оптовыми и интернет продажами. А также являемся сервисным центром нескольких известных марок. В компании есть несколько веб-ресурсов, в том числе несколько интернет-магазинов, пара из которых имеют очень даже неплохой оборот. Вот этим всем хозяйством мне и приходится заправлять. Плюс реклама, полиграфия, баннеры, сео и т.д. Моя зарплата меня тоже вполне устраивает. Скажем, гораздо выше средней по СПб. В данный момент меня в моей работе все устраивает за исключением одного: отсутствие опыта работы в профильной компании (в профильной среде).

Уровень подготовки веб-мастера: любой

В Интернете немало сайтов, содержание которых доступно на нескольких языках, и таких ресурсов становится все больше. Тем не менее, создание многоязычного веб-сайта – это не просто перевод или локализация (L10N). Здесь необходимо принимать во внимание множество других аспектов, каждый из которых относится к интернационализации (I18N). В Справке Google вы можете найти информацию о том, как оптимизировать для Google Поиска мультирегиональные и многоязычные сайты, а в этой статье мы хотим поделиться несколькими советами по созданию ресурсов для многоязычной аудитории.

1. Создавайте многоязычные страницы с помощью разметки, а не таблиц стилей

Язык и направленность текста тесно связаны с содержанием страницы. В этой связи старайтесь всегда использовать разметку, а не таблицы стилей. Задавайте язык и направление текста (по крайней мере для материалов в html) с помощью псевдоклассов lang и dir:

<html lang="ar" dir="rtl">

Мы не советуем применять оригинальные решения, такие как специальные классы или идентификаторы.
Полагаться на таблицы стилей не стоит: пользовательские агенты могут игнорировать такие свойства, как направление или двунаправленный текст Unicode. Для XML ситуация прямо противоположна: поскольку XML не поддерживает специальную разметку для интернационализации, в этом случае рекомендуется использовать таблицы стилей.

Когда-то я начинал работать, и меня вполне устраивала моя производительность. Но после, когда начались проблемы, связанные с потерянными клиентами, сбежавшими партнёрами, играющими в молчанку поставщиками из-за забывчивости, необязательности, или несвоевременного выполнения дел, у меня возникло желание что-то поменять в своём отношении к работе.

Начал с малого: почитал статей, да подумал мозгом. И в конце концов выстроил для себя некую модель, которая позволила бы, может быть, работать чуть продуктивнее. В общем, не хотелось мне терять деньги, прагматично всё это.

Всё нижеприведённое справедливо для меня, директора небольшой минской аутсорсинговой компании, но и вполне может оказаться применимо для широкого круга лиц: менеджеров, админов, кодеров, верстальщиков, дизайнеров, да кого угодно.

В данной статье рассматривается ситуация, когда элемент, создающий новый блочный контекст форматирования, имеет потомков, имеющих значение свойства float отличное от none. В большинстве статей на данную тему поведение элементов в подобных случаях предлагается принять на веру, поэтому в данной статье акцент делается на обосновании интерпретации браузерами положений спецификации W3C.

Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.



Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.



В 2010 появился стандарт HTML5, обеспечивающий совершенно новую, полустандартизованную веб-среду. Такие браузеры, как Opera, Firefox, Chrome и Safari приняли нововведения, и их разработчики вышли за пределы реализации стандартов и изучения интерфейса программирования приложений. Чтобы представить себе, насколько автономны эти браузеры, можно ознакомиться с отличной наглядной демонстрацией поддержки HTML5 на www.html5readiness.com.

Компания Designmodo, специализирующаяся на разработке веб-интерфейсов, опубликовала на Гитхабе довольно внушительный набор модных сегодня плоских элементов интерфейса — меню, кнопок, слайдеров, переключателей, чекбоксов, иконок и многого другого. Плоский дизайн интерфейсов активно продвигает Microsoft, и он всё чаще и чаще встречается в сети.

Можно спорить о преимуществах и недостатках такого дизайна, но игнорировать его нельзя — мода есть мода, так что этому набору наверняка найдётся место в колллекции большинства веб-дизайнеров. Кроме файлов изображений и стилей, набор включает шрифт Lato польского дизайнера Лукаша Джеджича и подобранные дизайнерами образцы цветовых сочетаний. Демо Flat-UI можно посмотреть здесь.

UPD: в данный момент доступ к репозиторию Flat UI закрыт по требованию компании LayerVault, которая считает, что Designmodo нарушила её авторские права. В Designmodo отрицают какое-либо заимствование и утверждают, что Flat UI — полностью оригинальная разработка.