Где мы пишем

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

  • Вконтакте — публичная страница где мы публикуем различные анонсы и тизеры, рассказываем о жизни,
  • Facebook — чуть более серьёзная информация, аналитика и т. д.,
  • Instagram — редкие фото,
  • re:vision и behance — выкладываем работы на оценку сообщества.

UPD 10 марта, 2016 г.: переход в соцсети можно признать удачным и состоявшимся.

Годовой отчёт 2014

В прошлом году отчёт всем понравился, в этом решили развивать жанр.

2014

Состоялась вторая конференция Wake up province!

logoblogo

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

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

А самое главное — к нам приехала самая настоящая рок-звезда российского веба — Сергей Прокофьев из Creative People, обаянием и энергией которого подзарядились все участники конференции.

Несмотря на прохладное субботнее утро, перекрытие города по случаю визита патриарха и 2 параллельных дизайн/ИТ конференции (движуха растёт), нас посетило более 80 человек и в какой-то момент кому-то пришлось немного постоять.

wupaud

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

Мы уже ищем докладчиков на следующую конференцию, которая состоится примерно через три месяца, пишите на mail@w-u-p.ru если желаете выступить.

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

Сейчас мы готовим сайт с отчётом, на котором будут видео и презентации всех докладов, а также фотографии докладчиков и участников.

Следите за сайтом конференции http://wupconf.ru и официальным твиттером @wupconf чтобы быть в курсе новостей.

Увидимся снова зимой!

Мы в рейтинге студий Тэглайн 2014!

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

Кто-то ошибся кнопкой и мы попали в рейтинг http://2014.tagline.ru/design-studios-rating

Фото опубликовано Nopreset (@nopreset) вкл.

Провели конференцию Wake up province

Наша студия, совместно с агентством VoxWeb interactive провели первую конференцию для веб-разработчиков в Саратове — Wake up province. Она состоялась 11 июля в арт-баре «Ленинград».

Конференция прошла в мини-формате из 5 докладов, и несмотря на минимальную пресс-поддержку на неё пришло 70 человек.

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

Wake up province

Фотографии и видео докладов можно найти на сайте конференции.

Джунгли зовут!

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

К стажёрам нет никаких требований кроме большого желания учиться и работать.

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

Заявки на стажировку принимаются на mail@nopreset.ru с темой «На стажировку», напишите коротко о себе, ссылки на 1-2 своих профиля в соцсетях и о своих работах если вы что-то уже делали.

Отчёт нашей студии за 2013 год

Некоторые спрашивают, «А что вы вообще делаете в своей студии, когда у вас в портфолио 5 работ за год?», так вот…

np

Если не считать и не анализровать, кажется что сделано совсем немного, но если посмотреть на историю договоров и переписки, оказывается что объём работы за год проделан нечеловеческий, и по всем показателям мы герои.

Модальные окна

Модальные окна используются практически во всех сайтах, мы используем модальные окна от twitter bootstrap (они почти идеальны), но у него есть несколько недостатков которые мы исправим:

  • отсутствие выравнивания вертикально по центру страницы,
  • смещение контента сайта из-за исчезающей полосы прокрутки страницы.

В итоге получился плагин, а ниже описание процесса его создания.

читать далее

Слово капитану: не выделяй

Хороший верстальщик не забудет убрать выделение текста, в нестандартных элементах сайта, при двойном клике. Если верстальщик забыл, то пытливый дизайнер заметит и напомнит.

userselectsuck

 

Свойство user-select: none избавит от мерзких выделений.

A/B тестирование на сайте с помощью JS и Яндекс.Метрики

Проблема

Решив внедрить в некоторые проекты A/B тестирование, начали изучать доступный инструментарий. Чаще всего техническая часть тестирования выполняется программистами, т.е. необходимо лезть в код шаблонов и реализовывать функционал переключения между вариантами с помощью программного кода там. Но как правило, в A/B используются чисто визуальные изменения, которые под силу сделать дизайнеру или даже технологу. Существует несколько JS библиотек для этой цели, но как правило все они требуют знаний JS или jQuery и достаточно сложны, а мы конечно-же написали свою, с блекджеком и т.д.

Наша библиотека

Преимущества нашего решения:

  • все правила тестирования хранятся в CSS, а знаний JS при этом не нужно,
  • она не использует никакие фреймворки и может быть подключена на любом сайте,
  • минимум кода,
  • для сбора данных можно использовать внешение системы, в нашем примере это Яндекс.Метрика.

Пример использования

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

amazing

Для этого в CSS были созданые две группы стилей, для скрытия верхних и нижних переключателей, которые будут переключаться библиотекой:

Правила могу быть настолько сложными насколько позволяет CSS. Например можно менять цвета, размеры элементов, картинки, положение и т.д.

Далее необходимо подключить перед вызовом счётчика Яндекс.Метрики библиотеку код которой доступен на GitHub, а также там описаны параметры.

После чего инициализировать функцию для тестирования и передать в Метрику параметры нашего теста:

Результат

Теперь в Метрике в пункте Содержание — Параметры Визитов (вообще эти параметры удобно использовать для разной аналитики) появится такая информация:

params

Можно (а чаще и нужно) пойти чуть дальше, и настроить цели визитов (обязательно прочитайте про них, упрощает жизнь), тогда картинка станет ещё интереснее:

goals

Наш эксперимент показал что стрелки явно не решающий фактор, и что новое решение возможно даже чуть хуже старого, ну а главное что мы получили простую библиотеку для A/B.

Пример примитивен, но даёт широкий простор для творчества. Удачных A/B тестов и увеличения конверсии!

Про наш проект SEO Tool для iPhone и iPad и его новую версию

Кроме сайтов, мы занимаемся своими проектами под iOS. Проект пока только один — SEO Tool для iPhone и iPad, и вполне успешный, но скоро будет ещё как минимум пара приложений.

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

Позавчера мы отправили в App Store новую версию SEO Tool, полностью адаптированную для iOS 7, с новой иконкой и возможностью продолжения проверки в фоне. Изменений много, так что версию релиза решили сделать мажорной — 3.0.

s1s2s3

Про поддержку iOS 7

Мы прекратили поддержку iOS ниже 7, т. к. количество пользователей продолжающих работать с приложением со старых версий около 15%, что в абсолютных цифрах совсем немного. Трудозатраты на поддержку разных интерфейсов, а в будущем ещё и разных версий SDK довольны высоки, а приложение приносит не настолько много денег чтобы поддерживать две версии.

ipad1

Про новую иконку

Кирилл нарисовал новую иконку для приложения довольно давно, ещё до iOS 7, но она на удивление хорошо вписалась в её концепцию (Кирилл провидец?). Мы выбрали среднюю.

preview-3

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

i3i2

Стало идеально.

Про интерфейс

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

Про работу в фоне

Одной из самых ожидаемых функций была работа в фоне. К сожалению Apple не даёт работать в фоне больше 3х минут для такой ситуации, но и это неплохо и обычно хватает для проверки около 30-50 запросов. По окончанию проверки или если закончились те самые 3 минуты отправляется пуш сообщение.

p1p2

Про бущущее

В следующих версиях мы планируем попробовать внедрить iCloud для синхронизации между устройствами, улучшать интерфейс и функционал. Ну и самая интересная задумка — десктоп версия под OS X, для замыкания экосистемы.

Впечатления от 404fest'2013

Наконец я пришёл в себя и могу рассказать о нашей поездке на 404fest.

open

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

k_vgem

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

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

jovan

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

Смеялся до слёз, правда

hall

Несколько советов новичкам фестиваля:

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

До встречи в следующем году!

badge

Планы на 404

В этом году мы опять едем на 404 фест в составе меня и Кирилла. По нашему мнению это лучший фестиваль из всего что мы видели.

Фестиваль это отличная возможность зарядиться энергией от прекрасной атмосферы и набраться сил для новых свершений. На 404 можно пообщаться с множеством интересных людей, а также коллегами из Саратова, пообщаться с которыми у себя в городе не получается.

Мы решили составить себе небольшие программы и заодно поделиться с вами.

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

Суббота

  • 11:30 Новый зал. Александр Пацай — «Parallels Access: как создать мобильный продукт, который действительно нужен пользователю». Интересный докладчик, ветеран отрасли.
  • 12:00 Тверь-Ярославль. Таня Мисютина — «Визуализационное кунфу». Таня отличный докладчик, и у неё всегда интересные темы. А ещё она помогла нам в прошлом году с нашим приложением.
  • 12:30 Тверь-Ярославль. Максим Павлов — «Тренды веб-дизайна 2013, основные тенденции и перспективы в развитии». Интересная тема которая может перерасти в хорошую дискуссию.
  • 13:00 Новый зал. Олег Недерев — «Как мы двигаем «Батон». Так как мы делаем и продвигаем свои мобильные проекты, тема интересная и есть вопросы.
  • 13:30 Кострома-Казань. Аркадий Акулов — «Fotoshkola.net — от идеи до международного проекта». Учитывая наш секретный стартап, тема очень актуальна, да и в других залах скука.
  • 13:50 Самара. Алексей Амётов — «Look at my media». Интересный докладчик.
  • 15:00 Самара. Виталий Быков — «Стать Красными Кедами». Интересно, актуально, Red Keds.
  • 15:30 Тверь-Ярославль. Илья Бирман — «Как сделать схему метро». Потому что Бирман и нет альтернатив.
  • С 16:00 до 17:00 можно попробовать остаться в Тверь-Ярославль на UX и краем глаза посмотреть на Варламова в Кострома-Казань.
  • 17:00 Кострома-Казань. Йован.
  • 20:00+ АлкоАфтеПати и общение со всеми подряд.

Воскресенье

  • 10:00 Жуткое похмелье.
  • 10:30 Тверь-Ярославль. Сергей Фаге — «Как перестать искать идею, и начать делать крутой бизнес». Опять про стартапы, а это наша тема.
  • 11:00 Тверь-Ярославль. Гайдар Магдануров — «Стартап и венчурный фонд: партнеры или соперники?». Продолжение темы.
  • 11:30 Кострома-Казань. Сергей Оселедько — «Истинная сущность лидерства». Ну я же руковожу, и докладчик интересный.
  • 12:00 Новый зал. Андрей Новосельский — «10 важных принципов хорошей компании». Надеюсь будет интересно.
  • 13:00 Тверь-Ярославль. Евгений Калинин — «Вовремя. Из наблюдений за стартапами в поисках инвестиций». Актуально.
  • Дальше с 14:00 и до 17:00 будет секция «Организация работы», на которой я пожалуй буду сидеть до последнего.

А Кирилл оказался ленив и, заправив страницу расписания капелькой скриптов, отметился прямо на ней.

404post

Будем рады со всеми пообщаться. До встречи в Самаре!

Подключаем знак рубля как сами знаете кто

rub-preview

 

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

Привычные способ, при котором знак добавляется в шрифт, не устроил. Мы использовали Google Fonts и отказываться от него, ради одного знака, было не разумно.

Устаревшие варианты, описанные в «Техногрете», не брались во внимание. Однако, прогресс не стоит на месте и на новых сайтах Лебедева можно увидеть иной способ.

Для примера возьмём pushe.ru. При копировании цены товара, знак рубля не отобразится, если в системе не установлен нужный шрифт. Здесь же человек увидит привычное сокращение «руб.». Очевидно, что это решение гибче обычной вставки знака.

Попробуем разобраться как это сделано.

glyphs-window

Мы будем работь с подопытным шрифтом в приложении Glyphs для Mac OS, но это не играет большой роли. В начале нам нужно удалить все лишние глифы, за исключением «р», «у», «б» и точки. Строчную «р» превращаем в знак рубля, а у других знаков уменьшаем кегельную площадку на ноль и экспортируем.

 

glyphs-value

 

Для шрифта мы выбрали формат WOFF, поддерживаемый большинством браузеров.

Для версий IE, ниже 9-й, было решено не использовать отдельный формат шрифта. Если же понадобится полная кроссбраузерность, то обратитесь к пуленепробиваемому синтаксису для @font-face на Хабре, и сгенерировать шрифт во всех форматах используя fontsquirrel.

Теперь избавимся от лишнего запроса к серверу, переведя шрифт в base64. Мы пользуемся не красивым декодером motobit и гордимся.

Переходим к HTML и CSS. Подключаем шрифт и создаём для него класс:

@font-face {
font-family: "rub";
src: url("data:font/opentype;base64,[base64]") format("truetype");
}

<span class="rub">руб.</span>

Фотоссесия нашей команды

Всё началось с того, что мы решили добавить на страницу контактов всех наших сотрудников. Попросили всех сделать фото и написать текст, и получилось примерно вот что:

Снимок экрана 2013-09-21 в 11.36.32

А у нашего iOS программиста Миши, фотографии не нашлось вовсе (да так бывает).

С этим надо было что-то делать, и мы попросили нашего хорошего друга и отличного фотографа Александра Фролова сфотографировать всех нас в офисе.

И сразу на заметку: никогда не назначайте фотосессию в первой половине дня. Мало того что лица у всех сонные, так ещё и обязательно кто-нибудь опоздает. Я думаю никто не удивится, если узнает что опоздал наш PHP-программист Николай и не успел на групповое фото.

Команда Nopreset

читать далее

Чеклист для разработки сайта или что все забывают

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

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

У нас этот чеклист хранится в таблице в Google Docs и каждый сотрудник может пополнять его.

Дизайн макетов сайта

  • Нарисовать подсказки для полей и ошибки валидации форм, состояния ссылок и кнопок,
  • сделать 404 страницу и страницы других ошибок, если необходимо,
  • сделать  иконку сайта, retina версию иконки, iOS иконки,
  • не забыть про время работы компании в контактах.

Вёрстка сайта

  • Размеры картинок в теге img,
  • проверить вёрстку на iOS/Android телефонах и планшетах.

Программирование сайта

  • Тег title В формате:  %название страницы% — %название сайта%,
  • тег meta name="description", обязательно наличие текста по умолчанию (если не заполнено поле в CMS),
  • генерировать по возможности осмысленный alt для изображений,
  • размеры картинок у полей в cms для пользователя, чтобы он знал точный или примерный размер картинки, когда картинку нельзя масштабировать автоматически,
  • исправить e-mail с разработчика на клиентские после тестирования сайта, различных формах, настройках системы и т.д.,
  • проверить корректность сортировок элементов сайта, по порядку в меню, дате, или другому параметру,
  • динамический год в копирайте, например чтобы сначала 2013, потом 2013—2014, 2013—2015 и т.д.

Перед запуском

  • Проверить сайт на наличие ошибок js, 404 и прочего в консоли Firebug или Chrome,
  • Проверить орфографию в http://webmaster.yandex.ru/spellcheck.xml,
  • объединить и минифицировать скрипты.

Во время запуска

  • Поставить счётчик, формат логина счётчика %домен_сайта%,
  • зарегистрировать сайт в Яндекс и гугл вебмастере и добавить адрес в каталог,
  • редирект с www на без www    "RewriteCond %{HTTP_HOST} ^www\.site\.ru RewriteRule ^(.*)$ http://site.ru/$1 [R=permanent,L]",
  • cделать служебную админскую учётку в CMS, поменять пароль администратора и отправить клиенту,
  • отключить дев версию сайта,
  • закинуть исходную копию сайта на бэкап сервер, для истории или вдруг пригодится.

Список начали вести не так давно, и пока он не слишком обширный.

Будем рады вашим дополнениям.