Люди, которые делают вебсайты

На днях он-лайн журнал для дизайнеров A list apart (www.alistapart.com) опубликовал (http://aneventapart.com/alasurvey2009/) результаты социологического опроса, проведенного среди своих читателей – кто вы, люди, которые делают вебсайты?

a list apart magazine

85% читателей этого журнала оказались белыми людьми из Северной Америки и Европы (51% – США, 10,6% – Великобритания, 6,2% – Канада), поэтому тему этого топика можно было бы изменить: люди в США и Европе, которые делают сайты. Читатели из России, если и были, составили менее 0,5%. Всего на вопросы анкеты ответили 25,788 человек.

Каков же усредненный портрет веб-девелопера из США и Европы? 

Возраст:

18 лет и меньше – 1.8%, 19-29 лет – 49.6%, 30-44 лет – 42.3%, 45-64 – 6.1%. Хорошо им, школьнеГОВ менее 2х процентов:).

Пол:

82.6% – мужчины.

Образование:

образование дизайнера

91% учились в колледжах или университетах, 70,4% имеют дипломы PhD, Master или Bachelor (т.е. дипломы об окончании университета или степени кандидатов наук).

Насколько релевантно полученное веб-разработчиками образование?

образование дизайнера и его работа

Полученное образование совсем не связано с работой только у 18%. Более половины (52%) западных веб-разработчиков имеют образование, связанное с их работой.

На сайтах и форумах фрилансеров часто проскакивает мысль не сумевшего окончить универ Лебедева – зачем оно надо, это образование, и так заказы есть. Ага, есть. Пока. Пока на рынок не вышли потоки дипломированных специалистов, конкурировать с которыми будет не так просто. А вот эти 52% дипломированных веб-разработчиков – это именно те западные фрилансеры, с кем придется конкурировать, если планируете выйти на западный рынок (и не с китайскими ценами).

Рабочее время

сколько часов в неделю работает западный дизайнер

В общем, понятно и без перевода. 40-49 часов в неделю – это примерно 7-8 часов в день (с учетом одного выходного). Однако на западе принято отдыхать 2 дня в нелелю, поэтому рабочий день большинства ответивших – 8-10 часов эффективной работы (кто меньше работает, тот больше зарабатывает).

В опросе принимали участие и те, кто совмещает работу фрилансера – девелопера с основной работой, поэтому неудивительно, что многие работают и менее 20 часов в неделю.

Зарплата

И сколько же они зарабатывают?

зарплата западного дизайнера

А тут можно узнать, сколько зарабатывают IT-шники в Великобритании.

Какие специалисты востребованы в Великобритании.

5 правил создания эффективной кнопки призыва к действию

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

У вас есть свой сайт? Свой блог? Вы ведете его просто ради удовольствия или используете его (хотя бы изредка) для саморекламы или продажи своих услуг? Если да, то очень советую прочитать краткий перевод статьи “The Principles of Great Call to Action Buttons”, опубликованной на дизайнерском сайте psdfan.com (линк
http://psdfan.com/inspiration/web-design/the-principles-of-great-call-to-action-buttons/).

Почти на каждом сайте есть кнопки призыва к действию – “нажмите”, “купить уроки”, “подпишитесь на рассылку блога”. Как сделать эту кнопку более заметной, чтобы она действительно побуждала к действию? Если даже правильный цвет логотипа может принести удачу, что говорить о необходимости правильной кнопки “купить” :).

Итак, какой должна быть эффективная кнопка призыва к действию?

Размер

Размер очень важен для эффективной кнопки призыва к действию. Как правило, чем больше кнопка, тем она заметнее и тем большей будет конверсия (т.е. отношение количества кликов к общему числу показов страницы). Большие кнопки призыва к действию – одна из характерных черт дизайна в стиле Web 2.0, ставшие популярными благодаря своей эффективности. Конечно, не стоит перегибать палку, поскольку чрезмерно большие кнопки могут казаться непрофессиональными и будут отвлекать посетителя от другой важной информации на сайте.

размер кнопки на сайте


Контраст

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

контраст кнопки на сайте

Кстати: как показал эксперимент, на кнопку красного цвета кликали на 21% больше пользователей, чем на зеленую.


Расположение и паддинг

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

пространство вокруг кнопки на сайте


Кнопок не должно быть много

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

кнопка на сайте


Дизайн кнопки

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

дизайн кнопки на сайте

20 бесплатных электронных книг для дизайнера и блоггера

В блоге speckyboy.com опубликована отличная подборка бесплатных электронных (в PDF формате) книг для дизайнеров и блоггеров (http://speckyboy.com/2010/09/02/20-useful-free-pdf-ebooks-for-designers-and-bloggers/). Некоторые из них я бы отнесла к разряду маст – их просто необходимо прочитать, если вы еще не сделали этого. Да, все они на английском… Надеюсь, это вас не очень огорчило :). Зато все книги – легально бесплатные и выложены авторами в свободный доступ.


Peter Pixel
Introduction to Good Usability
Краткий учебник – введение в юзабилити. Расчитан прежде всего на начинающих дизайнеров. Нет тонкостей и ньюансов, но основы юзабилити веб-сайта изложены кратко и доступно.

Автор и источник http://www.peterpixel.nl/writings/introduction-to-good-usability/
Скачать PDF

Также в блоге есть: 35 ресурсов, помогающих улучшить юзабилити сайта.


Seth Godin
KnockKnock
Книга о том, как, используя современные инструменты маркетинга, заставить веб-сайт работать более эффективно.

маркетинг
Автор и источник http://sethgodin.typepad.com/seths_blog/2005/09/free_ebook_1_no.html


Seth Godin
Who’s There?Еще одна книга этого же автора, рассказывающая, как собственный блог может положительно повлиять на вашу карьеру и что для этого нужно сделать.

Автор и источник http://sethgodin.typepad.com/seths_blog/2005/09/whos_there_the_.html

Скачать PDF


Mike Smith
Guerrilla FreelancingКнига для фрилансеров – как начать зарабатывать деньги, что необходимо фрилансеру. Расчитана на начинающих, хотя и более опытным фрилансерам будет интересно узнать об особенностях работы с зарубежными заказчиками.

Автор и источник http://www.guerrillafreelancing.com/download-the-guide-to-guerrilla-freelancing-ebook-for-free/

Скачать PDF


Mark McGuinness
Time Management for Creative PeopleТайм-менеджмент для креативных людей – как планировать свое время, чтобы его хватало на все. Много очевидных истин, но все же…

Автор и источник http://www.wishfulthinking.co.uk/2007/12/03/time-management-for-creative-people-free-e-book/

Скачать PDF


Hugh MacLeod
How To Be CreativeКнига пытается рассказать, как быть креативным. Автор, рекламщик и популярный блоггер, предлагает свои 26 проверенных советов, как быть действительно креативным. Каждый совет сопровождается веселой картинкой от автора.

как быть креативным

Автор и источник  http://changethis.com/manifesto/show/6.HowToBeCreative

Читать http://changethis.com/manifesto/6.HowToBeCreative/pdf/6.HowToBeCreative.pdf


AIGA
Why design?Книга о роли дизайна в бизнес-стратегии и о том, как дизайн помогает решать бизнес-задачи. В написании участвовали многие ведущие западные дизайнеры.

Источник http://www.aiga.org/content.cfm/why-design

Скачать PDF


Michael Martine
How to Start a Business BlogПошаговая инструкция о том, как вести бизнес-блог.

Автор и источник http://remarkablogger.com/how-to-start-business-blog-ebook/


Forty
Forty’s Pocket Guide to SEOВсе что надо знать о SEO. Книга будет интересна всем, у кого есть свой сайт или блог и кто заботится о его оптимизации и раскрутке в поисковых системах. Расчитана, на мой взгляд, на начинающих. Никаких тем авторы не палят и Америку не открывают.

Автор и источник http://www.fortyagency.com/stuff/post/fortys-pocket-guide-to-seo

Скачать PDF


И несколько книг о верстке и типографике – поскольку мне они менее интересны, привожу только названия и ссылки, по которым можно скачать книги.


Natalie Downe
CSS Systems For Writing Maintainable CSS
Автор и источник http://natbat.net/2008/Sep/28/css-systems/

Nathan Ford
Better CSS Font StacksЧитать http://unitinteractive.com/blog/blog-images/BetterFontStacks.pdf


Bram Pitoyo
Faster, and More Secure WebfontsЧитать http://noteandpoint.com/documents/pdf/fmsw.pdf


Jacob Cass
Type Classification eBookЧитать http://justcreativedesign.com/web/type-classification-ebook.pdf

freehtml5templates.com
HTML5 Quick Learning Guide
Как быстро перейти от HTML к HTML5.Читать http://freehtml5templates.com/downloads/free/html5-quick-learning-quide.pdf

Скачать PDF


FontShop
Web Font User GuideЧитать http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

Скачать PDF


Erik Spiekermann
Typo Tips – Seven Rules for Better TypographyЧитать http://www.fontshop.com/education/pdf/typo_tips.pdf

Скачать PDF

Как сделать скриншот всего сайта? Полезная ссылка

Многим фрилансерам для портфолио приходится делать скриншоты сайтов со своими работами (дизайном, текстами и т.д.).

Сделать скриншот одного экрана элементарно – PrintScreen. Но иногда текст или картинка занимает 2-3 экрана.

Сделать скриншот главной страницы сайта целиком можно с помощью capturefullpage.com.

скриншот всего сайта

Вводите урл сайта, жмете на “Take screenshot” и получаете скриншот всей страницы сайта. Для примера, скриншот главной страницы этого блога temza.com делался секунд 20. Файл jpg, полученный в результате, весил 7,3 мегабайта. Как-то я много пишу :).

Фиксированный сайдбар с помощью CSS

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

На сайте DesignM.AG недавно была опубликована очень интересная статья – как “приклеить” сайдбар и сделать его неподвижным при скроллинге основного контента сайта (урл статьи designm.ag/tutorials/sticky-sidenav-layout/).

Так это выглядит в реале: http://www.sohtanaka.com/web-design/examples/sticky-nav/

Допустим, ваш сайт или блог состоит из двух колонок. Колонка поуже – меню, колонка пошире – основная часть сайта. Меню сравнительно короткое (пол-экрана), основная часть сайта – длинная (3-4 экрана и больше). Хотелось бы, чтобы меню было постоянно в поле зрения посетителя сайта, даже при прокрутке:

Оказывается, реализовать это с помощью CSS несложно.
HTML

< div class="container" >
< div id="sidenav><!--Fixed Sidenav Goes Here--></div> <div id=">< /div >
< /div>

СSS

.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url(container_stretch.gif);
font-size: 1.2em;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Фиксирует навигацию на одном месте--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Контент справа--*/
width: 640px;
padding: 0 20px 20px;
}

К сожалению, в IE6 это не работает, поэтому приходится фиксировать навигацию иначе:


*html #sidenav {
position: absolute;
left: expression( ( 0 ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) 'px' );
top: expression( ( 0 ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) 'px' );
}

Еще несколько статей для дизайнера – верстальщика:
5 простых, но полезных свойств CSS для дизайнеров и верстальщиков
Юзабилити: увеличение кликабельной зоны
Объемные буквы без Фотошопа (letterpress effect)

Объемные буквы без Фотошопа (letterpress effect)

Буквально вчера наткнулась на интересную информацию – как на веб-сайте сделать буквы объемными. Причем не делая их картинкой в Фотошопе :).

Автор статьи, в которой описана данная функция (http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow), называет этот эффект letterpress effect.

Полезность очевидна – заголовки постов или разделов сайта можно сделать красивее и заметнее, при этом текст остается текстом и доступен поисковикам. Да и Фотошоп лишний раз запускать не надо.

Минус – не все браузеры поддерживают CSS3, в котором есть необходимая опция text-shadow. Зато плюс – Safari и Firefox (3.1+) поддерживают эту опцию, а Firefox становится все более и более популярным браузером (в то время как Эксплорер сдает свои позиции).

Чтобы сделать буквы объемными, им надо добавить тени. Чтобы сделать тени, используется стиль text-shadow:

text shadow

Тень описывается 4 параметрами: x-offset, y-offset, blur и цвет тени. Можно задать цвет тени темнее цвета букв, тогда в результате получаем выпуклые буквы (“Line 25” на вышеприведенной картинке).

Для получения  letterpress эффекта тень должна быть немного светлее, чем текст. В данном случае (первый имидж в этом посте, темный текст) использованы #555555 для тени и более темный  #222222 для текста:

color: #222;
text-shadow: 0px 2px 3px #555;

Для тех, кому нужна работа в москве – сайт job.ru. Поиск вакансий, подписка на новые вакансии, советы по составлению резюме. Подробная информация о ярмарках вакансий в Москве. Если вам нужен работник – разместите объявление бесплатно за 3 минуты.

Юзабилити: увеличение кликабельной зоны

Статьи о принципах и правилах юзабилити – статьи полезные. К сожалению, 99% всех статей на эту тему повторяют или перефразируют Якоба Нильсена. Но есть и тот 1%, который несет в себе новое и интересное.

Журнал для дизайнеров SmashingMagazine.com в очередной раз обратился к проблеме юзабилити (http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/). Одна из идей статьи показалась мне вполне заслуживающей внимания и отдельного поста.

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

и как удобно кликать по ссылке, когда околоссылочное пространство достаточно велико

Чтобы увеличить пространство вокруг ссылки, можно либо увеличить размер самой ссылки, либо увеличить padding вокруг ссылки. Последнее достигается добавлением “padding” в стили ссылок:

<a href=”http://www.examplesite.com” style=”padding: 5px”>Example Site</a>

Паддинг можно вынести в CSS:

<style>
  div.nav a { padding: 5px; }
</style>
<div class="nav">
  <a href="">First link</a><a href="">Second link</a>
</div>


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

Полезные плагины для блога на WordPress

Плагин Add Post Footer

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

Установка плагина Add_Post_Footer

  1. Скачать архив плагина Add_Post_Footer (вы также можете бесплатно скачать плагин с сайта разработчика www.freetimefoto.com/add_post_footer_plugin_wordpress).
  2. Распаковать архив.
  3. Загрузить .php файт в папку плагинов (plugin) на хостинге
  4. Активировать плагин
  5. Для конфигурации плагина Option Add Post Footer tab

Плагин Automatic SEO Links

Забудьте о ручном проставлении ссылок в постах. Установите плагин, задайте слово и урл сайта, на который надо ссылаться, и плагин сам автоматически проставит все ссылки (еще и посчитает, сколько ссылок поставил). Вы можете задать title ссылки, rel. Для тренировки проставьте ссылки на сайт temza.com со всем слов «фриланс», которые встречаются в вашем блоге :).

Скачать Automatic SEO Links плагин (сайт разработчика http://cvs.aesinformatica.com)

Плагин Twitter Tools

Плагин, обеспечивающий интеграцию вашего вордпресс-блога и Twitter аккауна.
Скачать Twitter Tools плагин

Похожая тема в моем блоге:
Плагин для вставки YouTube в сайт на WordPress

Умная структура сайта

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

При написание этого поста я использовала статьи с сайта dev.opera.com. Схемы нагло сперты мной из статьи De Valk “Intelligent site structure for better SEO!” (Умная структура сайта для лучшей оптимизации сайта, адрес статьи dev.opera.com/articles/view/intelligent-site-structure-for-better-se/).

 

Общая структура веб-сайта

Когда вы создаете новый сайт или реструктурируете старый, очень полезно нарисовать схематически структуру сайта в виде разветвленного дерева:

website-structure

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

Небольшое преобразование сайта привело к изменению его структуры:

website-structure-good

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

Внутренняя перелинковка страниц.

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

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

website-internal-links

Каждый раздел вверху пирамиды должен быть связан со всеми своими подразделами. И наоборот – все подразделы должны нести линк на основной раздел, к которому они относятся.

Перелинковывая страницы, вы должны четко указать поисковой машине, какие разделы связаны между собой тематически, а какие – нет. Связывая линками близкие по тематике разделы, вы улучшаете ранжирование этих страниц в выдаче поисковика. К примеру, если вы перелинкуете субстраницу 3 и плагин 2, поисковая машина будет считать, что субстраница относится к плагину 2, в том время как она относится к плагину 4 (см. схему).

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

Кстати, мой блог вышел на второе место в гугле по запросу “бурундук”. В яндексе по запросу «бурундук» мой блог поднялся с 14 места на 8. Не знаю, зачем мне этот запрос, но хочу выйти на первое место :). Этакий антимаулнетизм (в смысле – абсолютно бесполезный запрос) от бурундука.

Подарите своему блогу новую шапочку

WordPress – это просто золотой ключик, именно эта система управления контентом позволила миллионам открыть свои блоги. И пожертвовать своей индивидуальностью – пряников тем для вордпресса (дизайнов) всегда не хватает на всех… Что же делать? Поменять дизайн своего блога самому.

Начнем с главного – с шапки. Одень дорогую шапку, и никто не заподозрит, что голова пустая :).

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

Прежде всего, вам нужна сама шапка (хедер) – картинка в формате jpg. Специально для тех, кто не готов нарисовать свою шапку сам, представляю коллекцию шапок для вордпресс (http://www.digitalwestex.com/gallery/index.php). Авторы сайта разрешают использовать все имиджи, находящиеся на сайте, при условии, что вы укажете их авторство.

Шапки в этой коллекции можно найти самые разные:

header1

header2

header3

header

 

После того, как шапка выбрана, ее (jpg файл) надо загрузить на хост в поддиректорию:wp_content/themes/default/images/

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

Для этого идем в Панель инструментов/Внешний вид/Редактор тем.
В крайне правой колонке видим Файлы темы “Базовая WordPress”. Выбираем “Список стилей” и заменяем название старого хедера kubrickheader.jpg на название нового файла, который вы загрузили на хост: #header { background: #73a0c5 url(‘images/название-нового-файла.jpg’) no-repeat bottom center; }

Вот и все, у вашего блога появилась новая шапка :).

 

 

Статьи по теме в блоге темза .ком:

Полезные плагины для блога на WordPress