Записки лондонского фрилансера

Фиксированный сайдбар с помощью 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)

Фрилансерская мудрость – о пользе “рабских” проектов

Рубрики: Психология, Психология бизнеса, Фриланс, Фрилансерская мудрость

Сделать 10 сайтов за 20 долларов? Написать 10 000 знаков за 1 доллар? Поиски дураков “рабов” непрерывно ведутся на всех фрилансерских биржах. И рабы постоянно находятся.

А совсем ли плохи такие рабские проекты? Я когда-то писала о той пользе, которую приносят кидалы, если из них сварить мыло. “Рабские” проекты могут быть также полезны:

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

Да будут “рабские” проекты

R.I.P. Hard Drive

Рубрики: Моя жизнь, Музыка

Моему безвременно погибшему харддиску…

[youtube PHQYBVbVOhk]

Если он уйдет – это навсегда… И это называется – хард…

И как не дать ему уйти? Какой бы молодой бог помог мне

Хоть и был мой харддрайв “… из тех стран, где затоптаны в песок осколки мечты” (интересно, можно так назвать Китай?), все равно его жалко. И его, и те сотни файлов, бэкапов которых у меня нет.

Короче, делайте бэкапы. И не дайте ему уйти.

Сапоги для сапожника или идеи для портфолио дизайнера

Рубрики: Блогеры, Дизайн, маркетинг, Полезные ссылки, Фриланс

Перефразируя героев “Зимней вишни”, портфолио для фрилансера – как родина, просто должно быть.

Почему я так думаю? Ответы можно найти здесь

• “Такую сумму завернули, а работы выложили на бесплатном хостинге”
• Фрилансеры на доверии
• Как эффективно выделить себя из толпы фрилансеров? (переводная статья)

И немного о самом портфолио:

• 9 мифов о работе на портфолио
• Как создать “убойное” портфолио за 9 шагов (не для киллеров)

Но каким сделать свое портфолио? Наверное, все сталкивались с тем, что делать что-либо для себя намного сложнее, чем для заказчика. Сапожники без сапог…

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

портфолио в стиле web2.0

до рисованных автопортретов

Несколько дизайнерских портфолио из коллекции:

Если у вас уже есть свое портфолио, которое не стыдно показать другим, добавьте его в коллекцию портфолио на сайте foliofocus.com. Для этого заходите на сайт и кликаете на Submit Site. Никто не гарантирует, что его возьмут в коллекцию, но если возьмут, уважение и дополнительные посетители на сайт вам обеспечены.

А в это время в инете…

Нужно ли вам портфолио? Какой именно заработок в интернете без вложений для начинающих окажется самым выгодным для вас? Что нужно, чтобы начать зарабатывать в сети? Как можно получить деньги, которые вы заработаете в Интернете? И нет ли у вас или ваших знакомых характерных признаков неудачника, которые мешают вам заработать? Обо всем этом рассказывает сайт setbox.ru “Заработок в Интернете – с чего начать”.

48 бесплатных иконок для RSS

Рубрики: Блогеры, Блогосфера, Дизайн

Если вы ведете свой блог, вы, скорее всего, мечтаете о большом числе подписчиков. Для этого кто-то старается писать интереснее, кто-то – чаще потому что не может глубже, а кто-то ставит красивую иконку подписки на RSS . Хотя красивая иконка не помешает и тем, кто пишет интересно и часто, превратить своих читателей в подписчиков.

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

На прошлой неделе onextrapixel.com представил подборку бесплатных RSS иконок. Среди 48 иконок обязательно найдется иконка под ваш блог и характер. Например, такие

скачать бесплатные RSS иконки

Дело в шляпе

скачать бесплатные RSS иконки

Есть иконки и для любителей бутылок

и слегка подгорелых тостов

Иконки для любителей животных (не знаю, какая лучше подойдет для бурундука )

И самые актуальные иконки перед новым годом – украсьте свой блог

скачать бесплатные RSS иконки

Чтобы скачать эти или другие бесплатные иконки, перейдите на сайт www.onextrapixel.com по ссылке вверху. Некоторые иконки можно скачать непосредственно с этого сайта.

Другие бесплатные иконки в блоге темза.ком:
Вкусные полезности для дизайнеров и блоггеров

Новые бесплатные темы для WordPress

Рубрики: Блогосфера, Дизайн, Полезные ссылки

Один из лучших способов получить уникальный дизайн для вашего блога (на WordPress) бесплатно и абсолютно честно – отслеживать появление новых бесплатных тем для Вордпресса и побыстрее ставить их на свой блог . Пару дней назад SmashingMagazine (маст-ноу онлайн ресурс для дизайнеров) в очередной раз предложил бесплатные темы для Вордпресс всем желающим: 40 Free High-Quality WordPress Themes. Скачать любую из 40-ка тем можно на сайте SmashingMagazine по вышеприведенной ссылке.

Все новые темы (а их 40) действительно high-quality (высокого качества) и могут быть использованы как для собственного блога, так и для портфолио, фотогалереи, магазина и т.д.

Некоторые из бесплатных тем для Вордпресс:

Просто тема для блога

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

Тема немного скучновата, зато ничего лишнего и отвлекающего. К тому же никто не мешает поменять цвет шапки.

скачать эту бесплатную тему для блога

Но можно найти тему и поярче, уже с местами для баннеров и гугл адсенс.

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

скачать эту тему для вордпресс бесплатно

Галерея, портфолио, фотоальбом – просто и стильно

Здесь текста побольше, но и картинки не обделены вниманием. Отлично подойдет и для фотогалереи, и для продажи какого-либо продукта онлайн

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

скачать эту тему для вордпресс бесплатно

И совсем магазин на Вордпресс.

Подобные статьи в блоге темза.ком:

• 31 тема для WordPress – блога писателя
• Нетрадиционное использование WordPress – создание биржи или страницы вакансий
• Полезные плагины для блога на WordPress
• Плагин для вставки YouTube в сайт на WordPress

Красота сайта versus юзабилити – результат эксперимента

Рубрики: Дизайн, Переводная статья, Реклама

Извечный спор: что важнее для сайта – крылья или ноги красота или юзабилити – то и дело вспыхивает на дизайнерских форумах и в блогах. Чаще всего, к сожалению, копья ломаются о воздух, потому что мнения аргументируются  понятием “имхо”.

А я питаю слабость к научным статьям . Поэтому пройти мимо этой я просто не могла. Еще бы, самая настоящая научная статья, с введением и списком литературы, с названием Visual Appeal vs. Usability: Which One Influences User Perceptions of a Website More? (Зрительное восприятие versus юзабилити: что сильнее влияет на восприятие веб-сайта пользователем?).

Опубликована эта статья в “Usability News” – бесплатном онлайн журнале, который издается научной лабораторией юзабилити программного обеcпечения (Software Usability Research Laboratory (SURL)) при Wichita State University, США.

Возможно, это не самый авторитетный журнал, но назвать журнал, издающийся при университете в Америке, полным УГ нельзя.

Авторы статьи Christine Phillips & Barbara S. Chaparro.

Урл статьи http://www.surl.org/usabilitynews/112/aesthetic.asp (pdf версия статьи http://www.surl.org/usabilitynews/112/pdf/Usability%20News%20112%20-%20Phillips.pdf).

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

Участники опроса: всего было опрошено 160 человек (66% женщин и 34% мужчин) в возрасте от 18 до 75 лет (82% опрошенных были в возрасте 18 – 29 лет). Все респонденты, кроме одного, пользовались интернетом несколько раз в неделю, 79.4% респондентов использовали интернет ежедневно.

Эксперимент: участникам опроса предлагалось оценить 4 сайта:

• красивый сайт + высокая юзабилити
• красивый сайт + низкая юзабилити
• некрасивый сайт + высокая юзабилити
• некрасивый сайт + низкая юзабилити

Каждый участник оценивал один “вид” сайта.

“Красивый” сайт:

“Некрасивый” сайт:

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

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

Результаты:
После 10-секундного просмотра сайтов респонденты оценили “красивый” сайт как более интересный, легкий в использовании, более точный, вызывающий больше доверия и в общем более удовлетворительный, чем “некрасивый” сайт. Это мнение у них сложилось через 10 секунд пребывания на сайте, т.е. еще ДО ТОГО, как они начали пользоваться сайтом.

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

Таким образом, полученные результаты показали, что:

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

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

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

5 простых, но полезных свойств CSS для дизайнеров и верстальщиков

Рубрики: Дизайн, Переводная статья

Краткий перевод статьи “5 простых, но полезных свойств CSS” (оригинал статьи “5 Simple, But Useful CSS Properties”, урл статьи http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/).

Все 5 представленных свойств существуют не только в новой версии CSS3, но и в CSS2.
Они широко поддерживаются различными браузерами. Несмотря на свою очевидную полезность, используются они достаточно редко. Речь идет о: clip, min-height, white-space, cursor и display.

1. CSS Clip

Хотелось бы остановиться на этом свойстве отдельно в одном из ближайших постов с конкретными примерами создания превью имиджей в портфолио.

2. Min-height

Свойство min-height позволяет задать минимальную высоту элемента. Может быть очень полезным в том случае, если вам надо выдерживать структуру (сетку) сайта – например, чтобы текстовая область не была по высоте меньше боковой колонки.

Код:
.with_minheight {
min-height: 550px;
}


min-height не поддерживается IE6, однако это можно обойти следующим образом:

.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}

3. White-space

Функция white-space определяет, как пустое пространство будет окружать элемент (текст). Например, white-space: nowrap не будет позволять тексту заходить на предыдущую строку

Код:

em {
white-space: nowrap;
}

4. Display inline / block

block-тэги располагают элементы на новой строке, inline – на той же строке. Примеры block-тэгов: < div >, < h1 > и < p >.
Примеры inline-тэгов: < em >, < span >, < strong >. Однако элементы можно расположить по-своему, определив опции inline или block.
Иными словами, даже несмотря на наличие тэга < p >, два элемента можно расположить в одной строке:

Код:


.block em {
display: block;
}

.inline h4, .inline p {
display: inline;
}
К сожалению, с IE опять возникают проблемы.

5. Cursor

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

Код:


.disabled {
cursor: default;
}

.busy {
cursor: wait;
}

.clickable:hover {
cursor: pointer;
}

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

Ну почему или сила стереотипа

Рубрики: Идиотека, Психология, Шучу

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

Но сегодня поймала себя на мысли, что первое же слово, которое пришло мне на ум после прочтения поста в ЖЖ, было матерным. Ну а куда бы вы послали Артемия?

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

ага, это Лебедев — куда ему сходить — куда его послать  –  а пошел он …

и понятно, куда .

Еще пару лет назад, до того, как он завел свой ЖЖ, первая ассоциация при слове “Лебедев” у меня была дизайнер:

поэт – Пушкин

фрукт – яблоко

Лебедев – дизайнер.

Теперь “дизайнер” ушло куда-то на второй план, на первое место вышли “сиськи” и некоторые слова, вместо которых я привыкла ставить троеточие. Лебедев – ага, значит сиськи, х…, мудак, е…, дизайнер.

Я, конечно, понимаю, что Лебедева не еб… Лебедеву абсолютно все равно, с чем у какого-то лондонского бурундука ассоциируется его имя. Но, собственно, я и размышляю в данный момент не о нем, а о себе, обычном бурундуке фрилансере.

Одна из задач (даже, наверное, сверхзадач) фрилансера, стремящегося к успеху, – создать свой бренд. Свою марку. Стереотип. Что-то из серии “Мы говорим – Ленин, подразумеваем – партия”. Мы говорим – баннермейкер, подразумеваем – Ленок . Достаточно выработать у окружающих правильный стереотип – и можно гнать пугру расслабиться и почивать на лаврах. Сила стереотипа так велика, что вас все равно будут считать лучшим. Причем даже те, кто не видел ваши работы .

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

Лебедев – сиськи?

Ну вот и началось – эпидемия гриппа или паники?

Рубрики: Жизнь, Идиотека

Свинский грипп докатился и до фриланса – первый увиденный заказ на веблансере по мотивам эпидемии гриппа на Украине:

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