<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Интересное по веб-дизайну &#187; Дизайн</title>
	<atom:link href="http://www.empd.ru/posts/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.empd.ru</link>
	<description></description>
	<lastBuildDate>Thu, 25 Jul 2013 09:55:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Capptivate.co</title>
		<link>http://www.empd.ru/post/capptivate-co/</link>
		<comments>http://www.empd.ru/post/capptivate-co/#comments</comments>
		<pubDate>Thu, 25 Jul 2013 09:55:31 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Ссылки]]></category>
		<category><![CDATA[Юзабилити]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=558</guid>
		<description><![CDATA[Capptivate.co captures fleeting transitions between app screens and delightful animated UI elements that we'll otherwise lose forever as apps and operating systems continue to evolve.]]></description>
			<content:encoded><![CDATA[<p><a href="http://capptivate.co/" target="_blank"><img class="alignnone  wp-image-559" title="shot-130725-1354-11" src="http://www.empd.ru/wp-content/uploads/2013/07/shot-130725-1354-11.jpg" alt="" width="728" height="789" /></a></p>
<p><a href="http://Capptivate.co">Capptivate.co</a> captures fleeting transitions between app screens and delightful animated UI elements that we&#8217;ll otherwise lose forever as apps and operating systems continue to evolve.</p>
<p>It preserves integral and tricky to communicate aspects of app design, sparks new ideas, and functions as a kinetic pattern library for designers and developers working on iOS apps.</p>
<p>The project was inspired by <a href="http://pttrns.com">pttrns.com</a> by Robin Raszka and <a href="http://mobile-patterns.com">Mobile Patterns</a> by Mari Sheibly.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/capptivate-co/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Справочник фронт-энд девелопера: виды горизонтальных панелей навигации</title>
		<link>http://www.empd.ru/post/spravochnik-front-jend-developera-vidy-gorizontalnyh-panelej-navigacii/</link>
		<comments>http://www.empd.ru/post/spravochnik-front-jend-developera-vidy-gorizontalnyh-panelej-navigacii/#comments</comments>
		<pubDate>Fri, 24 May 2013 10:02:28 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>
		<category><![CDATA[Статьи]]></category>
		<category><![CDATA[Юзабилити]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=552</guid>
		<description><![CDATA[Данная статья нацелена скорее на начинающих верстальщиков, но, может быть, матерые профессионалы тоже найдут в ней что-то новое или будут обращаться к ней как к справочнику.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-553" title="5a756b5cad98c93d62d06b513dbd6e17" src="http://www.empd.ru/wp-content/uploads/2013/05/5a756b5cad98c93d62d06b513dbd6e17.png" alt="" width="800" height="358" /></p>
<p>Предисловие: работая верстальщиком, ваш покорный слуга заметил, что существует несколько типов меню; при этом для верстки каждого из них следует использовать свои приемы.</p>
<blockquote><p>Статья целиком: <a href="http://habrahabr.ru/post/180473/" target="_blank">http://habrahabr.ru/post/180473/</a><br />
Автор: <a href="http://habrahabr.ru/users/everyonesdesign/" target="_blank">everyonesdesign</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/spravochnik-front-jend-developera-vidy-gorizontalnyh-panelej-navigacii/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Collection of Page Transitions</title>
		<link>http://www.empd.ru/post/a-collection-of-page-transitions/</link>
		<comments>http://www.empd.ru/post/a-collection-of-page-transitions/#comments</comments>
		<pubDate>Thu, 23 May 2013 08:02:31 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>
		<category><![CDATA[Юзабилити]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=538</guid>
		<description><![CDATA[A showcase collection of various page transition effects using CSS animations.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-539" title="PageTransitions" src="http://www.empd.ru/wp-content/uploads/2013/05/PageTransitions.jpg" alt="" width="580" height="315" /></p>
<p>A showcase collection of various page transition effects using CSS animations.</p>
<blockquote><p>Демо: <a href="http://tympanus.net/Development/PageTransitions/" target="_blank">http://tympanus.net/Development/PageTransitions/</a><br />
Описание: <a href="http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/" target="_blank">http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/a-collection-of-page-transitions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fullscreen Layout with Page Transitions</title>
		<link>http://www.empd.ru/post/fullscreen-layout-with-page-transitions/</link>
		<comments>http://www.empd.ru/post/fullscreen-layout-with-page-transitions/#comments</comments>
		<pubDate>Thu, 23 May 2013 08:00:01 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=534</guid>
		<description><![CDATA[A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-535" title="FullscreenLayoutPageTransitions" src="http://www.empd.ru/wp-content/uploads/2013/05/FullscreenLayoutPageTransitions.jpg" alt="" width="580" height="315" /></p>
<p>A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.</p>
<blockquote><p>Демо: <a href="http://tympanus.net/Development/FullscreenLayoutPageTransitions/" target="_blank">http://tympanus.net/Development/FullscreenLayoutPageTransitions/</a><br />
Описание: <a href="http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/" target="_blank">http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/fullscreen-layout-with-page-transitions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>3D Book Showcase</title>
		<link>http://www.empd.ru/post/3d-book-showcase/</link>
		<comments>http://www.empd.ru/post/3d-book-showcase/#comments</comments>
		<pubDate>Thu, 23 May 2013 07:57:28 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=530</guid>
		<description><![CDATA[An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-531" title="3DBookShowcase2" src="http://www.empd.ru/wp-content/uploads/2013/05/3DBookShowcase2.jpg" alt="" width="580" height="277" /></p>
<p>An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms.</p>
<blockquote><p>Демо: <a href="http://tympanus.net/Development/3DBookShowcase/" target="_blank">http://tympanus.net/Development/3DBookShowcase/</a><br />
Описание: <a href="http://tympanus.net/codrops/2013/01/08/3d-book-showcase/">http://tympanus.net/codrops/2013/01/08/3d-book-showcase/</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/3d-book-showcase/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Как сделать классную рассылку</title>
		<link>http://www.empd.ru/post/kak-sdelat-klassnuiy-rassylku/</link>
		<comments>http://www.empd.ru/post/kak-sdelat-klassnuiy-rassylku/#comments</comments>
		<pubDate>Wed, 22 May 2013 12:48:38 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Статьи]]></category>
		<category><![CDATA[Юзабилити]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=521</guid>
		<description><![CDATA[Опыт Мегаплана]]></description>
			<content:encoded><![CDATA[<p><a title="Как устроена наша рассылка" href="http://us2.campaign-archive2.com/?u=833bf5395122c8de57f99f863&amp;id=b093e2e3cb&amp;e=e621a121a4">Как сделать классную рассылку</a> &#8212; <a title="Как устроена наша рассылка" href="http://us2.campaign-archive2.com/?u=833bf5395122c8de57f99f863&amp;id=b093e2e3cb&amp;e=e621a121a4"><em>Опыт Мегаплана</em><br />
</a></p>
<div><img id="headerImage campaign-icon" src="http://gallery.mailchimp.com/833bf5395122c8de57f99f863/images/making_of.jpg" alt="Рабочее место редактора рассылки" width="700" height="442" border="0" /></div>
<div>
<h3>Здравствуйте!</h3>
</div>
<div>У копирайтера Дмитрия Кота вышла <a href="http://www.mann-ivanov-ferber.ru/books/mif/e-mail_marketing/" target="_self">чудесная книга об электронных рассылках</a>.</div>
<div>
<p>Я сделал ее дайджест, но получилось бестолково. Книга достаточно короткая и емкая, чтобы прочитать ее самостоятельно. Мой дайджест вряд ли будет полезен. К тому же, оказалось, что многое Мегаплан делал прямо по книге, не зная того.Поэтому сегодня вместо дайджеста я расскажу, как мы делаем собственную рассылку. Этот опыт будет полезен всем, кто тоже хочет общаться с клиентами с помощью интересных писем.</p>
</div>
<div>
<h2><strong>Человечность и польза</strong></h2>
<p>Рассылка начинается с цели: построить нормальное человеческое общение с пользователями Мегаплана. Не продавать Мегаплан, не рекламировать релизы, а рассказывать что-нибудь полезное. Просто так, без впаривания и заискивания.</p>
<p>Раз в пятилетку можно сообщать о важных новостях Мегаплана и даже размещать рекламу партнеров. Но рекламы должно быть мало, она  помечается как реклама и ставится в конец рассылки. Основной материал — полезные статьи для наших пользователей.</p>
<p>Выпуски должны быть достаточно интересным, чтобы бизнес-журналы захотели их перепечатать.</p>
</div>
<div>
<h2>Круг интересов</h2>
<p>Я очертил круг тем, к которым неравнодушен сам и которые понравятся пользователям Мегаплана:</p>
<ul>
<li>личная эффективность,</li>
<li>корпоративная культура,</li>
<li>облачные инструменты,</li>
<li>технологии управления,</li>
<li>предпринимательство,</li>
<li>работа в офисе и вне его.</li>
</ul>
<p>В список намеренно не включены общечеловеческие темы — личные отношения, здоровье и путешествия. Мегаплан — это о малом и среднем бизнесе, оптимизации, сокращении затрат и эффективности каждого отдельного сотрудника. Об этом же и рассылка.</p>
<p>Если решите создавать свою рассылку, постарайтесь писать о том, что объединяет вас с клиентами. Не делайте еще один «Менс хелс» или «Космо». Если вы веб-студия, будет странно делать рассылку о кулинарии — пусть это и интересно.</p>
</div>
<div>
<h2>Рубрикатор и редплан</h2>
<p>Рассылка похожа на журнал: она должна выходить регулярно и быть предсказуемой по формату. На третий-четвертый раз читатель должен знать, что его ждет. Иногда нужно ломать шаблон, но остальное время его придерживаемся. В первые 3 месяца у нас сложился такой рубрикатор:</p>
<ol>
<li>Одна или несколько статей на актуальную тему. Пример: <a href="http://eepurl.com/yaNf9" target="_self">о критике</a>;</li>
<li>Дайджест полезной книги: <a href="http://eepurl.com/w_5I9" target="_self">о мотивации</a>, <a href="http://us2.campaign-archive2.com/?u=833bf5395122c8de57f99f863&amp;id=35336969a1" target="_self">манипуляциях</a>, <a href="http://us2.campaign-archive2.com/?u=833bf5395122c8de57f99f863&amp;id=f1bac2dff8" target="_self">о</a><a href="http://us2.campaign-archive2.com/?u=833bf5395122c8de57f99f863&amp;id=f1bac2dff8">бщении с ребенком</a>;</li>
<li>Совет об организации работы, управлении персоналом, планировании или предпринимательстве, с использованием Мегаплана. Совет должен быть полезен и сам по себе, и в применении к Мегаплану: <a href="http://us2.campaign-archive1.com/?u=833bf5395122c8de57f99f863&amp;id=8e4817eeb0" target="_self">как и зачем сегментировать клиентов</a>, <a href="http://eepurl.com/wk9ef" target="_self">как держать обещания</a>.</li>
<li>Подборка ссылок — 3-5 интересных статей, сайтов, блогов, без особой связи. Называется «Тем временем в интернете». Пример: <a href="http://eepurl.com/xO9Kf" target="_self">второй выпуск</a>.</li>
</ol>
<p>Рубрикатор идет по кругу. После дайджеста выйдет совет, после совета — подборка, после подборки — статья. Так я всегда знаю, что писать в ближайшее время.</p>
<p>Помимо рубрикатора я веду редакционный план. Составляю его раз в месяц, чтобы знать, о чем будут ближайшие четыре статьи. Зная это, я могу обратиться за помощью к экспертам, попросить у издательства нужные книги, заранее их прочитать.</p>
<p>Редплан — это отлично. С ним никогда нет проблемы, что рассылка завтра, а я до сих пор не знаю, о чем писать.</p>
<p>План ведется в Мегаплане:</p>
<p><img src="http://gallery.mailchimp.com/833bf5395122c8de57f99f863/images/old_plan.jpg" alt="Редплан" width="650" height="484" align="none" /></p>
</div>
<div>
<h2>Рабочий процесс</h2>
<p>Главное — не нарушать темп. Мы решили, что рассылка должна выходить каждую неделю, несмотря ни на что. Выпустить ее вовремя — самая важная задача. Срок отлит в железе, запечатан в бетоне, и сдвинуть его может только директор Мегаплана Михаил Смолянов.</p>
<p>Я уделяю столько внимания сроку, потому что это главный секрет. Если применить к себе менее жесткие требования, рассылка вообще выходить не будет. Всегда найдутся срочные дела, которые отодвинут выпуск на потом. Поэтому если делаете регулярную рассылку, обязательно соблюдайте срок.</p>
<p>Нужно понимать, что рассылка для компании — это серьезный проект. На него уходит время и деньги. Рассылка, которая делается по остаточному принципу, в лучшем случае просто удаляется из ящиков. Поэтому если у вас нет ресурса или вы не понимаете, зачем это — не тратьте время. Либо делать хорошо, либо не делать вообще.</p>
<blockquote><p>Если применить к себе менее жесткие требования, рассылка вообще выходить не будет.</p></blockquote>
</div>
<div>
<h2>Качество материалов</h2>
<p>Основная работа — это поиск и обработка полезного материала. Я стараюсь отфильтровывать то, что сам считаю глупостью: тупые ] американские схемы, нереалистичные советы, вывернутые наизнанку истории успеха. К сожалению, фильтровать приходится много: из двадцати свежих записей на «<a href="http://www.inc.com/" target="_self">Инке</a>», «<a href="http://ted.com/" target="_self">Теде</a>» или «<a href="http://www.businessinsider.com/" target="_self">Бизнесинсайдере</a>» мой фильтр проходит в лучшем случае одна.</p>
<p>Самые интересные статьи основаны на опыте российских предпринимателей. Две недели назад мне написала консультант по ресторанному бизнесу, и я готовлюсь сделать о ней материал в июне. Мне чертовски интересно узнать, как устроен этот бизнес и что в нем особенного.</p>
<p>Мой друг — товаровед в продуктовом магазине. Когда он уволится, я узнаю у него все о магазинном бизнесе.</p>
<p>Если будете делать свою рассылку, подумайте в первую очередь, что нового и уникального вы сможете рассказать. Это может быть опыт ваших сотрудников, клиентов или членов семьи. Он в любом случае более интересный, чем перепечатка статей с сайта «Сто секретов бизнеса».</p>
</div>
<div>
<h2>А/Б-тесты и исследования</h2>
<p>Я стараюсь измерить все, что измеряется: сколько кликнули по каждой ссылке и почему, какие заголовки пользовались спросом, какие вызвали  отклик в Твиттере. Это важно: так я понимаю, в каком направлении двигаться.</p>
<p>У «Мейлчимпа», через который мы отправляем рассылку, есть чудесный механизм А/Б тестирования. Работает так:</p>
<ol>
<li>Я пишу рассылку и придумываю для нее два одинаково хороших заголовка. Заголовок влияет на открываемость: чем он удачнее и интереснее, тем больше читателей захотят прочитать письмо.</li>
<li>Во вторник после обеда делаю рассылку на 20% аудитории. 10% аудитории получают письмо с первым заголовком, 10% — со вторым.</li>
<li>В течение 24 часов «Чимп» собирает информацию об открываемости: какой из заголовков пользуется большим спросом.</li>
<li>На следующий день можно уверенно говорить, какой из заголовков пользовался большим спросом. «Чимп» рассылает письмо с этим заголовком оставшимся 80% аудитории.</li>
</ol>
<p>Так я тестировал лучшее имя отправителя, темы и самое удачное время рассылки. Оказалось, вечером читают немного лучше:</p>
<p><img src="http://gallery.mailchimp.com/833bf5395122c8de57f99f863/images/absplit2.jpg" alt="Результат А/Б-тестирования времени" width="600" height="231" align="none" /></p>
<p>Впрочем, то, что вечером нас смотрят чаще, не значит, что у вас будет так же. Тестируйте и находите свою комбинацию времени и темы.</p>
</div>
<div>
<h2>Итерации</h2>
<p>Рассылка не сразу стала такой, какой вы ее видите. Мы начинали с очень скромного стандартного шаблона, без плана и с минимальными ресурсами. Сначала стояла задача проверить, могу ли я делать выпуск каждую неделю.</p>
<p>Могу.</p>
<p>Через месяц появился формат цитат с фотографиями.</p>
<p>Еще через месяц дизайнеры Мегаплана Саша, Илья и Леша сделали первый фирменный шаблон рассылки. Потом появились ссылки на предыдущие выпуски. В этой рассылке, по совету нашего читателя, появится ссылка на подписку.</p>
<p><img src="http://gallery.mailchimp.com/833bf5395122c8de57f99f863/images/before_after_2.jpg" alt="" width="650" height="358" align="none" /></p>
<p>Сейчас мы работаем над инфраструктурой: страницей подписки, отписки и архива.</p>
<p>Рассылка выходила все это время, вне зависимости от внешних обстоятельств. Ничто не мешало нам запуститься с минимальным функционалом, проверить главную гипотезу, и дальше развивать рассылку, руководствуясь опытом. Если бы мы сначала сделали всю инфраструктуру, мы бы до сих пор не запустились.</p>
<p>Если решите делать свою рассылку, начните с главного: чтобы люди получали от вас интересные письма. Украшения, брендирование и автоматизацию настроите потом.</p>
</div>
<div>
<h2>Тонкости</h2>
<ol>
<li>Люди всегда будут отписываться от рассылки, это нормально. Всем не угодишь. Важно, чтобы другие люди подписывались.</li>
<li>Если оставить просто обратный адрес, никто ничего не напишет. Если конкретно сказать, что присылать (например, критику и ссылки на интересные проекты), писем будет много.</li>
<li>«Я» интереснее, чем «мы». Пишите от своего имени, а не от имени компании. Пишите о людях и историях, а не о теориях и идеях.</li>
<li>Истина рождается только во время тестов и экспериментов. Вы ничего не знаете о своей аудитории, пока не начнете с ней работать.</li>
<li>Рассылка начинается с хорошего заголовка, подзаголовка и картинки.</li>
</ol>
</div>
<div>
<div><a href="http://maximilyahov.ru/"><img src="http://gallery.mailchimp.com/833bf5395122c8de57f99f863/images/maxim_3.jpg" alt="Илья Максимов" width="125" height="125" border="0" /></a></div>
<div>
<h4>Максим Ильяхов</h4>
<p>Редактор Мегаплана</p>
</div>
<div>
<h3>Домашнее чтение</h3>
<p>Я рассказал о своем опыте создания рассылки Мегаплана. <a href="http://www.mann-ivanov-ferber.ru/books/mif/e-mail_marketing/" target="_self">В книге Дмитрия Кота</a> сказано все остальное. Это чудесная короткая книга без лишней теории и булшита, с правильным отношением к клиенту.</p>
<p><a href="http://www.mann-ivanov-ferber.ru/books/mif/e-mail_marketing/"><img src="http://gallery.mailchimp.com/833bf5395122c8de57f99f863/images/emailmarketing.jpg" alt="Книга Дмитрия Кота" width="200" height="259" align="none" /></a></p>
<p>Если хотите узнать больше о рассылке Мегаплана, рассказать о своем бизнесе или прислать ссылку на интересную статью, проект или блог, пишите: <a href="mailto:maxim@megaplan.ru">maxim@megaplan.ru</a></p>
<blockquote><p>Ссылка для подписки:<br />
<a href="http://megaplan.ru/subscribe" target="_self">megaplan.ru/subscribe</a><br />
(перешлите друзьям)</p></blockquote>
<p>Хорошего дня и успехов!</p>
</div>
</div>
<div>
<p>P.S. Вера, спасибо за книгу!P. P. S. Это двадцать шестой выпуск еженедельной рассылки Мегаплана. Пишем о личной эффективности, корпоративной культуре, облачных системах, технологиях управления, предпринимательстве, работе в офисе и вне его. Дайджесты книг и статьи по одному разу в месяц. Редактор: <a href="mailto:maxim@megaplan.ru" target="_self">maxim@megaplan.ru</a></p>
</div>
<blockquote><p>Источник: <a href="http://us2.campaign-archive2.com/?u=833bf5395122c8de57f99f863&amp;id=b093e2e3cb&amp;e=e621a121a4" target="_blank">http://us2.campaign-archive2.com/?u=833bf5395122c8de57f99f863&amp;id=b093e2e3cb&amp;e=e621a121a4</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/kak-sdelat-klassnuiy-rassylku/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Pixel-free CSS</title>
		<link>http://www.empd.ru/post/pixel-free-css/</link>
		<comments>http://www.empd.ru/post/pixel-free-css/#comments</comments>
		<pubDate>Mon, 06 May 2013 11:50:51 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>
		<category><![CDATA[Статьи]]></category>
		<category><![CDATA[Юзабилити]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=513</guid>
		<description><![CDATA[I recently redesigned my blog, The Sunday Best. In the process, I think I did something new: I completely avoided the use of px units in my CSS.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone  wp-image-514" title="Pixel-free_CSS" src="http://www.empd.ru/wp-content/uploads/2013/05/Pixel-free_CSS.jpg" alt="" width="640" height="320" /></p>
<p>I recently redesigned my blog, The Sunday Best. In the process, I think I did something new: I completely avoided the use of px units in my CSS.</p>
<blockquote><p><a href="http://medium.com/design-ux/66bddb327bb1" target="_blank">http://medium.com/design-ux/66bddb327bb1</a></p></blockquote>
<p>I’ve been (badly) making websites since I was 14. In 1996, and indeed for most of the Web’s existence, makers of websites had to be very concerned about the average resolution of users’ screens. I felt safe stretching my sites to just under 800-pixels wide to avoid horizontal scroll bars on monitors in the late ‘90s. By the early ‘00s, it was safe to make websites just under 1024-pixels wide.</p>
<p>In 2013, however, it’s more complicated. Uber users run Thunderbolt displays stretching 2560 pixels. Those same users are also on Macbook Airs with just 1366 pixels. Or on iPhones, with a width of 640 pixels but which answer to media quieries for 320-pixel design.</p>
<p>In 2013, the pixel is nearly meaningless. I got tired of guessing users’ pixel counts. I fully adopted vw and em units in my CSS.</p>
<p><strong>It started when I discovered vw units</strong>, and learned that I could define a font size in them. My initial goal was to simply resize the font based on the width of the viewport — and it worked, at least in modern browsers.</p>
<pre><em>body { font-size: 1.8vw; }</em></pre>
<p>I then wanted to see how far I could take the idea. I ended up completely removing px units from my CSS. And I’m very happy with the results.</p>
<p>The final challenge in extricating pixels from my design came from social share buttons. While the rest of my page fitted perfectly to any size screen, share buttons such as Facebook’s Like didn’t resize the same way. In mobile Safari, the button was uselessly tiny. Twitter offers different sizes for the Tweet button, but Facebook surprisingly has no options. In the end, I nixed the standard share buttons and created my own. (They’re not quite as functional as stock buttons, but certainly more usable on mobile, and more attractive.)</p>
<h2>The benefits</h2>
<p>Responsiveness is built in. Sort of. I still use media queries to adjust the layout for portrait screens and small screens.</p>
<p>Everything is kept to scale. Font size doesn’t adjust independently of the column width — roughly the same character count per line is retained. Dividing lines are sized relative everything else, maintaining the original proportions no matter what.</p>
<p>Users can resize a browser window to any size or aspect ratio and the design will fit — no horizontal scroll bars, no obstructed content. Instead of keeping a rigid browser size, this allows users to move the content anywhere on a desktop.</p>
<p>There’s no unused blank space around the page, no wasted screen.</p>
<p>It’s not easy for most people to do, but users can load multiple sites within a set of adjacent iframes, effectively viewing multiple websites at once. (Assuming other sites are as flexibly designed. <a href="https://medium.com/r/?url=http%3A%2F%2Ffiddle.jshell.net%2FMRSallee%2FWzqQT%2F8%2Fshow%2F">Here’s an example</a> — naturally, it works with most responsive designs.)</p>
<h2>The drawbacks</h2>
<p>Browser zoom controls no longer do anything on my blog — the only way to increase or decrease the size of the text is to resize the browser window.</p>
<p>I haven’t yet established a style for very large browsers, so at high resolution and a full-screen window the design gets a bit silly.</p>
<p>I had to give up stock social share buttons. They’re ugly anyway.</p>
<p>Images are still in pixels, and they get stretched. I don’t use many images in the page design, but do use a lot of photos. I’m pretty happy with how resized photos look in modern browsers. (Vector graphics and more advanced image serving could negate this issue.)</p>
<p>Browser compatibility with vw and vh units is still an issue. They work great in WebKit and Gecko. I looked at my blog in Internet Explorer just once and it seemed usable, though there were certainly some issues. I have the luxury of not having to worry about Internet Explorer.</p>
<hr />
<p>Most of the Web isn’t built like this, which means some of the ideals behind it don’t really work. Users aren’t accustomed to resizing their browser window to squeeze content to a preferred size. Some users always run full-screen even on large resolutions, which makes my blog look silly (words get huge). And few users are in the habit of loading multiple websites in adjacent iframes — we use tabs instead, which are generally preferable anyway (but don’t have the same options for content consumption).</p>
<p><strong>I think the Web should fully move in this direction.</strong> True proportionate sizing seems to me a more authentic way to responsively fit websites to browsers (rather than media queries that simply toggle between set pixel widths). It’s also pretty easy, and requires virtually zero guessing about the user’s browser. And after jumping the initial mental hurdle of designing in vw instead of px, I found it much easier and faster to build.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/pixel-free-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Подчёркивание ссылок с разрывами</title>
		<link>http://www.empd.ru/post/podchyorkivanie-ssy-lok-s-razry-vami/</link>
		<comments>http://www.empd.ru/post/podchyorkivanie-ssy-lok-s-razry-vami/#comments</comments>
		<pubDate>Sat, 20 Apr 2013 08:26:21 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>
		<category><![CDATA[Статьи]]></category>
		<category><![CDATA[Юзабилити]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=509</guid>
		<description><![CDATA[Два варианта]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-510" title="links-underline" src="http://www.empd.ru/wp-content/uploads/2013/04/links-underline.png" alt="" width="264" height="130" /></p>
<p>Два варианта:</p>
<blockquote><p><a href="http://bolknote.ru/2013/04/19/~3946#22" target="_blank">http://bolknote.ru/2013/04/19/~3946#22</a></p>
<p><a href="http://kizu.ru/" target="_blank">http://kizu.ru/</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/podchyorkivanie-ssy-lok-s-razry-vami/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Responsive Patterns</title>
		<link>http://www.empd.ru/post/responsive-patterns/</link>
		<comments>http://www.empd.ru/post/responsive-patterns/#comments</comments>
		<pubDate>Tue, 16 Apr 2013 08:58:36 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>
		<category><![CDATA[Юзабилити]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=497</guid>
		<description><![CDATA[A collection of patterns and modules for responsive designs.]]></description>
			<content:encoded><![CDATA[<p>A collection of patterns and modules for responsive designs.</p>
<blockquote><p><a href="http://bradfrost.github.io/this-is-responsive/patterns.html" target="_blank">http://bradfrost.github.io/this-is-responsive/patterns.html</a></p></blockquote>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/responsive-patterns/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SLY</title>
		<link>http://www.empd.ru/post/sly/</link>
		<comments>http://www.empd.ru/post/sly/#comments</comments>
		<pubDate>Wed, 03 Apr 2013 11:21:20 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Кодинг]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://www.empd.ru/?p=485</guid>
		<description><![CDATA[Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support. It can be used as a simple scrollbar replacement, in an advanced item based navigations, or as a great navigation and animation interface for parallax websites.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone  wp-image-486" title="empd_sly" src="http://www.empd.ru/wp-content/uploads/2013/04/empd_sly.jpg" alt="" width="647" height="212" /></p>
<p>Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support.</p>
<p>It can be used as a simple scrollbar replacement, in an advanced item based navigations, or as a great navigation and animation interface for parallax websites. This is achieved by a powerful &amp; developer friendly API that provides a bunch of very useful methods giving you control over everything.</p>
<blockquote><p><a href="http://darsa.in/sly/" target="_blank">http://darsa.in/sly/</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.empd.ru/post/sly/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
