Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



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

Здравствуйте, дорогие друзья!
Вот во Владивостоке уже наступил Новый 2014 год, и, по традиции, хотелось бы закрыть уползающий змейкой 2013, который принес много интересного и полезного на страницы Хабрахабра.



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

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

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

В статье я расскажу реальные истории изменений интернет магазинов и о том, какой эффект они дали. Все истории 2012-2013 годов.

На протяжении многих лет я специализируюсь на анализе текущего положения дел интернет магазина и последующем увеличении его конверсии. За это время у меня набрались некоторые хинты, внедрение которых всегда позволяло на значительную величину увеличить продажи. (Значительное – это конечно, не 500%, а 1%-5%). Другими словами — отсутствие этих вещей, снижает эффективность магазина. Накопилось их значительно больше 6, но я постарался написать о тех, внедрение которых не требует много времени или ресурсов.

Ну очень интересно было разобраться, как совершать видеозвонки через браузер внутри компании и насколько это полезно. Тем более, что skype — «прослушивается» и пересылаемые пароли парсятся роботами…

Вроде есть Google+ Hangouts и им нередко пользуются — но это все таки не WebRTC и проприетарная облачная технология. Кто знает — не просматривают ли наше совещание по бизнес-планированию коллеги из другой компании-конкурента с блокнотами и неподдельными улыбками на сияющих лицах?

В общем, согласитесь, тема своих, приватных надежных видеопереговоров внутри компании — актуальна как никогда. Многим это нужно, но как организовать-то? У нас — получилось. Это можно сделать достаточно просто, если знать как :-) (изучив десяток RFC, стандартов w3c и их реализаций и докопавшись до причин).

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

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

1. Снизить цену на 25%. Понятно, что прибыль с единицы сока упадёт, но получится ли продать его настолько больше, что в целом прибыль вырастет?
2. Или, может, сделать «купи три – четвёртый бесплатно»? Технически, почти то же самое, но в деньгах может оказаться совсем иначе.
3. Или, может, лучше заплатить те же деньги сети, чтобы они поставили его прямо по центру полки?
4. Хотя нет, давайте наймём промо-девочек в миниюбках, да?

Как принять решение?

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

Существуют экспертные системы принятия таких решений. Про них я и расскажу.

Приветствую всех, уважаемые харбажители!
В данном посте речь идет о том, как подружить карты яндекса и javascript framework angular.js для их совместной работы. Можно, конечно, использовать и google map, но для стран СНГ их качество оставляет желать лучшего.
Немного погуглив, и не найдя готового решения, пришлось писать свое. Кому интересно, добро пожаловать под кат.

Бывают ситуации, когда проект нужно подготовить в очень сжатые сроки, и совсем нет времени на изучение способов решения задачи и выбора из них самого оптимального. Команда просто бросается с головой в реализацию, полагаясь на опыт и интуицию. Обычно получается хорошо. Но остается ощущение, что можно сделать лучше, была бы только возможность остановиться и обдумать задачу.
Например, в нашей команде разработки интернет-решений не у всех и далеко не всегда было понимание, с чего начинать проектирование: с прототипов интерфейсов или технического задания. В обоих случаях есть сторонники и противники, есть плюсы и минусы. Не хватает только единого мнения.

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

Каждый раз при найме при найме новых менеджеров по продажам и проект-менеджеров приходилось очень подробно и много рассказывать о том какие бывают клиенты, об особенностях работы с тем или иным сегментом и т. д. Так как эта информация была не систематизирована, у нас часто возникали сложности с ее передачей и с тем, как новички ее осваивали. Бывало такое, что новые сотрудники попадали в ситуации, которых можно было избежать, если бы ребята хорошо освоили все нюансы работы с тем или иным типом заказчиков. И наоборот, иногда упускали возможности более успешного развития отношений с клиентом, не используя правильный подход к данной группе клиентов.

Все это в конечном итоге подвигло нас на сегментацию наших текущих клиентов. Мы проанализировали нашу текущую клиентскую базу и классифицировали всех клиентов на 4 больших группы и вкратце описали тактику работы с каждым сегментом.

Регистрация на сайте — это большая ответственность для большинства людей. Пользователи, которые регистрируются на вашем сайте, дают свою персональную информацию, доверяя ее вашему ресурсу. Большинство сегодняшних пользователей более обеспокоены тем, кому они передают свою личную информацию. Виртуальный мир кишит хакерами и спамерами, но кто может обвинить их? Если вы не видели много форм регистраций, то ваша форма — препятствие для пользователя. Ниже изложено 8 основных причин, по которым пользователи не заполняют формы регистрации.

Сегодня я расскажу о трекере на кухне Додо Пиццы. На нашей кухне висят планшеты с интерфейсами трекера. Трекер — спинной мозг процесса изготовления пиццы. Он вступает в действие с момента принятия заказа и до передачи термосумки с пиццей курьеру.

Трекер состоит из интерфейсов, каждый из которых выполняет свою важную функцию. Каждый интерфейс показывает пользователю (сотруднику кухни) какие-то конкретные параметры продукта.



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

Типы продуктов:

• Выпекаемые: пиццы (экраны: Тесто, Начинка, Упаковка)
• Полуфабрикаты: салаты, картошка, кукуруза (экраны: Закуски, Упаковка)
• Простые: напитки, маффины (добавляются в завершении, на схеме не показаны)

Все продукты в завершении распределяются по экранам выдачи (экраны: Курьеры и Выдача в зал).

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

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

Вообще поиск разработчиков — тема достаточно сложная, отчасти из-за обилия противоречивой информации. Только на Хабре в хабе «HR» интересующийся вопросом читатель найдет массу вещей обо всем на свете.

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

Через неделю Apple откроет iOS7 миру.

Новая версия операционной системы, которая генерирует 56,5% мирового серфинга (Прим. переводчика: по статистике компании Mobify) включает в себя новые функции и удивительные улучшения в дизайне.

Некоторые из наиболее интересных изменений в iOS могут быть найдены внутри встроенного браузера Safari. Эти изменения напрямую влияют на работу браузера и на привычный пользовательский опыт при работе с браузером и сайтами.

В этой статье я хочу рассказать о трех основных UX/UI изменениях в Safari на iOS7, которые вы должны иметь ввиду, когда оптимизируете сайты для устройств Apple.

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

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

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

Привет, Хабр! Мы продолжаем наш цикл материалов про бизнес веб-студий в рамках Осеннего Ускорения с NetCat и сегодня подробно говорим о маркетинговой стратегии веб-студии, а также публикуем шаблон карты маркетинговых активностей.

На нашем рынке творится полный кошмар с позиционированием и маркетингом студий/агентств. Каждая первая компания гордо объявляет себя «молодым динамично развивающимся digital-агентством полного цикла» — и в результате все игроки сливаются в единую серую безликую массу. Обсудим, как можно этого избежать, и как сформировать грамотную маркетинговую стратегию развития своей компании. Я не претендую на то, что такая структура документа является единственно верной, но на моем опыте такой формат всегда себя оправдывал.

Введение

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

Автор изображения MVBen

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

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

Доброго времени суток уважаемые хабражители. На сегодняшний день с помощью CSS можно создать множество различных элементов. Это безусловно очень радует, вспоминая веб несколько лет назад. Но порой так «устаешь» от всех этих изощрений с :before и :after… Недавно я нашел две интересных спецификации CSS Masking Level 1 и CSS Shapes Level 2, благодаря которым в недалеком будущем перед нами откроются совершенно новые возможности оформления контента и разработки форм элементов.

CSS Masking

Совместимость

Все современные браузеры поддерживают свойства mask и clip-path, как определено в SVG 1.1 для элементов SVG. Но только Firefox позволяет применять эти свойства к HTML элементам, причем без префиксов. Но говоря конкретно про спецификацию CSS Masking, то свойства mask, clip-path, mask-box-image поддерживаются только на последних Webkit/Blink с префиксом webkit.

clip-path

Свойство clip-path создает область отсечения для любого из HTML элементов или графических элементов, в том числе элементам-контейнерам SVG — clipPath. Образовавшиеся элементы возможно анимировать. Одно впечатляющее демо (к сожалению работает только на последних Chrome).

Тестирование интерфейса в юзабилити-лаборатори

Я уверен, каждый из вас проходил этап от «мне фича нравится — значит, нравится всем» до «если конверсия по графикам растет, значит, фича нужная». Поэтому «как побороть в себе слепое» я рассказывать не буду. А поделиться хочу нижеописанным опытом.

В прошлом году я открыл для себя прекрасный канал бесценной информации — прямое общение с пользователем. Именно прямое, а не через письма обратной связи и, тем более, графики.

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

Вся статистика в статье представлена только по нашему опыту и может расходиться с вашими данными (проанализировано 68 проектов на SEO, из них 26 — наша разработка и продвижение, а также 23 проекта, где разработка наша, а оптимизация — на стороне).

Web-разработчики очень не любят SEO-оптимизаторов. Естественно, основная проблема в генетически заложенной видовой ненависти, правда, есть и рациональные моменты. Но страдают-то от этого в первую очередь заказчики.

Давайте поговорим о том, к чему этот конфликт может привести и как этого избежать.