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

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

Опубликовано admin в разделах Верстка, Переводная статья, Дизайн

В последнее время я иногда начала писать посты на тему верстки. Верстальщик из меня не очень хороший, но иногда приходится и верстать, и слегка подправлять код вордпресса. Да и вообще, плох тот дизайнер, который не понимает, что и как можно сверстать. Поэтому я предпочитаю хотя бы знать о потенциальных возможностях 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)

Опубликовано admin в разделах Верстка, Баннеры, Дизайн

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

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

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

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

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

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

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

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

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

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

Опубликовано admin в разделах Верстка, Переводная статья, Фриланс, Дизайн

Статьи о принципах и правилах юзабилити – статьи полезные. К сожалению, 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

Опубликовано admin в разделах Верстка, Полезные ссылки, Блогосфера

Плагин 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