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

Есть ряд принципов, которые нужно обязательно использовать при проектировании сайтов.

1. Оригинальные идеи. Именно идеи будут основой проектирования. Это самое важное, старт всего проекта. Очень важно не делать копии уже существующих проектов, почти всегда стоит задача сделать лучше, чем любой прямой или косвенный конкурент. Причем лучше на несколько порядков, иначе не получится переманить целевую аудиторию с тех сайтов, где она уже обитает. Идеи должен генерировать как проектировщик, так и инициатор проекта, тот самый носитель главной идеи.
   
   
2. Переносим оффлаин опыт. Один из важнейших принципов успешного проектирования – переносить опыт из оффлайна в онлайн. Нужно представить себя на месте представителя целевой аудитории, подумать, как он удовлетворяет свои потребности, связанные с тематикой проекта в оффлайне, и сделать то же самое, только лучше, в онлайне. Для иллюстрации принципа представим, что мы проектируем социальную сеть автолюбителей, где типичный представитель целевой аудитории имеет автомобиль, покупает автозапчасти в магазине возле дома, общается с приятелем Васей из соседнего гаража. Понимая поведение нашего потенциального пользователя в оффлайне, мы сразу можем предложить ему: привязать автомобиль к профилю по VIN-номеру с подробным справочником о нем; сделать некий аналог авторынка с разными продавцами, возможностью сравнивать цены, отзывами о работе; сообщество владельцев таких же автомобилей, с каждым из которых можно будет пообщаться и т.д. Это маленькие идеи, которые мне пришли в голову буквально на ходу, просто я представил себя на месте потенциального пользователя. Всего за пару минут можно сформировать несколько десятков неплохих, а самое главное полезных идей.
   
   

Бывает что есть сайт, но пользоваться им с мобильного телефона не очень удобно и было бы замечательно иметь отдельное приложение для него. Любители веб разработки легко смогут это сделать использую phoneGap. Под катом речь пойдет про сервис отслеживания почтовых отправлений, которым я часто пользуюсь и написанный для него демонстрационный клиент с базовым функционалом: авторизация, получение списка треков и описания к ним и возможность добавить новый трек. Я не связывался с разработчиком по этому поводу и очень надеюсь что он на меня не обидится за наглость, за копание в JavaScript коде и за то что в приложении не будет показана реклама. Так же прошу простить за костыльность и велосипедность кода, воспринимайте его как пример.

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Приветствую, Хабр!

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

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

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

Требования

С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:

• письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
• они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
• нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
• редактирование компонентов, которые применяются еще в 50 шаблонах писем;
• необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).

Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?

Сразу хочу выделить несколько из основных и важных моментов:

1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.

Каркас

Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона:

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



В линейке производителя Cube U30GT2 является топовым устройством, имеющим достаточно мощную аппаратную платформу, достойно выглядящую на фоне другой современной продукции. Наиболее главная особенность планшета — процессор Rockchip 3188. Но не только этим может похвастаться модель U30GT2…

Сейчас стало модным трендом использовать twitter bootstrap и всевозможные форки с различными темами. Есть даже уже биржи с готовыми шаблонами для сайтов на основе бустрапа. Хипсторы вовсю купаются в тренде закосов под старину. Так вот специально для хипстеров предлагается олдскульная типографика со всеми вытекающими. Вам надоел вебдваноль? Тогда этот форк

divshot.github.io/geo-bootstrap
(ссылка на гитхаб github.com/divshot/geo-bootstrap)

для вас! Превосходная типографика, куча анимации! Долой статичный вэб!

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

Но у многих желание отбилось после того, как они узнали, что для работы оригинального кошелька требуется скачать около 9ГБ данных.

К счастью, есть и альтернатива «родному» клиенту — Electrum.

Все мы привыкли, что в китайских планшетов используются чипы Allwinner, Rockchip, Amlogic, изредка Mediatek. И если и есть планшеты с чипом Samsung Exynos, то стоят они довольно дорого.
Компания Hyundai попыталась исправить данную несправедливость, и в своей новой модели T7 установила чип Samsung Exynos, а в качестве бонуса ещё и GPS-модуль. И всё это по цене близкой к $150.

Недавно выпущенный набор иконок WebHostingHub Glyphs добавилось более 300 новых иконок.

Благодаря пожеланиям пользователей хабрахабр в шрифте появились иконки знака рубля, сети вконтакте и многие другие. Иконки доступны в формате png (белые и черные) и самое главное в виде шрифта в форматах SVG, EOT и TTF. Мы будем рады услышать любые пожелания к дальнейшему развитию сета.

Продолжаем публиковать статьи по следам Design Camp. Сегодня у нас продолжение статьи Егора Гилева (yegorg) об использовании сетки в Windows Phone. Статья приведена как есть и отображает авторскую точку зрения на дизайн приложений под Windows Phone.

Сетка базовых линий

Для выравнивания текста по вертикали мне гораздо больше нравится другое решение — сетка базовых линий. Это просто равномерная сетка из горизонтальных линий, как в школьной тетради. Вот пример экрана приложения «Право.ru», построенного на основе сетки базовых линий:

Потребность

При разработке веб-приложений очень часто возникает необходимость отображения постов пользователя или сообщества из социальных сетей. У социальных сетей есть свои виджеты, которые подключаются через iframe, со своим внешним видом и стилем. Что если нам нужно отображать посты одновременно из нескольких социальных сетей с возможнстью изменения дизайна отображения? Если это пара twitter и facebook, то существует несколько плагинов, выполняющих эту задачу. Принимая во внимание, что популярность социальной сети Вконтакте на территории СНГ очень высока, то есть необходимость плагина поддерживающего и эту сеть.

В данной статье я затрону современные интерфейсы. Не все из них плохие. Но складывается впечатление, что такие титаны создания ПО, как Microsoft и Google, идут неверным путем. И этот путь заведет всех нас в глубокую … ситуацию.
Внимание, много букв!

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

Один из упоминаемых в статье интерфейсов

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

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

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

«Право налогоплательщика избегать уплаты налогов с использованием всех разрешенных законом способов никем не может быть оспорено. Каждый имеет право вести свои финансовые дела таким образом, чтобы свести соответствующие платежи к минимуму…»
Дж. Сандерленд,
Судья Верховного Суда США

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

Что

Hint.css — библиотека, реализующая всплывающие подсказки, средствами CSS3 без применения JavaScript.

Библиотека использует атрибут data-*, псевдоэлементы, свойство content и CSS3 transitions для вывода всплывающих подсказок.

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

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